@robr0/design-system 0.14.0 → 0.16.0

package/components/SourceTrail/SourceTrail.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export type SourceTrailStatus = 'pending' | 'active' | 'done';
+/** One source the agent opened while answering. */
+export interface SourceTrailItem {
+    /** The source name, passed through to the row's SourceChip. */
+    title: string;
+    /** Optional link to the source — the chip renders as an anchor. */
+    href?: string;
+    /** Leading icon for the chip — a Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Where the visit has got to. Drives the row's indicator; defaults to done. */
+    status?: SourceTrailStatus;
+    /** Supporting line, e.g. what the source contributed to the answer. */
+    detail?: string;
+}
+/** Props owned by SourceTrail itself — everything else falls through to the root element. */
+type SourceTrailOwnProps = {
+    /** The sources, in the order the agent opened them. */
+    items: SourceTrailItem[];
+    /**
+     * Header text. Left unset, it is computed from the items —
+     * "Reading 3 sources" while any is still pending or active,
+     * "Read 3 sources" once every visit has settled.
+     */
+    title?: string;
+    /** Still researching: newly appended rows animate in. */
+    streaming?: boolean;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceTrailProps extends SourceTrailOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SourceTrailOwnProps> {
+}
+/**
+ * SourceTrail is the research trail under an agent's answer: the sources it
+ * opened, in order, each with a status and an optional note on what it
+ * contributed. SourceChip is the atom; this is the list — a count header
+ * with a disclosure, so a long trail collapses to one line.
+ *
+ * While `streaming`, appended rows animate in (pure CSS, so the global
+ * reduced-motion guard covers it) and the active row carries a spinner.
+ */
+export declare const SourceTrail: React.ForwardRefExoticComponent<SourceTrailProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/SourceTrail/SourceTrail.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { SourceChip } from "../SourceChip/SourceChip.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./SourceTrail.css";
+import "../../fonts/material-symbols.css";
+const STATUS_ICONS = {
+  pending: "circle",
+  done: "check_circle"
+};
+const STATUS_TEXT = {
+  pending: "Not opened yet",
+  active: "Reading now",
+  done: "Read"
+};
+const SourceTrail = React.forwardRef(
+  ({
+    items,
+    title,
+    streaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-source-trail";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const unsettled = items.some(
+      (item) => item.status === "pending" || item.status === "active"
+    );
+    const count = items.length;
+    const heading = title ?? (unsettled || streaming ? `Reading ${count} source${count === 1 ? "" : "s"}` : `Read ${count} source${count === 1 ? "" : "s"}`);
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: unsettled || streaming ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "travel_explore" }) }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__heading`, children: heading }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: items.map((item, index) => {
+            const status = item.status ?? "done";
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: `${baseClass}__row ${baseClass}__row--${status}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__row-indicator`, "aria-hidden": "true", children: status === "active" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+                  /* @__PURE__ */ jsx(
+                    SourceChip,
+                    {
+                      title: item.title,
+                      href: item.href,
+                      icon: item.icon,
+                      target: item.href ? "_blank" : void 0,
+                      rel: item.href ? "noopener noreferrer" : void 0
+                    }
+                  ),
+                  item.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: item.detail }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: STATUS_TEXT[status] })
+                ]
+              },
+              `${item.title}-${index}`
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+SourceTrail.displayName = "SourceTrail";
+export {
+  SourceTrail
+};

package/components/Sparkline/Sparkline.css

@@ -17,20 +17,44 @@
 
 /* Parts */
 
+/* The line draws itself on mount, the way the recharts lines do: the path is
+   normalised to 100 dash units (pathLength on the SVG side), and the offset
+   retreats from fully hidden to zero. The fill and end dot fade in behind
+   and after it. All durations are tokens, so reduced motion collapses the
+   whole sequence to the finished state for free. */
+
 .ds-sparkline__line {
   fill: none;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
+  stroke-dasharray: 100;
+  animation: ds-sparkline-draw var(--motion-duration-slower) var(--motion-ease-emphasized);
 }
 
 .ds-sparkline__fill {
   fill: currentColor;
   opacity: 0.15;
+  animation: ds-sparkline-fade var(--motion-duration-slower) var(--motion-ease-standard);
 }
 
 .ds-sparkline__dot {
   fill: currentColor;
+  /* Waits out the draw, then pops in where the line ends. */
+  animation: ds-sparkline-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    var(--motion-duration-slower) backwards;
+}
+
+@keyframes ds-sparkline-draw {
+  from {
+    stroke-dashoffset: 100;
+  }
+}
+
+@keyframes ds-sparkline-fade {
+  from {
+    opacity: 0;
+  }
 }
 
 /* Tones */
@@ -40,11 +64,11 @@
 }
 
 .ds-sparkline--positive {
-  color: var(--color-status-positive-text);
+  color: var(--color-trend-up);
 }
 
 .ds-sparkline--negative {
-  color: var(--color-status-error-text);
+  color: var(--color-trend-down);
 }
 
 .ds-sparkline--neutral {

package/components/Sparkline/Sparkline.js

@@ -92,7 +92,8 @@ const Sparkline = React.forwardRef(
             {
               className: `${baseClass}__line`,
               d: linePath,
-              strokeWidth
+              strokeWidth,
+              pathLength: 100
             }
           ),
           showDot && lastPoint && /* @__PURE__ */ jsx(

package/components/Spinner/Spinner.css

@@ -39,7 +39,7 @@
 }
 
 .ds-spinner__track {
-  stroke: var(--color-bg-container-secondary);
+  stroke: var(--color-bg-container-tertiary);
 }
 
 .ds-spinner__arc {

package/components/SplitButton/SplitButton.d.ts

@@ -10,7 +10,7 @@ type SplitButtonOwnProps = {
     /** Menu entries for the alternative actions */
     items: DropdownMenuEntry[];
     /** Visual treatment, shared by both segments */
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'neutral';
     /** Component size */
     size?: 'default' | 'compact';
     /** Disables both segments */

package/components/SplitButton/SplitButton.js

@@ -49,6 +49,7 @@ const SplitButton = React.forwardRef(
             {
               className: `${baseClass}__trigger`,
               icon: "keyboard_arrow_down",
+              tooltip: false,
               ariaLabel: menuLabel,
               variant,
               size,

package/components/TimePicker/TimePicker.js

@@ -101,9 +101,10 @@ const TimePicker = React.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isOpen) return;
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [handleClickOutside]);
+    }, [isOpen, handleClickOutside]);
     const handleKeyDown = (e) => {
       if (disabled) return;
       switch (e.key) {

package/components/ToggleGroup/ToggleGroup.css

@@ -62,6 +62,23 @@
   color: var(--color-action-primary-text);
 }
 
+/* ============================================
+   NEUTRAL VARIANT
+   Active items fill grey instead of the action
+   teal — for sets where the selection should
+   not carry the action colour's weight.
+   ============================================ */
+
+.ds-toggle-group--neutral .ds-toggle-group__item--active {
+  background-color: var(--color-action-neutral-bg);
+  color: var(--color-action-neutral-text);
+}
+
+.ds-toggle-group--neutral .ds-toggle-group__item--active:hover {
+  background-color: var(--color-action-neutral-bg-hover);
+  color: var(--color-action-neutral-text);
+}
+
 /* ============================================
    COMPACT
    ============================================ */

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -17,6 +17,8 @@ type ToggleGroupOwnProps = {
     multiple?: boolean;
     /** Component size */
     size?: 'default' | 'compact';
+    /** Visual treatment of active items — teal by default, `neutral` fills them grey */
+    variant?: 'primary' | 'neutral';
     /** Whether the whole group is disabled */
     disabled?: boolean;
     /** Called with the next selection — a string when single, an array when `multiple` */

package/components/ToggleGroup/ToggleGroup.js

@@ -8,6 +8,7 @@ const ToggleGroup = React.forwardRef(
     value = [],
     multiple = false,
     size = "default",
+    variant = "primary",
     disabled = false,
     onValueChange,
     onChange,
@@ -19,6 +20,7 @@ const ToggleGroup = React.forwardRef(
     const classes = [
       baseClass,
       `${baseClass}--${size}`,
+      `${baseClass}--${variant}`,
       disabled ? `${baseClass}--disabled` : "",
       className
     ].filter(Boolean).join(" ");

package/components/ToolCall/ToolCall.css

@@ -13,7 +13,11 @@
    ============================================ */
 
 .ds-tool-call {
+  /* Two colour channels per status: -text for the status word (tuned for
+     text contrast) and -icon for the indicator glyph, which needs a hue
+     that survives a plain surface — see the status token comment. */
   --ds-tool-call-color: var(--color-text-secondary);
+  --ds-tool-call-icon-color: var(--color-icon-secondary);
 
   display: flex;
   flex-direction: column;
@@ -40,6 +44,9 @@
   padding: var(--padding-sm) var(--padding-lg);
   background: none;
   border: none;
+  /* Buttons default to the UA's buttontext, not the inherited colour, so
+     anything in the header that inherits would read black in both themes. */
+  color: var(--color-text-primary);
   text-align: left;
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
@@ -68,7 +75,7 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  color: var(--ds-tool-call-color);
+  color: var(--ds-tool-call-icon-color);
 }
 
 .ds-tool-call__indicator .material-symbols-rounded {
@@ -147,18 +154,22 @@
 
 .ds-tool-call--pending {
   --ds-tool-call-color: var(--color-status-warning-text);
+  --ds-tool-call-icon-color: var(--color-status-warning-icon);
 }
 
 .ds-tool-call--running {
   --ds-tool-call-color: var(--color-status-info-text);
+  --ds-tool-call-icon-color: var(--color-status-info-icon);
 }
 
 .ds-tool-call--success {
   --ds-tool-call-color: var(--color-status-positive-text);
+  --ds-tool-call-icon-color: var(--color-status-positive-icon);
 }
 
 .ds-tool-call--error {
   --ds-tool-call-color: var(--color-status-error-text);
+  --ds-tool-call-icon-color: var(--color-status-error-icon);
 }
 
 /* ============================================
@@ -215,7 +226,9 @@
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would
    otherwise override inheritance and detach the icon from the state
-   colours this component sets on its parents. */
-.ds-tool-call .material-symbols-rounded {
+   colours this component sets on its parents. The chevron is excluded —
+   it is the one icon that carries its own colour rule, which this
+   higher-specificity rule would otherwise silently override. */
+.ds-tool-call .material-symbols-rounded:not(.ds-tool-call__chevron) {
   color: inherit;
 }

package/components/Tooltip/Tooltip.css

@@ -17,8 +17,14 @@
   z-index: 50;
   padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
   border-radius: var(--radius-xs); /* 4px */
-  background-color: var(--color-bg-container-inverse);
-  color: var(--color-text-on-inverse);
+  /* The floating surface, same recipe as Popover: page background (the
+     container fill is semi-transparent), hairline border, floating shadow.
+     Same-polarity in both themes — light bubble on light, dark on dark —
+     softer than the old inverse fill. */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  background-color: var(--color-bg-page-primary);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-floating);
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-paragraph-sm-weight);
@@ -85,38 +91,49 @@
    ARROW
    ============================================ */
 
+/* The arrow is a rotated square in the panel's fill. It overlaps the panel
+   by a pixel more than before so its opaque fill covers the panel border
+   behind it, and draws the hairline itself on its two outward edges only. */
 .ds-tooltip__arrow {
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--color-bg-container-inverse);
+  background-color: var(--color-bg-page-primary);
   transform: rotate(45deg);
 }
 
 /* Arrow — top position (arrow points down) */
 .ds-tooltip__panel--top .ds-tooltip__arrow {
-  bottom: -4px;
+  bottom: -5px;
   left: 50%;
   margin-left: -4px;
+  border-right: var(--border-xs) solid var(--color-bg-container-border);
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — bottom position (arrow points up) */
 .ds-tooltip__panel--bottom .ds-tooltip__arrow {
-  top: -4px;
+  top: -5px;
   left: 50%;
   margin-left: -4px;
+  border-top: var(--border-xs) solid var(--color-bg-container-border);
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — left position (arrow points right) */
 .ds-tooltip__panel--left .ds-tooltip__arrow {
-  right: -4px;
+  right: -5px;
   top: 50%;
   margin-top: -4px;
+  border-top: var(--border-xs) solid var(--color-bg-container-border);
+  border-right: var(--border-xs) solid var(--color-bg-container-border);
 }
 
 /* Arrow — right position (arrow points left) */
 .ds-tooltip__panel--right .ds-tooltip__arrow {
-  left: -4px;
+  left: -5px;
   top: 50%;
   margin-top: -4px;
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
 }

package/components/Tooltip/Tooltip.d.ts

@@ -16,6 +16,7 @@ export interface TooltipProps {
 /**
  * Tooltip component for contextual text labels.
  * Appears on hover or focus with a short delay.
- * Uses inverted colours (dark background in light theme).
+ * Rides the system's floating surface — page background, hairline border,
+ * floating shadow — so the bubble stays light in light theme and dark in dark.
  */
 export declare const Tooltip: ({ children, content, position, showDelay, hideDelay, className, }: TooltipProps) => import("react").JSX.Element;

package/components/Tooltip/Tooltip.js

@@ -24,6 +24,12 @@ const Tooltip = ({
     clearTimeout(showTimeoutRef.current);
     hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
   };
+  useEffect(() => {
+    return () => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
   useEffect(() => {
     if (!visible) return;
     const onKeyDown = (e) => {

package/components/UsageCard/UsageCard.css

@@ -0,0 +1,30 @@
+/* ============================================
+   USAGE CARD COMPONENT
+   An agent's budgets at a glance — meter rows
+   with reset captions, in the chart card chrome
+   ============================================ */
+
+/* Base — the card chrome itself comes from ds-chart */
+
+.ds-usage-card__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-usage-card__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+}
+
+/* Reset caption — sits under the bar's trailing edge */
+
+.ds-usage-card__reset {
+  align-self: flex-end;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+}

package/components/UsageCard/UsageCard.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+/** One budgeted quantity in the card — a meter row with an optional reset caption. */
+export interface UsageItem {
+    /** What is being budgeted, e.g. the context window or a weekly limit */
+    label: string;
+    /** Current level */
+    value: number;
+    /** Upper bound of the budget; defaults to 100 */
+    max?: number;
+    /** Readout override replacing the default percentage, e.g. a token count */
+    valueText?: string;
+    /** Caption under the bar's trailing edge, e.g. when the limit resets */
+    resetLabel?: string;
+    /** Status override; left unset, the fill recolours through the card's thresholds */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+}
+/** Props owned by UsageCard itself — everything else falls through to the root node. */
+type UsageCardOwnProps = {
+    /** The budgets to show, one meter row each */
+    items: UsageItem[];
+    /** Card title in the shared chart-chrome header */
+    title?: string;
+    /** Supporting line under the title */
+    subtitle?: string;
+    /** Fractions of an item's max where its fill recolours to warning and then error */
+    thresholds?: {
+        warning?: number;
+        error?: number;
+    };
+    /** Chrome off (no border, padding, or fill) for use inside a panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface UsageCardProps extends UsageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof UsageCardOwnProps> {
+}
+/**
+ * An agent's budgets at a glance — the context window plus any number of
+ * plan or rate limits, one Meter row each, with reset captions. Wears the
+ * chart family's card chrome and takes `bare` for use inside a panel.
+ *
+ * Each fill recolours as its level crosses the card's thresholds (info
+ * until warning, then warning, then error), mirroring Gauge's threshold
+ * idea; an item's own `variant` overrides the derivation. Purely
+ * presentational (no 'use client'), so it renders from a Server Component.
+ */
+export declare const UsageCard: React.ForwardRefExoticComponent<UsageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/UsageCard/UsageCard.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Meter } from "../Meter/Meter.js";
+import "../Chart/Chart.css";
+import "./UsageCard.css";
+const DEFAULT_THRESHOLDS = { warning: 0.8, error: 0.95 };
+const UsageCard = React.forwardRef(
+  ({
+    items,
+    title,
+    subtitle,
+    thresholds,
+    bare = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-usage-card";
+    const limits = { ...DEFAULT_THRESHOLDS, ...thresholds };
+    const variantFor = (item) => {
+      if (item.variant) return item.variant;
+      const max = item.max ?? 100;
+      const fraction = max > 0 ? Math.max(0, Math.min(1, item.value / max)) : 0;
+      if (fraction >= limits.error) return "error";
+      if (fraction >= limits.warning) return "warning";
+      return "info";
+    };
+    const classes = [baseClass, "ds-chart", bare && "ds-chart--bare", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: "ds-chart__header", children: /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-text", children: [
+        title && /* @__PURE__ */ jsx("span", { className: "ds-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("span", { className: "ds-chart__subtitle", children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__item`, children: [
+        /* @__PURE__ */ jsx(
+          Meter,
+          {
+            label: item.label,
+            value: item.value,
+            max: item.max ?? 100,
+            valueText: item.valueText,
+            showValue: true,
+            variant: variantFor(item),
+            size: "compact"
+          }
+        ),
+        item.resetLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__reset`, children: item.resetLabel })
+      ] }, `${item.label}-${index}`)) })
+    ] });
+  }
+);
+UsageCard.displayName = "UsageCard";
+export {
+  UsageCard
+};

package/components/registry.d.ts

@@ -18,8 +18,12 @@
  *               deliberately false so consumers can render them from a React
  *               Server Component.
  *   folder      set only when the implementation lives in a shared folder
- *               rather than one named after the component — the nine chart
- *               components all live in Chart/. Omitted everywhere else.
+ *               rather than one named after the component — the recharts
+ *               wrapper set lives in Chart/. Omitted everywhere else.
+ *   recharts    true when the component's module imports recharts, so it
+ *               exports from the charts barrel rather than the main one
+ *               (recharts is an optional peer). Held to the actual imports
+ *               by scripts/generate-library-barrel.mjs on every build.
  *
  * `docOnlyHelpers` names the internal documentation helpers that are
  * deliberately excluded from the public count.
@@ -47,6 +51,8 @@ export interface ComponentMeta {
     client: boolean;
     /** Folder under src/components when it differs from `name` (shared folders like Chart) */
     folder?: string;
+    /** True when the module imports recharts and so exports from the charts barrel, not the main one */
+    recharts?: boolean;
 }
 export interface ComponentCategoryMeta {
     /** Category id — the value each component's `category` field carries, and the website route segment under /components */