basalt-ui 1.19.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",
@@ -37,7 +37,8 @@
     "llms.txt",
     "AGENTS.md",
     "README.md",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "MIGRATING.md"
   ],
   "type": "module",
   "sideEffects": [
@@ -131,7 +132,7 @@
   },
   "scripts": {
     "build": "tsup && tsc --emitDeclarationOnly --declarationMap && bun scripts/copy-assets.mjs && bun scripts/gen-tokens-css.mjs && bun scripts/fix-esm-extensions.mjs",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p tests/layout/tsconfig.json",
     "test": "cd ../.. && bun test packages/basalt-ui",
     "pack-test": "bash scripts/pack-test.sh",
     "prepack": "bun run build",

package/src/agent/stick-to-bottom.tsx

@@ -39,7 +39,7 @@ type WrapperProps = {
 /** Plain scrollable container rendered when use-stick-to-bottom peer is absent. */
 function PlainContainerFallback({ children, className, style }: WrapperProps): JSX.Element {
   const props: { className?: string; style?: CSSProperties } = {
-    // theme-allow — scroll anchoring needs a real scrollable node it owns, not a ScrollArea.
+    // theme-allow raw-scroll-container — scroll anchoring needs a real scrollable node it owns, not a ScrollArea.
     style: { overflowY: 'auto', ...style },
   }
   if (className !== undefined) props.className = className

package/src/agent-chat/thread-detail-panel.tsx

@@ -135,7 +135,7 @@ export function ThreadDetailPanel({
         <BasaltStickToBottom
           style={{
             height: '100%',
-            // theme-allow — BasaltStickToBottom owns this scroll node (see stick-to-bottom.tsx).
+            // theme-allow raw-scroll-container — BasaltStickToBottom owns this scroll node (see stick-to-bottom.tsx).
             overflowY: 'auto',
             padding: 'var(--vx-space-agent-transcript-inset)',
           }}

package/src/agent-chat/thread-message.tsx

@@ -615,7 +615,7 @@ type VirtualizedTranscriptProps = {
  */
 function NonVirtualizedRows({ rows, height }: VirtualizedTranscriptProps): JSX.Element {
   return (
-    // theme-allow — degrade target owns its own scroll node, same as the real virtualizer below.
+    // theme-allow raw-scroll-container — degrade target owns its own scroll node, same as the real virtualizer below.
     <Box style={{ height, overflow: 'auto' }}>
       <Stack gap="sm">
         {rows.map((row) => (
@@ -895,7 +895,7 @@ const LazyVirtualizedRows = lazy(() =>
         })
 
         return (
-          // theme-allow — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
+          // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
           <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
             <Box style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
               {virtualizer.getVirtualItems().map((virtualItem) => {
@@ -938,7 +938,7 @@ const LazyVirtualizedRows = lazy(() =>
  * flash without paying that cost — it settles state before any row has meaningfully mounted.
  */
 function VirtualizeSuspenseFallback({ height }: { readonly height: number | string }): JSX.Element {
-  // theme-allow — placeholder owns its own scroll node, matching the real virtualizer's shape.
+  // theme-allow raw-scroll-container — placeholder owns its own scroll node, matching the real virtualizer's shape.
   return <Box style={{ height, overflow: 'auto' }} />
 }
 

package/src/agent-chat/tool-chip.tsx

@@ -138,7 +138,7 @@ export function ToolChip({
                 width: 6,
                 height: 6,
                 flexShrink: 0,
-                borderRadius: '50%', // theme-allow: a 6px state dot is a circle, not a surface corner — no radius token expresses it
+                borderRadius: '50%', // theme-allow raw-surface — a 6px state dot is a circle, not a surface corner
                 backgroundColor: dotToken,
               }}
             />

package/src/charts/kinds/Donut.tsx

@@ -208,7 +208,8 @@ function DonutPlot<K extends string = SeriesKey>(props: DonutPlotProps<K>) {
           style={{
             position: 'absolute',
             inset: 0,
-            display: 'flex', // theme-allow: centering over the donut hole — charts/ is Mantine-free, so Center is unavailable here
+            // Centering over the donut hole; charts/ is Mantine-free, so Center is unavailable here.
+            display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             pointerEvents: 'none',

package/src/charts/primitives/ChartLegend.tsx

@@ -158,7 +158,7 @@ function LegendSwatch({ item, idPrefix }: { item: LegendEntry; idPrefix: string
         style={{
           width: 11,
           height: 11,
-          borderRadius: 3, // theme-allow: sub-scale legend-swatch corner, below the 4px radius floor
+          borderRadius: 3, // theme-allow raw-surface — sub-scale legend-swatch corner, below the 4px radius floor
           backgroundColor: item.color,
           opacity: item.fillOpacity ?? 0.7,
           flexShrink: 0,
@@ -211,7 +211,7 @@ function LegendChildSwatch({ item }: { item: LegendEntry }) {
         style={{
           width: 10,
           height: 10,
-          borderRadius: 2, // theme-allow: sub-scale legend-swatch corner, below the 4px radius floor
+          borderRadius: 2, // theme-allow raw-surface — sub-scale legend-swatch corner, below the 4px radius floor
           backgroundColor: item.color,
           opacity: item.fillOpacity ?? 0.7,
           flexShrink: 0,

package/src/charts/primitives/ChartTooltip.tsx

@@ -121,7 +121,7 @@ export function TooltipRow({
             style={{
               width: 8,
               height: 8,
-              borderRadius: 2, // theme-allow: sub-scale tooltip micro-corner, below the 4px radius floor
+              borderRadius: 2, // theme-allow raw-surface — sub-scale tooltip micro-corner, below the 4px radius floor
               backgroundColor: color,
               flexShrink: 0,
             }}