@astryxdesign/lab 0.1.4-canary.ff77e1c → 0.1.5-canary.76e6697

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @xds/lab
 
+# 0.1.5
+
+---
+
 # 0.1.4
 
 ---

package/dist/Chart/ChartBrush.d.ts

@@ -47,11 +47,8 @@ export interface ChartBrushProps {
  * Brush interaction for range selection.
  *
  * @example
- * ```tsx
- * // X-only (default)
+ * ```
  * <ChartBrush onBrush={({x}) => setZoom(x)} />
- *
- * // 2D rectangular
  * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"ChartBrush.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartBrush.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC;IAEvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiBD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAU,EACV,OAAO,EACP,OAAO,EACP,KAA6B,EAC7B,OAAc,GACf,EAAE,eAAe,qBAgJjB"}
+{"version":3,"file":"ChartBrush.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartBrush.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC;IAEvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAU,EACV,OAAO,EACP,OAAO,EACP,KAA6B,EAC7B,OAAc,GACf,EAAE,eAAe,qBAgJjB"}

package/dist/Chart/ChartBrush.js

@@ -38,11 +38,8 @@ function localCoords(e) {
  * Brush interaction for range selection.
  *
  * @example
- * ```tsx
- * // X-only (default)
+ * ```
  * <ChartBrush onBrush={({x}) => setZoom(x)} />
- *
- * // 2D rectangular
  * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
  * ```
  */

package/dist/Chart/ChartCandlestick.d.ts

@@ -31,14 +31,11 @@ export interface ChartCandlestickProps {
  *
  * @example
  * ```
- * // Financial OHLC
  * <ChartCandlestick
  *   high="high" low="low" open="open" close="close"
  *   upColor={useChartColors().semantic.positive}
  *   downColor={useChartColors().semantic.negative}
  * />
- *
- * // OHLC bar
  * <ChartCandlestick
  *   variant="bar"
  *   high="max" low="min" open="q1" close="median"

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

@@ -1 +1 @@
-{"version":3,"file":"ChartCandlestick.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartCandlestick.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAe,EACf,WAAiB,EACjB,MAAU,GACX,EAAE,qBAAqB,sCA6GvB"}
+{"version":3,"file":"ChartCandlestick.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartCandlestick.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAe,EACf,WAAiB,EACjB,MAAU,GACX,EAAE,qBAAqB,sCA6GvB"}

package/dist/Chart/ChartCandlestick.js

@@ -18,14 +18,11 @@ import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  *
  * @example
  * ```
- * // Financial OHLC
  * <ChartCandlestick
  *   high="high" low="low" open="open" close="close"
  *   upColor={useChartColors().semantic.positive}
  *   downColor={useChartColors().semantic.negative}
  * />
- *
- * // OHLC bar
  * <ChartCandlestick
  *   variant="bar"
  *   high="max" low="min" open="q1" close="median"

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

@@ -1 +1 @@
-{"version":3,"file":"ChartHeatmapGL.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartHeatmapGL.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EAAE,UAAU,EAClB,OAAW,GACZ,EAAE,mBAAmB,sCA8IrB"}
+{"version":3,"file":"ChartHeatmapGL.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartHeatmapGL.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EAAE,UAAU,EAClB,OAAW,GACZ,EAAE,mBAAmB,sCAuJrB"}

package/dist/Chart/ChartHeatmapGL.js

@@ -127,6 +127,13 @@ export function ChartHeatmapGL({
     const gap = cellGap;
     const xBW = xScale.bandwidth();
     const yBW = yBandScale.bandwidth();
+    // Heatmap cells fill their full slot (step), not just the band width. The
+    // shared x-scale carries bar-style padding (~0.2), so sizing cells to the
+    // bandwidth leaves gaps between columns while the local y-scale stays tight —
+    // an asymmetric, sparse grid. Sizing to the step and centering on the band
+    // keeps cells contiguous (a real heatmap); cellGap alone controls spacing.
+    const xStep = typeof xScale.step === 'function' ? xScale.step() : xBW;
+    const yStep = yBandScale.step();
     for (const d of data) {
       const xVal = xScale(String(d[xKey]));
       const yVal = yBandScale(String(d[yKey]));
@@ -136,10 +143,12 @@ export function ChartHeatmapGL({
       const v = typeof d[valueKey] === 'number' ? d[valueKey] : 0;
       const t = (v - dMin) / range;
       const [r, g, b] = sampleRamp(ramp, t);
-      const x0 = xVal + gap / 2;
-      const x1 = xVal + xBW - gap / 2;
-      const y0 = yVal + gap / 2;
-      const y1 = yVal + yBW - gap / 2;
+      const xc = xVal + xBW / 2;
+      const yc = yVal + yBW / 2;
+      const x0 = xc - xStep / 2 + gap / 2;
+      const x1 = xc + xStep / 2 - gap / 2;
+      const y0 = yc - yStep / 2 + gap / 2;
+      const y1 = yc + yStep / 2 - gap / 2;
       positions.push(x0, y0, x1, y0, x0, y1, x1, y0, x1, y1, x0, y1);
       for (let i = 0; i < 6; i++) {
         colors.push(r, g, b);

package/dist/Chart/ChartLegend.d.ts

@@ -35,20 +35,15 @@ export interface ChartLegendProps {
  *
  * @example
  * ```
- * // Discrete
  * <ChartLegend items={[
  *   {label: 'Revenue', color: colors[0]},
  *   {label: 'Expenses', color: colors[1]},
  * ]} />
- *
- * // Continuous — pipe useChartColors() directly
  * <ChartLegend
  *   gradient={useChartColors().sequential.blue(5)}
  *   domain={[0, 100]}
  *   label="Temperature"
  * />
- *
- * // Diverging
  * <ChartLegend
  *   gradient={useChartColors().diverging.coldHot(7)}
  *   domain={[-50, 50]}

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

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartLegend.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAS,EACT,UAAmB,GACpB,EAAE,gBAAgB,sCAgGlB"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartLegend.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAgBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAS,EACT,UAAmB,GACpB,EAAE,gBAAgB,sCAgGlB"}

