@olwiba/ui 0.2.19 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AppPageHero.tsx

@@ -35,8 +35,14 @@ export function AppPageHero({
     <section
       className={cn(
         'relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6',
-        'before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl',
-        'after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl',
+        // The glow blobs are decoration, and `::after` is the section's last
+        // child — so with everything on `z-index: auto` it paints above the
+        // header content and swallows clicks on whatever sits under it. At
+        // narrow widths the action row stacks below the copy, right into the
+        // bottom-left blob, which is how a visible button stops responding.
+        // pointer-events-none keeps them purely visual.
+        'before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl',
+        'after:pointer-events-none after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl',
         className,
       )}
     >

package/src/app/AppShell.tsx

@@ -4,10 +4,12 @@ import type { LucideIcon } from 'lucide-react';
 import { useCallback, type CSSProperties, type ReactNode } from 'react';
 import {
   BellIcon,
+  BirdIcon,
   CreditCardIcon,
   LogOutIcon,
   MoreVerticalIcon,
   PlusCircleIcon,
+  SettingsIcon,
 } from 'lucide-react';
 import {
   Avatar,
@@ -63,6 +65,7 @@ export interface AppShellUser {
   onSignOut?: () => void;
   onBilling?: () => void;
   onNotifications?: () => void;
+  onSettings?: () => void;
 }
 
 export interface AppShellBrand {
@@ -142,41 +145,35 @@ const RAIL_SQUARE =
   'group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:transition-[width,height]';
 
 /**
- * Initials from a name, or from the local part of an email.
+ * A stable miniature identity artwork, instead of one grey square or a pair
+ * of initials for everybody.
  *
- * "Ollie Bishop" gives OB; "ollie@nestrrr.com" gives OL rather than the OL@
- * that slicing the raw string produced — and `hello@` no longer reads as HE
- * for every address at a domain when a name is absent.
- */
-function initialsOf(source: string): string {
-  const base = source.includes('@') ? (source.split('@')[0] ?? source) : source;
-  const words = base.split(/[\s._-]+/).filter(Boolean);
-  if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase();
-  return (words[0] ?? base).slice(0, 2).toUpperCase();
-}
-
-/**
- * A stable colour per person, instead of one grey square for everybody.
- *
- * The hue comes from a hash of the email, so an avatar is always the same
- * colour for the same account — recognisable at a glance in a member list, and
- * identical across devices without storing anything.
+ * FNV-1a gives the same unsigned hash for the same name/email on every device.
+ * Different byte ranges choose three hues and the gradient angle, so nearby
+ * names do not merely receive nearby shades of the same two-colour gradient.
  *
- * Deliberately not random per render, and deliberately not the brand colour:
- * every user wearing `--primary` would make the avatar read as a piece of app
- * chrome rather than as a person. Saturation and lightness are fixed so the
- * whole set sits at one weight and white text clears contrast on all of them;
- * only the hue moves. A gradient across a small hue span gives it some depth
- * without becoming a second brand.
+ * Lightness stays in a bounded range so the white bird remains legible. The
+ * radial highlight supplies depth without adding a fourth random colour.
  */
 function identityGradient(seed: string): CSSProperties {
-  let hash = 0;
+  let hash = 2166136261;
   for (let i = 0; i < seed.length; i += 1) {
-    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
   }
-  const hue = Math.abs(hash) % 360;
+  hash >>>= 0;
+
+  const firstHue = hash % 360;
+  const secondHue = (firstHue + 55 + ((hash >>> 8) % 70)) % 360;
+  const thirdHue = (firstHue + 190 + ((hash >>> 16) % 110)) % 360;
+  const angleHash = Math.imul(hash ^ (hash >>> 15), 2246822519) >>> 0;
+  const angle = angleHash % 360;
+
   return {
-    backgroundImage: `linear-gradient(135deg, oklch(0.62 0.15 ${hue}), oklch(0.52 0.16 ${(hue + 28) % 360}))`,
+    backgroundImage: [
+      `radial-gradient(circle at 28% 18%, oklch(0.94 0.06 ${thirdHue} / 0.78), transparent 34%)`,
+      `linear-gradient(${angle}deg, oklch(0.68 0.18 ${firstHue}), oklch(0.55 0.2 ${secondHue}) 52%, oklch(0.62 0.18 ${thirdHue}))`,
+    ].join(', '),
     color: 'oklch(0.98 0 0)',
   };
 }
@@ -185,8 +182,8 @@ function NavUser({ user }: { user: AppShellUser }) {
   const { isMobile } = useSidebar();
   const uiMode = useUIMode();
   const avatarMode = uiMode !== 'default' ? (uiMode as 'playful' | 'smooth') : undefined;
-  const initials = initialsOf(user.name ?? user.email);
-  const identityTint = identityGradient(user.email);
+  const identitySeed = `${user.name?.trim().toLocaleLowerCase() ?? ''}|${user.email.toLocaleLowerCase()}`;
+  const identityTint = identityGradient(identitySeed);
 
   return (
     <SidebarMenu>
@@ -206,8 +203,11 @@ function NavUser({ user }: { user: AppShellUser }) {
             >
               <Avatar mode={avatarMode} size="sm">
                 {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
-                <AvatarFallback className="font-medium" style={identityTint}>
-                  {initials}
+                <AvatarFallback className="text-white" style={identityTint}>
+                  <BirdIcon
+                    aria-hidden
+                    className="size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                  />
                 </AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
@@ -229,8 +229,11 @@ function NavUser({ user }: { user: AppShellUser }) {
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar mode={avatarMode} size="sm">
                   {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
-                  <AvatarFallback className="font-medium" style={identityTint}>
-                    {initials}
+                  <AvatarFallback className="text-white" style={identityTint}>
+                    <BirdIcon
+                      aria-hidden
+                      className="size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                    />
                   </AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
@@ -239,7 +242,7 @@ function NavUser({ user }: { user: AppShellUser }) {
                 </div>
               </div>
             </DropdownMenuLabel>
-            {(user.onBilling || user.onNotifications) && (
+            {(user.onBilling || user.onNotifications || user.onSettings) && (
               <>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
@@ -255,6 +258,12 @@ function NavUser({ user }: { user: AppShellUser }) {
                       Notifications
                     </DropdownMenuItem>
                   )}
+                  {user.onSettings && (
+                    <DropdownMenuItem onClick={user.onSettings}>
+                      <SettingsIcon />
+                      Settings
+                    </DropdownMenuItem>
+                  )}
                 </DropdownMenuGroup>
               </>
             )}
@@ -500,7 +509,7 @@ export function AppShell({
         side={side}
         sidebarPosition={sidebarPosition}
       />
-      <SidebarInset className={isContained ? undefined : 'overflow-y-auto'}>
+      <SidebarInset className="overflow-y-auto">
         <ShellHeader pageTitle={pageTitle} headerStart={headerStart} headerEnd={headerEnd} />
         <div className={contentClassName}>{children}</div>
       </SidebarInset>

package/src/context/OlwibaUIContext.tsx

@@ -35,10 +35,11 @@ export interface OlwibaUIProviderProps {
   mode?: UIMode;
 }
 
-export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = 'default' }: OlwibaUIProviderProps) {
+export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: modeProp }: OlwibaUIProviderProps) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React.useState<UIMode>(initialMode);
+  const [uncontrolledMode, setMode] = React.useState<UIMode>('default');
+  const mode = modeProp ?? uncontrolledMode;
 
   const variant = mode !== 'default' ? (mode as UIVariant) : undefined;
 

package/src/index.ts

@@ -83,6 +83,12 @@ export { UpdateBanner, type UpdateBannerProps } from './app/UpdateBanner';
 // ─── Marketing — page sections ────────────────────────────────────────────────
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 export { marketingSectionSpacing, type MarketingSectionSpacing } from './marketing/section-spacing';
+export {
+  MarketingSurfaceProvider,
+  useMarketingSurface,
+  useSectionSurface,
+  type MarketingSurface,
+} from './marketing/section-surface';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';

package/src/marketing/ComparisonSection.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface ComparisonColumn {
   label: string;
@@ -17,6 +18,8 @@ export interface ComparisonSectionProps {
   title?: string;
   description?: string;
   columns: ComparisonColumn[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function ComparisonSection({
@@ -24,14 +27,9 @@ export function ComparisonSection({
   title = 'The math is simple',
   description,
   columns,
+  surface,
 }: ComparisonSectionProps) {
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/ContactSection.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { ChevronDown, Mail, MessageSquare, Send, type LucideIcon } from 'lucide-react';
-import { cn, Label, useUIVariant } from '@olwiba/cn';
+import { cn, Label } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 import { Button } from '../primitives/Button';
 import { Input } from '../primitives/Input';
@@ -24,6 +25,8 @@ export interface ContactSectionProps {
   successDescription?: string;
   sendAnotherLabel?: string;
   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const PHONE_PREFIXES = [
@@ -55,15 +58,10 @@ export function ContactSection({
   successDescription = defaults.successDescription,
   sendAnotherLabel = defaults.sendAnotherLabel,
   onSubmit,
+  surface,
 }: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();

package/src/marketing/CtaSection.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { ArrowRight, Rocket, Sparkles } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
 import { useIntersectionObserver } from '../hooks/use-intersection-observer';
@@ -24,6 +25,8 @@ export interface CtaSectionProps {
   /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
   icon?: React.ReactNode;
   renderLink?: AppShellRenderLink;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -102,14 +105,11 @@ export function CtaSection(props: CtaSectionProps) {
     footnote,
     variant = 'default',
     renderLink = defaultRenderLink,
+    surface,
   } = props;
-  const mode = useUIVariant()
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  )
+  // Still read directly: `mode` also drives the badge icon's rounding below.
+  const mode = useUIVariant();
+  const sectionClasses = useSectionSurface(surface);
 
   if (variant === 'showcase') {
     return <ShowcaseCta {...props} sectionClasses={sectionClasses} />;

package/src/marketing/FaqSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, cn, useUIVariant } from '@olwiba/cn';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -9,6 +10,8 @@ export interface FaqSectionProps {
   description?: string;
   badge?: string;
   items: Array<{ question: string; answer: string }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function FaqSection({
@@ -16,14 +19,9 @@ export function FaqSection({
   description = 'Everything you need to know before getting started.',
   badge = 'FAQ',
   items,
+  surface,
 }: FaqSectionProps) {
-  const mode = useUIVariant()
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/FeatureMarqueeSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -22,6 +23,8 @@ export interface FeatureMarqueeSectionProps {
   rows: FeatureMarqueeRow[];
   speed?: 'slow' | 'normal' | 'fast';
   pauseOnHover?: boolean;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const speedDuration = {
@@ -37,16 +40,10 @@ export function FeatureMarqueeSection({
   rows,
   speed = 'normal',
   pauseOnHover = true,
+  surface,
 }: FeatureMarqueeSectionProps) {
-  const mode = useUIVariant();
   const duration = speedDuration[speed];
-
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/FeaturesSection.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
 import { Carousel } from '../mechanics/Carousel';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface FeaturesSectionProps {
   title?: string;
@@ -15,6 +16,8 @@ export interface FeaturesSectionProps {
   features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
   /** How the feature cards are arranged. @default 'grid' */
   layout?: 'grid' | 'carousel';
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function FeaturesSection({
@@ -23,14 +26,9 @@ export function FeaturesSection({
   badge = 'Features',
   features,
   layout = 'grid',
+  surface,
 }: FeaturesSectionProps) {
-  const mode = useUIVariant()
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  )
+  const sectionClasses = useSectionSurface(surface);
   const cards = features.map((feature) => (
     <FeatureCard
       key={feature.title}

package/src/marketing/GroupedFeaturesSection.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface GroupedFeatureGroup {
   label: string;
@@ -17,6 +17,8 @@ export interface GroupedFeaturesSectionProps {
   title?: string;
   description?: string;
   groups: GroupedFeatureGroup[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function GroupedFeaturesSection({
@@ -24,14 +26,9 @@ export function GroupedFeaturesSection({
   title = 'Everything you need to ship',
   description,
   groups,
+  surface,
 }: GroupedFeaturesSectionProps) {
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/NewsletterSection.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 import { Button } from '../primitives/Button';
 import { Input } from '../primitives/Input';
@@ -18,6 +19,8 @@ export interface NewsletterSectionProps {
   successTitle?: string;
   successDescription?: string;
   onSubscribe?: (email: string) => void | Promise<void>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const defaults = {
@@ -44,16 +47,11 @@ export function NewsletterSection({
   successTitle = defaults.successTitle,
   successDescription = defaults.successDescription,
   onSubscribe,
+  surface,
 }: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();

package/src/marketing/PricingSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
+import { Badge, Button, cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { PricingCard, type PricingCardProps, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountdownTimer } from '../motion/CountdownTimer';
@@ -147,6 +148,14 @@ export interface PricingSectionProps {
    * mode.
    */
   priceEffect?: PricingCardProps['priceEffect'];
+  /**
+   * How the section sits on the page. @default 'card'
+   *
+   * Named `surface` rather than following the `mode` convention the other
+   * sections use, because `mode` on this component already means
+   * subscription-vs-one-time.
+   */
+  surface?: MarketingSurface;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -172,6 +181,7 @@ export function PricingSection({
   onSelectPlan,
   pendingPlanName,
   priceEffect,
+  surface,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
   const isOneTime = mode === 'one-time';
@@ -190,13 +200,7 @@ export function PricingSection({
   );
   // A single cadence is just a label for the price — nothing to switch between.
   const showToggle = useCadences ? cadences!.length > 1 : !isOneTime;
-  const uiMode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    uiMode === 'smooth' && 'rounded-3xl border',
-    uiMode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !uiMode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/QualificationSection.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Check, X } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface QualificationItem {
   text: string;
@@ -20,6 +21,8 @@ export interface QualificationSectionProps {
   title?: string;
   description?: string;
   columns: [QualificationColumn, QualificationColumn];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function QualificationSection({
@@ -27,14 +30,9 @@ export function QualificationSection({
   title = 'Is this for you?',
   description,
   columns,
+  surface,
 }: QualificationSectionProps) {
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/StatsSection.tsx

@@ -1,15 +1,18 @@
 'use client';
 
-import { Separator, cn, useUIVariant } from '@olwiba/cn';
+import { Separator } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountUp } from '../motion/CountUp';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface StatsSectionProps {
   title?: string;
   description?: string;
   badge?: string;
   stats: Array<{ value: string; label: string; description?: string }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 function parseStatValue(value: string) {
@@ -32,14 +35,9 @@ export function StatsSection({
   description,
   badge = 'By the numbers',
   stats,
+  surface,
 }: StatsSectionProps) {
-  const mode = useUIVariant()
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="relative px-6 py-14 sm:px-10 sm:py-20">