basalt-ui 1.27.0 → 1.28.0

package/dist/agent-chat/thread-feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-feed.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAShD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC;uGACmG;IACnG,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IACxE;;;uBAGmB;IACnB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAA;CACxD,CAAA;AAgCD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,MAAM,EACN,SAAS,GACV,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAkE/B"}
+{"version":3,"file":"thread-feed.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAShD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC;uGACmG;IACnG,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IACxE;;;uBAGmB;IACnB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAA;CACxD,CAAA;AAgCD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAmE/B"}

package/dist/agent-chat/thread-feed.js

@@ -3,6 +3,8 @@ import { Box, ScrollArea, Stack } from "@mantine/core";
 import { useReducedMotion } from "@mantine/hooks";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { MOTION_SPRING } from "../motion/index.js";
 import { ThreadFeedRow } from "./thread-feed-row.js";
 import { ThreadOutcomeCard } from "./thread-outcome-card.js";
@@ -37,8 +39,11 @@ function ThreadFeed({
   onSelect,
   variant = "outcome",
   onSend,
-  renderRow
+  renderRow,
+  className,
+  style
 }) {
+  assertRequiredProps("ThreadFeed", { threads }, ["threads"]);
   const reduceMotion = useReducedMotion();
   const [collapsedId, setCollapsedId] = useState(null);
   useEffect(() => {
@@ -55,9 +60,9 @@ function ThreadFeed({
   }
   const rowFor = (thread) => renderRow !== void 0 ? renderRow(thread) : defaultRow(thread, variant, activeId, collapsedId, handleInlineToggle, onSelect, onSend);
   if (reduceMotion) {
-    return /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: threads.map((thread) => /* @__PURE__ */ jsx(Box, { children: rowFor(thread) }, thread.id)) }) });
+    return /* @__PURE__ */ jsx(ScrollArea, { className: cx(className), style: { height: "100%", ...style }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: threads.map((thread) => /* @__PURE__ */ jsx(Box, { children: rowFor(thread) }, thread.id)) }) });
   }
