@robr0/design-system 0.8.0 → 0.10.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->84<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->101<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 | **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Model picker · Navigation · Nav list · Notification centre · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Line chart · Link list · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
 <!-- component-list:end -->
 
 ### Ambient background
@@ -71,7 +71,7 @@ import '@robr0/design-system/tokens/tokens.css';
 import { Button, Card, Badge } from '@robr0/design-system';
 ```
 
-Deep imports work too (`@robr0/design-system/components/Button/Button`). Chart components live behind a separate entry so the optional `recharts` peer dependency is only needed if you use them:
+Deep imports work too (`@robr0/design-system/components/Button/Button`). The Recharts-backed charts live behind a separate entry so the optional `recharts` peer dependency is only needed if you use them; Sparkline and ContributionGraph are dependency-free and export from the main barrel:
 
 ```tsx
 import { BarChart, LineChart } from '@robr0/design-system/charts';
@@ -84,10 +84,15 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
   ```css
   :root { --font-family-primary: 'Inter', sans-serif; }
   ```
-- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it:
+- **Colours, radius, spacing**: every semantic token chains to a primitive, so overriding a primitive re-themes everything built on it. The action colour is theme-split by design (light fills run teal-08/09/10, dark inverts to teal-05/04/03), so rebranding it means re-keying those steps:
   ```css
   :root {
-    --primitive-teal-07: #7C3AED;  /* your brand color becomes the action color */
+    --primitive-teal-08: #6D31D3;  /* light fill */
+    --primitive-teal-09: #4C2293;  /* light hover */
+    --primitive-teal-10: #2E1560;  /* light active, dark label */
+    --primitive-teal-05: #A78BFA;  /* dark fill */
+    --primitive-teal-04: #C4B5FD;  /* dark hover */
+    --primitive-teal-03: #DDD6FE;  /* dark active */
     --primitive-radius-full: 12px; /* pill buttons become rounded rectangles */
   }
   ```
@@ -99,9 +104,9 @@ Icons use a bundled Material Symbols Rounded variable font (woff2), with no extr
 Tokens flow in one direction, and primitives are never referenced directly in components:
 
 ```
-tokens-primitives.css      --primitive-teal-07: #118AB2
+tokens-primitives.css      --primitive-teal-08: #0E6E8F
         ↓
-tokens-light/dark.css      --color-action-primary-bg: var(--primitive-teal-07)
+tokens-light/dark.css      --color-action-primary-bg: var(--primitive-teal-08)
         ↓
 Component CSS              background-color: var(--color-action-primary-bg)
 ```

package/components/Accordion/Accordion.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import "./Accordion.css";

package/components/AgentPlan/AgentPlan.css

@@ -29,7 +29,7 @@
   align-items: center;
   gap: var(--gap-sm);
   width: 100%;
-  padding: var(--padding-xs) var(--padding-sm-md);
+  padding: var(--padding-sm) var(--padding-md);
   background: none;
   border: none;
   text-align: left;
@@ -121,7 +121,7 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   list-style: none;
 }
 

package/components/AgentPlan/AgentPlan.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useState, useCallback } from "react";
 import { Spinner } from "../Spinner/Spinner.js";

package/components/AgentStatus/AgentStatus.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
 import "./AgentStatus.css";

package/components/AiButton/AiButton.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
 import "./AiButton.css";

package/components/AlertDialog/AlertDialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useId, useSyncExternalStore, useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/AnchorNav/AnchorNav.css

@@ -0,0 +1,63 @@
+/* ============================================
+   ANCHOR NAV
+   "On this page" list of anchor links with a
+   position indicator riding the left rail.
+   ============================================ */
+.ds-anchor-nav {
+  font-family: var(--font-family-primary);
+}
+
+.ds-anchor-nav__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  margin: 0 0 var(--gap-sm);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+}
+
+.ds-anchor-nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-left: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-anchor-nav__link {
+  display: block;
+  padding: var(--padding-xs) 0 var(--padding-xs) var(--padding-md);
+  /* Sits over the list rail; turns into the indicator when active */
+  margin-left: calc(var(--border-xs) * -1);
+  border-left: var(--border-md) solid transparent;
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  transition:
+    color var(--motion-duration-fast) var(--motion-ease-standard),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav__link:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+  border-radius: var(--radius-xxs);
+}
+
+.ds-anchor-nav__link--active {
+  color: var(--color-text-primary);
+  font-weight: var(--font-paragraph-em-weight);
+  border-left-color: var(--color-text-primary);
+}

