@alpic-ai/ui 1.142.0 → 1.142.2

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. */

package/src/styles/tokens.css

@@ -447,51 +447,6 @@
   }
 }
 
-/* ─── Chart canvas — control-room atmosphere for analytics surfaces ───────────
-   Apply `.chart-canvas` to a dashboard/page container holding chart cards: a
-   dotted grid faded from the top, plus a dual brand glow in dark mode. The grid
-   is masked away so it never bleeds into the cards stacked above it. */
-
-.chart-canvas {
-  position: relative;
-  isolation: isolate;
-}
-
-.chart-canvas::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-image:
-    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
-  background-size:
-    46px 46px,
-    46px 46px;
-  opacity: 0.65;
-  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
-  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
-}
-
-.dark .chart-canvas::before {
-  background-image:
-    radial-gradient(
-      900px 480px at 78% -8%,
-      color-mix(in oklab, var(--color-cta-accent) 12%, transparent),
-      transparent 60%
-    ),
-    radial-gradient(820px 520px at 8% 4%, color-mix(in oklab, var(--color-primary) 12%, transparent), transparent 60%),
-    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
-  background-size:
-    100% 100%,
-    100% 100%,
-    46px 46px,
-    46px 46px;
-  opacity: 0.6;
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .chart-rise {
     animation: chart-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;