-  return /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: threads.map((thread) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cx(className), style: { height: "100%", ...style }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: threads.map((thread) => /* @__PURE__ */ jsx(
     motion.div,
     {
       layout: true,

package/dist/agent-chat/thread-message.d.ts

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import type { AgentPartRenderers, ChatMessage, ForeignPart, PartRenderer, PartRenderers, StreamStatus, TranscriptPart } from '../agent/index.js';
+import type { BasaltProps } from '../common/props.js';
 import type { MessageAffordances } from './message-affordances.js';
 import type { VirtualizeOptions, VirtualizeProps } from './virtualize.js';
 /**
@@ -34,7 +35,7 @@ type TranscriptRow = {
     readonly key: string;
     readonly node: JSX.Element;
 };
-type VirtualizedTranscriptProps = {
+type VirtualizedTranscriptProps = BasaltProps & {
     readonly rows: readonly TranscriptRow[];
     readonly height: number | string;
     readonly overscan: number;
@@ -52,7 +53,7 @@ type VirtualizedTranscriptProps = {
  * settle a genuine unmount/remount of every rendered row, re-firing each row's effects once and
  * risking hitting a message mid-stream during the resolve window.
  */
-declare function NonVirtualizedRows({ rows, height }: VirtualizedTranscriptProps): JSX.Element;
+declare function NonVirtualizedRows({ rows, height, className, style, }: VirtualizedTranscriptProps): JSX.Element;
 /** Test-only escape hatch (mirrors `messageBlockRenderCounter` above) — proves the peer-absent
  * degrade target itself renders every row without windowing and without throwing, without having
  * to fight `React.lazy`'s permanent once-per-module-instance resolution cache to simulate the
@@ -180,7 +181,7 @@ export type InitialScrollState = {
  * tracks) and is exactly what the verification/retry loop above consults instead.
  */
 export declare function applyInitialScroll(state: InitialScrollState, initialScroll: NonNullable<VirtualizeOptions['initialScroll']>, rowCount: number, getContainerHeight: () => number, scrollToEnd: () => void, isAtEnd: () => boolean): void;
-type ThreadTranscriptBase = {
+type ThreadTranscriptBase = BasaltProps & {
     /** Settled messages for the thread, oldest first. */
     readonly messages: readonly ChatMessage<TranscriptPart>[];
     /** The live (in-flight) assistant turn's parts, when a run is streaming for this thread. */

package/dist/agent-chat/thread-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-message.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-message.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-message.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-message.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAEV,kBAAkB,EAClB,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EAGZ,cAAc,EACf,MAAM,UAAU,CAAA;AAGjB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAMlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAI/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAmGtE;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,kBAAkB,CAM3D,CAAA;AAiPD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;CAAe,CAAA;AAqKrD;;;;;;;qGAOqG;AACrG,eAAO,MAAM,2BAA2B,IAAI,CAAA;AAE5C,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;CAC3B,CAAA;AAED,KAAK,0BAA0B,GAAG,WAAW,GAAG;IAC9C,QAAQ,CAAC,IAAI,EAAE,SAAS,aAAa,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;CACxE,CAAA;AAED;;;;;;;;;;GAUG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAW1C;AAED;;;;yFAIyF;AACzF,eAAO,MAAM,0BAA0B,2BAAqB,CAAA;AAE5D;;;;;;;;;;;;GAYG;AACH,KAAK,oBAAoB,CAAC,YAAY,SAAS,OAAO,IAAI;IACxD,QAAQ,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,CAAA;IACzD,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC5C,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;QAC/C,QAAQ,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;KACjD,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,SAAS,OAAO,EACpE,IAAI,EAAE,oBAAoB,CAAC,YAAY,CAAC,EACxC,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,GACX,MAAM,CAOR;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,0BAA0B,CACxC,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,EAC9D,QAAQ,EAAE,MAAM,EAChB,eAAe,EAAE,MAAM,GACtB,QAAQ,GAAG,WAAW,GAAG,YAAY,CAKvC;AAED;;;;;;;;qBAQqB;AACrB,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,kBAAkB,EACzB,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,EAC9D,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,MAAM,MAAM,EAChC,WAAW,EAAE,MAAM,IAAI,EACvB,OAAO,EAAE,MAAM,OAAO,GACrB,IAAI,CAwBN;AAwKD,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,CAAC,cAAc,CAAC,EAAE,CAAA;IACzD,4FAA4F;IAC5F,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAA;IAClC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAA;IAClC;iGAC6F;IAC7F,QAAQ,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrD;;0CAEsC;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC;;uBAEmB;IACnB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG,eAAe,CAAA;AA2C1E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CA6I1E"}

package/dist/agent-chat/thread-message.js

@@ -13,6 +13,8 @@ import {
 import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
 import { Fragment, lazy, memo, Suspense, useLayoutEffect, useMemo, useRef } from "react";
 import { coalesceParts, narrowAgentPart, PartList } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { Markdown } from "../content/markdown.js";
 import { CopyAction } from "../content/copy-action.js";
 import { VX } from "../tokens/index.js";
@@ -20,6 +22,7 @@ import { DEFAULT_AFFORDANCES } from "./message-affordances.js";
 import { formatRelativeTime } from "./relative-time.js";
 import { ToolChip } from "./tool-chip.js";
 import { resolveVirtualize } from "./virtualize.js";
+import { isDev } from "../utils/is-dev.js";
 const MICRO_LABEL_STYLE = {
   fontFamily: "var(--basalt-font-mono)",
   fontSize: VX.text.micro,
@@ -64,7 +67,7 @@ const threadPartRenderers = {
 function UnknownPartChip({ part }) {
   return /* @__PURE__ */ jsx(Box, { style: RAIL_STYLE, children: /* @__PURE__ */ jsx(Text, { style: MICRO_LABEL_STYLE, children: `Unknown part: ${part.type}` }) });
 }
-const DEFAULT_FALLBACK_RENDERER = ({ part }) => process.env["NODE_ENV"] !== "production" ? /* @__PURE__ */ jsx(UnknownPartChip, { part }) : null;
+const DEFAULT_FALLBACK_RENDERER = ({ part }) => isDev() ? /* @__PURE__ */ jsx(UnknownPartChip, { part }) : null;
 function resolveSegments(parts, renderers, fallbackRenderer) {
   const segments = [];
   let buffer = [];
@@ -235,15 +238,21 @@ function areMessageBlockPropsEqual(prev, next) {
   return prev.message === next.message && prev.streaming === next.streaming && prev.renderers === next.renderers && prev.fallbackRenderer === next.fallbackRenderer && prev.grouped === next.grouped && prev.affordances === next.affordances && prev.isLastAssistant === next.isLastAssistant;
 }
 const MessageBlock = memo(MessageBlockImpl, areMessageBlockPropsEqual);
+MessageBlock.displayName = "MessageBlock";
 const DEFAULT_VIRTUALIZE_OVERSCAN = 6;
 const DEFAULT_VIRTUALIZE_ESTIMATE_SIZE = 160;
 const DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD = 64;
 const DEFAULT_VIRTUALIZE_INITIAL_SCROLL = "end";
 const MAX_INITIAL_SCROLL_ATTEMPTS = 5;
-function NonVirtualizedRows({ rows, height }) {
+function NonVirtualizedRows({
+  rows,
+  height,
+  className,
+  style
+}) {
   return (
     // theme-allow raw-scroll-container — degrade target owns its own scroll node, same as the real virtualizer below.
-    /* @__PURE__ */ jsx(Box, { style: { height, overflow: "auto" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) }) })
+    /* @__PURE__ */ jsx(Box, { className: cx(className), style: { height, overflow: "auto", ...style }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) }) })
   );
 }
 const nonVirtualizedRowsFallback = NonVirtualizedRows;
@@ -291,7 +300,9 @@ const LazyVirtualizedRows = lazy(
       height,
       overscan,
       estimateSize,
-      initialScroll
+      initialScroll,
+      className,
+      style
     }) {
       const parentRef = useRef(null);
       const initialScrollStateRef = useRef({
@@ -330,38 +341,61 @@ const LazyVirtualizedRows = lazy(
           () => isContainerAtEnd(parentRef.current, DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD)
         );
       });
-      return (
-        // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
-        /* @__PURE__ */ jsx(Box, { ref: parentRef, style: { height, overflow: "auto" }, children: /* @__PURE__ */ jsx(Box, { style: { height: virtualizer.getTotalSize(), position: "relative" }, children: virtualizer.getVirtualItems().map((virtualItem) => {
-          const row = rows[virtualItem.index];
-          if (row === void 0) return null;
-          return /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: virtualizer.measureElement,
-              "data-index": virtualItem.index,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualItem.start}px)`
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: parentRef,
+          className: cx(className),
+          style: { height, overflow: "auto", ...style },
+          children: /* @__PURE__ */ jsx(Box, { style: { height: virtualizer.getTotalSize(), position: "relative" }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+            const row = rows[virtualItem.index];
+            if (row === void 0) return null;
+            return /* @__PURE__ */ jsx(
+              Box,
+              {
+                ref: virtualizer.measureElement,
+                "data-index": virtualItem.index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualItem.start}px)`
+                },
+                children: row.node
               },
-              children: row.node
-            },
-            row.key
-          );
-        }) }) })
+              row.key
+            );
+          }) })
+        }
       );
     }
     return { default: VirtualizedRowsInner };
   }).catch(() => ({ default: NonVirtualizedRows }))
 );
