@astryxdesign/lab 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/dist/Schedule/TimeGridView.js

@@ -26,8 +26,7 @@ export function TimeGridView({
   hourHeight
 }) {
   const {
-    categories,
-    headingLevel
+    categories
   } = useScheduleContext();
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(normalizedMinHour + 1, Math.min(24, Math.floor(maxHour)));
@@ -61,7 +60,7 @@ export function TimeGridView({
         children: days.map((day, index) => /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.timeGridHeaderCell, index === days.length - 1 && styles.timeGridHeaderCellLast),
           children: /*#__PURE__*/_jsx(Heading, {
-            level: headingLevel,
+            level: 4,
             color: "secondary",
             display: "block",
             xstyle: styles.timeGridHeaderHeading,

package/dist/Schedule/context.d.ts

@@ -14,8 +14,6 @@ export interface ScheduleContextValue {
     nextDateLabel: string;
     view: ScheduleViewBase;
     plugins: ReadonlyArray<SchedulePlugin>;
-    /** Heading level used for sub-headings within the schedule (day labels, weekday headers). */
-    headingLevel: 2 | 3 | 4 | 5 | 6;
 }
 export declare const ScheduleContext: import("react").Context<ScheduleContextValue | null>;
 export declare function useScheduleContext(): ScheduleContextValue;

package/dist/Schedule/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/Schedule/context.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,6FAA6F;IAC7F,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,sDAE3B,CAAC;AAEF,wBAAgB,kBAAkB,IAAI,oBAAoB,CAMzD"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/Schedule/context.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,sDAE3B,CAAC;AAEF,wBAAgB,kBAAkB,IAAI,oBAAoB,CAMzD"}

package/dist/index.d.ts

@@ -12,7 +12,6 @@
 export { CodeBlock, type CodeBlockProps } from './CodeBlock';
 export { CodeEditor, type CodeEditorProps } from './CodeEditor';
 export { tokenize, tokenizeAsync, SYNC_TOKENIZE_THRESHOLD, type SyntaxToken, } from '@astryxdesign/core/CodeBlock';
-export { InfoTip, type InfoTipProps, type InfoTipSize } from './InfoTip';
 export { ChatReasoning, type ChatReasoningProps, } from './ChatReasoning/ChatReasoning';
 export * from './Schedule';
 export { SVGIcon, type SVGIconProps, type SVGIconVariation, type SVGIconSize, type SVGIconColor, type SVGIconDef, type IconShape, type IconShapeRole, iconVars, variations, opticalSize, xIcon, checkIcon, bellIcon, homeIcon, settingsIcon, calendarIcon, menuIcon, heartIcon, eyeIcon, starIcon, folderIcon, shieldIcon, searchIcon, mailIcon, lockIcon, starterIcons, } from './SVGIcon';
@@ -21,6 +20,7 @@ export { RadialChart, type RadialChartProps, RadialGrid, type RadialGridProps, R
 export { ThreeDChart, type ThreeDChartProps, ThreeDScatter, ThreeDScatterGL, type ThreeDScatterProps, type ThreeDScatterGLProps, ThreeDBar, type ThreeDBarProps, ThreeDGrid, type ThreeDGridProps, ThreeDAxis, type ThreeDAxisProps, ThreeDSurface, type ThreeDSurfaceProps, use3D, type ThreeDContext, type Camera, type Point3D, type ProjectedPoint, } from './ThreeD';
 export { ChartBrush, type ChartBrushProps, type BrushMode, type BrushRange, ChartZoom, type ChartZoomProps, ChartSelect, type ChartSelectProps, ChartReferenceLine, type ChartReferenceLineProps, } from './Chart';
 export { SankeyChart, type SankeyChartProps, SankeyLink, type SankeyLinkProps, SankeyNode, type SankeyNodeProps, SankeyLabel, type SankeyLabelProps, useSankey, type SankeyNodeDatum, type SankeyLinkDatum, type SankeyColumn, type SankeyColumnDef, type SankeyNodeLayout, type SankeyLinkLayout, type SankeyColumnLayout, SankeyGrid, type SankeyGridProps, type SankeyContext, } from './Sankey';
+export { Chart as ChartV2, type ChartProps as ChartV2Props, ChartLegend as ChartV2Legend, type ChartLegendProps as ChartV2LegendProps, type LegendItem as ChartV2LegendItem, ChartAxis as ChartV2Axis, type ChartAxisProps as ChartV2AxisProps, ChartGrid as ChartV2Grid, type ChartGridProps as ChartV2GridProps, ChartSwatch as ChartV2Swatch, swatchVariantForType as xdsChartV2SwatchVariantForType, type ChartSwatchProps as ChartV2SwatchProps, type ChartSwatchVariant as ChartV2SwatchVariant, ChartTooltip as ChartV2Tooltip, type ChartTooltipProps as ChartV2TooltipProps, type ChartTooltipPlacement as ChartV2TooltipPlacement, type TooltipSeriesValue as ChartV2TooltipSeriesValue, bar, line, dot, area, band, candlestick, errorBar, referenceLine, dotGL, dotGLInteractive, heatmapGL, streamGL, useChartV2, type SeriesDef, type ChartV2Context, type ChartPointerEvent, type ResolvedPoint, type ResolvedPositions, type SeriesContext, type ErrorBarOptions, type ReferenceLineOptions, type DotGLOptions, type DotGLInteractiveOptions, type HeatmapGLOptions, type StreamGLOptions, type StreamGLHandle, } from './ChartV2';
 export * from './Stepper';
 export * from './CircularProgress';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -17,9 +17,6 @@ export { CodeBlock } from "./CodeBlock/index.js";
 export { CodeEditor } from "./CodeEditor/index.js";
 export { tokenize, tokenizeAsync, SYNC_TOKENIZE_THRESHOLD } from '@astryxdesign/core/CodeBlock';
 
-// InfoTip — accessible info-icon help affordance (RFC facebook/astryx#3349)
-export { InfoTip } from "./InfoTip/index.js";
-
 // Chat — experimental reasoning display
 export { ChatReasoning } from "./ChatReasoning/ChatReasoning.js";
 
@@ -44,7 +41,7 @@ export { ChartBrush, ChartZoom, ChartSelect, ChartReferenceLine } from "./Chart/
 // Sankey / flow diagrams — ribbon-based flow visualization
 export { SankeyChart, SankeyLink, SankeyNode, SankeyLabel, useSankey, SankeyGrid } from "./Sankey/index.js";
 
-// Chart v2 (config model) moved to its own package: @astryxdesign/charts.
-// It is no longer re-exported from @astryxdesign/lab.
+// Chart v2 — config model
+export { Chart as ChartV2, ChartLegend as ChartV2Legend, ChartAxis as ChartV2Axis, ChartGrid as ChartV2Grid, ChartSwatch as ChartV2Swatch, swatchVariantForType as xdsChartV2SwatchVariantForType, ChartTooltip as ChartV2Tooltip, bar, line, dot, area, band, candlestick, errorBar, referenceLine, dotGL, dotGLInteractive, heatmapGL, streamGL, useChartV2 } from "./ChartV2/index.js";
 export * from "./Stepper/index.js";
 export * from "./CircularProgress/index.js";

package/dist/lab.css

@@ -52,7 +52,6 @@
   .x1ghz6dp:not(#\#){margin:0}
   .x10h29id:not(#\#){margin:var(--spacing-0-5)}
   .x1717udv:not(#\#){padding:0}
-  .x12nba7r:not(#\#){padding:var(--spacing-0-5)}
   .x103w4nt:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-blue) 48%,var(--color-border))}
   .x14n1b0s:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-cyan) 48%,var(--color-border))}
   .x1uk4s2l:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-green) 48%,var(--color-border))}
