vibecarbon 0.1.0

package/carbon/src/client/components/NotificationDrawer.tsx

@@ -0,0 +1,171 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { type NotificationType, useNotifications } from '@/hooks/useNotifications';
+import { cn } from '@/lib/utils';
+
+function getNotificationIcon(type: NotificationType) {
+  switch (type) {
+    case 'error':
+      return <AlertCircle className="size-4" />;
+    case 'warning':
+      return <AlertTriangle className="size-4" />;
+    case 'success':
+      return <CheckCircle2 className="size-4" />;
+    default:
+      return <Info className="size-4" />;
+  }
+}
+
+function getNotificationStyles(type: NotificationType) {
+  switch (type) {
+    case 'error':
+      return 'bg-destructive border-destructive text-white';
+    case 'warning':
+      return 'bg-warning border-warning text-white';
+    case 'success':
+      return 'bg-success border-success text-white';
+    default:
+      return 'bg-primary border-primary text-white';
+  }
+}
+
+export function NotificationBar() {
+  const { notifications, hasNotifications, isDrawerOpen, toggleDrawer, dismissNotification } =
+    useNotifications();
+  const barRef = useRef<HTMLDivElement>(null);
+
+  // Measure bar height and set CSS variable so fixed elements (Nav, Sidebar) can offset their top
+  useEffect(() => {
+    const el = barRef.current;
+    if (!el || !hasNotifications) {
+      document.documentElement.style.removeProperty('--notification-bar-h');
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+      document.documentElement.style.setProperty('--notification-bar-h', `${height}px`);
+    });
+
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.removeProperty('--notification-bar-h');
+    };
+  }, [hasNotifications]);
+
+  if (!hasNotifications) {
+    return null;
+  }
+
+  const latestNotification = notifications[0];
+
+  const handleAction = (url: string) => {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div ref={barRef} className="sticky top-0 z-50 border-b">
+      {/* Always visible bar showing latest notification */}
+      <div
+        className={cn(
+          'flex items-center gap-3 px-4 py-2 transition-colors',
+          getNotificationStyles(latestNotification.type)
+        )}
+      >
+        <span className="shrink-0">{getNotificationIcon(latestNotification.type)}</span>
+        <div className="flex-1 min-w-0 flex items-center gap-2">
+          <span className="font-medium text-sm truncate">{latestNotification.title}</span>
+          {latestNotification.message && (
+            <span className="text-sm opacity-80 truncate hidden sm:inline">
+              - {latestNotification.message}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          {latestNotification.action &&
+            (() => {
+              const action = latestNotification.action;
+              return (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7"
+                  onClick={() => handleAction(action.url)}
+                >
+                  {action.label}
+                </Button>
+              );
+            })()}
+          {notifications.length > 1 && (
+            <Button variant="ghost" size="sm" className="h-7" onClick={toggleDrawer}>
+              {isDrawerOpen ? 'Hide' : `+${notifications.length - 1} more`}
+            </Button>
+          )}
+          {latestNotification.dismissible && (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => dismissNotification(latestNotification.id)}
+            >
+              <X className="size-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Expanded section showing additional notifications */}
+      <div
+        className={cn(
+          'overflow-hidden transition-all duration-300 ease-in-out',
+          isDrawerOpen && notifications.length > 1 ? 'max-h-60' : 'max-h-0'
+        )}
+      >
+        <div className="max-h-60 overflow-y-auto border-t">
+          {notifications.slice(1).map((notification) => (
+            <div
+              key={notification.id}
+              className={cn(
+                'flex items-center gap-3 px-4 py-2 border-b last:border-b-0',
+                getNotificationStyles(notification.type)
+              )}
+            >
+              <span className="shrink-0">{getNotificationIcon(notification.type)}</span>
+              <div className="flex-1 min-w-0">
+                <span className="font-medium text-sm truncate">{notification.title}</span>
+                {notification.message && (
+                  <span className="text-sm opacity-80 ml-1 truncate">- {notification.message}</span>
+                )}
+              </div>
+              {notification.action &&
+                (() => {
+                  const action = notification.action;
+                  return (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 shrink-0"
+                      onClick={() => handleAction(action.url)}
+                    >
+                      {action.label}
+                    </Button>
+                  );
+                })()}
+              {notification.dismissible && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="shrink-0"
+                  onClick={() => dismissNotification(notification.id)}
+                >
+                  <X className="size-3.5" />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/carbon/src/client/components/PageHeader.tsx

@@ -0,0 +1,24 @@
+import { HeaderActions } from '@/components/HeaderActions';
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+}
+
+export function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <header className="flex h-10 items-center justify-between pl-1 pr-6 mt-6">
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <h1 className="text-lg font-semibold leading-tight">{title}</h1>
+          {description && (
+            <p className="absolute top-full text-sm text-muted-foreground whitespace-nowrap">
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+      <HeaderActions />
+    </header>
+  );
+}

package/carbon/src/client/components/PlanGate.tsx

@@ -0,0 +1,36 @@
+import type { PlanId } from '@shared/pricing';
+import type { ReactNode } from 'react';
+import { useSubscription } from '@/hooks/api';
+
+const planHierarchy: Record<PlanId, number> = {
+  free: 0,
+  starter: 1,
+  pro: 2,
+};
+
+interface PlanGateProps {
+  plan: PlanId;
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * Gate content behind a minimum plan requirement.
+ *
+ * Usage:
+ *   <PlanGate plan="pro">
+ *     <SecretFeature />
+ *   </PlanGate>
+ *
+ *   <PlanGate plan="starter" fallback={<UpgradePrompt />}>
+ *     <PaidFeature />
+ *   </PlanGate>
+ */
+export function PlanGate({ plan, children, fallback = null }: PlanGateProps) {
+  const { planId, isActive } = useSubscription();
+
+  const hasAccess = isActive ? planHierarchy[planId] >= planHierarchy[plan] : plan === 'free';
+
+  if (!hasAccess) return <>{fallback}</>;
+  return <>{children}</>;
+}

package/carbon/src/client/components/PricingSection.tsx

@@ -0,0 +1,371 @@
+import { motion } from 'framer-motion';
+import { Atom, Check, Diamond, Hexagon, type LucideIcon, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import vibecarbonIcon from '../assets/vibecarbon-icon.svg';
+import { FresnelEdge } from './effects/FresnelEdge';
+import { Button } from './ui/button';
+
+interface Tier {
+  id: string;
+  name: string;
+  tagline: string;
+  price: number;
+  originalPrice: number | null;
+  unit: string;
+  cta: string;
+  ctaHref: string;
+  ctaVariant: 'outline' | 'exciting' | 'default';
+  popular: boolean;
+  icon: LucideIcon;
+  accent: {
+    icon: string;
+    bg: string;
+    shadow: string;
+    glow: string;
+    priceGradient: string | null;
+    check: string;
+  };
+  features: { text: string; included: boolean }[];
+  delay: number;
+}
+
+export function PricingSection() {
+  const { t } = useTranslation();
+
+  const tiers: Tier[] = [
+    {
+      id: 'graphite',
+      name: 'Graphite',
+      tagline: t('landing.pricing.graphite.tagline'),
+      price: 0,
+      originalPrice: null,
+      unit: t('landing.pricing.units.forever'),
+      cta: t('landing.pricing.graphite.cta'),
+      ctaHref: '/docs/getting-started',
+      ctaVariant: 'outline',
+      popular: false,
+      icon: Hexagon,
+      accent: {
+        icon: 'text-muted-foreground',
+        bg: 'bg-muted/30 dark:bg-background/50',
+        shadow: '',
+        glow: 'oklch(0.7 0.02 250 / 0.06)',
+        priceGradient: null,
+        check: 'text-muted-foreground',
+      },
+      features: [
+        { text: t('landing.pricing.graphite.features.unlimitedProjects'), included: true },
+        { text: t('landing.pricing.graphite.features.localDev'), included: true },
+        { text: t('landing.pricing.graphite.features.addOns'), included: true },
+        { text: t('landing.pricing.graphite.features.supabase'), included: true },
+        { text: t('landing.pricing.graphite.features.community'), included: true },
+        { text: t('landing.pricing.graphite.features.production'), included: false },
+        { text: t('landing.pricing.graphite.features.ha'), included: false },
+        { text: t('landing.pricing.graphite.features.k8s'), included: false },
+      ],
+      delay: 0.1,
+    },
+    {
+      id: 'diamond',
+      name: 'Diamond',
+      tagline: t('landing.pricing.diamond.tagline'),
+      price: 149,
+      originalPrice: 299,
+      unit: t('landing.pricing.units.oneTime'),
+      cta: t('landing.pricing.diamond.cta'),
+      ctaHref: '/checkout?tier=diamond',
+      ctaVariant: 'exciting',
+      popular: true,
+      icon: Diamond,
+      accent: {
+        icon: 'text-primary',
+        bg: 'bg-primary/[0.03] dark:bg-primary/[0.05]',
+        shadow: 'shadow-lg shadow-primary/10',
+        glow: 'oklch(0.82 0.14 192 / 0.08)',
+        priceGradient: 'from-primary to-primary/70',
+        check: 'text-primary',
+      },
+      features: [
+        { text: t('landing.pricing.diamond.features.graphite'), included: true },
+        { text: t('landing.pricing.diamond.features.deployModes'), included: true },
+        { text: t('landing.pricing.diamond.features.replication'), included: true },
+        { text: t('landing.pricing.diamond.features.healthChecks'), included: true },
+        { text: t('landing.pricing.diamond.features.backups'), included: true },
+        { text: t('landing.pricing.diamond.features.cicd'), included: true },
+        { text: t('landing.pricing.diamond.features.unlimited'), included: true },
+        { text: t('landing.pricing.diamond.features.commercial'), included: false },
+      ],
+      delay: 0.2,
+    },
+    {
+      id: 'fullerene',
+      name: 'Fullerene',
+      tagline: t('landing.pricing.fullerene.tagline'),
+      price: 499,
+      originalPrice: 999,
+      unit: t('landing.pricing.units.oneTime'),
+      cta: t('landing.pricing.fullerene.cta'),
+      ctaHref: '/checkout?tier=fullerene',
+      ctaVariant: 'exciting',
+      popular: false,
+      icon: Atom,
+      accent: {
+        icon: 'text-secondary-accent',
+        bg: 'bg-secondary-accent/[0.03] dark:bg-secondary-accent/[0.05]',
+        shadow: 'shadow-lg shadow-secondary-accent/10',
+        glow: 'oklch(0.65 0.26 350 / 0.06)',
+        priceGradient: 'from-secondary-accent to-fuchsia-400',
+        check: 'text-secondary-accent',
+      },
+      features: [
+        { text: t('landing.pricing.fullerene.features.diamond'), included: true },
+        { text: t('landing.pricing.fullerene.features.commercial'), included: true },
+        { text: t('landing.pricing.fullerene.features.clients'), included: true },
+        { text: t('landing.pricing.fullerene.features.corporate'), included: true },
+        { text: t('landing.pricing.fullerene.features.support'), included: true },
+        { text: t('landing.pricing.fullerene.features.lifetime'), included: true },
+      ],
+      delay: 0.3,
+    },
+  ];
+
+  return (
+    <section id="pricing" className="py-24 md:py-36 overflow-hidden">
+      <div className="mx-auto max-w-7xl px-6">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.5 }}
+          className="mx-auto mb-16 max-w-2xl text-center"
+        >
+          <motion.div
+            className="flex justify-center mb-6"
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <img
+              src={vibecarbonIcon}
+              alt=""
+              width={56}
+              height={56}
+              className="drop-shadow-[0_0_12px_oklch(0.82_0.14_192/0.6)]"
+            />
+          </motion.div>
+          <h2 className="mb-4 text-3xl font-black tracking-tight md:text-5xl">
+            {t('landing.pricing.headline1')}{' '}
+            <span className="bg-gradient-to-r from-muted-foreground to-foreground bg-clip-text text-transparent">
+              {t('landing.pricing.headlineSketch')}
+            </span>{' '}
+            {t('landing.pricing.headline2')}{' '}
+            <span className="bg-gradient-to-r from-primary to-secondary-accent bg-clip-text text-transparent">
+              {t('landing.pricing.headlineScale')}
+            </span>
+          </h2>
+          <p className="text-lg text-muted-foreground">{t('landing.pricing.subheading')}</p>
+        </motion.div>
+
+        {/* Background glow */}
+        <div className="relative">
+          {/* Pricing Cards */}
+          <div className="relative grid gap-8 md:grid-cols-3">
+            {tiers.map((tier) => (
+              <TierCard key={tier.id} tier={tier} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TierCard({ tier }: { tier: Tier }) {
+  const { t } = useTranslation();
+  const Icon = tier.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 24, scale: 0.97 }}
+      whileInView={{ opacity: 1, y: 0, scale: 1 }}
+      whileHover={{ scale: 1.02 }}
+      viewport={{ once: true, margin: '-60px' }}
+      transition={{ type: 'spring', stiffness: 300, damping: 30, delay: tier.delay }}
+      className="relative"
+    >
+      {/* Badge — rendered outside FresnelEdge so it paints above the edge highlight line */}
+      {tier.popular && (
+        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 z-10">
+          <span className="relative inline-flex items-center rounded-full px-5 py-1.5 text-xs font-semibold text-white">
+            {/* Animated gradient border */}
+            <span className="absolute inset-0 rounded-full bg-gradient-to-r from-violet-500 via-fuchsia-400 via-amber-300 to-violet-500 badge-shimmer" />
+            {/* Inner dark fill */}
+            <span className="absolute inset-[1.5px] rounded-full bg-gradient-to-r from-violet-950 via-fuchsia-950 to-violet-950" />
+            {/* Shimmer highlight */}
+            <span className="absolute inset-[1.5px] rounded-full bg-gradient-to-r from-transparent via-white/10 to-transparent badge-shimmer opacity-60" />
+            <span className="relative">{t('landing.pricing.popular')}</span>
+          </span>
+        </div>
+      )}
+      <FresnelEdge
+        className="h-full rounded-2xl"
+        edgeColor={
+          tier.id === 'diamond'
+            ? 'oklch(0.82 0.14 192 / 0.2)'
+            : tier.id === 'fullerene'
+              ? 'oklch(0.65 0.26 350 / 0.15)'
+              : 'rgba(255, 255, 255, 0.08)'
+        }
+        glowStrength={tier.popular ? 0.8 : 0.3}
+      >
+        <div
+          className={cn(
+            'relative flex h-full flex-col rounded-2xl p-8 backdrop-blur-sm',
+            'transition-shadow duration-300',
+            tier.accent.bg,
+            tier.accent.shadow
+          )}
+        >
+          {/* Mouse-tracking glow */}
+          <div className="absolute inset-0 z-0 pointer-events-none">
+            <GlowTrackerCustom color={tier.accent.glow} />
+          </div>
+
+          {/* Icon + Tier name */}
+          <div className="relative z-[1] mb-1 flex items-center gap-3">
+            <div
+              className={cn(
+                'flex size-10 items-center justify-center rounded-xl border',
+                tier.id === 'diamond'
+                  ? 'border-primary/20 bg-primary/10'
+                  : tier.id === 'fullerene'
+                    ? 'border-secondary-accent/20 bg-secondary-accent/10'
+                    : 'border-border/50 bg-muted/50'
+              )}
+            >
+              <Icon className={cn('size-5', tier.accent.icon)} />
+            </div>
+            <h3 className="text-xl font-bold">{tier.name}</h3>
+          </div>
+
+          {/* Tagline */}
+          <p className="relative z-[1] mb-6 text-sm text-muted-foreground">{tier.tagline}</p>
+
+          {/* Price */}
+          <div className="relative z-[1] mb-2">
+            {tier.originalPrice && (
+              <span className="mr-2 text-base text-muted-foreground/40 line-through">
+                ${tier.originalPrice}
+              </span>
+            )}
+            {tier.accent.priceGradient ? (
+              <span
+                className={cn(
+                  'text-5xl font-black bg-gradient-to-r bg-clip-text text-transparent',
+                  tier.accent.priceGradient
+                )}
+              >
+                ${tier.price}
+              </span>
+            ) : (
+              <span className="text-5xl font-black">{t('common.free')}</span>
+            )}
+          </div>
+
+          {/* Price unit pill */}
+          <div className="relative z-[1] mb-6">
+            <span className="inline-flex rounded-full bg-muted/60 px-2.5 py-0.5 text-xs text-muted-foreground">
+              {tier.unit}
+            </span>
+          </div>
+
+          {/* CTA */}
+          <div className="relative z-[1]">
+            <Button variant={tier.ctaVariant} size="lg" className="mb-8 w-full" asChild>
+              <Link to={tier.ctaHref}>{tier.cta}</Link>
+            </Button>
+          </div>
+
+          {/* Divider */}
+          <div
+            className={cn(
+              'relative z-[1] mb-6 h-px',
+              tier.id === 'diamond'
+                ? 'bg-gradient-to-r from-transparent via-primary/30 to-transparent'
+                : tier.id === 'fullerene'
+                  ? 'bg-gradient-to-r from-transparent via-secondary-accent/20 to-transparent'
+                  : 'bg-border/50'
+            )}
+          />
+
+          {/* Features */}
+          <ul className="relative z-[1] flex-1 space-y-3">
+            {tier.features.map((feature) => (
+              <li key={feature.text} className="flex items-start gap-2.5">
+                {feature.included ? (
+                  <Check className={cn('mt-0.5 size-4 flex-shrink-0', tier.accent.check)} />
+                ) : (
+                  <X className="mt-0.5 size-4 flex-shrink-0 text-muted-foreground/30" />
+                )}
+                <span
+                  className={cn(
+                    'text-sm',
+                    feature.included ? 'text-muted-foreground' : 'text-muted-foreground/30'
+                  )}
+                >
+                  {feature.text}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </FresnelEdge>
+    </motion.div>
+  );
+}
+
+/**
+ * GlowTracker with customizable glow color per tier.
+ */
+function GlowTrackerCustom({ color }: { color: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    const parent = el?.parentElement;
+    if (!parent) return;
+
+    const handleMove = (e: MouseEvent) => {
+      const rect = parent.getBoundingClientRect();
+      setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    };
+    const handleEnter = () => setVisible(true);
+    const handleLeave = () => setVisible(false);
+
+    parent.addEventListener('mousemove', handleMove);
+    parent.addEventListener('mouseenter', handleEnter);
+    parent.addEventListener('mouseleave', handleLeave);
+    return () => {
+      parent.removeEventListener('mousemove', handleMove);
+      parent.removeEventListener('mouseenter', handleEnter);
+      parent.removeEventListener('mouseleave', handleLeave);
+    };
+  }, []);
+
+  return (
+    <div ref={ref} className="absolute inset-0 z-0 pointer-events-none">
+      <div
+        className="absolute -inset-px rounded-[inherit] transition-opacity duration-300"
+        style={{
+          opacity: visible ? 1 : 0,
+          background: `radial-gradient(600px circle at ${pos.x}px ${pos.y}px, ${color} 0%, transparent 90%)`,
+        }}
+      />
+    </div>
+  );
+}

package/carbon/src/client/components/SEO.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+const PROJECT_NAME = import.meta.env.VITE_PROJECT_NAME ?? '{{PROJECT_NAME}}';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+}
+
+/**
+ * Lightweight SEO component that updates document title and meta description.
+ *
+ * Usage:
+ *   <SEO title="Pricing" description="See our plans" />
+ *   <SEO title="Dashboard" />
+ */
+export function SEO({ title, description }: SEOProps) {
+  useEffect(() => {
+    document.title = title ? `${title} | ${PROJECT_NAME}` : PROJECT_NAME;
+  }, [title]);
+
+  useEffect(() => {
+    if (!description) return;
+    let meta = document.querySelector('meta[name="description"]');
+    if (!meta) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'description');
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute('content', description);
+  }, [description]);
+
+  return null;
+}

package/carbon/src/client/components/SmoothScroll.tsx

@@ -0,0 +1,45 @@
+import Lenis from 'lenis';
+import { useEffect, useRef } from 'react';
+
+export function SmoothScroll({ children }: { children: React.ReactNode }) {
+  const lenisRef = useRef<Lenis | null>(null);
+
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.2,
+      easing: (t) => Math.min(1, 1.001 - 2 ** (-10 * t)),
+      smoothWheel: true,
+      touchMultiplier: 2,
+    });
+    lenisRef.current = lenis;
+
+    function raf(time: number) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    return () => {
+      lenis.destroy();
+      lenisRef.current = null;
+    };
+  }, []);
+
+  // Listen for theme scroll settings changes and mutate Lenis options at runtime
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { enabled, intensity } = (e as CustomEvent).detail;
+      const lenis = lenisRef.current;
+      if (!lenis) return;
+
+      lenis.options.smoothWheel = enabled;
+      lenis.options.duration = (intensity / 100) * 2.0;
+    };
+
+    document.addEventListener('theme:scroll-settings', handler);
+    return () => document.removeEventListener('theme:scroll-settings', handler);
+  }, []);
+
+  return <>{children}</>;
+}