vibecarbon 0.1.0

package/carbon/src/client/components/effects/SparkBurst.tsx

@@ -0,0 +1,145 @@
+import { motion } from 'framer-motion';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type SparkPalette = 'primary' | 'fuchsia';
+
+const palettes: Record<SparkPalette, string[]> = {
+  primary: [
+    'bg-primary',
+    'bg-primary/80',
+    'bg-secondary-accent',
+    'bg-secondary-accent/80',
+    'bg-primary/60',
+    'bg-secondary-accent/60',
+  ],
+  fuchsia: [
+    'bg-violet-400',
+    'bg-fuchsia-400',
+    'bg-violet-300',
+    'bg-fuchsia-300',
+    'bg-purple-400',
+    'bg-pink-400',
+  ],
+};
+
+interface SparkBurstProps {
+  /** Delay before sparks fire (seconds) */
+  delay?: number;
+  /** Number of particles */
+  count?: number;
+  /** Color palette */
+  palette?: SparkPalette;
+  /** Change this value to re-trigger the burst */
+  trigger?: number;
+}
+
+function generateParticles(rx: number, ry: number, count: number, colors: string[]) {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * 360 + (Math.random() * 20 - 10);
+    const rad = (angle * Math.PI) / 180;
+    const startX = Math.cos(rad) * rx;
+    const startY = Math.sin(rad) * ry;
+    const outX = Math.cos(rad);
+    const outY = Math.sin(rad);
+    const swirlDir = Math.random() > 0.5 ? 1 : -1;
+    const tangX = -outY * swirlDir;
+    const tangY = outX * swirlDir;
+    const dist = 20 + Math.random() * 25;
+    const swirlAmount = 12 + Math.random() * 16;
+    const midX = startX + outX * dist * 0.3 + tangX * swirlAmount;
+    const midY = startY + outY * dist * 0.3 + tangY * swirlAmount;
+    const endX = startX + outX * dist + tangX * swirlAmount * 0.5;
+    const endY = startY + outY * dist + tangY * swirlAmount * 0.5;
+    const size = 1.5 + Math.random() * 2;
+    return {
+      id: `${i}-${Math.random().toString(36).slice(2, 8)}`,
+      startX,
+      startY,
+      midX,
+      midY,
+      endX,
+      endY,
+      size,
+      color: colors[i % colors.length],
+      delay: Math.random() * 0.2,
+      duration: 0.5 + Math.random() * 0.4,
+    };
+  });
+}
+
+/**
+ * Ember sparks that swirl outward from the parent element's border.
+ * Parent must be `position: relative` and `overflow: visible`.
+ *
+ * Fires on mount, and re-fires whenever `trigger` changes.
+ */
+export function SparkBurst({
+  delay = 0.3,
+  count = 12,
+  palette = 'primary',
+  trigger = 0,
+}: SparkBurstProps) {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [dimensions, setDimensions] = useState<{ rx: number; ry: number } | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure on trigger to handle late mounts
+  useEffect(() => {
+    const el = containerRef.current?.parentElement;
+    if (!el) return;
+    setDimensions({ rx: el.offsetWidth / 2, ry: el.offsetHeight / 2 });
+  }, [trigger]);
+
+  const colors = palettes[palette];
+
+  // Regenerate particles whenever trigger changes (or on first render with dimensions).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger forces particle regeneration on hover
+  const particles = useMemo(() => {
+    if (!dimensions) return [];
+    return generateParticles(dimensions.rx, dimensions.ry, count, colors);
+  }, [dimensions, count, colors, trigger]);
+
+  if (!dimensions) {
+    return <span ref={containerRef} className="absolute inset-0 pointer-events-none" />;
+  }
+
+  return (
+    <span ref={containerRef} className="absolute inset-0 pointer-events-none z-20">
+      {particles.map((p) => (
+        <motion.span
+          key={p.id}
+          className={`absolute rounded-full ${p.color}`}
+          style={{
+            width: p.size,
+            height: p.size,
+            left: '50%',
+            top: '50%',
+            marginLeft: -p.size / 2,
+            marginTop: -p.size / 2,
+          }}
+          initial={{ opacity: 0, x: p.startX, y: p.startY, scale: 1 }}
+          animate={{
+            opacity: [0, 1, 0.8, 0],
+            x: [p.startX, p.startX, p.midX, p.endX],
+            y: [p.startY, p.startY, p.midY, p.endY],
+            scale: [0, 1, 0.8, 0],
+          }}
+          transition={{
+            duration: p.duration,
+            delay: delay + p.delay,
+            ease: 'easeOut',
+            times: [0, 0.01, 0.4, 1],
+          }}
+        />
+      ))}
+    </span>
+  );
+}
+
+/**
+ * Hook that returns [trigger, fire] for imperatively re-triggering a SparkBurst.
+ */
+export function useSparkTrigger() {
+  const [trigger, setTrigger] = useState(0);
+  const fire = useCallback(() => setTrigger((t) => t + 1), []);
+  return [trigger, fire] as const;
+}

