@charcuterie/ui 4.16.0 → 4.17.0

package/README.md

@@ -328,4 +328,4 @@ rename breaks only the rendered page).
    board. `sourceRules.test.ts` now derives the container-declaring components from
    source and fails on this, so the component M4 adds joins the rule automatically.
 
-**`Chart`** provides responsive bar and line plots, negative values, gaps for missing data, and an optional semantic values table. Its escaped SVG renderer lives in `@charcuterie/logic/core` for Preact and image consumers. Apps supply their own series, labels, and semantic colors.
+**`Chart`** provides responsive bar and line plots, negative values, gaps for missing data, and an optional semantic values table. TanStack provides hover/touch tooltips, keyboard navigation, and transitions with reduced-motion support. Set `renderer="portable"` for the lightweight fallback. The `@charcuterie/logic/charts`, `/charts/preact`, and `/charts/react` subpaths expose static and framework-specific surfaces; `/core` remains dependency-free. Apps supply their own series, labels, and semantic colors.

package/dist/Chart/Chart.d.ts

@@ -4,7 +4,10 @@ export type ChartProps = ChartOptions & {
     className?: string;
     /** A text table exposes every value without relying on color, hover, or SVG. */
     isTableVisible?: boolean;
+    /** The portable renderer is an explicit fallback for constrained environments. */
+    renderer?: "tanstack" | "portable";
+    isAnimated?: boolean;
 };
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
-export declare const Chart: ({ className, isTableVisible, ...options }: ChartProps) => ReactNode;
+export declare const Chart: ({ className, isTableVisible, renderer, isAnimated, ...options }: ChartProps) => ReactNode;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,0FAA0F;AAC1F,eAAO,MAAM,KAAK,GAAI,2CAInB,UAAU,KAAG,SAwGf,CAAA"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,0FAA0F;AAC1F,eAAO,MAAM,KAAK,GAAI,iEAMnB,UAAU,KAAG,SA+Hf,CAAA"}

