@alpic-ai/ui 0.0.0-dev.g19fc228 → 0.0.0-dev.g1a5d5ed

package/src/components/area-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
@@ -39,6 +39,7 @@ export interface AreaChartProps {
   variant?: "stacked" | "grouped" | "expand";
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -60,6 +61,7 @@ function AreaChart({
   variant = "stacked",
   curve = "monotone",
   legend = false,
+  legendAlign = "left",
   valueFlags = false,
   height = 200,
   yAxisWidth = 48,
@@ -205,7 +207,7 @@ function AreaChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsAreaChart
               data={data as Record<string, string | number>[]}
               stackOffset={variant === "expand" ? "expand" : "none"}
@@ -234,7 +236,13 @@ function AreaChart({
               </defs>
 
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
               <YAxis
                 {...axis}
                 width={yAxisWidth}
@@ -331,7 +339,7 @@ function AreaChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/bar-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
@@ -33,6 +33,7 @@ export interface BarChartProps {
   series: ChartSeries[];
   variant?: "stacked" | "grouped" | "expand";
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -52,6 +53,7 @@ function BarChart({
   series,
   variant = "stacked",
   legend = false,
+  legendAlign = "left",
   valueLabels = false,
   height = 200,
   yAxisWidth = 48,
@@ -168,7 +170,7 @@ function BarChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsBarChart
               data={data as Record<string, string | number>[]}
               stackOffset={variant === "expand" ? "expand" : "none"}
@@ -198,7 +200,13 @@ function BarChart({
               </defs>
 
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
               <YAxis
                 {...axis}
                 width={yAxisWidth}
@@ -301,7 +309,7 @@ function BarChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/bar-list.tsx

@@ -15,15 +15,22 @@ export interface BarListProps {
   dataKey?: string;
   maxItems?: number;
   palette?: ChartPaletteName;
+  /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
+  semantic?: "error" | "warning" | "success";
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
 
+const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+
 const PLACEHOLDER_HEIGHT = 168;
 // Cap the ramp off its palest end so low-rank bars stay legible on a light card.
 const RAMP_CEILING = 0.8;
+// Semantic bars keep a single hue: the lightest bar still holds this much colour
+// (mixed toward white) so a long error list never fades to near-invisible.
+const SEMANTIC_FLOOR = 0.62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
 
 function BarList({
@@ -32,12 +39,14 @@ function BarList({
   dataKey = "value",
   maxItems,
   palette,
+  semantic,
   loading = false,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   labelFormatter,
   className,
 }: BarListProps) {
-  const { paletteName } = useChartContext(palette);
+  const { paletteName, theme } = useChartContext(palette);
+  const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
   const reducedMotion = useReducedMotion();
   const [mounted, setMounted] = React.useState(false);
   const [active, setActive] = React.useState<number | null>(null);
@@ -55,11 +64,17 @@ function BarList({
     }));
     mapped.sort((lower, upper) => upper.value - lower.value);
     const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
-    return capped.map((row, rank) => ({
-      ...row,
-      color: rampColor(paletteName, (capped.length > 1 ? rank / (capped.length - 1) : 0) * RAMP_CEILING),
-    }));
-  }, [data, index, dataKey, maxItems, paletteName]);
+    return capped.map((row, rank) => {
+      const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
+      const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+      return {
+        ...row,
+        color: accent
+          ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)`
+          : rampColor(paletteName, rankFraction * RAMP_CEILING),
+      };
+    });
+  }, [data, index, dataKey, maxItems, paletteName, accent]);
 
   const maxValue = rows.reduce((max, row) => (row.value > max ? row.value : max), 0);
   const isEmpty = rows.length === 0;

package/src/components/chart-card.tsx

@@ -12,7 +12,7 @@ export interface ChartCardProps extends Omit<React.ComponentProps<"section">, "t
   title?: React.ReactNode;
   description?: React.ReactNode;
   action?: React.ReactNode;
-  accent?: "top" | "left";
+  accent?: "top" | "left" | "none";
 }
 
 function ChartCard({
@@ -40,11 +40,13 @@ function ChartCard({
       )}
       {...props}
     >
-      <span
-        aria-hidden
-        className={cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]")}
-        style={{ background: lead }}
-      />
+      {accent !== "none" && (
+        <span
+          aria-hidden
+          className={cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]")}
+          style={{ background: lead }}
+        />
+      )}
       {(kicker || title || action) && (
         <header className="mb-4 flex items-start justify-between gap-4">
           <div className="flex flex-col gap-1">

package/src/components/chart-container.tsx

@@ -6,6 +6,8 @@ import { type ChartTheme, useChartTheme } from "../hooks/use-chart-theme";
 import { CHART_PALETTES, type ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 
+export type { ChartPaletteName } from "../lib/chart-palette";
+
 interface ChartContextValue {
   palette: readonly string[];
   paletteName: ChartPaletteName;

package/src/components/chart-legend.tsx

@@ -10,8 +10,12 @@ export interface ChartLegendItem {
 
 export interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
+  align?: "left" | "center" | "right";
+  insetLeft?: number;
 }
 
+const ALIGN_CLASS = { left: "justify-start", center: "justify-center", right: "justify-end" } as const;
+
 function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   return (
     <span
@@ -22,9 +26,13 @@ function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   );
 }
 
-function ChartLegend({ items, className, ...props }: ChartLegendProps) {
+function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }: ChartLegendProps) {
   return (
-    <div className={cn("flex flex-wrap gap-x-4 gap-y-1.5", className)} {...props}>
+    <div
+      className={cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className)}
+      style={{ paddingLeft: align === "left" ? insetLeft : undefined, ...style }}
+      {...props}
+    >
       {items.map((item) => (
         <span
           key={item.name}

package/src/components/donut-chart.tsx

@@ -99,7 +99,7 @@ function DonutChart({
       ) : (
         <div className="flex flex-col items-center gap-5 @md:flex-row">
           <div className="relative shrink-0" style={{ width: height, height }}>
-            <ResponsiveContainer width="100%" height="100%">
+            <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
               <RechartsPieChart>
                 <defs>
                   {slices.map((slice, slot) => (

package/src/components/heatmap-chart.tsx

@@ -17,21 +17,26 @@ export interface HeatmapChartProps {
   palette?: ChartPaletteName;
   xLabels?: readonly string[];
   yLabels?: readonly string[];
+  showAllXLabels?: boolean;
   highlightPeak?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   xTickFormatter?: (label: string) => string;
   yTickFormatter?: (label: string) => string;
+  tooltipMetrics?: ReadonlyArray<{ key: string; label: string; format?: (value: number) => string }>;
   ariaLabel?: string;
   className?: string;
 }
 
+type CellRecord = Record<string, string | number | null | undefined>;
+
 interface HoverState {
   x: number;
   y: number;
   rowLabel: string;
   colLabel: string;
   value: number;
+  record: CellRecord | null;
 }
 
 const PLACEHOLDER_HEIGHT = 168;
@@ -71,11 +76,13 @@ function HeatmapChart({
   palette,
   xLabels,
   yLabels,
+  showAllXLabels = false,
   highlightPeak = true,
   loading = false,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   xTickFormatter,
   yTickFormatter,
+  tooltipMetrics,
   ariaLabel = "Activity heatmap",
   className,
 }: HeatmapChartProps) {
@@ -91,19 +98,23 @@ function HeatmapChart({
     const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
     const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
     const valueAt = new Map<string, number>();
+    const recordAt = new Map<string, CellRecord>();
     for (const row of data) {
-      valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+      const key = pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? ""));
+      valueAt.set(key, Number(row[dataKey]) || 0);
+      recordAt.set(key, row);
     }
     let maxValue = 0;
     let peakKey = "";
     const cells = rows.flatMap((rowLabel, rowIndex) =>
       columns.map((colLabel, colIndex) => {
-        const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+        const key = pairKey(rowLabel, colLabel);
+        const value = valueAt.get(key) ?? 0;
         if (value > maxValue) {
           maxValue = value;
-          peakKey = pairKey(rowLabel, colLabel);
+          peakKey = key;
         }
-        return { rowLabel, colLabel, rowIndex, colIndex, value };
+        return { rowLabel, colLabel, rowIndex, colIndex, value, record: recordAt.get(key) ?? null };
       }),
     );
     return { columns, rows, cells, maxValue, peakKey };
@@ -144,7 +155,7 @@ function HeatmapChart({
   const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
   const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
   const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
-  const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+  const xStride = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
   const cellX = (col: number) => PAD.left + col * (CELL + GAP);
   const cellY = (row: number) => PAD.top + row * (CELL + GAP);
   const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
@@ -247,6 +258,7 @@ function HeatmapChart({
                   rowLabel: cell.rowLabel,
                   colLabel: cell.colLabel,
                   value: cell.value,
+                  record: cell.record,
                 })
               }
             />
@@ -264,19 +276,51 @@ function HeatmapChart({
             <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
               {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
             </p>
-            <div className="flex items-center justify-between gap-4 text-text-xs">
-              <span className="inline-flex items-center gap-2 text-muted-foreground">
-                <span
-                  aria-hidden
-                  className="size-2 shrink-0 rounded-[2px]"
-                  style={{ background: heatColor(ramp, hovered.value / maxValue) }}
-                />
-                activity
-              </span>
-              <span className="font-mono font-semibold tabular-nums text-foreground">
-                {valueFormatter(hovered.value)}
-              </span>
-            </div>
+            {tooltipMetrics && tooltipMetrics.length > 0 ? (
+              <div className="flex flex-col gap-1">
+                {tooltipMetrics.map((metric) => {
+                  const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
+                  const isActive = metric.key === dataKey;
+                  return (
+                    <div key={metric.key} className="flex items-center justify-between gap-4 text-text-xs">
+                      <span className="inline-flex items-center gap-2 text-muted-foreground">
+                        <span
+                          aria-hidden
+                          className="size-2 shrink-0 rounded-[2px]"
+                          style={{
+                            background: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
+                            opacity: isActive ? 1 : 0.35,
+                          }}
+                        />
+                        {metric.label}
+                      </span>
+                      <span
+                        className={cn(
+                          "font-mono tabular-nums",
+                          isActive ? "font-semibold text-foreground" : "text-muted-foreground",
+                        )}
+                      >
+                        {(metric.format ?? valueFormatter)(raw)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between gap-4 text-text-xs">
+                <span className="inline-flex items-center gap-2 text-muted-foreground">
+                  <span
+                    aria-hidden
+                    className="size-2 shrink-0 rounded-[2px]"
+                    style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                  />
+                  activity
+                </span>
+                <span className="font-mono font-semibold tabular-nums text-foreground">
+                  {valueFormatter(hovered.value)}
+                </span>
+              </div>
+            )}
           </div>,
           document.body,
         )}

package/src/components/line-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
@@ -32,6 +32,7 @@ export interface LineChartProps {
   series: ChartSeries[];
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   dots?: boolean;
   height?: number;
@@ -52,6 +53,7 @@ function LineChart({
   series,
   curve = "monotone",
   legend = false,
+  legendAlign = "left",
   valueFlags = false,
   dots = false,
   height = 200,
@@ -170,11 +172,22 @@ function LineChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsLineChart data={data as Record<string, string | number>[]} margin={margin}>
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
-              <YAxis {...axis} width={yAxisWidth} tickFormatter={(value: number) => valueFormatter(value)} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                domain={["auto", "auto"]}
+                tickFormatter={(value: number) => valueFormatter(value)}
+              />
               <Tooltip
                 offset={12}
                 allowEscapeViewBox={{ x: false, y: false }}
@@ -256,7 +269,7 @@ function LineChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/stat.tsx

@@ -31,8 +31,9 @@ export interface StatDelta {
 export interface StatProps extends React.ComponentProps<"div"> {
   value: React.ReactNode;
   unit?: string;
-  delta?: StatDelta;
+  delta?: StatDelta | null;
   sparkline?: number[] | Array<{ value: number }>;
+  semantic?: "error" | "warning" | "success";
 }
 
 const toSparkData = (sparkline: StatProps["sparkline"]) =>
@@ -40,12 +41,15 @@ const toSparkData = (sparkline: StatProps["sparkline"]) =>
     typeof point === "number" ? { index, value: point } : { index, value: point.value },
   );
 
-function Stat({ value, unit, delta, sparkline, className, ...props }: StatProps) {
-  const { palette } = useChartContext();
+const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+
+function Stat({ value, unit, delta, sparkline, semantic, className, ...props }: StatProps) {
+  const { palette, theme } = useChartContext();
   const gradientId = React.useId().replace(/:/g, "");
   const sparkData = React.useMemo(() => toSparkData(sparkline), [sparkline]);
+  const hasSpark = sparkData.some((point) => point.value > 0);
   // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
-  const sparkColor = palette[0]!;
+  const sparkColor = semantic ? theme[SEMANTIC_KEY[semantic]] : palette[0]!;
 
   const sentiment =
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
@@ -64,9 +68,9 @@ function Stat({ value, unit, delta, sparkline, className, ...props }: StatProps)
           </DeltaPill>
         )}
       </div>
-      {sparkData.length > 0 && (
+      {hasSpark && (
         <div className="h-9 w-full">
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height: 36 }}>
             <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
               <defs>
                 <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">

package/src/components/textarea.tsx

@@ -24,7 +24,7 @@ function Textarea({ className, id, label, required, hint, error, tooltip, ...pro
       id={fieldId}
       data-slot="textarea"
       className={cn(
-        "block w-full min-h-[120px] resize-none",
+        "block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]",
         "px-3.5 py-3",
         "type-text-md text-foreground placeholder:text-placeholder",
         "bg-background border border-border rounded-md",

package/src/lib/chart.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ChartTheme } from "../hooks/use-chart-theme";
 import { luminance, paletteColor } from "./chart-palette";
 
@@ -54,3 +55,36 @@ export const resolveSeries = (
  */
 export const orderByLuminance = (series: ResolvedSeries[]) =>
   [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
+
+export const makeXAxisTick =
+  (theme: ChartTheme) =>
+  ({
+    x,
+    y,
+    payload,
+    index,
+    visibleTicksCount,
+  }: {
+    x?: string | number;
+    y?: string | number;
+    payload?: { value?: string | number };
+    index?: number;
+    visibleTicksCount?: number;
+  }) => {
+    const isFirst = index === 0;
+    const isLast = visibleTicksCount != null && index === visibleTicksCount - 1;
+    const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+    return React.createElement(
+      "text",
+      {
+        x: Number(x ?? 0),
+        y: Number(y ?? 0),
+        dy: 12,
+        textAnchor: anchor,
+        fill: theme.axisForeground,
+        fontFamily: theme.fontMono,
+        fontSize: 10,
+      },
+      String(payload?.value ?? ""),
+    );
+  };

package/src/stories/area-chart.stories.tsx

@@ -89,7 +89,7 @@ const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : be
 const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="magenta"

package/src/stories/bar-chart.stories.tsx

@@ -76,7 +76,7 @@ const sessionsSpark = stacked.map((row) => CLIENTS.reduce((acc, client) => acc +
 const errorsPeak = errors.reduce((best, row) => (row.mcp + row.tool > best.mcp + best.tool ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="magenta"

package/src/stories/bar-list.stories.tsx

@@ -52,7 +52,7 @@ const fmtK = (value: number) => {
 const toolCallsTotal = TOP_TOOLS.reduce((sum, row) => sum + row.calls, 0);
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard palette="magenta" kicker="Last 7d" title="Top tools" description="Ranked · magenta ramp">
         <Stat value={fmtK(toolCallsTotal)} unit="calls" delta={{ value: 12.4, direction: "up" }} />

package/src/stories/donut-chart.stories.tsx

@@ -72,7 +72,7 @@ const fmtK = (value: number) => {
 const clientsTotal = clients.reduce((sum, row) => sum + row.sessions, 0);
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard palette="magenta" kicker="Last 7d" title="Sessions by client" description="Donut · share readout">
         <Stat value={fmtK(clientsTotal)} unit="sessions" delta={{ value: 6.2, direction: "up" }} />

package/src/stories/heatmap-chart.stories.tsx

@@ -39,7 +39,7 @@ const HOURS = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, "
 const nf = (value: number) => value.toLocaleString("en-US");
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
       <ChartCard palette="magenta" accent="left" kicker="Last 7d" title="Activity" description="Square · hour × day">
         <HeatmapChart

package/src/stories/line-chart.stories.tsx

@@ -63,7 +63,7 @@ const tokensSpark = tokens.map((row) => row.v);
 const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
 
 export const AllVariants: Story = () => (
-  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+  <div className="mx-auto max-w-[1600px] p-8">
     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       <ChartCard
         palette="cyan"

package/src/stories/textarea.stories.tsx

@@ -55,6 +55,13 @@ export const AllVariants = () => {
         hint="This is a hint text to help user."
         disabled
       />
+
+      <span className={SECTION_HEADER}>Long pre-filled (auto-grows, no crop)</span>
+      <Textarea
+        id="long-prefilled"
+        label="Subtitle"
+        defaultValue="The fastest way to deploy, host, and scale remote MCP servers for your AI agents — with zero infrastructure to manage, built-in observability, and one-command rollbacks straight from your terminal."
+      />
     </div>
   );
 };

package/src/stories/wizard.stories.tsx

@@ -11,7 +11,7 @@ const steps = [
   { id: "branding", label: "Branding & metadata" },
   { id: "auth", label: "Authentication" },
   { id: "tools", label: "Tools & test cases" },
-  { id: "review", label: "Review & submit" },
+  { id: "review", label: "Review & export" },
 ];
 
 /** The step rail is a vertical `TabsNav` composed with the consumer's selection state. */