package/carbon/src/client/components/effects/VGlowEffect.tsx

@@ -0,0 +1,83 @@
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useReducedMotion } from '../../hooks/useReducedMotion';
+
+export function VGlowEffect() {
+  const { scrollY } = useScroll();
+  const prefersReducedMotion = useReducedMotion();
+  const y = useTransform(scrollY, (v) => v * -1.5);
+
+  return (
+    <motion.div
+      className="pointer-events-none fixed inset-0 z-0"
+      style={prefersReducedMotion ? undefined : { y }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1.5, delay: 0.5 }}
+    >
+      <svg
+        aria-hidden="true"
+        className="h-[150vh] w-full"
+        viewBox="0 0 1440 1600"
+        preserveAspectRatio="none"
+        fill="none"
+      >
+        <defs>
+          {/* Gradient along left arm — bright teal at top, magenta accent at bottom */}
+          <linearGradient
+            id="left-arm-grad"
+            x1="0"
+            y1="0"
+            x2="720"
+            y2="1400"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0%" stopColor="oklch(0.82 0.18 185)" stopOpacity="0.7" />
+            <stop offset="35%" stopColor="oklch(0.78 0.16 185)" stopOpacity="0.65" />
+            <stop offset="55%" stopColor="oklch(0.72 0.20 350)" stopOpacity="0.6" />
+            <stop offset="80%" stopColor="oklch(0.65 0.26 350)" stopOpacity="0.65" />
+            <stop offset="100%" stopColor="oklch(0.65 0.26 350)" stopOpacity="0.7" />
+          </linearGradient>
+          {/* Gradient along right arm */}
+          <linearGradient
+            id="right-arm-grad"
+            x1="1440"
+            y1="0"
+            x2="720"
+            y2="1400"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0%" stopColor="oklch(0.82 0.18 185)" stopOpacity="0.7" />
+            <stop offset="35%" stopColor="oklch(0.78 0.16 185)" stopOpacity="0.65" />
+            <stop offset="55%" stopColor="oklch(0.72 0.20 350)" stopOpacity="0.6" />
+            <stop offset="80%" stopColor="oklch(0.65 0.26 350)" stopOpacity="0.65" />
+            <stop offset="100%" stopColor="oklch(0.65 0.26 350)" stopOpacity="0.7" />
+          </linearGradient>
+          {/* Wide ambient glow */}
+          <filter id="v-glow-wide" x="-100%" y="-100%" width="300%" height="300%">
+            <feGaussianBlur stdDeviation="110" />
+          </filter>
+        </defs>
+
+        {/* Layer 1: Wide ambient glow backdrop */}
+        <line
+          x1="0"
+          y1="0"
+          x2="720"
+          y2="1400"
+          stroke="url(#left-arm-grad)"
+          strokeWidth="80"
+          filter="url(#v-glow-wide)"
+        />
+        <line
+          x1="1440"
+          y1="0"
+          x2="720"
+          y2="1400"
+          stroke="url(#right-arm-grad)"
+          strokeWidth="80"
+          filter="url(#v-glow-wide)"
+        />
+      </svg>
+    </motion.div>
+  );
+}

package/carbon/src/client/components/effects/index.ts

@@ -0,0 +1,2 @@
+export { FilmGrainOverlay } from './FilmGrainOverlay';
+export { FresnelEdge } from './FresnelEdge';