package/components/AnchorNav/AnchorNav.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface AnchorNavItem {
+    /** The id of the element the item jumps to (rendered as `href="#id"`) */
+    id: string;
+    /** Link text */
+    label: string;
+}
+type AnchorNavOwnProps = {
+    /** The on-page sections to list, in document order */
+    items: AnchorNavItem[];
+    /** Header text above the list; pass an empty string to render no header */
+    title?: string;
+    /** Material Symbols icon name beside the header; pass an empty string for none */
+    icon?: string;
+    /** Controlled active item id — set it to drive the highlight yourself and skip scroll tracking */
+    activeId?: string;
+    /** Fires when the tracked (or clicked) active item changes */
+    onActiveChange?: (id: string) => void;
+    /** Distance in px from the viewport top at which a section counts as current, e.g. a sticky header's height */
+    offset?: number;
+};
+export interface AnchorNavProps extends AnchorNavOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof AnchorNavOwnProps> {
+}
+/**
+ * An "On this page" list of anchor links that tracks the reader's position.
+ *
+ * Uncontrolled by default: a scroll listener marks the last section whose top
+ * has passed `offset` as current. Pass `activeId` to control the highlight
+ * instead (no listener is attached). The active link carries
+ * `aria-current="location"`.
+ */
+export declare const AnchorNav: React.ForwardRefExoticComponent<AnchorNavProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/AnchorNav/AnchorNav.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useImperativeHandle, useState, useCallback, useEffect } from "react";
+import "./AnchorNav.css";
+const AnchorNav = React.forwardRef(
+  ({
+    items,
+    title = "On this page",
+    icon = "toc",
+    activeId,
+    onActiveChange,
+    offset = 96,
+    className,
+    ...rest
+  }, ref) => {
+    const navRef = useRef(null);
+    useImperativeHandle(ref, () => navRef.current);
+    const isControlled = activeId !== void 0;
+    const [trackedId, setTrackedId] = useState(void 0);
+    const currentId = isControlled ? activeId : trackedId;
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const setActive = useCallback(
+      (id) => {
+        setTrackedId((prev) => {
+          if (id !== void 0 && id !== prev) onActiveChangeRef.current?.(id);
+          return id;
+        });
+      },
+      []
+    );
+    useEffect(() => {
+      if (isControlled || items.length === 0) return;
+      let frame = 0;
+      const measure = () => {
+        frame = 0;
+        let current = items[0]?.id;
+        for (const item of items) {
+          const el = document.getElementById(item.id);
+          if (!el) continue;
+          if (el.getBoundingClientRect().top <= offset + 1) current = item.id;
+        }
+        setActive(current);
+      };
+      const schedule = () => {
+        if (frame === 0) frame = window.requestAnimationFrame(measure);
+      };
+      measure();
+      window.addEventListener("scroll", schedule, { passive: true });
+      window.addEventListener("resize", schedule);
+      return () => {
+        window.removeEventListener("scroll", schedule);
+        window.removeEventListener("resize", schedule);
+        if (frame !== 0) window.cancelAnimationFrame(frame);
+      };
+    }, [isControlled, items, offset, setActive]);
+    const classes = ["ds-anchor-nav", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("nav", { ref: navRef, "aria-label": title || "On this page", className: classes, ...rest, children: [
+      title && /* @__PURE__ */ jsxs("p", { className: "ds-anchor-nav__header", children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-anchor-nav__icon", "aria-hidden": "true", children: icon }),
+        title
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "ds-anchor-nav__list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `#${item.id}`,
+          className: item.id === currentId ? "ds-anchor-nav__link ds-anchor-nav__link--active" : "ds-anchor-nav__link",
+          "aria-current": item.id === currentId ? "location" : void 0,
+          onClick: () => {
+            if (!isControlled) setActive(item.id);
+            else onActiveChangeRef.current?.(item.id);
+          },
+          children: item.label
+        }
+      ) }, item.id)) })
+    ] });
+  }
+);
+AnchorNav.displayName = "AnchorNav";
+export {
+  AnchorNav
+};

