Surface3DChart

import { Surface3DChart } from "@luc/ui/charts";

<Surface3DChart
  z={[
    [0.22, 0.19, 0.18, 0.2],
    [0.2, 0.17, 0.16, 0.18],
    [0.19, 0.16, 0.15, 0.17],
    [0.21, 0.18, 0.17, 0.19],
  ]}
  xLabels={[90, 95, 100, 105]}
  yLabels={[0.25, 0.5, 1, 2]}
  xLabel="Strike"
  yLabel="Maturity (years)"
  zLabel="Implied volatility"
  mode="surface"
  height={380}
  ariaLabel="Volatility grid"
  state="ready"
/>

Implement `Surface3DChart` from Luc UI. It is: Read a field, a geometry or a spectrum, with the scale handled for you.

Import it with: import { Surface3DChart } from "@luc/ui/charts";
Requires: react ^19.0.0; react-dom ^19.0.0; react-hook-form ^7.0.0 (optional, for @luc/ui/forms/react-hook-form); tailwindcss ^4.0.0; node >= 22 (repository tools). Import the stylesheet once at the app root and wrap the tree in `LucProvider`. Both come from the package that publishes @luc.

Chosen configuration: `height={380}`, `state="ready"`, `ariaLabel="Volatility grid"`.

Accessibility: keep the component's own semantics. Do not re-implement its ARIA wiring, do not add roles it does not declare, and make sure every interactive element is reachable and operable from the keyboard with a visible focus state.
Styling: use Luc UI design tokens and the component's own props. Do not restyle with raw colour literals and do not override the component's internal structure with page CSS.
Motion: respect `prefers-reduced-motion`. The component already does, so do not disable it.

Reproduce this state:
```tsx
<Surface3DChart
  z={[
    [0.22, 0.19, 0.18, 0.2],
    [0.2, 0.17, 0.16, 0.18],
    [0.19, 0.16, 0.15, 0.17],
    [0.21, 0.18, 0.17, 0.19],
  ]}
  xLabels={[90, 95, 100, 105]}
  yLabels={[0.25, 0.5, 1, 2]}
  xLabel="Strike"
  yLabel="Maturity (years)"
  zLabel="Implied volatility"
  mode="surface"
  height={380}
  ariaLabel="Volatility grid"
  state="ready"
/>
```