Feature/bklit

apps/start/components.json

@@ -10,12 +10,15 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {
+    "@bklit": "https://ui.bklit.com/r/{name}.json"
+  }
 }

apps/start/package.json

@@ -87,12 +87,21 @@
     "@trpc/server": "^11.17.0",
     "@trpc/tanstack-react-query": "^11.6.0",
     "@types/d3": "^7.4.3",
+    "@visx/curve": "4.0.1-alpha.0",
+    "@visx/event": "4.0.1-alpha.0",
+    "@visx/gradient": "4.0.1-alpha.0",
+    "@visx/grid": "4.0.1-alpha.0",
+    "@visx/pattern": "4.0.1-alpha.0",
+    "@visx/responsive": "4.0.1-alpha.0",
+    "@visx/scale": "4.0.1-alpha.0",
+    "@visx/shape": "4.0.1-alpha.0",
     "bind-event-listener": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",
+    "d3-array": "^3.2.4",
     "date-fns": "^3.3.1",
     "debounce": "^2.2.0",
     "embla-carousel-autoplay": "^8.6.0",
@@ -109,6 +118,7 @@
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.476.0",
     "mitt": "^3.0.1",
+    "motion": "^12.40.0",
     "nuqs": "^2.5.2",
     "prisma-error-enum": "^0.1.3",
     "pushmodal": "^1.0.3",
@@ -145,7 +155,7 @@
     "sonner": "^1.4.0",
     "sqlstring": "^2.3.3",
     "superjson": "^2.2.2",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.3.6",
@@ -162,6 +172,7 @@
     "@tanstack/devtools-event-client": "^0.3.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
+    "@types/d3-array": "^3.2.2",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",

apps/start/src/components/charts/animation.ts

@@ -0,0 +1,33 @@
+import type { Transition } from "motion/react";
+
+/** Default clip-reveal easing for cartesian charts. */
+export const DEFAULT_ANIMATION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+
+export const DEFAULT_ANIMATION_DURATION_MS = 1100;
+
+/** Default enter transition — matches the original line chart reveal. */
+export const DEFAULT_CHART_ENTER_TRANSITION: Transition = {
+  type: "tween",
+  duration: DEFAULT_ANIMATION_DURATION_MS / 1000,
+  ease: [0.85, 0, 0.15, 1],
+};
+
+/**
+ * Clip-path width reveal must use tween — spring does not reliably animate SVG width.
+ */
+export function clipRevealTransition(enterTransition?: Transition): Transition {
+  if (enterTransition?.type === "tween") {
+    return enterTransition;
+  }
+
+  const duration =
+    typeof enterTransition?.duration === "number"
+      ? enterTransition.duration
+      : DEFAULT_ANIMATION_DURATION_MS / 1000;
+
+  return {
+    type: "tween",
+    duration,
+    ease: DEFAULT_CHART_ENTER_TRANSITION.ease,
+  };
+}

