@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/Stepper/Stepper.js

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Stepper.tsx
+ * @input Uses React, stylex, theme tokens, StepperContext
+ * @output Exports Stepper component and StepperProps
+ * @position Core container component; consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
+ * - /packages/lab/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/Stepper/index.ts (exports if types change)
+ * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/Stepper/ (showcase blocks)
+ */
+import { useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { mergeProps } from '@astryxdesign/core/utils';
+import { themeProps } from '@astryxdesign/core/utils';
+import { StepperContext } from "./StepperContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const STEP_GAP = '2px';
+const styles = {
+  root: {
+    k1xSpc: "x78zum5",
+    kzqmXN: "xh8yej3",
+    kH6xsr: "x3ct3a4",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  horizontal: {
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1cy8zhl",
+    kOIVth: "x195vfkc",
+    $$css: true
+  },
+  vertical: {
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x195vfkc",
+    $$css: true
+  }
+};
+
+/**
+ * A stepper component for multi-step workflows. Displays numbered steps
+ * with visual indicators for completed, active, and upcoming states.
+ *
+ * Each Step child must provide a `step` prop (zero-based index) so it
+ * can derive its state from the parent's activeStep. CSS :last-child
+ * handles connector hiding — no child introspection needed.
+ *
+ * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
+ * landmark: a stepper communicates *progress through a sequence*, not a
+ * set of site navigation links. The active step is marked with
+ * `aria-current="step"` (handled per-step) and the list carries an
+ * accessible `label`. This follows the WAI-ARIA pattern for steppers /
+ * progress sequences and avoids polluting the page's landmark map.
+ *
+ * @example
+ * ```
+ * <Stepper activeStep={1}>
+ *   <Step step={0} label="Account" />
+ *   <Step step={1} label="Profile" />
+ *   <Step step={2} label="Review" />
+ * </Stepper>
+ * ```
+ */
+export function Stepper({
+  activeStep,
+  children,
+  orientation = 'horizontal',
+  onStepClick,
+  label = 'Progress',
+  density = 'balanced',
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const ctxValue = useMemo(() => ({
+    activeStep,
+    orientation,
+    isNonLinear: onStepClick != null,
+    onStepClick: onStepClick ?? null,
+    density
+  }), [activeStep, orientation, onStepClick, density]);
+  return /*#__PURE__*/_jsx(StepperContext, {
+    value: ctxValue,
+    children: /*#__PURE__*/_jsx("ol", {
+      ref: ref,
+      "aria-label": label,
+      ...rest,
+      ...mergeProps(themeProps('stepper', {
+        orientation
+      }), stylex.props(styles.root, orientation === 'horizontal' ? styles.horizontal : styles.vertical, xstyle), className, style),
+      children: children
+    })
+  });
+}
+Stepper.displayName = 'Stepper';

package/dist/Stepper/StepperContext.d.ts

@@ -0,0 +1,12 @@
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperDensity = 'compact' | 'balanced' | 'spacious';
+export interface StepperContextValue {
+    activeStep: number;
+    orientation: StepperOrientation;
+    isNonLinear: boolean;
+    onStepClick: ((index: number) => void) | null;
+    density: StepperDensity;
+}
+export declare const StepperContext: import("react").Context<StepperContextValue | null>;
+export declare function useStepperContext(): StepperContextValue;
+//# sourceMappingURL=StepperContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperContext.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepperContext.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,cAAc,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,qDAE1B,CAAC;AAGF,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}

package/dist/Stepper/StepperContext.js

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file StepperContext.ts
+ * @input Uses React createContext/use
+ * @output Exports StepperContext, useStepperContext, and context types
+ * @position Context for Stepper <-> Step communication
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Stepper/Stepper.doc.mjs
+ * - /packages/lab/src/Stepper/index.ts
+ */
+import { createContext, use } from 'react';
+export const StepperContext = /*#__PURE__*/createContext(null);
+StepperContext.displayName = 'StepperContext';
+export function useStepperContext() {
+  const ctx = use(StepperContext);
+  if (ctx == null) {
+    throw new Error('useStepperContext must be used within Stepper. ' + 'Wrap your Step in <Stepper>.');
+  }
+  return ctx;
+}

package/dist/Stepper/index.d.ts

@@ -0,0 +1,8 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { Step } from './Step';
+export type { StepProps, StepIndicatorPreset } from './Step';
+export type { StepStatus } from './StepStatus';
+export { useStepperContext } from './StepperContext';
+export type { StepperOrientation } from './StepperContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Stepper/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,QAAQ,CAAC;AAE3D,YAAY,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/Stepper/index.js

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+export { Stepper } from "./Stepper.js";
+export { Step } from "./Step.js";
+export { useStepperContext } from "./StepperContext.js";

package/dist/ThreeD/ThreeDAxis.d.ts

@@ -0,0 +1,6 @@
+export interface ThreeDAxisProps {
+    /** Show axis labels (default: true) */
+    labels?: boolean;
+}
+export declare function ThreeDAxis({ labels }: ThreeDAxisProps): import("react").JSX.Element;
+//# sourceMappingURL=ThreeDAxis.d.ts.map

package/dist/ThreeD/ThreeDAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDAxis.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDAxis.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,UAAU,CAAC,EAAC,MAAa,EAAC,EAAE,eAAe,+BAuE1D"}

package/dist/ThreeD/ThreeDAxis.js

@@ -0,0 +1,75 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ThreeDAxis.tsx
+ * @output 3D axis lines with labels at each end
+ */
+
+import { use3D } from "./ThreeDContext.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function ThreeDAxis({
+  labels = true
+}) {
+  const {
+    project,
+    xKey,
+    yKey,
+    zKey,
+    xDomain,
+    yDomain,
+    zDomain
+  } = use3D();
+  const origin = project(0, 0, 0);
+  const xEnd = project(1, 0, 0);
+  const yEnd = project(0, 1, 0);
+  const zEnd = project(0, 0, 1);
+  const lineColor = 'var(--color-border-emphasized)';
+  const labelColor = 'var(--color-text-secondary)';
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("line", {
+      x1: origin.px,
+      y1: origin.py,
+      x2: xEnd.px,
+      y2: xEnd.py,
+      stroke: lineColor,
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("line", {
+      x1: origin.px,
+      y1: origin.py,
+      x2: yEnd.px,
+      y2: yEnd.py,
+      stroke: lineColor,
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("line", {
+      x1: origin.px,
+      y1: origin.py,
+      x2: zEnd.px,
+      y2: zEnd.py,
+      stroke: lineColor,
+      strokeWidth: 1.5
+    }), labels && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("text", {
+        x: xEnd.px + 8,
+        y: xEnd.py,
+        fill: labelColor,
+        fontSize: 11,
+        dominantBaseline: "central",
+        children: [xKey, " [", xDomain[0], "-", xDomain[1], "]"]
+      }), /*#__PURE__*/_jsxs("text", {
+        x: yEnd.px + 8,
+        y: yEnd.py,
+        fill: labelColor,
+        fontSize: 11,
+        dominantBaseline: "central",
+        children: [yKey, " [", yDomain[0], "-", yDomain[1], "]"]
+      }), /*#__PURE__*/_jsxs("text", {
+        x: zEnd.px + 8,
+        y: zEnd.py,
+        fill: labelColor,
+        fontSize: 11,
+        dominantBaseline: "central",
+        children: [zKey, " [", zDomain[0], "-", zDomain[1], "]"]
+      })]
+    })]
+  });
+}