package/dist/Chart/ChartLegend.js

@@ -30,20 +30,15 @@ function toGradientCSS(colors) {
  *
  * @example
  * ```
- * // Discrete
  * <ChartLegend items={[
  *   {label: 'Revenue', color: colors[0]},
  *   {label: 'Expenses', color: colors[1]},
  * ]} />
- *
- * // Continuous — pipe useChartColors() directly
  * <ChartLegend
  *   gradient={useChartColors().sequential.blue(5)}
  *   domain={[0, 100]}
  *   label="Temperature"
  * />
- *
- * // Diverging
  * <ChartLegend
  *   gradient={useChartColors().diverging.coldHot(7)}
  *   domain={[-50, 50]}

package/dist/Chart/ChartTooltip.d.ts

@@ -67,17 +67,10 @@ export interface ChartTooltipProps {
  * in the top layer (via Popover API, portaled outside the SVG).
  *
  * @example
- * ```tsx
- * // Default: vertical crosshair + tooltip card
+ * ```
  * <ChartTooltip />
- *
- * // Both axes, with labels
  * <ChartTooltip crosshair="xy" crosshairLabels />
- *
- * // Tooltip only, no crosshair lines
  * <ChartTooltip crosshair={false} />
- *
- * // Custom render
  * <ChartTooltip render={(d) => <span>{d.month}: ${d.revenue}</span>} />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOpE;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAEtE;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAe,EACf,eAAuB,EACvB,IAAW,EACX,OAAO,EACP,OAAO,EACP,cAAiD,EACjD,GAAU,GACX,EAAE,iBAAiB,+BAyUnB"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../src/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOpE;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAEtE;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAe,EACf,eAAuB,EACvB,IAAW,EACX,OAAO,EACP,OAAO,EACP,cAAiD,EACjD,GAAU,GACX,EAAE,iBAAiB,+BAyUnB"}

package/dist/Chart/ChartTooltip.js

@@ -33,17 +33,10 @@ import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime"
  * in the top layer (via Popover API, portaled outside the SVG).
  *
  * @example
- * ```tsx
- * // Default: vertical crosshair + tooltip card
+ * ```
  * <ChartTooltip />
- *
- * // Both axes, with labels
  * <ChartTooltip crosshair="xy" crosshairLabels />
- *
- * // Tooltip only, no crosshair lines
  * <ChartTooltip crosshair={false} />
- *
- * // Custom render
  * <ChartTooltip render={(d) => <span>{d.month}: ${d.revenue}</span>} />
  * ```
  */

package/dist/CodeEditor/CodeEditor.d.ts

@@ -31,7 +31,7 @@ export interface CodeEditorProps extends Omit<BaseProps<HTMLDivElement>, 'onChan
  * auto-indent, tab insertion, and bracket auto-closing.
  *
  * @example
- * ```tsx
+ * ```
  * const [code, setCode] = useState('');
  * <CodeEditor
  *   label="Source code"

package/dist/CodeEditor/CodeEditor.js

@@ -129,7 +129,7 @@ let editorInstanceCounter = 0;
  * auto-indent, tab insertion, and bracket auto-closing.
  *
  * @example
- * ```tsx
+ * ```
  * const [code, setCode] = useState('');
  * <CodeEditor
  *   label="Source code"

package/dist/Radial/RadialChart.d.ts

@@ -48,19 +48,14 @@ export interface RadialChartProps {
  *
  * @example
  * ```
- * // Spider
  * <RadialChart data={data} axes={['speed', 'handling', 'comfort']} height={400}>
  *   <RadialGrid rings={5} />
  *   <RadialArea dataKey="modelA" color={colors[0]} />
  *   <RadialAxis />
  * </RadialChart>
- *
- * // Pie
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice />
  * </RadialChart>
- *
- * // Donut
  * <RadialChart data={data} valueKey="revenue" labelKey="region" innerRadius={0.6} height={400}>
  *   <RadialSlice />
  * </RadialChart>

package/dist/Radial/RadialChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,mBAAuB,EACpC,QAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,+BAgIlB"}
+{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,mBAAuB,EACpC,QAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,+BAgIlB"}

package/dist/Radial/RadialChart.js

@@ -18,19 +18,14 @@ import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  *
  * @example
  * ```
- * // Spider
  * <RadialChart data={data} axes={['speed', 'handling', 'comfort']} height={400}>
  *   <RadialGrid rings={5} />
  *   <RadialArea dataKey="modelA" color={colors[0]} />
  *   <RadialAxis />
  * </RadialChart>
- *
- * // Pie
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice />
  * </RadialChart>
- *
- * // Donut
  * <RadialChart data={data} valueKey="revenue" labelKey="region" innerRadius={0.6} height={400}>
  *   <RadialSlice />
  * </RadialChart>

package/dist/Radial/RadialTooltip.d.ts

@@ -33,7 +33,7 @@ export interface RadialTooltipProps {
  * using polar coordinate math and renders a tooltip in the top layer.
  *
  * @example
- * ```tsx
+ * ```
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice colors={colors} />
  *   <RadialTooltip />

package/dist/Radial/RadialTooltip.js

@@ -22,7 +22,7 @@ import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime"
  * using polar coordinate math and renders a tooltip in the top layer.
  *
  * @example
- * ```tsx
+ * ```
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice colors={colors} />
  *   <RadialTooltip />

package/dist/Sankey/SankeyChart.d.ts

@@ -49,15 +49,14 @@ export interface SankeyChartProps {
  * Width is responsive but enforces minColumnWidth — scrolls when needed.
  *
  * @example
- * ```tsx
+ * ```
  * <SankeyChart
  *   nodes={nodes}
  *   links={links}
  *   columns={[
  *     {ids: ['a', 'b'], label: 'Source'},
  *     {ids: ['c', 'd'], label: 'Target'},
- *   ]}
- * >
+ *   ]}>
  *   <SankeyGrid />
  *   <SankeyLink />
  *   <SankeyNode />

package/dist/Sankey/SankeyChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,+BAqFlB;yBA/Fe,WAAW"}
+{"version":3,"file":"SankeyChart.d.ts","sourceRoot":"","sources":["../../src/Sankey/SankeyChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,uBAAuB;IACvB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAY,EACZ,SAAc,EACd,OAAY,EACZ,SAAS,EACT,cAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,+BAqFlB;yBA/Fe,WAAW"}

package/dist/Sankey/SankeyChart.js

@@ -61,15 +61,14 @@ function resolveColumnCount(columns, nodes, links) {
  * Width is responsive but enforces minColumnWidth — scrolls when needed.
  *
  * @example
- * ```tsx
+ * ```
  * <SankeyChart
  *   nodes={nodes}
  *   links={links}
  *   columns={[
  *     {ids: ['a', 'b'], label: 'Source'},
  *     {ids: ['c', 'd'], label: 'Target'},
- *   ]}
- * >
+ *   ]}>
  *   <SankeyGrid />
  *   <SankeyLink />
  *   <SankeyNode />

package/dist/Stepper/Step.d.ts

@@ -109,7 +109,6 @@ export interface StepProps extends BaseProps<HTMLLIElement> {
  *
  * @example
  * ```
- * // Generic icon + semantic color
  * <Step step={1} label="Payment" status="error" icon={<Icon icon="warning" />} />
  * ```
  */

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA6SD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA2SX;yBA7Te,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA6SD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA2SX;yBA7Te,IAAI"}

package/dist/Stepper/Step.js

@@ -296,7 +296,6 @@ const styles = {
  *
  * @example
  * ```
- * // Generic icon + semantic color
  * <Step step={1} label="Payment" status="error" icon={<Icon icon="warning" />} />
  * ```
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.1.4-canary.ff77e1c",
+  "version": "0.1.5-canary.76e6697",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.1.4-canary.ff77e1c",
+    "@astryxdesign/core": "0.1.5-canary.76e6697",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },

package/src/Chart/ChartBrush.tsx

@@ -76,11 +76,8 @@ function localCoords(e: React.PointerEvent<SVGRectElement>): {
  * Brush interaction for range selection.
  *
  * @example
- * ```tsx
- * // X-only (default)
+ * ```
  * <ChartBrush onBrush={({x}) => setZoom(x)} />
- *
- * // 2D rectangular
  * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
  * ```
  */

package/src/Chart/ChartCandlestick.tsx

@@ -47,14 +47,11 @@ export interface ChartCandlestickProps {
  *
  * @example
  * ```
- * // Financial OHLC
  * <ChartCandlestick
  *   high="high" low="low" open="open" close="close"
  *   upColor={useChartColors().semantic.positive}
  *   downColor={useChartColors().semantic.negative}
  * />
- *
- * // OHLC bar
  * <ChartCandlestick
  *   variant="bar"
  *   high="max" low="min" open="q1" close="median"

package/src/Chart/ChartHeatmapGL.tsx

@@ -156,6 +156,13 @@ export function ChartHeatmapGL({
     const gap = cellGap;
     const xBW = xScale.bandwidth();
     const yBW = yBandScale.bandwidth();
+    // Heatmap cells fill their full slot (step), not just the band width. The
+    // shared x-scale carries bar-style padding (~0.2), so sizing cells to the
+    // bandwidth leaves gaps between columns while the local y-scale stays tight —
+    // an asymmetric, sparse grid. Sizing to the step and centering on the band
+    // keeps cells contiguous (a real heatmap); cellGap alone controls spacing.
+    const xStep = typeof xScale.step === 'function' ? xScale.step() : xBW;
+    const yStep = yBandScale.step();
 
     for (const d of data) {
       const xVal = xScale(String(d[xKey]));
@@ -168,10 +175,12 @@ export function ChartHeatmapGL({
       const t = (v - dMin) / range;
       const [r, g, b] = sampleRamp(ramp, t);
 
-      const x0 = xVal + gap / 2;
-      const x1 = xVal + xBW - gap / 2;
-      const y0 = yVal + gap / 2;
-      const y1 = yVal + yBW - gap / 2;
+      const xc = xVal + xBW / 2;
+      const yc = yVal + yBW / 2;
+      const x0 = xc - xStep / 2 + gap / 2;
+      const x1 = xc + xStep / 2 - gap / 2;
+      const y0 = yc - yStep / 2 + gap / 2;
+      const y1 = yc + yStep / 2 - gap / 2;
 
       positions.push(x0, y0, x1, y0, x0, y1, x1, y0, x1, y1, x0, y1);
       for (let i = 0; i < 6; i++) {

package/src/Chart/ChartLegend.tsx

@@ -54,20 +54,15 @@ function toGradientCSS(colors: string[]): string {
  *
  * @example
  * ```
- * // Discrete
  * <ChartLegend items={[
  *   {label: 'Revenue', color: colors[0]},
  *   {label: 'Expenses', color: colors[1]},
  * ]} />
- *
- * // Continuous — pipe useChartColors() directly
  * <ChartLegend
  *   gradient={useChartColors().sequential.blue(5)}
  *   domain={[0, 100]}
  *   label="Temperature"
  * />
- *
- * // Diverging
  * <ChartLegend
  *   gradient={useChartColors().diverging.coldHot(7)}
  *   domain={[-50, 50]}

package/src/Chart/ChartTooltip.tsx

@@ -96,17 +96,10 @@ export interface ChartTooltipProps {
  * in the top layer (via Popover API, portaled outside the SVG).
  *
  * @example
- * ```tsx
- * // Default: vertical crosshair + tooltip card
+ * ```
  * <ChartTooltip />
- *
- * // Both axes, with labels
  * <ChartTooltip crosshair="xy" crosshairLabels />
- *
- * // Tooltip only, no crosshair lines
  * <ChartTooltip crosshair={false} />
- *
- * // Custom render
  * <ChartTooltip render={(d) => <span>{d.month}: ${d.revenue}</span>} />
  * ```
  */

package/src/CodeEditor/CodeEditor.tsx

@@ -181,7 +181,7 @@ let editorInstanceCounter = 0;
  * auto-indent, tab insertion, and bracket auto-closing.
  *
  * @example
- * ```tsx
+ * ```
  * const [code, setCode] = useState('');
  * <CodeEditor
  *   label="Source code"

package/src/Radial/RadialChart.tsx

@@ -61,19 +61,14 @@ export interface RadialChartProps {
  *
  * @example
  * ```
- * // Spider
  * <RadialChart data={data} axes={['speed', 'handling', 'comfort']} height={400}>
  *   <RadialGrid rings={5} />
  *   <RadialArea dataKey="modelA" color={colors[0]} />
  *   <RadialAxis />
  * </RadialChart>
- *
- * // Pie
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice />
  * </RadialChart>
- *
- * // Donut
  * <RadialChart data={data} valueKey="revenue" labelKey="region" innerRadius={0.6} height={400}>
  *   <RadialSlice />
  * </RadialChart>

package/src/Radial/RadialTooltip.tsx

@@ -55,7 +55,7 @@ export interface RadialTooltipProps {
  * using polar coordinate math and renders a tooltip in the top layer.
  *
  * @example
- * ```tsx
+ * ```
  * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
  *   <RadialSlice colors={colors} />
  *   <RadialTooltip />

package/src/Sankey/SankeyChart.tsx

@@ -107,15 +107,14 @@ function resolveColumnCount(
  * Width is responsive but enforces minColumnWidth — scrolls when needed.
  *
  * @example
- * ```tsx
+ * ```
  * <SankeyChart
  *   nodes={nodes}
  *   links={links}
  *   columns={[
  *     {ids: ['a', 'b'], label: 'Source'},
  *     {ids: ['c', 'd'], label: 'Target'},
- *   ]}
- * >
+ *   ]}>
  *   <SankeyGrid />
  *   <SankeyLink />
  *   <SankeyNode />

package/src/Stepper/Step.tsx

@@ -430,7 +430,6 @@ const styles = stylex.create({
  *
  * @example
  * ```
- * // Generic icon + semantic color
  * <Step step={1} label="Payment" status="error" icon={<Icon icon="warning" />} />
  * ```
  */