package/carbon/src/client/components/layouts/SidebarLayout.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { AppSidebar } from '@/components/AppSidebar';
+import { ContentSkeleton } from '@/components/ContentSkeleton';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+
+export function SidebarLayout() {
+  const { pathname } = useLocation();
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <Suspense key={pathname} fallback={<ContentSkeleton />}>
+          <Outlet />
+        </Suspense>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/carbon/src/client/components/scroll/ScrollSection.tsx

@@ -0,0 +1,76 @@
+import { motion } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+import { useReducedMotion } from '../../hooks/useReducedMotion';
+import { useSectionProgress } from '../../hooks/useScrollProgress';
+import { cn } from '../../lib/utils';
+import { useScrollytelling } from './ScrollytellingProvider';
+
+interface ScrollSectionProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disableEffects?: boolean;
+}
+
+/**
+ * Scroll section with depth-of-field effects
+ * Blurs when not in focus, sharpens when centered in viewport
+ */
+export function ScrollSection({
+  id,
+  children,
+  className,
+  disableEffects = false,
+}: ScrollSectionProps) {
+  const ref = useRef<HTMLElement>(null);
+  const { activeSection, registerSection, unregisterSection } = useScrollytelling();
+  const { blur, scale, opacity } = useSectionProgress(ref);
+  const prefersReducedMotion = useReducedMotion();
+
+  const isActive = activeSection === id;
+
+  // Register section bounds on mount
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const updateBounds = () => {
+      if (!ref.current) return;
+      const rect = ref.current.getBoundingClientRect();
+      const scrollTop = window.scrollY;
+      registerSection(id, rect.top + scrollTop, rect.bottom + scrollTop);
+    };
+
+    updateBounds();
+    window.addEventListener('resize', updateBounds);
+
+    return () => {
+      window.removeEventListener('resize', updateBounds);
+      unregisterSection(id);
+    };
+  }, [id, registerSection, unregisterSection]);
+
+  // Skip effects for accessibility or when disabled
+  if (prefersReducedMotion || disableEffects) {
+    return (
+      <section ref={ref} id={id} className={cn('relative', className)} data-active={isActive}>
+        {children}
+      </section>
+    );
+  }
+
+  return (
+    <motion.section
+      ref={ref}
+      id={id}
+      style={{
+        filter: `blur(${blur}px)`,
+        scale,
+        opacity,
+      }}
+      className={cn('relative will-change-transform', className)}
+      data-active={isActive}
+    >
+      {children}
+    </motion.section>
+  );
+}

package/carbon/src/client/components/scroll/ScrollytellingProvider.tsx

@@ -0,0 +1,81 @@
+import { useMotionValueEvent, useScroll } from 'framer-motion';
+import { createContext, type ReactNode, useCallback, useContext, useState } from 'react';
+
+interface SectionBounds {
+  top: number;
+  bottom: number;
+}
+
+interface ScrollytellingContextValue {
+  activeSection: string | null;
+  registerSection: (id: string, top: number, bottom: number) => void;
+  unregisterSection: (id: string) => void;
+}
+
+const ScrollytellingContext = createContext<ScrollytellingContextValue | null>(null);
+
+interface ScrollytellingProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for scrollytelling - tracks which section is in focus
+ * Sections register/unregister themselves and get focus state
+ */
+export function ScrollytellingProvider({ children }: ScrollytellingProviderProps) {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const [sections, setSections] = useState<Map<string, SectionBounds>>(new Map());
+
+  const { scrollY } = useScroll();
+
+  useMotionValueEvent(scrollY, 'change', (latest) => {
+    const viewportCenter = latest + window.innerHeight / 2;
+
+    let closestSection: string | null = null;
+    let closestDistance = Number.POSITIVE_INFINITY;
+
+    for (const [id, bounds] of sections) {
+      const sectionCenter = (bounds.top + bounds.bottom) / 2;
+      const distance = Math.abs(viewportCenter - sectionCenter);
+
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestSection = id;
+      }
+    }
+
+    if (closestSection !== activeSection) {
+      setActiveSection(closestSection);
+    }
+  });
+
+  const registerSection = useCallback((id: string, top: number, bottom: number) => {
+    setSections((prev) => {
+      const next = new Map(prev);
+      next.set(id, { top, bottom });
+      return next;
+    });
+  }, []);
+
+  const unregisterSection = useCallback((id: string) => {
+    setSections((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  return (
+    <ScrollytellingContext.Provider value={{ activeSection, registerSection, unregisterSection }}>
+      {children}
+    </ScrollytellingContext.Provider>
+  );
+}
+
+export function useScrollytelling() {
+  const ctx = useContext(ScrollytellingContext);
+  if (!ctx) {
+    throw new Error('useScrollytelling must be used within ScrollytellingProvider');
+  }
+  return ctx;
+}

package/carbon/src/client/components/scroll/index.ts

@@ -0,0 +1,2 @@
+export { ScrollSection } from './ScrollSection';
+export { ScrollytellingProvider, useScrollytelling } from './ScrollytellingProvider';

package/carbon/src/client/components/ui/accordion.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('overflow-hidden rounded-2xl border flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('data-open:bg-muted/50 not-last:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          '**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden"
+      {...props}
+    >
+      <div
+        className={cn(
+          'pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/carbon/src/client/components/ui/alert-dialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import type * as React from 'react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};