package/dist/ThreeD/ThreeDBar.d.ts

@@ -0,0 +1,7 @@
+export interface ThreeDBarProps {
+    color: string;
+    barWidth?: number;
+    barDepth?: number;
+}
+export declare function ThreeDBar({ color, barWidth, barDepth, }: ThreeDBarProps): import("react").JSX.Element;
+//# sourceMappingURL=ThreeDBar.d.ts.map

package/dist/ThreeD/ThreeDBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDBar.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDBar.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAe,EACf,QAAe,GAChB,EAAE,cAAc,+BA6GhB"}

package/dist/ThreeD/ThreeDBar.js

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ThreeDBar.tsx
+ * @output 3D bar chart — projected rectangles with depth shading
+ */
+
+import { useMemo } from 'react';
+import { use3D } from "./ThreeDContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThreeDBar({
+  color,
+  barWidth = 0.06,
+  barDepth = 0.06
+}) {
+  const {
+    data,
+    xKey,
+    yKey,
+    zKey,
+    project,
+    xDomain,
+    yDomain,
+    zDomain,
+    normalize
+  } = use3D();
+  const bars = useMemo(() => {
+    return data.map((d, i) => {
+      const nx = normalize(d[xKey], xDomain);
+      const ny = normalize(d[yKey], yDomain);
+      const nz = normalize(d[zKey], zDomain);
+      const hw = barWidth / 2;
+      const hd = barDepth / 2;
+
+      // Bar goes from y=0 to y=ny
+      // Four top corners of the bar
+      const topFL = project(nx - hw, ny, nz - hd); // front-left
+      const topFR = project(nx + hw, ny, nz - hd); // front-right
+      const topBL = project(nx - hw, ny, nz + hd); // back-left
+      const topBR = project(nx + hw, ny, nz + hd); // back-right
+
+      // Four bottom corners (y=0)
+      const botFL = project(nx - hw, 0, nz - hd);
+      const botFR = project(nx + hw, 0, nz - hd);
+      const botBL = project(nx - hw, 0, nz + hd);
+      const botBR = project(nx + hw, 0, nz + hd);
+
+      // Average depth for sorting
+      const avgDepth = (topFL.depth + topBR.depth + botFL.depth + botBR.depth) / 4;
+      return {
+        topFL,
+        topFR,
+        topBL,
+        topBR,
+        botFL,
+        botFR,
+        botBL,
+        botBR,
+        avgDepth,
+        index: i,
+        ny
+      };
+    }).sort((a, b) => a.avgDepth - b.avgDepth);
+  }, [data, xKey, yKey, zKey, project, xDomain, yDomain, zDomain, normalize, barWidth, barDepth]);
+  return /*#__PURE__*/_jsx("g", {
+    children: bars.map(b => {
+      const face = (pts, _shade) => pts.map(p => `${p.px},${p.py}`).join(' ');
+
+      // Front face
+      const front = [b.botFL, b.botFR, b.topFR, b.topFL];
+      // Right face
+      const right = [b.botFR, b.botBR, b.topBR, b.topFR];
+      // Top face
+      const top = [b.topFL, b.topFR, b.topBR, b.topBL];
+      return /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("polygon", {
+          points: face(front, 0),
+          fill: color,
+          fillOpacity: 0.9,
+          stroke: color,
+          strokeWidth: 0.5
+        }), /*#__PURE__*/_jsx("polygon", {
+          points: face(right, 0),
+          fill: color,
+          fillOpacity: 0.7,
+          stroke: color,
+          strokeWidth: 0.5
+        }), /*#__PURE__*/_jsx("polygon", {
+          points: face(top, 0),
+          fill: color,
+          fillOpacity: 1,
+          stroke: color,
+          strokeWidth: 0.5
+        })]
+      }, b.index);
+    })
+  });
+}