apps/start/src/components/charts/area-chart.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { ParentSize } from "@visx/responsive";
+import type { Transition } from "motion/react";
+import {
+  Children,
+  isValidElement,
+  type ReactNode,
+  useMemo,
+  useRef,
+} from "react";
+import { cn } from "@/lib/utils";
+import { Area, type AreaProps } from "./area";
+import type { LineConfig, Margin } from "./chart-context";
+import { PatternArea } from "./pattern-area";
+import { TimeSeriesChartInner } from "./time-series-chart-shell";
+
+export interface AreaChartProps {
+  /** Data array - each item should have a date field and numeric values */
+  data: Record<string, unknown>[];
+  /** Key in data for the x-axis (date). Default: "date" */
+  xDataKey?: string;
+  /** Chart margins */
+  margin?: Partial<Margin>;
+  /** Animation duration in milliseconds. Default: 1100 */
+  animationDuration?: number;
+  /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+  animationEasing?: string;
+  /** Motion enter transition (spring or cubic-bezier tween). */
+  enterTransition?: Transition;
+  /** Signature of motion URL state — triggers reveal replay when it changes. */
+  revealSignature?: string;
+  /** Aspect ratio as "width / height". Default: "2 / 1" */
+  aspectRatio?: string;
+  /** Additional class name for the container */
+  className?: string;
+  /** Child components (Area, Grid, ChartTooltip, etc.) */
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+function extractAreaConfigs(children: ReactNode): LineConfig[] {
+  const configs: LineConfig[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    const childType = child.type as {
+      displayName?: string;
+      name?: string;
+    };
+    const componentName =
+      typeof child.type === "function"
+        ? childType.displayName || childType.name || ""
+        : "";
+
+    const props = child.props as AreaProps | undefined;
+    const isPatternArea =
+      componentName === "PatternArea" || child.type === PatternArea;
+    const isAreaComponent =
+      componentName === "Area" ||
+      child.type === Area ||
+      (props &&
+        typeof props.dataKey === "string" &&
+        props.dataKey.length > 0 &&
+        !isPatternArea);
+
+    if (isAreaComponent && props?.dataKey) {
+      configs.push({
+        dataKey: props.dataKey,
+        stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+        strokeWidth: props.strokeWidth || 2,
+      });
+    }
+  });
+
+  return configs;
+}
+
+interface ChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  animationEasing?: string;
+  enterTransition?: Transition;
+  revealSignature?: string;
+  children: ReactNode;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function ChartInner({
+  width,
+  height,
+  data,
+  xDataKey,
+  margin,
+  animationDuration,
+  animationEasing,
+  enterTransition,
+  revealSignature,
+  children,
+  containerRef,
+}: ChartInnerProps) {
+  const lines = useMemo(() => extractAreaConfigs(children), [children]);
+
+  return (
+    <TimeSeriesChartInner
+      animationDuration={animationDuration}
+      animationEasing={animationEasing}
+      clipPathId="chart-area-grow-clip"
+      containerRef={containerRef}
+      data={data}
+      enterTransition={enterTransition}
+      height={height}
+      lines={lines}
+      margin={margin}
+      revealSignature={revealSignature}
+      width={width}
+      xDataKey={xDataKey}
+    >
+      {children}
+    </TimeSeriesChartInner>
+  );
+}
+
+export function AreaChart({
+  data,
+  xDataKey = "date",
+  margin: marginProp,
+  animationDuration = 1100,
+  animationEasing,
+  enterTransition,
+  revealSignature,
+  aspectRatio = "2 / 1",
+  className = "",
+  children,
+}: AreaChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      ref={containerRef}
+      style={{ aspectRatio, touchAction: "none" }}
+    >
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <ChartInner
+            animationDuration={animationDuration}
+            animationEasing={animationEasing}
+            containerRef={containerRef}
+            data={data}
+            enterTransition={enterTransition}
+            height={height}
+            margin={margin}
+            revealSignature={revealSignature}
+            width={width}
+            xDataKey={xDataKey}
+          >
+            {children}
+          </ChartInner>
+        )}
+      </ParentSize>
+    </div>
+  );
+}
+
+export { Area, type AreaProps } from "./area";
+
+export default AreaChart;

apps/start/src/components/charts/area-gradient-defs.tsx

@@ -0,0 +1,95 @@
+import {
+  type FadeEdges,
+  fadeGradientStops,
+  resolveFadeSides,
+} from "./fade-edges";
+
+interface AreaGradientDefsProps {
+  gradientId: string;
+  strokeGradientId: string;
+  edgeMaskId: string;
+  edgeGradientId: string;
+  fill: string;
+  fillOpacity: number;
+  gradientToOpacity: number;
+  resolvedStroke: string;
+  isPatternFill: boolean;
+  fadeEdges: FadeEdges;
+  innerWidth: number;
+  innerHeight: number;
+}
+
+export function AreaGradientDefs({
+  gradientId,
+  strokeGradientId,
+  edgeMaskId,
+  edgeGradientId,
+  fill,
+  fillOpacity,
+  gradientToOpacity,
+  resolvedStroke,
+  isPatternFill,
+  fadeEdges,
+  innerWidth,
+  innerHeight,
+}: AreaGradientDefsProps) {
+  const sides = resolveFadeSides(fadeEdges);
+  // Stroke gradient mirrors the area's edge fade so the line doesn't pop in
+  // past the faded fill. Skip emitting it when neither edge fades — the line
+  // can then paint a solid stroke instead of an unnecessary url(#...) ref.
+  const strokeStops = sides.any ? fadeGradientStops(sides) : null;
+  const showEdgeMask = sides.any && !isPatternFill;
+  const edgeStops = showEdgeMask ? fadeGradientStops(sides) : null;
+
+  return (
+    <defs>
+      {isPatternFill ? null : (
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop
+            offset="0%"
+            style={{ stopColor: fill, stopOpacity: fillOpacity }}
+          />
+          <stop
+            offset="100%"
+            style={{ stopColor: fill, stopOpacity: gradientToOpacity }}
+          />
+        </linearGradient>
+      )}
+
+      {strokeStops ? (
+        <linearGradient id={strokeGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+          {strokeStops.map((stop) => (
+            <stop
+              key={stop.offset}
+              offset={stop.offset}
+              style={{ stopColor: resolvedStroke, stopOpacity: stop.opacity }}
+            />
+          ))}
+        </linearGradient>
+      ) : null}
+
+      {edgeStops ? (
+        <>
+          <linearGradient id={edgeGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+            {edgeStops.map((stop) => (
+              <stop
+                key={stop.offset}
+                offset={stop.offset}
+                style={{ stopColor: "white", stopOpacity: stop.opacity }}
+              />
+            ))}
+          </linearGradient>
+          <mask id={edgeMaskId}>
+            <rect
+              fill={`url(#${edgeGradientId})`}
+              height={innerHeight}
+              width={innerWidth}
+              x="0"
+              y="0"
+            />
+          </mask>
+        </>
+      ) : null}
+    </defs>
+  );
+}