package/dist/Chart/Chart.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // biome-ignore-all lint/security/noDangerouslySetInnerHtml: The portable renderer escapes text and restricts color references; security tests cover this boundary.
+import { ChartPlot } from "@charcuterie/logic/charts/react";
 import { renderChartSvg, } from "@charcuterie/logic/core";
 import { useEffect, useRef, useState, } from "react";
 import { toClassName } from "../toClassName.js";
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
-export const Chart = ({ className, isTableVisible = false, ...options }) => {
+export const Chart = ({ className, isTableVisible = false, renderer = "tanstack", isAnimated = true, ...options }) => {
     const container = useRef(null);
     const [measuredWidth, setMeasuredWidth] = useState(options.width ?? 640);
     useEffect(() => {
@@ -26,12 +27,17 @@ export const Chart = ({ className, isTableVisible = false, ...options }) => {
             cancelAnimationFrame(frame.id);
         };
     }, [options.width]);
-    return (_jsxs("figure", { className: toClassName("min-w-0 text-content-primary", className), children: [_jsx("figcaption", { className: "mb-2 text-sm font-semibold", children: options.title }), _jsx("div", { ref: container, style: { height: options.height ?? 240 }, dangerouslySetInnerHTML: {
-                    __html: renderChartSvg({
-                        ...options,
-                        width: options.width ?? measuredWidth,
-                    }),
-                } }), _jsx("ul", { "aria-label": `${options.title} legend`, className: "mt-2 flex flex-wrap gap-3 text-xs", children: options.series.map((entry, index) => (_jsxs("li", { className: "min-w-0 wrap-anywhere", children: [_jsx("span", { "aria-hidden": "true", style: {
+    return (_jsxs("figure", { style: {
+            "--ts-chart-tooltip-background": "var(--color-surface-raised)",
+            "--ts-chart-tooltip-color": "var(--color-content-primary)",
+            "--ts-chart-tooltip-border": "1px solid var(--color-border-subtle)",
+            "--ts-chart-tooltip-font": "inherit",
+        }, className: toClassName("min-w-0 text-content-primary", className), children: [_jsx("figcaption", { className: "mb-2 text-sm font-semibold", children: options.title }), _jsx("div", { ref: container, style: { height: options.height ?? 240 }, children: renderer === "portable" ? (_jsx("div", { style: { height: "100%" }, dangerouslySetInnerHTML: {
+                        __html: renderChartSvg({
+                            ...options,
+                            width: options.width ?? measuredWidth,
+                        }),
+                    } })) : (_jsx(ChartPlot, { ...options, width: options.width ?? measuredWidth, isAnimated: isAnimated })) }), _jsx("ul", { "aria-label": `${options.title} legend`, className: "mt-2 flex flex-wrap gap-3 text-xs", children: options.series.map((entry, index) => (_jsxs("li", { className: "min-w-0 wrap-anywhere", children: [_jsx("span", { "aria-hidden": "true", style: {
                                 color: entry.color ?? "currentColor",
                                 borderTop: `3px ${index % 3 === 0 ? "solid" : index % 3 === 1 ? "dashed" : "dotted"} currentColor`,
                                 display: "inline-block",

package/dist/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":";AAAA,mKAAmK;AAEnK,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAC3D,OAAO,EAEL,cAAc,GACf,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAGL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAW/C,0FAA0F;AAC1F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,QAAQ,GAAG,UAAU,EACrB,UAAU,GAAG,IAAI,EACjB,GAAG,OAAO,EACC,EAAa,EAAE;IAC1B,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,OAAO,CAAC,KAAK,IAAI,GAAG,CACrB,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;QACjC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;YAAE,OAAM;QACnD,MAAM,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,CAAA;QACvB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YAC9C,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;YAC9B,KAAK,CAAC,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACpC,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;oBAChC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;gBAC3C,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QACzB,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAA;YACrB,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAChC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;IACnB,OAAO,CACL,kBACE,KAAK,EACH;YACE,+BAA+B,EAC7B,6BAA6B;YAC/B,0BAA0B,EACxB,8BAA8B;YAChC,2BAA2B,EACzB,sCAAsC;YACxC,yBAAyB,EAAE,SAAS;SACpB,EAEpB,SAAS,EAAE,WAAW,CACpB,8BAA8B,EAC9B,SAAS,CACV,aAED,qBAAY,SAAS,EAAC,4BAA4B,YAC/C,OAAO,CAAC,KAAK,GACH,EACb,cACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,GAAG,EAAE,YAEvC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CACzB,cACE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,uBAAuB,EAAE;wBACvB,MAAM,EAAE,cAAc,CAAC;4BACrB,GAAG,OAAO;4BACV,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,aAAa;yBACtC,CAAC;qBACH,GACD,CACH,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,OACJ,OAAO,EACX,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,aAAa,EACrC,UAAU,EAAE,UAAU,GACtB,CACH,GACG,EACN,2BACc,GAAG,OAAO,CAAC,KAAK,SAAS,EACrC,SAAS,EAAC,mCAAmC,YAE5C,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,cACE,SAAS,EAAC,uBAAuB,aAGjC,8BACc,MAAM,EAClB,KAAK,EAAE;gCACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,cAAc;gCACpC,SAAS,EAAE,OAAO,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,eAAe;gCAClG,OAAO,EAAE,cAAc;gCACvB,KAAK,EAAE,MAAM;gCACb,WAAW,EAAE,QAAQ;6BACtB,GACD,EACD,KAAK,CAAC,KAAK,KAZP,KAAK,CAAC,EAAE,CAaV,CACN,CAAC,GACC,EACJ,OAAO,CAAC,WAAW,IAAI,CACtB,YAAG,SAAS,EAAC,iCAAiC,YAC3C,OAAO,CAAC,WAAW,GAClB,CACL,EACA,cAAc,IAAI,CACjB,cAAK,SAAS,EAAC,oBAAoB,YACjC,iBAAO,SAAS,EAAC,2BAA2B,aAC1C,mBAAS,SAAS,EAAC,SAAS,aACzB,OAAO,CAAC,KAAK,eACN,EACV,0BACE,yBACE,aAAI,KAAK,EAAC,KAAK,uBAAY,EAC1B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7B,aAAI,KAAK,EAAC,KAAK,YACZ,KAAK,CAAC,KAAK,IADO,KAAK,CAAC,EAAE,CAExB,CACN,CAAC,IACC,GACC,EACR,0BACG,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,yBACE,aAAI,KAAK,EAAC,KAAK,YAAE,KAAK,GAAM,EAC3B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7B,uBACG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,aAAa,IAD9B,KAAK,CAAC,EAAE,CAEZ,CACN,CAAC,KANK,KAAK,CAOT,CACN,CAAC,GACI,IACF,GACJ,CACP,IACM,CACV,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "2.8.0",
+    "@charcuterie/logic": "2.9.0",
     "@charcuterie/tokens": "1.10.2",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",

package/src/Chart/Chart.mdx

@@ -7,10 +7,19 @@ import * as stories from "./Chart.stories.tsx"
 
 Bar and line plots with a zero baseline, negative values, explicit missing samples, and an optional values table. The app owns the data and its meaning. Null means unavailable, never zero. Color is optional; mark titles, labels, and the table preserve the information without it.
 
-The framework-free `renderChartSvg` export from `@charcuterie/logic/core` draws exactly the same plot for Preact kiosks and image renderers. It escapes all producer text and rejects external color references. Use `Chart` in React. Use the portable renderer where a React tree is not available.
+TanStack Charts 0.18.0 is the primary renderer. Hover, tap, or focus the plot and use arrow keys, Home, and End to inspect values. Tooltips show every series for the selected label, including unavailable samples. Positive and negative contributions stack independently with `barLayout="stacked"`; grouped bars remain the default. `isAnimated={false}` disables motion, and changes to `prefers-reduced-motion` are honored while mounted.
+
+Use `renderer="portable"` for the existing lightweight SVG fallback. Its static output and the optional semantic values table remain available. Neither renderer fetches data.
+
+`@charcuterie/logic/charts` exports `createChartDefinition` and a standalone `renderChartSvg` with explicit image dimensions. `@charcuterie/logic/charts/preact` exports native `ChartPlot` without React or a compatibility layer. `@charcuterie/logic/core` keeps the dependency-free portable renderer for constrained consumers. Static consumers supply resolved colors rather than browser CSS variables.
+
+TanStack remains alpha and is pinned exactly. Upgrades require the interaction and export checks recorded in the decision and evaluation.
 
 <Canvas of={stories.Playground} />
 <Canvas of={stories.AllVariants} />
 <Canvas of={stories.AllStates} />
 <Canvas of={stories.Responsive} />
 <Canvas of={stories.Interactive} />
+
+<Canvas of={stories.StackedDaily} />
+<Canvas of={stories.PortableFallback} />

package/src/Chart/Chart.stories.tsx

@@ -78,15 +78,65 @@ export const Interactive: Story = {
   render: (props) => {
     const [isTableVisible, setIsTableVisible] =
       useState(false)
+    const [isUpdated, setIsUpdated] = useState(false)
     return (
       <>
+        <Button onClick={() => setIsUpdated(!isUpdated)}>
+          Update values
+        </Button>
         <Button
           onClick={() => setIsTableVisible(!isTableVisible)}
         >
           {isTableVisible ? "Hide values" : "Show values"}
         </Button>
-        <Chart {...props} isTableVisible={isTableVisible} />
+        <Chart
+          {...props}
+          series={props.series.map((entry) => ({
+            ...entry,
+            values: entry.values.map((value) =>
+              value === null
+                ? null
+                : value + (isUpdated ? 100 : 0),
+            ),
+          }))}
+          isTableVisible={isTableVisible}
+        />
       </>
     )
   },
 }
+
+export const StackedDaily: Story = {
+  args: {
+    barLayout: "stacked",
+    series: [
+      {
+        id: "tasks",
+        label: "Tasks",
+        values: [200, 280, 180, 260, 300],
+        color: "var(--color-intent-accent-solid)",
+      },
+      {
+        id: "bonuses",
+        label: "Bonuses",
+        values: [10, 20, 0, 10, 0],
+        color: "var(--color-intent-success-solid)",
+      },
+      {
+        id: "penalties",
+        label: "Penalties",
+        values: [0, -50, -50, 0, 0],
+        color: "var(--color-intent-danger-solid)",
+      },
+      {
+        id: "reversals",
+        label: "Reversals",
+        values: [0, -10, 0, 0, 0],
+        color: "var(--color-content-muted)",
+      },
+    ],
+  },
+}
+export const PortableFallback: Story = {
+  args: { renderer: "portable" },
+}

package/src/Chart/Chart.test.tsx

@@ -5,7 +5,8 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Chart.stories.tsx"
 
-const { Playground, Interactive } = composeStories(stories)
+const { Playground, Interactive, StackedDaily } =
+  composeStories(stories)
 test("the plot has an accessible name and a named legend", async () => {
   const { canvas } = await mountStory(Playground)
   expectAgentDrivable(canvas, {
@@ -35,3 +36,31 @@ test("the keyboard exposes all values, including missing data, in a real table",
   ).toBeVisible()
   await expect(within(table).getByText("-50")).toBeVisible()
 })
+
+test("keyboard point navigation exposes the day's original category amounts", async () => {
+  const { canvas } = await mountStory(StackedDaily)
+  const plot = expectAgentDrivable(canvas, {
+    role: "img",
+    name: "Daily progress",
+  })
+  plot.focus()
+  await userEvent.keyboard("{Home}")
+  const body = within(document.body)
+  await expect(body.getByRole("status")).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("Tasks"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("200"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("10"),
+  ).toBeVisible()
+  await userEvent.keyboard("{End}")
+  await expect(
+    within(body.getByRole("status")).getByText("Fri"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("300"),
+  ).toBeVisible()
+})

package/src/Chart/Chart.tsx

@@ -1,9 +1,12 @@
 // biome-ignore-all lint/security/noDangerouslySetInnerHtml: The portable renderer escapes text and restricts color references; security tests cover this boundary.
+
+import { ChartPlot } from "@charcuterie/logic/charts/react"
 import {
   type ChartOptions,
   renderChartSvg,
 } from "@charcuterie/logic/core"
 import {
+  type CSSProperties,
   type ReactNode,
   useEffect,
   useRef,
@@ -15,12 +18,17 @@ export type ChartProps = ChartOptions & {
   className?: string
   /** A text table exposes every value without relying on color, hover, or SVG. */
   isTableVisible?: boolean
+  /** The portable renderer is an explicit fallback for constrained environments. */
+  renderer?: "tanstack" | "portable"
+  isAnimated?: boolean
 }
 
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
 export const Chart = ({
   className,
   isTableVisible = false,
+  renderer = "tanstack",
+  isAnimated = true,
   ...options
 }: ChartProps): ReactNode => {
   const container = useRef<HTMLDivElement>(null)
@@ -47,6 +55,17 @@ export const Chart = ({
   }, [options.width])
   return (
     <figure
+      style={
+        {
+          "--ts-chart-tooltip-background":
+            "var(--color-surface-raised)",
+          "--ts-chart-tooltip-color":
+            "var(--color-content-primary)",
+          "--ts-chart-tooltip-border":
+            "1px solid var(--color-border-subtle)",
+          "--ts-chart-tooltip-font": "inherit",
+        } as CSSProperties
+      }
       className={toClassName(
         "min-w-0 text-content-primary",
         className,
@@ -58,13 +77,25 @@ export const Chart = ({
       <div
         ref={container}
         style={{ height: options.height ?? 240 }}
-        dangerouslySetInnerHTML={{
-          __html: renderChartSvg({
-            ...options,
-            width: options.width ?? measuredWidth,
-          }),
-        }}
-      />
+      >
+        {renderer === "portable" ? (
+          <div
+            style={{ height: "100%" }}
+            dangerouslySetInnerHTML={{
+              __html: renderChartSvg({
+                ...options,
+                width: options.width ?? measuredWidth,
+              }),
+            }}
+          />
+        ) : (
+          <ChartPlot
+            {...options}
+            width={options.width ?? measuredWidth}
+            isAnimated={isAnimated}
+          />
+        )}
+      </div>
       <ul
         aria-label={`${options.title} legend`}
         className="mt-2 flex flex-wrap gap-3 text-xs"

package/src/sourceRules.test.ts

@@ -700,6 +700,33 @@ const ENTRY_POINT_RUNTIMES: Record<
     // into `core` — which is why `ColorSchemeApplier` lives in the
     // core rather than beside the hook, so this entry never pulls
     // `react`.
+    "./charts": [
+      "@tanstack/charts",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg",
+    ],
+    "./charts/preact": [
+      "@tanstack/charts",
+      "@tanstack/charts/adapter/renderer",
+      "@tanstack/charts/motion",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg/renderer",
+      "@tanstack/charts/tooltip",
+      "preact",
+      "preact/hooks",
+    ],
+    "./charts/react": [
+      "@tanstack/charts",
+      "@tanstack/charts/motion",
+      "@tanstack/charts/react/core",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg/renderer",
+      "@tanstack/charts/tooltip",
+      "react",
+    ],
     "./browser": [],
     "./core": [],
     "./jotai": ["jotai"],
@@ -733,6 +760,7 @@ const ENTRY_POINT_RUNTIMES: Record<
       // browser, and it does so through this subpath so the coupling
       // is named rather than smuggled in through the main entry.
       "@charcuterie/logic/browser",
+      "@charcuterie/logic/charts/react",
       "@charcuterie/logic/core",
       "@charcuterie/tokens",
       "@floating-ui/react",