package/dist/ThreeD/ThreeDChart.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file ThreeDChart.tsx
+ * @output Root 3D chart container — projected SVG with depth sorting
+ * @position Parent component; all 3D marks read from its context
+ */
+import { type ReactNode } from 'react';
+export interface ThreeDChartProps {
+    data: Record<string, unknown>[];
+    xKey: string;
+    yKey: string;
+    zKey: string;
+    xDomain?: [number, number];
+    yDomain?: [number, number];
+    zDomain?: [number, number];
+    height?: number;
+    azimuth?: number;
+    elevation?: number;
+    interactive?: boolean;
+    /** Auto-rotate speed in degrees per frame (default: 0 = off) */
+    autoRotate?: number;
+    children: ReactNode;
+}
+export declare function ThreeDChart({ data, xKey, yKey, zKey, xDomain: xDomainProp, yDomain: yDomainProp, zDomain: zDomainProp, height, azimuth: azimuthProp, elevation: elevationProp, interactive, autoRotate, children, }: ThreeDChartProps): import("react").JSX.Element;
+//# sourceMappingURL=ThreeDChart.d.ts.map

package/dist/ThreeD/ThreeDChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDChart.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDChart.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,MAAY,EACZ,OAAO,EAAE,WAAgB,EACzB,SAAS,EAAE,aAAkB,EAC7B,WAAmB,EACnB,UAAc,EACd,QAAQ,GACT,EAAE,gBAAgB,+BA6LlB"}