-function VirtualizeSuspenseFallback({ height }) {
-  return /* @__PURE__ */ jsx(Box, { style: { height, overflow: "auto" } });
+Object.assign(LazyVirtualizedRows, { displayName: "LazyVirtualizedRows" });
+function VirtualizeSuspenseFallback({
+  height,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: cx(className), style: { height, overflow: "auto", ...style } });
 }
 function VirtualizedTranscript(props) {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(VirtualizeSuspenseFallback, { height: props.height }), children: /* @__PURE__ */ jsx(LazyVirtualizedRows, { ...props }) });
+  return /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        VirtualizeSuspenseFallback,
+        {
+          height: props.height,
+          ...props.className !== void 0 && { className: props.className },
+          ...props.style !== void 0 && { style: props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(LazyVirtualizedRows, { ...props })
+    }
+  );
 }
 const EMPTY_RENDERERS = {};
 function useStableCallback(callback) {
@@ -381,8 +415,11 @@ function ThreadTranscript(props) {
     renderers: renderersProp,
     fallbackRenderer = DEFAULT_FALLBACK_RENDERER,
     affordances: affordancesProp,
-    groupConsecutive = true
+    groupConsecutive = true,
+    className,
+    style
   } = props;
+  assertRequiredProps("ThreadTranscript", { messages }, ["messages"]);
   const virtualized = resolveVirtualize(props);
   const renderers = useMemo(() => renderersProp ?? EMPTY_RENDERERS, [renderersProp]);
   const liveMessage = useMemo(() => {
@@ -464,11 +501,13 @@ function ThreadTranscript(props) {
         height: virtualized.height,
         overscan: virtualized.options.overscan ?? DEFAULT_VIRTUALIZE_OVERSCAN,
         estimateSize: virtualized.options.estimateSize ?? DEFAULT_VIRTUALIZE_ESTIMATE_SIZE,
-        initialScroll: virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL
+        initialScroll: virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
       }
     );
   }
-  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) });
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", className: cx(className), ...style !== void 0 && { style }, children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) });
 }
 export {
   MAX_INITIAL_SCROLL_ATTEMPTS,

package/dist/agent-chat/thread-outcome-card.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import type { AgentThread } from '../agent/index.js';
-export type ThreadOutcomeCardProps = {
+import type { BasaltProps } from '../common/props.js';
+export type ThreadOutcomeCardProps = BasaltProps & {
     readonly thread: AgentThread;
     /** Whether this row is the active/open thread — applies a subtle highlight. */
     readonly selected: boolean;
@@ -15,5 +16,5 @@ export type ThreadOutcomeCardProps = {
  * @example
  * <ThreadOutcomeCard thread={thread} selected={false} onSelect={() => select(thread.id)} />
  */
-export declare function ThreadOutcomeCard({ thread, selected, onSelect, }: ThreadOutcomeCardProps): JSX.Element;
+export declare function ThreadOutcomeCard({ thread, selected, onSelect, className, style, }: ThreadOutcomeCardProps): JSX.Element;
 //# sourceMappingURL=thread-outcome-card.d.ts.map

package/dist/agent-chat/thread-outcome-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-outcome-card.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-outcome-card.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAiGzD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA+BtC"}
+{"version":3,"file":"thread-outcome-card.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-outcome-card.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAGzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAiGlD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAkCtC"}

package/dist/agent-chat/thread-outcome-card.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Group, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
+import { assertRequiredProps } from "../common/validate.js";
+import { cx } from "../common/props.js";
 import { alpha, VX } from "../tokens/index.js";
 import { formatRelativeTime } from "./relative-time.js";
 const STATUS_BADGE = {
@@ -77,8 +79,11 @@ function OutcomeBody({ thread }) {
 function ThreadOutcomeCard({
   thread,
   selected,
-  onSelect
+  onSelect,
+  className,
+  style
 }) {
+  assertRequiredProps("ThreadOutcomeCard", { thread }, ["thread"]);
   const { hovered, ref } = useHover();
   const isPreviewing = thread.outcome === null && (thread.status === "pending" || thread.status === "streaming");
   const background = selected ? VX.surface.elevated : hovered ? VX.surface.panelHover : VX.surface.panel;
@@ -88,13 +93,15 @@ function ThreadOutcomeCard({
       ref,
       onClick: onSelect,
       w: "100%",
+      className: cx(className),
       style: {
         display: "block",
         padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
         borderRadius: VX.radiusCard,
         boxShadow: VX.shadowCard,
         backgroundColor: background,
-        transition: "background-color 120ms ease"
+        transition: "background-color 120ms ease",
+        ...style
       },
       children: isPreviewing ? /* @__PURE__ */ jsx(OutcomeSkeleton, {}) : /* @__PURE__ */ jsx(OutcomeBody, { thread })
     }

package/dist/agent-chat/thread-workspace.d.ts

@@ -1,6 +1,11 @@
 import type { JSX, ReactNode } from 'react';
 import type { AgentPart, AgentTransport, OutcomeResolver, ThreadsStore } from '../agent/index.js';
-export type ThreadWorkspaceProps = {
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+/** The four boxes `ThreadWorkspace` paints: `root` is the outermost pane split, `feed` is the
+ * thread-list pane, `composer` is the new-thread composer pinned under the feed, `detail` is the
+ * right-hand (or, below 768px, full-screen) open-thread pane. */
+export type ThreadWorkspaceSlot = 'root' | 'feed' | 'composer' | 'detail';
+export type ThreadWorkspaceProps = BasaltProps & SlotStylesProps<ThreadWorkspaceSlot> & {
     /**
      * The thread-store hook, created ONCE at module scope via `createThreadsStore` and passed in —
      * ThreadWorkspace must not call `createThreadsStore` itself.
@@ -35,5 +40,5 @@ export type ThreadWorkspaceProps = {
  * @example
  * <ThreadWorkspace useThreads={useThreads} transport={transport} resolveOutcome={heuristicOutcome} />
  */
-export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, errorState, }: ThreadWorkspaceProps): JSX.Element;
+export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, errorState, className, style, classNames, }: ThreadWorkspaceProps): JSX.Element;
 //# sourceMappingURL=thread-workspace.d.ts.map

package/dist/agent-chat/thread-workspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAUxF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AA4DD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA8FpC"}
+{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAanE;;iEAEiE;AACjE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzE,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,eAAe,CAAC,mBAAmB,CAAC,GAAG;IACrC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AA4DH;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsHpC"}

package/dist/agent-chat/thread-workspace.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Divider, Flex, Skeleton, Stack, Text } from "@mantine/core";
+import { Box, Divider, Flex, Skeleton, Stack, Text, useMantineTheme } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { useAgentThreadRuns } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { VX } from "../tokens/index.js";
 import { Composer } from "./composer.js";
 import { ThreadDetailPanel } from "./thread-detail-panel.js";
 import { ThreadFeed } from "./thread-feed.js";
-const NARROW_BREAKPOINT = "(max-width: 768px)";
 const DETAIL_PANEL_WIDTH = "clamp(440px, 40%, 520px)";
+const FULL_HEIGHT_STYLE = { height: "100%" };
 function FeedEmptyState() {
   return /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", gap: 4, h: "100%", p: "xl", children: [
     /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", children: "No threads yet" }),
@@ -44,11 +46,16 @@ function ThreadWorkspace({
   resolveOutcome,
   newThreadPlaceholder,
   emptyState,
-  errorState
+  errorState,
+  className,
+  style,
+  classNames
 }) {
+  assertRequiredProps("ThreadWorkspace", { useThreads }, ["useThreads"]);
   const store = useThreads();
   const runs = useAgentThreadRuns({ transport, store, resolveOutcome });
-  const narrow = useMediaQuery(NARROW_BREAKPOINT);
+  const theme = useMantineTheme();
+  const narrow = useMediaQuery(`(max-width: calc(${theme.breakpoints.sm} - 0.00625em))`);
   const threads = store.threads;
   const activeThread = threads.find((thread) => thread.id === store.activeId) ?? null;
   const activeRun = store.activeId !== null ? runs.runs.get(store.activeId) : void 0;
@@ -75,17 +82,27 @@ function ThreadWorkspace({
     if (store.activeId === null) return;
     runs.retry(store.activeId);
   };
-  const feed = /* @__PURE__ */ jsxs(Flex, { direction: "column", h: "100%", style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0 }, children: threads.length === 0 ? store.hydrated ? emptyState ?? /* @__PURE__ */ jsx(FeedEmptyState, {}) : store.error !== void 0 ? errorState ?? /* @__PURE__ */ jsx(FeedErrorState, {}) : /* @__PURE__ */ jsx(FeedHydratingState, {}) : /* @__PURE__ */ jsx(ThreadFeed, { threads, activeId: store.activeId, onSelect: handleSelect }) }),
-    /* @__PURE__ */ jsx(Divider, { color: "var(--vx-divider)" }),
-    /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsx(
-      Composer,
-      {
-        onSubmit: ({ text }) => handleNewThread(text),
-        ...newThreadPlaceholder !== void 0 ? { placeholder: newThreadPlaceholder } : {}
-      }
-    ) })
-  ] });
+  const feed = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      h: "100%",
+      className: cx(classNames?.feed),
+      style: { overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0 }, children: threads.length === 0 ? store.hydrated ? emptyState ?? /* @__PURE__ */ jsx(FeedEmptyState, {}) : store.error !== void 0 ? errorState ?? /* @__PURE__ */ jsx(FeedErrorState, {}) : /* @__PURE__ */ jsx(FeedHydratingState, {}) : /* @__PURE__ */ jsx(ThreadFeed, { threads, activeId: store.activeId, onSelect: handleSelect }) }),
+        /* @__PURE__ */ jsx(Divider, { color: "var(--vx-divider)" }),
+        /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsx(
+          Composer,
+          {
+            onSubmit: ({ text }) => handleNewThread(text),
+            ...newThreadPlaceholder !== void 0 ? { placeholder: newThreadPlaceholder } : {},
+            ...classNames?.composer !== void 0 && { className: classNames.composer }
+          }
+        ) })
+      ]
+    }
+  );
   const detail = /* @__PURE__ */ jsx(
     ThreadDetailPanel,
     {
@@ -95,26 +112,42 @@ function ThreadWorkspace({
       onSend: handleSend,
       onStop: handleStop,
       onRetry: handleRetry,
-      onClose: () => store.select(null)
+      onClose: () => store.select(null),
+      ...classNames?.detail !== void 0 && { className: classNames.detail }
     }
   );
   if (narrow) {
-    return /* @__PURE__ */ jsx(Box, { style: { height: "100%" }, children: store.activeId !== null ? detail : feed });
-  }
-  return /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, gap: "md", children: [
-    /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       Box,
       {
-        style: {
-          flex: 1,
-          minWidth: 0,
-          borderRight: "1px solid var(--vx-divider)"
-        },
-        children: feed
+        className: cx(classNames?.root, className),
+        style: style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE,
+        children: store.activeId !== null ? detail : feed
       }
-    ),
-    /* @__PURE__ */ jsx(Box, { style: { width: DETAIL_PANEL_WIDTH, flexShrink: 0 }, children: detail })
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: cx(classNames?.root, className),
+      style: style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE,
+      gap: "md",
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              borderRight: "1px solid var(--vx-divider)"
+            },
+            children: feed
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { style: { width: DETAIL_PANEL_WIDTH, flexShrink: 0 }, children: detail })
+      ]
+    }
+  );
 }
 export {
   ThreadWorkspace

package/dist/agent-chat/tool-chip.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import type { ToolCallPart } from '../agent/index.js';
-export type ToolChipProps = {
+import type { BasaltProps } from '../common/props.js';
+export type ToolChipProps = BasaltProps & {
     readonly part: ToolCallPart;
     readonly defaultExpanded?: boolean;
     /** Rendered only in 'approval-requested'. Omit both to render a read-only chip. */
@@ -17,5 +18,5 @@ export type ToolChipProps = {
  * @example
  * <ToolChip part={part} />
  */
-export declare function ToolChip({ part, defaultExpanded, onApprove, onDeny, }: ToolChipProps): JSX.Element;
+export declare function ToolChip({ part, defaultExpanded, onApprove, onDeny, className, style, }: ToolChipProps): JSX.Element;
 //# sourceMappingURL=tool-chip.d.ts.map

package/dist/agent-chat/tool-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-chip.d.ts","sourceRoot":"","sources":["../../src/agent-chat/tool-chip.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AA4E5C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAA;IAC3B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,mFAAmF;IACnF,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChE,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,eAAuB,EACvB,SAAS,EACT,MAAM,GACP,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAiG7B"}
+{"version":3,"file":"tool-chip.d.ts","sourceRoot":"","sources":["../../src/agent-chat/tool-chip.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AA6ElD,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAA;IAC3B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,mFAAmF;IACnF,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChE,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,eAAuB,EACvB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAkG7B"}

package/dist/agent-chat/tool-chip.js

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Button, Collapse, Group, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { isToolCallSettled } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { alpha, VX } from "../tokens/index.js";
 const MICRO_LABEL_STYLE = {
   fontFamily: "var(--basalt-font-mono)",
@@ -55,14 +57,17 @@ function ToolChip({
   part,
   defaultExpanded = false,
   onApprove,
-  onDeny
+  onDeny,
+  className,
+  style
 }) {
+  assertRequiredProps("ToolChip", { part }, ["part"]);
   const [expanded, { toggle }] = useDisclosure(defaultExpanded);
   const { label, dotToken } = stateMeta(part);
   const settled = isToolCallSettled(part);
   const input = "input" in part ? part.input : void 0;
   const rawInput = part.state === "output-error" ? part.rawInput : void 0;
-  return /* @__PURE__ */ jsx(Box, { style: RAIL_STYLE, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+  return /* @__PURE__ */ jsx(Box, { className: cx(className), style: style ? { ...RAIL_STYLE, ...style } : RAIL_STYLE, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
     /* @__PURE__ */ jsx(UnstyledButton, { onClick: toggle, children: /* @__PURE__ */ jsxs(Group, { gap: 6, align: "center", wrap: "nowrap", children: [
       /* @__PURE__ */ jsx(
         Box,

package/dist/charts/hooks/useBandPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBandPlot.d.ts","sourceRoot":"","sources":["../../../src/charts/hooks/useBandPlot.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBandPlot.d.ts","sourceRoot":"","sources":["../../../src/charts/hooks/useBandPlot.ts"],"names":[],"mappings":"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"}

package/dist/charts/hooks/useBandPlot.js

@@ -1,9 +1,9 @@
 import { scaleBand } from "@visx/scale";
 import { useCallback, useMemo, useRef } from "react";
-import { VX } from "../../tokens/index.js";
 import { autoMargin } from "../layout/auto-margin.js";
+import { useChartTierMetrics } from "../primitives/chart-tier.js";
 import { maxTextWidth } from "../utils/measure-text.js";
-import { smartTicks } from "../utils/ticks.js";
+import { smartTicks, xLabelPxFor } from "../utils/ticks.js";
 import { useChartCursor } from "./useChartCursor.js";
 const DEFAULT_MIN_BAND_PX = 3;
 const TERMINAL_GUTTER_MAX_FRACTION = { left: 0.14, right: 0.12 };
@@ -29,32 +29,35 @@ function useBandPlot(input) {
     margin: marginOverride,
     tooltip
   } = input;
+  const tier = useChartTierMetrics();
   const hasLeftAxis = leftLabels !== void 0 && leftLabels.length > 0;
   const xLabelsAll = useMemo(() => data.map((d) => formatX(getX(d))), [data, getX, formatX]);
   const margin = useMemo(() => {
     const measured = autoMargin({
       ...leftLabels !== void 0 && { left: leftLabels },
       bottom: xLabelsAll,
+      fontPx: tier.axisFont,
+      floor: tier.margin,
       ...marginOverride !== void 0 && { override: marginOverride }
     });
     if (marginOverride?.left !== void 0 && marginOverride.right !== void 0) return measured;
-    const halfXLabel = Math.ceil(maxTextWidth(xLabelsAll, VX.axisFont) / 2);
+    const halfXLabel = Math.ceil(maxTextWidth(xLabelsAll, tier.axisFont) / 2);
     const left = hasLeftAxis ? measured.left : Math.max(measured.left, halfXLabel);
     return {
       ...measured,
       ...marginOverride?.left === void 0 && {
-        left: hasLeftAxis ? left : capTerminalGutter(left, width, TERMINAL_GUTTER_MAX_FRACTION.left, VX.margin.left)
+        left: hasLeftAxis ? left : capTerminalGutter(left, width, TERMINAL_GUTTER_MAX_FRACTION.left, tier.margin.left)
       },
       ...marginOverride?.right === void 0 && {
         right: capTerminalGutter(
           measured.right,
           width,
           TERMINAL_GUTTER_MAX_FRACTION.right,
-          VX.margin.right
+          tier.margin.right
         )
       }
     };
-  }, [leftLabels, xLabelsAll, marginOverride, hasLeftAxis, width]);
+  }, [leftLabels, xLabelsAll, marginOverride, hasLeftAxis, width, tier.axisFont, tier.margin]);
   const plotWidth = Math.max(width - margin.left - margin.right, 0);
   const minBandPx = fold?.minBandPx ?? DEFAULT_MIN_BAND_PX;
   const merge = fold?.merge;
@@ -82,11 +85,15 @@ function useBandPlot(input) {
     marginLeft: margin.left,
     ...cursorResolution !== void 0 && { resolution: cursorResolution }
   });
+  const xLabelPx = useMemo(
+    () => xLabelPxFor(keys.map(formatX), tier.axisFont),
+    [keys, formatX, tier.axisFont]
+  );
   const tickValues = useMemo(
     () => [
-      ...xTickValues === void 0 ? smartTicks(keys, plotWidth) : xTickValues(keys, plotWidth)
+      ...xTickValues === void 0 ? smartTicks(keys, plotWidth, xLabelPx) : xTickValues(keys, plotWidth)
     ],
-    [keys, plotWidth, xTickValues]
+    [keys, plotWidth, xTickValues, xLabelPx]
   );
   const svgRef = useRef(null);
   const point = cursor.point;