/* ═══════════════════════════════════════════════════════════
   Granularity explorations — compose the three on a design canvas
═══════════════════════════════════════════════════════════ */
const { DesignCanvas, DCSection, DCArtboard } = window;

function GranApp() {
  return (
    <DesignCanvas>
      <DCSection
        id="dirs"
        title="Granularity ↔ Timescale"
        subtitle="Three live takes on one idea — detail decreases as the horizon widens. Click the rungs, drag the dial, tap the rings; each drives the same readings at a different resolution."
      >
        <DCArtboard id="a" label="A · The Spine — vertical granularity axis" width={560} height={648}>
          <SpineAxis />
        </DCArtboard>
        <DCArtboard id="b" label="B · The Lens — zoom dial / telescope" width={560} height={648}>
          <ZoomDial />
        </DCArtboard>
        <DCArtboard id="c" label="C · The Orrery — concentric rings" width={584} height={648}>
          <OrreryRings />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<GranApp />);