@@ -74,11 +73,12 @@
   .x1r9gxr1:not(#\#):not(#\#){border-color:var(--color-border-teal)}
   .x1kpnwn1:not(#\#):not(#\#){border-color:var(--color-border-yellow)}
   .x14i3s5s:not(#\#):not(#\#){border-color:var(--color-border)}
+  .xbvija:not(#\#):not(#\#){border-radius:1.5px}
+  .x1cum3z5:not(#\#):not(#\#){border-radius:2px}
   .x1hviunn:not(#\#):not(#\#){border-radius:var(--radius-container)}
   .xh6dtrn:not(#\#):not(#\#){border-radius:var(--radius-element)}
   .xjspbzw:not(#\#):not(#\#){border-radius:var(--radius-full)}
   .xx3sua9:not(#\#):not(#\#){border-radius:var(--radius-inner)}
-  .xng3xce:not(#\#):not(#\#){border-style:none}
   .x1y0btm7:not(#\#):not(#\#){border-style:solid}
   .xc342km:not(#\#):not(#\#){border-width:0}
   .x1litavf:not(#\#):not(#\#){border-width:var(--border-width)}
@@ -100,6 +100,7 @@
   .x33j1x8:not(#\#):not(#\#){grid-row:var(--x-gridRow)}
   .x17y0mx6:not(#\#):not(#\#){inset-inline:0}
   .x1yqqeh1:not(#\#):not(#\#){margin-block:var(--spacing-0-5)}
+  .xckhbgb:not(#\#):not(#\#){margin-inline:1px}
   .x1a2a7pz:not(#\#):not(#\#){outline:none}
   .xysyzu8:not(#\#):not(#\#){overflow:auto}
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
@@ -163,6 +164,7 @@
   .xwmxj5m:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
   .x1e9xt6e:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-orange)}
   .xnpoty2:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-pink)}
+  .x1prclbq:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-popover)}
   .x16i6n6f:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-purple)}
   .x1cibrc5:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-red)}
   .x1jtji5o:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-teal)}
@@ -188,6 +190,7 @@
   .x10w94by:not(#\#):not(#\#):not(#\#){border-inline-end-width:0}
   .xw8tdv1:not(#\#):not(#\#):not(#\#){border-inline-end-width:var(--border-width)}
   .x18oyj42:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 1px var(--color-accent)}
+  .x14hfi27:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}
   .x1ftfhsn:not(#\#):not(#\#):not(#\#){caret-color:var(--color-text-primary)}
   .xeh89do:not(#\#):not(#\#):not(#\#){clip:rect(0 0 0 0)}
   .xzpqnlu:not(#\#):not(#\#):not(#\#){clip:rect(0,0,0,0)}
@@ -235,6 +238,7 @@
   .x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
   .xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
   .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
+  .x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
   .xbh8q5q:not(#\#):not(#\#):not(#\#){fill:none}
   .xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
   .x1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
@@ -297,15 +301,19 @@
   .x67bb7w:not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .x47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}
   .x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
+  .xixxii4:not(#\#):not(#\#):not(#\#){position:fixed}
   .x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
   .x1owpc8m:not(#\#):not(#\#):not(#\#){stroke-linecap:round}
+  .xnpr05h:not(#\#):not(#\#):not(#\#){stroke-width:1}
   .ximx5ud:not(#\#):not(#\#):not(#\#){stroke:var(--color-accent-muted)}
   .xjsr54c:not(#\#):not(#\#):not(#\#){stroke:var(--color-accent)}
+  .x113i6qz:not(#\#):not(#\#):not(#\#){stroke:var(--color-border-emphasized)}
   .xjswp7v:not(#\#):not(#\#):not(#\#){stroke:var(--color-error-muted)}
   .x1vco6zm:not(#\#):not(#\#):not(#\#){stroke:var(--color-error)}
   .x1uro670:not(#\#):not(#\#):not(#\#){stroke:var(--color-success-muted)}
   .x8y33gb:not(#\#):not(#\#):not(#\#){stroke:var(--color-success)}
   .xuxf9kk:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-disabled)}
+  .x1lo1t26:not(#\#):not(#\#):not(#\#){stroke:var(--color-text-primary)}
   .xpi25hw:not(#\#):not(#\#):not(#\#){stroke:var(--color-track)}
   .x1wjzxuj:not(#\#):not(#\#):not(#\#){stroke:var(--color-warning-muted)}
   .x9ezeq1:not(#\#):not(#\#):not(#\#){stroke:var(--color-warning)}
@@ -318,27 +326,24 @@
   .x19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
   .x1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
   .xkvfbh3:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-min)}
-  .xuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}
   .x80gvsz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium)}
   .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
-  .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
   .xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
   .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
   .x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
-  .xxymvpz:not(#\#):not(#\#):not(#\#){vertical-align:middle}
   .xlshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
   .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
   .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
   .x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
   .x1355qak:not(#\#):not(#\#):not(#\#){z-index:20}
+  .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .xr3buco:not(#\#):not(#\#):not(#\#){z-index:var(--x-zIndex)}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .xyxi2l3:active:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
   @media (prefers-reduced-motion: reduce){.xy02sl2.xy02sl2:not(#\#):not(#\#):not(#\#){animation-duration:4s}}
   @media (hover: hover){.xe9uy6x.xe9uy6x:hover:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
-  @media (hover: hover){.xkxie9p.xkxie9p:hover:not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}}
   .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
   .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
   .x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
@@ -352,13 +357,16 @@
   .xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
   .xxk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}
   .x1gnnpzl:not(#\#):not(#\#):not(#\#):not(#\#){height:30px}
+  .xuoj239:not(#\#):not(#\#):not(#\#):not(#\#){height:3px}
   .xqu0tyb:not(#\#):not(#\#):not(#\#):not(#\#){height:4px}
   .x1d9x2de:not(#\#):not(#\#):not(#\#):not(#\#){height:640px}
+  .xdk7pt:not(#\#):not(#\#):not(#\#):not(#\#){height:8px}
   .xhigkf7:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--icon-size)}
   .x6b6gus:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-4)}
   .x1grt7ep:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-5)}
   .x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
   .x1unci72:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--spacing-4)}
+  .x1yztbdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:16px}
   .xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
   .x160xvyo:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--spacing-1) * -1)}
   .xtbrsbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-2)}
@@ -387,6 +395,7 @@
   .xvy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x51ohtg:not(#\#):not(#\#):not(#\#):not(#\#){width:4px}
+  .x1xc55vz:not(#\#):not(#\#):not(#\#):not(#\#){width:8px}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
   .x12xnipv:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-4)}
   .xfyiiit:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-5)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.1.4-canary.37c19d3",
+  "version": "0.1.4-canary.39ffd21",
   "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.37c19d3",
+    "@astryxdesign/core": "0.1.4-canary.39ffd21",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },

package/src/ChartV2/Chart.tsx

@@ -0,0 +1,348 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Chart.tsx (v2)
+ * @output Root chart — coordinates layout, rendering, and events
+ * @position Top-level; delegates everything to series configs and interaction slots
+ *
+ * The chart root has ZERO knowledge of mark types. It:
+ *   1. Runs the layout engine (scales + stacking + grouping)
+ *   2. Calls each series' resolve() and render() methods
+ *   3. Provides a single event layer for interaction children
+ */
+
+import {
+  type ReactNode,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
+import type {SeriesDef} from './types';
+import type {ChartV2Context, ChartMargin, ChartPointerEvent} from './types';
+import {computeLayout} from './layout';
+import {ChartV2Provider} from './ChartV2Context';
+import {ChartProvider} from '../Chart/ChartContext';
+import {Text} from '@astryxdesign/core';
+import {VStack, HStack} from '@astryxdesign/core';
+import * as stylex from '@stylexjs/stylex';
+import {ChartLegend, type ChartLegendProps} from './ChartLegend';
+import {deriveLegendItems} from './legend';
+import {ChartTooltip, type ChartTooltipProps} from './ChartTooltip';
+
+export interface ChartProps {
+  data: Record<string, unknown>[];
+  xKey: string;
+  series: SeriesDef[];
+  height?: number;
+  margin?: Partial<ChartMargin>;
+  grid?: ReactNode;
+  axes?: ReactNode;
+  legend?: boolean | ChartLegendProps;
+  tooltip?: boolean | Omit<ChartTooltipProps, 'series'>;
+  interactions?: ReactNode;
+  children?: ReactNode;
+  title?: string;
+  subtitle?: string;
+}
+
+const DEFAULT_MARGIN: ChartMargin = {top: 24, right: 24, bottom: 32, left: 48};
+
+const styles = stylex.create({
+  container: {
+    width: '100%',
+  },
+  title: {
+    marginBottom: 16,
+  },
+  chartArea: {
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+  },
+});
+
+export function Chart({
+  data,
+  xKey,
+  series,
+  height = 300,
+  margin: marginOverride,
+  grid,
+  axes,
+  legend,
+  tooltip,
+  interactions,
+  children,
+  title,
+  subtitle,
+}: ChartProps) {
+  const chartId = useId();
+  const descId = `${chartId}-desc`;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const pointerHandlers = useRef<Set<(e: ChartPointerEvent) => void>>(
+    new Set(),
+  );
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const margin = useMemo(
+    () => ({...DEFAULT_MARGIN, ...marginOverride}),
+    [marginOverride],
+  );
+  const innerWidth = Math.max(0, containerWidth - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+
+  // ─── Layout pass ──────────────────────────────────────────────────────
+  const layout = useMemo(
+    () =>
+      computeLayout({
+        data,
+        xKey,
+        series,
+        width: innerWidth,
+        height: innerHeight,
+      }),
+    [data, xKey, series, innerWidth, innerHeight],
+  );
+
+  const seriesCtx = useMemo(
+    () => ({
+      data,
+      xKey,
+      xScale: layout.xScale,
+      yScale: layout.yScale,
+      width: innerWidth,
+      height: innerHeight,
+    }),
+    [data, xKey, layout, innerWidth, innerHeight],
+  );
+
+  // ─── Event dispatch ───────────────────────────────────────────────────
+  const onPointer = useCallback((handler: (e: ChartPointerEvent) => void) => {
+    pointerHandlers.current.add(handler);
+    return () => {
+      pointerHandlers.current.delete(handler);
+    };
+  }, []);
+
+  const dispatch = useCallback((e: ChartPointerEvent) => {
+    for (const handler of pointerHandlers.current) {
+      handler(e);
+    }
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<SVGRectElement>) => {
+      const svg = svgRef.current;
+      if (!svg) {
+        return;
+      }
+      const point = svg.createSVGPoint();
+      point.x = e.clientX;
+      point.y = e.clientY;
+      const ctm = e.currentTarget.getScreenCTM()?.inverse();
+      if (!ctm) {
+        return;
+      }
+      const cursor = point.matrixTransform(ctm);
+
+      // Find nearest point by x-distance only (full vertical column is the hover zone)
+      let nearest: ChartPointerEvent['nearest'] = null;
+      let bestXDist = Infinity;
+      for (const [seriesKey, points] of layout.resolved) {
+        for (const p of points) {
+          const xDist = Math.abs(p.px - cursor.x);
+          if (xDist < bestXDist) {
+            bestXDist = xDist;
+            nearest = {...p, seriesKey};
+          }
+        }
+      }
+      dispatch({x: cursor.x, y: cursor.y, nearest, active: e.buttons > 0});
+    },
+    [layout.resolved, dispatch],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    dispatch({x: -1, y: -1, nearest: null, active: false});
+  }, [dispatch]);
+
+  // ─── Context for interactions + v1 chrome ─────────────────────────────
+  const ctx: ChartV2Context = useMemo(
+    () => ({
+      width: innerWidth,
+      height: innerHeight,
+      margin,
+      data,
+      xKey,
+      xScale: layout.xScale,
+      yScale: layout.yScale,
+      resolved: layout.resolved,
+      onPointer,
+      svgRef,
+    }),
+    [innerWidth, innerHeight, margin, data, xKey, layout, onPointer],
+  );
+
+  // Bridge v1 context for ChartGrid/Axis compatibility
+  const v1Ctx = useMemo(
+    () => ({
+      width: innerWidth,
+      height: innerHeight,
+      margin,
+      xKey,
+      data,
+      xScale: layout.xScale,
+      yScale: layout.yScale,
+      svgRef,
+      pointerToData: () => ({
+        x: null as string | number | null,
+        y: 0,
+        px: 0,
+        py: 0,
+      }),
+      pixelToData: (px: number, py: number) => ({
+        x: null as string | number | null,
+        y: 0,
+        px,
+        py,
+      }),
+    }),
+    [innerWidth, innerHeight, margin, xKey, data, layout, svgRef],
+  );
+
+  // ─── Legend ────────────────────────────────────────────────────────────
+  const legendConfig = legend === true ? {} : legend || null;
+
+  const legendElement = legendConfig ? (
+    <ChartLegend
+      items={legendConfig.items ?? deriveLegendItems(series)}
+      position={legendConfig.position}
+      alignment={legendConfig.alignment}
+    />
+  ) : null;
+
+  const legendPosition = legendConfig?.position ?? 'bottom';
+  const isLegendHorizontal =
+    legendPosition === 'start' || legendPosition === 'end';
+
+  // ─── Render ───────────────────────────────────────────────────────────
+  if (containerWidth === 0) {
+    return (
+      <div
+        ref={containerRef}
+        {...stylex.props(styles.container)}
+        style={{height}}
+      />
+    );
+  }
+
+  return (
+    <div ref={containerRef} {...stylex.props(styles.container)}>
+      {(title || subtitle) && (
+        <div {...stylex.props(styles.title)}>
+          {title && (
+            <Text type="body" weight="semibold" display="block">
+              {title}
+            </Text>
+          )}
+          {subtitle && (
+            <Text type="supporting" display="block">
+              {subtitle}
+            </Text>
+          )}
+        </div>
+      )}
+      <ChartV2Provider value={ctx}>
+        <ChartProvider value={v1Ctx}>
+          {legendConfig == null ? (
+            renderSvg()
+          ) : isLegendHorizontal ? (
+            <HStack gap={4}>
+              {legendPosition === 'start' && legendElement}
+              <div {...stylex.props(styles.chartArea)}>{renderSvg()}</div>
+              {legendPosition === 'end' && legendElement}
+            </HStack>
+          ) : (
+            <VStack gap={4}>
+              {legendPosition === 'top' && legendElement}
+              {renderSvg()}
+              {legendPosition === 'bottom' && legendElement}
+            </VStack>
+          )}
+        </ChartProvider>
+      </ChartV2Provider>
+    </div>
+  );
+
+  function renderSvg() {
+    return (
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={height}
+        aria-label={title ?? undefined}
+        aria-describedby={subtitle ? descId : undefined}>
+        {title && <title>{title}</title>}
+        {subtitle && <desc id={descId}>{subtitle}</desc>}
+        <g transform={`translate(${margin.left},${margin.top})`}>
+          {/* 1. Grid */}
+          {grid}
+
+          {/* 2. Marks — each series renders itself */}
+          {series.map(s => {
+            const resolved = layout.resolved.get(s.key);
+            if (!resolved) {
+              return null;
+            }
+            return <g key={s.key}>{s.render(resolved, seriesCtx)}</g>;
+          })}
+
+          {/* 3. Axes */}
+          {axes}
+
+          {/* 4. Event capture + interactions */}
+          <rect
+            x={0}
+            y={0}
+            width={innerWidth}
+            height={innerHeight}
+            fill="transparent"
+            onPointerMove={handlePointerMove}
+            onPointerLeave={handlePointerLeave}
+          />
+          {interactions}
+
+          {/* 5. Tooltip — declarative shortcut. For full control, render
+              <ChartTooltip> directly via the `children` slot. */}
+          {tooltip && (
+            <ChartTooltip
+              series={series}
+              {...(tooltip === true ? {} : tooltip)}
+            />
+          )}
+
+          {/* 6. Escape hatch */}
+          {children}
+        </g>
+      </svg>
+    );
+  }
+}