package/components/AppLayout/AppLayout.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { AppSidebar } from "../AppSidebar/AppSidebar.js";

package/components/AppSidebar/AppSidebar.css

@@ -166,12 +166,17 @@
   cursor: pointer;
   overflow: hidden;
   text-align: left;
-  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+  /* The row renders as an <a> when the item carries an href. */
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized), margin var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
+/* Inset via margin + reduced padding (12 + 8 = the 20px the label sat at
+   before), so the pill floats off the rail edges while the icon and label
+   keep their exact x-positions against the category labels above. */
 .ds-app-sidebar--expanded .ds-app-sidebar__btn {
-  width: 100%;
-  padding: var(--padding-sm) var(--padding-lg);
+  margin: 0 var(--padding-sm-md);
+  padding: var(--padding-sm);
   justify-content: space-between;
 }
 
@@ -282,6 +287,9 @@
   align-items: center;
   gap: 8px;
   height: 40px;
+  /* The same edge inset the parent pills get; sub-items only render while
+     the rail is expanded, so this needs no state selector. */
+  margin-right: var(--padding-sm-md);
   padding: var(--padding-sm);
   border-radius: var(--radius-full);
   background: transparent;
@@ -292,6 +300,8 @@
   text-align: left;
   overflow: hidden;
   white-space: nowrap;
+  /* The row renders as an <a> when the sub-item carries an href. */
+  text-decoration: none;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 

package/components/AppSidebar/AppSidebar.d.ts