package/dist/ThreeD/ThreeDChart.js

@@ -0,0 +1,202 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ThreeDChart.tsx
+ * @output Root 3D chart container — projected SVG with depth sorting
+ * @position Parent component; all 3D marks read from its context
+ */
+
+import { useMemo, useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import { ThreeDProvider } from "./ThreeDContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function computeDomain(data, key) {
+  let min = Infinity,
+    max = -Infinity;
+  for (const d of data) {
+    const v = d[key];
+    if (typeof v === 'number') {
+      if (v < min) {
+        min = v;
+      }
+      if (v > max) {
+        max = v;
+      }
+    }
+  }
+  return [min === Infinity ? 0 : min, max === -Infinity ? 1 : max];
+}
+export function ThreeDChart({
+  data,
+  xKey,
+  yKey,
+  zKey,
+  xDomain: xDomainProp,
+  yDomain: yDomainProp,
+  zDomain: zDomainProp,
+  height = 400,
+  azimuth: azimuthProp = 35,
+  elevation: elevationProp = 25,
+  interactive = false,
+  autoRotate = 0,
+  children
+}) {
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [camera, setCamera] = useState({
+    azimuth: azimuthProp,
+    elevation: elevationProp
+  });
+  const dragRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const obs = new ResizeObserver(e => {
+      if (e[0]) {
+        setContainerWidth(e[0].contentRect.width);
+      }
+    });
+    obs.observe(containerRef.current);
+    return () => obs.disconnect();
+  }, []);
+  const width = containerWidth;
+  const xDomain = xDomainProp ?? computeDomain(data, xKey);
+  const yDomain = yDomainProp ?? computeDomain(data, yKey);
+  const zDomain = zDomainProp ?? computeDomain(data, zKey);
+  const normalize = useCallback((value, domain) => {
+    const range = domain[1] - domain[0];
+    return range === 0 ? 0.5 : (value - domain[0]) / range;
+  }, []);
+
+  // Projection: normalized [0,1]^3 → 2D pixel coords
+  // SYNC: This math is replicated in ThreeDScatterGL's vertex shader.
+  // Both must produce identical output. Verified by projection.test.ts.
+  // If you change this, update the shader and re-run the parity tests.
+  const project = useMemo(() => {
+    const azRad = camera.azimuth * Math.PI / 180;
+    const elRad = camera.elevation * Math.PI / 180;
+    const cosAz = Math.cos(azRad),
+      sinAz = Math.sin(azRad);
+    const cosEl = Math.cos(elRad),
+      sinEl = Math.sin(elRad);
+    const scale = Math.min(width, height) * 0.35;
+    const cx = width / 2,
+      cy = height / 2;
+    return (nx, ny, nz) => {
+      const x = nx - 0.5,
+        y = ny - 0.5,
+        z = nz - 0.5;
+      const x1 = x * cosAz + z * sinAz;
+      const z1 = -x * sinAz + z * cosAz;
+      const y1 = y * cosEl - z1 * sinEl;
+      const z2 = y * sinEl + z1 * cosEl;
+      return {
+        px: cx + x1 * scale,
+        py: cy - y1 * scale,
+        depth: z2
+      };
+    };
+  }, [camera.azimuth, camera.elevation, width, height]);
+  const handleStart = useCallback((clientX, clientY) => {
+    if (!interactive) {
+      return;
+    }
+    dragRef.current = {
+      startX: clientX,
+      startY: clientY,
+      startAz: camera.azimuth,
+      startEl: camera.elevation
+    };
+  }, [interactive, camera]);
+  const handleMove = useCallback((clientX, clientY) => {
+    if (!dragRef.current) {
+      return;
+    }
+    const dx = clientX - dragRef.current.startX;
+    const dy = clientY - dragRef.current.startY;
+    setCamera({
+      azimuth: dragRef.current.startAz + dx * 0.5,
+      elevation: Math.max(-89, Math.min(89, dragRef.current.startEl - dy * 0.5))
+    });
+  }, []);
+  const handleEnd = useCallback(() => {
+    dragRef.current = null;
+  }, []);
+
+  // Auto-rotation — throttled to ~20fps to avoid overwhelming React with re-renders
+  useEffect(() => {
+    if (autoRotate === 0) {
+      return;
+    }
+    let raf;
+    let lastUpdate = 0;
+    const interval = 50; // ms between React updates (~20fps)
+    const tick = now => {
+      if (!dragRef.current && now - lastUpdate >= interval) {
+        const elapsed = lastUpdate === 0 ? interval : now - lastUpdate;
+        lastUpdate = now;
+        const degrees = autoRotate * (elapsed / 16.67); // normalize to 60fps equivalent
+        setCamera(prev => ({
+          ...prev,
+          azimuth: prev.azimuth + degrees
+        }));
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [autoRotate]);
+  const ctx = useMemo(() => ({
+    width,
+    height,
+    data,
+    xKey,
+    yKey,
+    zKey,
+    project,
+    xDomain,
+    yDomain,
+    zDomain,
+    normalize,
+    camera
+  }), [width, height, data, xKey, yKey, zKey, project, xDomain, yDomain, zDomain, normalize, camera]);
+  const containerStyle = {
+    width: '100%',
+    touchAction: interactive ? 'none' : undefined,
+    userSelect: interactive ? 'none' : undefined
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    style: containerStyle,
+    children: containerWidth > 0 && /*#__PURE__*/_jsx("svg", {
+      width: containerWidth,
+      height: height,
+      onMouseDown: e => handleStart(e.clientX, e.clientY),
+      onMouseMove: e => handleMove(e.clientX, e.clientY),
+      onMouseUp: handleEnd,
+      onMouseLeave: handleEnd,
+      onTouchStart: e => {
+        const t = e.touches[0];
+        if (t) {
+          handleStart(t.clientX, t.clientY);
+        }
+      },
+      onTouchMove: e => {
+        const t = e.touches[0];
+        if (t) {
+          e.preventDefault();
+          handleMove(t.clientX, t.clientY);
+        }
+      },
+      onTouchEnd: handleEnd,
+      style: {
+        cursor: interactive ? 'grab' : undefined,
+        touchAction: interactive ? 'none' : undefined
+      },
+      children: /*#__PURE__*/_jsx(ThreeDProvider, {
+        value: ctx,
+        children: children
+      })
+    })
+  });
+}

package/dist/ThreeD/ThreeDContext.d.ts

@@ -0,0 +1,5 @@
+import type { ThreeDContext } from './types';
+export declare const ThreeDProvider: import("react").Provider<ThreeDContext | null>;
+/** Access the 3D chart context. Throws if used outside ThreeDChart. */
+export declare function use3D(): ThreeDContext;
+//# sourceMappingURL=ThreeDContext.d.ts.map

package/dist/ThreeD/ThreeDContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDContext.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDContext.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,cAAc,gDAAqB,CAAC;AAEjD,uEAAuE;AACvE,wBAAgB,KAAK,IAAI,aAAa,CAMrC"}

package/dist/ThreeD/ThreeDContext.js

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ThreeDContext.ts
+ * @output React context for 3D chart components
+ */
+
+import { createContext, useContext } from 'react';
+const ThreeDCtx = /*#__PURE__*/createContext(null);
+export const ThreeDProvider = ThreeDCtx.Provider;
+
+/** Access the 3D chart context. Throws if used outside ThreeDChart. */
+export function use3D() {
+  const ctx = useContext(ThreeDCtx);
+  if (!ctx) {
+    throw new Error('3D components must be used inside <ThreeDChart>');
+  }
+  return ctx;
+}

package/dist/ThreeD/ThreeDGrid.d.ts

@@ -0,0 +1,5 @@
+export interface ThreeDGridProps {
+    divisions?: number;
+}
+export declare function ThreeDGrid({ divisions }: ThreeDGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ThreeDGrid.d.ts.map

package/dist/ThreeD/ThreeDGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDGrid.d.ts","sourceRoot":"","sources":["../../src/ThreeD/ThreeDGrid.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAC,SAAa,EAAC,EAAE,eAAe,+BAqD1D"}