@@ -4,8 +4,10 @@ export interface AppSidebarSubItem {
     key: string;
     /** Display label */
     label: string;
-    /** Click handler */
+    /** Click handler — also fires on a link sub-item, so a consumer can route client-side */
     onClick?: () => void;
+    /** Renders the sub-item as a real link to this URL instead of a button */
+    href?: string;
 }
 export interface AppSidebarItem {
     /** Unique key for this item */
@@ -14,8 +16,10 @@ export interface AppSidebarItem {
     icon: string;
     /** Display label (shown when expanded) */
     label: string;
-    /** Click handler */
+    /** Click handler — also fires on a link item, so a consumer can route client-side */
     onClick?: () => void;
+    /** Renders the item as a real link to this URL instead of a button. Ignored when the item has children, whose row is the accordion toggle */
+    href?: string;
     /** Sub-items — turns this into an accordion */
     children?: AppSidebarSubItem[];
 }

package/components/AppSidebar/AppSidebar.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
 import "./AppSidebar.css";
 import "../../fonts/material-symbols.css";
@@ -186,14 +187,43 @@ const AppSidebar = ({
           const hasChildren = item.children && item.children.length > 0;
           const isOpen = openKeys.has(item.key);
           const isActive = activeKey === item.key;
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
+          const isLink = Boolean(item.href) && !hasChildren;
+          const itemClasses = [
+            `${baseClass}__btn`,
+            isActive ? `${baseClass}__btn--active` : ""
+          ].filter(Boolean).join(" ");
+          const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
+            ] }),
+            hasChildren && /* @__PURE__ */ jsx(
+              "span",
               {
                 className: [
-                  `${baseClass}__btn`,
-                  isActive ? `${baseClass}__btn--active` : ""
+                  `${baseClass}__btn-chevron material-symbols-rounded`,
+                  isOpen ? `${baseClass}__btn-chevron--open` : ""
                 ].filter(Boolean).join(" "),
+                children: "chevron_right"
+              }
+            )
+          ] });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            isLink ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                className: itemClasses,
+                href: item.href,
+                onClick: () => item.onClick?.(),
+                "aria-current": isActive ? "page" : void 0,
+                title: !isExpanded ? item.label : void 0,
+                children: itemContent
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: itemClasses,
                 onClick: () => {
                   if (hasChildren && isExpanded) {
                     toggleAccordion(item.key);
@@ -201,23 +231,9 @@ const AppSidebar = ({
                   item.onClick?.();
                 },
                 "aria-expanded": hasChildren ? isOpen : void 0,
+                "aria-current": isActive ? "page" : void 0,
                 title: !isExpanded ? item.label : void 0,
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
-                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon material-symbols-rounded`, children: item.icon }),
-                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
-                  ] }),
-                  hasChildren && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: [
-                        `${baseClass}__btn-chevron material-symbols-rounded`,
-                        isOpen ? `${baseClass}__btn-chevron--open` : ""
-                      ].filter(Boolean).join(" "),
-                      children: "chevron_right"
-                    }
-                  )
-                ]
+                children: itemContent
               }
             ),
             hasChildren && /* @__PURE__ */ jsx(
@@ -227,20 +243,36 @@ const AppSidebar = ({
                   `${baseClass}__sub-items`,
                   isOpen && isExpanded ? `${baseClass}__sub-items--open` : ""
                 ].filter(Boolean).join(" "),
-                children: item.children.map((sub) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
-                  /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      className: [
-                        `${baseClass}__sub-btn`,
-                        activeSubKey === sub.key ? `${baseClass}__sub-btn--active` : ""
-                      ].filter(Boolean).join(" "),
-                      onClick: sub.onClick,
-                      children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label })
-                    }
-                  )
-                ] }, sub.key))
+                children: item.children.map((sub) => {
+                  const subActive = activeSubKey === sub.key;
+                  const subClasses = [
+                    `${baseClass}__sub-btn`,
+                    subActive ? `${baseClass}__sub-btn--active` : ""
+                  ].filter(Boolean).join(" ");
+                  const subLabel = /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label });
+                  return /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
+                    /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
+                    sub.href ? /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        className: subClasses,
+                        href: sub.href,
+                        onClick: sub.onClick,
+                        "aria-current": subActive ? "page" : void 0,
+                        children: subLabel
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: subClasses,
+                        onClick: sub.onClick,
+                        "aria-current": subActive ? "page" : void 0,
+                        children: subLabel
+                      }
+                    )
+                  ] }, sub.key);
+                })
               }
             )
           ] }, item.key);

package/components/Avatar/Avatar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import "./Avatar.css";

package/components/Button/Button.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Spinner } from "../Spinner/Spinner.js";

package/components/Card/Card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
 import "./Card.css";

package/components/Carousel/Carousel.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./Carousel.css";

package/components/Chart/AreaChart.js

@@ -32,7 +32,7 @@ const AreaChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),

package/components/Chart/BarChart.js

@@ -37,7 +37,7 @@ const BarChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#118AB2");
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");

package/components/Chart/LineChart.js

@@ -31,7 +31,7 @@ const LineChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),

package/components/Chart/PieChart.js

@@ -4,11 +4,11 @@ import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend
 import "./Chart.css";
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/Chart/RadarChart.js

@@ -31,7 +31,7 @@ const RadarChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),

package/components/Chart/RadialChart.js

@@ -4,11 +4,11 @@ import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip
 import "./Chart.css";
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/Chart/StackedBarChart.js

@@ -8,11 +8,11 @@ function getCSSVar(name, fallback) {
 }
 function getDefaultColors() {
   if (typeof window === "undefined") {
-    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
   }
   const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
   return [
-    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-action-primary-bg", "#0E6E8F"),
     get("--color-core-accent-mint", "#06D6A0"),
     get("--color-core-accent-gold", "#FFD166"),
     get("--color-core-accent-coral", "#EF476F"),

package/components/ChatThread/ChatThread.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
 import "./ChatThread.css";

package/components/Checkbox/Checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Checkbox.css";

package/components/CodeBlock/CodeBlock.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useId } from "react";
 import "./CodeBlock.css";