@awesomephant/reactcake 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# [1.2.0](https://github.com/awesomephant/reactcake/compare/v1.1.2...v1.2.0) (2026-11-15)
+
+
+### Features
+
+* Add zIndex prop ([9d57d3f](https://github.com/awesomephant/reactcake/commit/9d57d3ff786a969f9224a90a527e38993dec7899))

package/Readme.md

@@ -2,7 +2,7 @@
 
 A headless chart framework for React inspired by [Layercake](https://layercake.graphics/). See [documentation](https://reactcake.maxkohler.com/) for usage and motivation.
 
-![NPM Version](https://img.shields.io/npm/v/%40awesomephant%2Freactcake) [![release](https://github.com/awesomephant/reactcake/actions/workflows/release.yml/badge.svg)](https://github.com/awesomephant/reactcake/actions/workflows/release.yml)
+[![NPM Version](https://img.shields.io/npm/v/%40awesomephant%2Freactcake)](https://www.npmjs.com/package/@awesomephant/reactcake) [![release](https://github.com/awesomephant/reactcake/actions/workflows/release.yml/badge.svg)](https://github.com/awesomephant/reactcake/actions/workflows/release.yml)
 
 ## Contributing
 

package/lib/Html/index.tsx

@@ -6,12 +6,22 @@ interface HtmlProps extends LayoutProps {
   children?: ReactNode;
 }
 
-const Html = ({ overflow = "visible", children }: HtmlProps) => {
+const Html = ({
+  overflow = "visible",
+  zIndex,
+  label,
+  labelledBy,
+  describedBy,
+  children,
+}: HtmlProps) => {
   const { padding } = useReactCake();
 
   return (
     <div
       className="reactcake-html"
+      aria-label={labelledBy}
+      aria-describedby={describedBy}
+      role={label ? "figure" : "none"}
       style={{
         position: "absolute",
         top: `${padding.top}px`,
@@ -19,6 +29,7 @@ const Html = ({ overflow = "visible", children }: HtmlProps) => {
         right: `${padding.right}px`,
         bottom: `${padding.bottom}px`,
         overflow,
+        zIndex,
       }}
     >
       {children}
@@ -26,4 +37,4 @@ const Html = ({ overflow = "visible", children }: HtmlProps) => {
   );
 };
 
-export default Html;
+export { Html, type HtmlProps };

package/lib/ReactCake/index.tsx

@@ -2,26 +2,43 @@ import { createContext, useContext, type CSSProperties, type ReactNode } from "r
 import { extent } from "d3-array";
 
 import { useDimensions } from "../hooks/useDimensions";
-import type { DatumValue, Padding, ScaleLike, ContextValue } from "../types";
+import type { Padding, ScaleLike, ContextValue, DomainLike, Accessor } from "../types";
 
 const ReactCakeContext = createContext<ContextValue>(null);
 
+type RangeLike = [number, number];
+
 interface ReactCakeProps {
-  x?: string | ((d: unknown, i: number) => Datum);
-  x2?: string | ((d: unknown, i: number) => Datum);
-  y?: string | ((d: unknown, i: number) => Datum);
-  data?: unknown[];
-  flatData?: unknown[];
+  data: object[];
+  /**
+   * x accs comment
+   */
+  x?: Accessor;
+  x2?: Accessor;
+  y?: Accessor;
+  z?: Accessor;
+  flatData?: object[];
   padding?: Padding;
   xScale?: ScaleLike;
-  yDomain?: [DatumValue | null, DatumValue | null];
+  xRange?: RangeLike;
+  xDomain?: DomainLike;
+  x2Scale?: ScaleLike;
   yScale?: ScaleLike;
+  yRange?: RangeLike;
+  yDomain?: DomainLike;
   zScale?: ScaleLike;
+  zRange?: RangeLike;
+  zDomain?: DomainLike;
   style?: CSSProperties;
   percentRange?: boolean;
   children?: ReactNode;
 }
 
+/**
+ * This is a comment
+ * @param param0
+ * @returns
+ */
 const ReactCake = ({
   data = [],
   flatData,
@@ -50,7 +67,7 @@ const ReactCake = ({
   const _x = typeof x === "string" ? (d) => d[x] : x;
   const _x2 = typeof x2 === "string" ? (d) => d[x2] : x2;
   const _y = typeof y === "string" ? (d) => d[y] : y;
-  const _z = typeof y === "string" ? (d) => d[z] : z;
+  const _z = typeof z === "string" ? (d) => d[z] : z;
 
   const xIsBandscale = xScale && typeof xScale.bandwidth === "function";
   const yIsBandscale = yScale && typeof yScale.bandwidth === "function";
@@ -123,4 +140,4 @@ function useReactCake() {
   return context;
 }
 
-export { ReactCake, useReactCake };
+export { ReactCake, useReactCake, type ReactCakeProps };

package/lib/ScaledSvg/index.tsx

@@ -2,17 +2,29 @@ import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
-interface SvgProps extends LayoutProps {
+interface ScaledSvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
+const ScaledSvg = ({
+  children,
+  label,
+  labelledBy,
+  describedBy,
+  title,
+  overflow = "visible",
+  zIndex,
+}: ScaledSvgProps) => {
   const { padding } = useReactCake();
   return (
     <>
       <style>{`svg * { vector-effect: non-scaling-stroke;}`}</style>
       <svg
         className="reactcake-svg"
+        aria-label={labelledBy}
+        aria-describedby={describedBy}
+        role={label ? "figure" : "none"}
         preserveAspectRatio="none"
         height={`calc(100% - ${padding.top}px - ${padding.bottom}px`}
         width={`calc(100% - ${padding.left}px - ${padding.right}px`}
@@ -22,12 +34,14 @@ const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
           top: `${padding.top}px`,
           left: `${padding.left}px`,
           overflow: overflow,
+          zIndex,
         }}
       >
+        {title && <title>{title}</title>}
         {children}
       </svg>
     </>
   );
 };
 
-export default ScaledSvg;
+export { ScaledSvg, type ScaledSvgProps };

package/lib/Svg/index.tsx

@@ -3,10 +3,11 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface SvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
+const Svg = ({ children, title, overflow = "hidden", zIndex }: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <svg
@@ -22,11 +23,13 @@ const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
         bottom: 0,
         right: 0,
         overflow: overflow,
+        zIndex,
       }}
     >
+      {title && <title>{title}</title>}
       <g transform={`translate(${padding.left} ${padding.top})`}>{children}</g>
     </svg>
   );
 };
 
-export default Svg;
+export { Svg, type SvgProps };

package/lib/index.ts

@@ -1,6 +1,16 @@
-import Html from "./Html/index.tsx";
-import Svg from "./Svg";
-import ScaledSvg from "./ScaledSvg"
-import { ReactCake , useReactCake} from "./ReactCake";
+import { Html, type HtmlProps } from "./Html/index.tsx";
+import { Svg, type SvgProps } from "./Svg";
+import { ScaledSvg, type ScaledSvgProps } from "./ScaledSvg";
+import { ReactCake, useReactCake, type ReactCakeProps } from "./ReactCake/index.tsx";
 
-export {ReactCake, useReactCake, Html, Svg, ScaledSvg};
+export {
+  Html,
+  ReactCake,
+  useReactCake,
+  Svg,
+  ScaledSvg,
+  type HtmlProps,
+  type ScaledSvgProps,
+  type SvgProps,
+  type ReactCakeProps,
+};

package/lib/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactcake",
   "dependencies": {
-    "d3-array": "^3.2.4"
+    "d3-array": "^3.2.5"
   },
   "release": {
     "branches": [

package/lib/types.ts

@@ -1,8 +1,14 @@
 import { type ReactNode } from "react";
 
-export type DatumValue = number | Date | string;
+export type DatumValue = number | string | Date;
 export type TickFormatter<TValue = DatumValue> = (value: TValue) => ReactNode;
 
+export type DomainLike =
+  | [min: number | null, max: number | null]
+  | Array<string | number | null>
+  | ((domain: Array<any>) => Array<any>)
+  | undefined;
+
 export type Padding = {
   top?: number;
   left?: number;
@@ -12,7 +18,7 @@ export type Padding = {
 
 export interface ScaleLike<T = DatumValue> {
   (value: unknown): number;
-  domain: () => T[];
+  domain: (domain: DomainLike) => ScaleLike<T>;
   range: (range: [number, number]) => ScaleLike<T>;
   ticks?: (count?: number) => T[];
   tickFormat?: (count?: number) => TickFormatter<T>;
@@ -20,7 +26,7 @@ export interface ScaleLike<T = DatumValue> {
   invert?: (d: number) => ScaleLike;
 }
 
-type Accessor = (x: DatumValue) => number
+export type Accessor = string | ((d: unknown, i?: number) => unknown);
 
 export interface ContextValue {
   width: number;
@@ -39,5 +45,15 @@ export interface ContextValue {
 }
 
 export interface LayoutProps {
-  overflow?: "hidden" | "visible"
+  /**
+   * Sets the CSS overflow property
+   */
+  overflow?: "hidden" | "visible";
+  label?: string;
+  /**
+   * Sets the aria-labelledby attribute
+   */
+  labelledBy?: string;
+  describedBy?: string;
+  zIndex?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A headless chart framework for React inspired by Layercake",
   "keywords": [
     "react",
@@ -27,21 +27,30 @@
     "build:ts": "esbuild lib/index.ts --outdir=./dist --bundle",
     "build:min": "esbuild lib/index.ts --outdir=./dist --entry-names=[dir]/[name].min --bundle --minify",
     "build:types": "tsc",
-    "build:lib": "run-p 'build:ts' 'build:min'",
-    "build:demo": "esbuild src/index.ts src/index.html --loader:.html=copy --outdir=./_site --minify"
+    "build:lib": "run-p 'build:ts' 'build:min'"
   },
   "devDependencies": {
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.2",
     "npm-run-all": "^4.1.5",
-    "tsx": "^4.21.0",
-    "typescript": "^7.0.2"
+    "tsx": "^4.23.15",
+    "typescript": "^6.0.0"
   },
   "workspaces": [
-    "site",
-    "lib"
+    "lib",
+    "site"
   ],
   "allowScripts": {
     "esbuild@0.28.2": true,
-    "fsevents@2.3.3": true
+    "fsevents@2.3.3": true,
+    "@parcel/watcher@2.6.0": true
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
   }
 }

package/site/astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig, fontProviders } from 'astro/config';
 import {transformerRenderIndentGuides, transformerRenderLineNumber} from "@shikijs/transformers"
 
 import mdx from '@astrojs/mdx';
@@ -7,11 +7,22 @@ import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 
 export default defineConfig({
+  fonts: [{
+    provider: fontProviders.local(),
+    name: "Areal",
+    cssVariable: "--font-areal",
+    options: {
+      variants: [{
+      weight: "100 900",
+      style: "normal",
+      src:["./src/assets/ABCArealVariable.woff2"]
+}]
+    }
+  }],
   markdown: {
     shikiConfig: {
       theme: 'css-variables',
       defaultColor: false,
-      transformers:[transformerRenderLineNumber(), transformerRenderIndentGuides()]
     },
     syntaxHighlight: {
       type: 'shiki',

package/site/package.json

@@ -7,23 +7,29 @@
   },
   "scripts": {
     "start": "astro dev",
-    "build": "astro build",
+    "build:typedoc": "typedoc ../lib/index.ts --tsconfig ../tsconfig.json --json ./src/content/typedoc.json",
+    "build:astro": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "build": "run-s 'build:*'"
   },
   "dependencies": {
-    "@astrojs/markdown-satteri": "^0.4.6",
-    "@astrojs/mdx": "^8.1.2",
-    "@astrojs/react": "^7.1.2",
-    "astro": "^7.4.4",
-    "d3-scale": "^4.0.2",
+    "@astrojs/markdown-satteri": "^0.4.7",
+    "@astrojs/mdx": "^8.1.3",
+    "@astrojs/react": "^7.1.4",
+    "astro": "^7.4.7",
+    "d3-scale": "^4.0.3",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },
   "devDependencies": {
+    "@semantic-release/changelog": "^7.0.0",
     "@shikijs/transformers": "^4.6.0",
     "@types/d3-scale": "^4.0.9",
     "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0"
+    "@types/react-dom": "^19.3.0",
+    "npm-run-all": "^4.1.5",
+    "sass-embedded": "^1.108.2",
+    "typedoc": "^0.28.20"
   }
 }

package/site/src/components/Example.astro

@@ -10,8 +10,7 @@ const {height, width = "100%"} = Astro.props
 
 <style>
   .container {
-    margin: 1rem 0;
     border: 1px solid var(--blue-50);
-    font-family: sans-serif;
+    font-size: 13px;
   }
 </style>

package/site/src/components/PropList.astro

@@ -0,0 +1,55 @@
+---
+import { getCollection } from "astro:content";
+
+const {data} = Astro.props;
+const typedoc = await getCollection('typedoc');
+
+const expandReferenceType = (name: string, data) => {
+  const ref = data.find(d => d.data.name === name)
+  return ref ? ref.data.children : null;
+}
+
+const expanded = data[0].parameters ? data[0].parameters.map(d => {
+  return d.type.type === "reference"? expandReferenceType(d.type.name, typedoc): d.type
+}).flat(): []
+
+---
+
+<ul>
+  {expanded.map(d =>
+  <>
+    <li><span>{d?.name}{!d?.flags.isOptional && <strong class="required">required</strong>}</span><span><code>{d?.type.type  === "union"? `${d.type.types.map(t => `"${t.value}"`).join(" | ")}` : d?.type.type ==="array"?<code>{d.type.elementType.name}[]</code>  : d?.type?.name}</code></span>{d.comment && <span>{d.comment.summary[0].text}</span>}</li>
+  </>
+  )}
+</ul>
+
+<style lang="scss">
+  ul {
+    display: grid;
+    grid-template-columns: repeat(2, max-content) 1fr;
+    margin: 0;
+    column-gap: 2rem;
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+
+  li {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / 4;
+    border-bottom: 1px dotted currentColor;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .required {
+    margin-left: .5ch;
+    background: #f2d9d9;
+    font-family: monospace;
+    padding: .1em .3em;
+    padding-bottom: 0;
+    font-size: .9em;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+</style>

package/site/src/content/background.md

@@ -0,0 +1,18 @@
+## Background
+
+ReactCake provides useful context for drawing data-driven charts, like a shared coordinate system, data extents and margins. Components that draw actual chart elements, like bars and lines, live in your project or your own component library; ReactCake is completely agnostic to what you render with it.
+
+It provides sensible defaults and infers as much information as possible from your data, but also exposes fine-grained props to configure things yourself. Its primary use case are custom news graphics.
+
+ReactCake is built on [D3](https://d3js.org/what-is-d3).
+
+### Relationship to Layercake
+
+This project is an attempt to carefully translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.
+
+
+### Prior work
+
+- Rich Harris (2020): *[A new technique for making responsive, JavaScript-free charts](https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp)*
+- Michael Keller + contributors: *[Layercake](https://layercake.graphics/)*
+- Rich Harris (2020): *[pancake](https://github.com/Rich-Harris/pancake)*

package/site/src/content/installation.md

@@ -0,0 +1,38 @@
+### Installation
+
+```bash
+npm install --save @awesomephant/reactcake
+```
+
+### Usage
+
+```tsx
+import { ReactCake, Html, Svg } from "@awesomephant/reactcake";
+import { scaleLinear, scaleBand } from "d3-scale"
+
+// Chart components live in your project
+import { xScale, yScale, Bars } from "./lib";
+
+const data = [
+  {year: 2024, value: 32},
+  {year: 2025, value: 15},
+  {year: 2026, value: 52}
+];
+
+// Use any d3 scale
+const xScale = scaleBand();
+const yScale = scaleLinear();
+
+// Build charts declaratively
+return (
+  <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
+    <Html>
+      <AxisX />
+      <AxisY />
+    </Html>
+    <Svg>
+      <Bars/>
+    </Svg>
+  </ReactCake>
+);
+```

package/site/src/content.config.ts

@@ -0,0 +1,8 @@
+import { defineCollection } from "astro:content";
+import { file } from "astro/loaders";
+
+const typedoc = defineCollection({
+  loader: file("./src/content/typedoc.json", { parser: (s) => JSON.parse(s).children }),
+});
+
+export const collections = { typedoc };

package/site/src/examples/AxisX/styles.module.css

@@ -9,7 +9,7 @@
 }
 
 .tick__mark {
-  border-left: 1px solid var(--blue-50);
+  border-left: 1px solid currentColor;
   position: absolute;
   transform: translateX(-50%);
 }
@@ -17,20 +17,19 @@
 .gridline {
   bottom: 0;
   position: absolute;
-  border-left: 1px dotted var(--blue-50);
+  border-left: 1px dotted currentColor;
 }
 
 
 .baseline {
   position: absolute;
-  border-bottom: 1px solid var(--blue-50);
+  border-bottom: 1px solid currentColor;
   width: 100%;
 }
 
 .tick__text {
   display: block;
   font-size: var(--ms--1);
-  color: var(--blue-50);
   position: relative;
   white-space: nowrap;
 }

package/site/src/examples/AxisY/index.tsx

@@ -11,6 +11,7 @@ interface AxisYProps {
   grid?: boolean;
   showTicks?: boolean;
   snapLabels?: boolean;
+  tickGutter: number;
   tickLength?: number;
 }
 
@@ -23,7 +24,7 @@ const AxisY = ({
   tickGutter = 3,
   format = (d) => String(d),
 }: AxisYProps) => {
-  const { yScale, padding } = useReactCake();
+  const { yScale } = useReactCake();
   const isBandwidth = typeof yScale.bandwidth === "function";
 
   const tickVals = Array.isArray(ticks)

package/site/src/examples/AxisY/styles.module.css

@@ -6,7 +6,7 @@
 
 .tick {
   position: absolute;
-  border-top: 1px solid var(--blue-50);
+  border-top: 1px solid currentColor;
 }
 
 
@@ -14,20 +14,18 @@
   left: 0;
   right: 0;
   position: absolute;
-  border-top: 1px dotted var(--blue-50);
+  border-top: 1px dotted currentColor;
 }
 
-
 .baseline {
   position: absolute;
-  border-left: 1px solid var(--blue-50);
+  border-left: 1px solid currentColor;
   height: 100%;
 }
 
 .text {
   display: block;
   font-size: var(--ms--1);
-  color: var(--blue-50);
   white-space: nowrap;
   transform: translateY(-50%);
 }

package/site/src/examples/ColumnChart.tsx

@@ -7,8 +7,6 @@ import { max } from "d3-array";
 import DebugPadding from "./DebugPadding";
 
 const data = [
-  { year: 2021, value: 18 },
-  { year: 2022, value: 12 },
   { year: 2023, value: 22 },
   { year: 2024, value: 32 },
   { year: 2025, value: 15 },

package/site/src/examples/Columns.tsx

@@ -18,7 +18,7 @@ export default function Columns() {
             y={100 - valueY}
             width={colWidth}
             height={valueY}
-            stroke="var(--blue-50)"
+            stroke="currentColor"
             fill="none"
           />
         );

package/site/src/examples/DebugPadding.tsx

@@ -2,6 +2,7 @@ import { useReactCake } from "../../../lib";
 
 export default function DebugPadding() {
   const { padding } = useReactCake();
+  const fill = "rgba(125,125,105,.1)";
   return (
     <div
       style={{
@@ -10,7 +11,7 @@ export default function DebugPadding() {
         right: 0,
         top: 0,
         bottom: 0,
-        boxShadow: `${padding.right}px 0 var(--blue-20), 0 ${padding.bottom}px  var(--blue-20), 0 ${-padding.top}px  var(--blue-20), -${padding.left}px 0  var(--blue-20)`,
+        boxShadow: `${padding.right}px 0 ${fill}, 0 ${padding.bottom}px ${fill}, 0 ${-padding.top}px  ${fill}, -${padding.left}px 0  ${fill}`,
       }}
     ></div>
   );

package/site/src/layouts/Base.astro

@@ -1,5 +1,6 @@
 ---
-import "./code.css"
+import { Font } from "astro:assets";
+import "./code.scss"
 ---
 
 <!doctype html>
@@ -10,11 +11,10 @@ import "./code.css"
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>ReactCake</title>
+		<Font cssVariable="--font-areal" />
 	</head>
 	<body>
-	<main class="content">
 		<slot />
-	</main>
 	</body>
 </html>
 
@@ -23,32 +23,33 @@ import "./code.css"
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    font-size: inherit;
   }
 
 	body {
 		margin: 0;
 		width: 100%;
 		padding: .5rem;
-		font-family: Georgia, 'Times New Roman', Times, serif;
-		--blue-70: hsl(220, 0%, 20%);
-		--blue-50: hsl(220, 0%, 36%);
-		--blue-30: hsl(220, 0%, 76%);
-		--blue-20: hsl(220, 0%, 92%);
-		--blue-10: hsl(220, 0%, 97%);
+		font-family: var(--font-areal), sans-serif;
+		--blue-70: hsl(20, 80%, 20%);
+		--blue-50: hsl(20, 80%, 26%);
+		--blue-30: hsl(20, 80%, 76%);
+		--blue-20: hsl(20, 80%, 92%);
+		--blue-10: hsl(20, 80%, 97%);
 		--ms--1: .8rem
+		padding: 1rem;
+		background: #d8d2f6;
+		line-height: 1.25;
+		color: var(--blue-50);
 	}
 
 	a, a:visited {
-	  color: var(--blue-70);
+	  color: var(--blue-50);
+		background: #f0f0f0;
+		text-decoration: none;
+		border-bottom: 1px dotted currentColor;
 	}
 
-	.content {
-	  border: 1px solid var(--blue-70);
-	  max-width: 40rem;
-	  line-height: 1.4;
-		padding: 1rem;
-		border-right: 1px solid var(--blue-70);
-	}
 
 	p, li {
 	  letter-spacing: .002em;
@@ -56,20 +57,35 @@ import "./code.css"
 
 	h1 {
 	  font-weight: 900;
+		font-size: 2.75em;
+		transform: scaleX(.8);
+		transform-origin: left;
 	}
 
 	h2 {
+		transform: scaleX(.8);
+		transform-origin: left;
+		font-size: 1.75rem;
 	  margin-top: 1rem;
 	  margin-bottom: .25rem;
+		&:first-child {
+			margin-top: 0;
+		}
 	}
 	h3 {
-	  margin-top: 1.25rem;
 	  margin-bottom: 0.1rem;
 		font-weight: 600;
+		font-size: 1.2em;
+	}
+	h4 {
+		font-weight: 400;
+		font-size: 1rem;
+		opacity: .7;
+	  margin-bottom: 0.1rem;
 	}
 
 	p, ul, ol {
-	  margin-bottom: 1rem;
+	  margin-bottom: .75em;
 		&:last-child {
 			margin-bottom: 0;
 		}

package/site/src/layouts/{code.css → code.scss}

@@ -1,12 +1,16 @@
 .astro-code {
-    --astro-code-background: hsl(51, 62.5%, 93.7%);
+    --astro-code-background: white;
     --astro-code-token-comment: #666;
+    border: 1px solid currentColor;
 	  margin: 1em 0;
 		margin-top: .5em;
 		padding: .5em;
 		font-size: 12px;
-		line-height: 1.25;
+		line-height: 1.1;
 		font-family: monospace;
+		&:last-child {
+		  margin-bottom: 0;
+		}
 	}
 
 
@@ -27,11 +31,10 @@ pre.astro-code .indent::before {
   opacity: 0.5;
   width: 1px;
   height: 100%;
-  background-color: red;
 }
 
 pre.astro-code .line-number {
   user-select: none;
-  color: #666;
-  margin-right: 2ch;
+  color: rgba(black, .5);
+  margin-right: 3ch;
 }

package/site/src/pages/index.astro

@@ -0,0 +1,108 @@
+---
+import { getCollection } from 'astro:content';
+
+import Base from  "../layouts/Base.astro"
+import {Content as Installation} from "../content/installation.md"
+import {Content as Background} from "../content/background.md"
+import Example from "../components/Example.astro"
+import PropList from "../components/PropList.astro"
+import ColumnChart from "../examples/ColumnChart.tsx"
+
+const typedoc = await getCollection('typedoc');
+
+---
+
+<Base>
+
+<article class="home">
+
+<header>
+  <div>
+    <h1>ReactCake</h1>
+    <p>A headless chart framework for React inspired by <a href="https://layercake.graphics/">Layercake</a></p>
+    <ul>
+      <li><a href="https://github.com/awesomephant/reactcake">Github</a></li>
+      <li><a href="https://www.npmjs.com/package/@awesomephant/reactcake">npm</a></li>
+    </ul>
+  </div>
+  <Example height="12rem" >
+    <ColumnChart/>
+  </Example>
+</header>
+
+<section class="installation">
+  <h2>Quickstart</h2>
+  <Installation/>
+</section>
+
+<section class="docs">
+  <h2>Docs</h2>
+  <h3>Components</h3>
+  {typedoc.filter(d => d.data.kind === 64 && !d.data.name.startsWith("use")).map(d => {
+    return (
+    <>
+      <h3><code>{`<`}{d.data.name}{`/>`}</code></h3>
+      {d.data.signatures[0].comment && <p>{d.data.signatures[0].comment.summary[0].text}</p>}
+      <PropList data={d.data.signatures}/>
+    </>)
+  })}
+  <h3>Hooks</h3>
+  {typedoc.filter(d => d.data.kind === 64 && d.data.name.startsWith("use")).map(d => {
+    return (
+    <>
+      <h3><code>{d.data.name}{`()`}</code></h3>
+      {d.data.signatures[0].comment && <p>{d.data.signatures[0].comment.summary[0].text}</p>}
+      <PropList data={d.data.signatures}/>
+    </>)
+  })}
+  <h3>Utils</h3>
+
+</section>
+
+<section class="background">
+  <Background/>
+</section>
+</article>
+
+</Base>
+
+<style lang="scss">
+.home {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  hyphens: auto;
+}
+
+header, section {
+  padding: 1rem;
+  border: 1px solid var(--blue-50);
+  background-color: white;
+  margin-bottom: -1px;
+  margin-right: -1px;
+
+}
+header {
+  border-top: 1px solid var(--blue-50);
+  border-left: 1px solid var(--blue-50);
+  grid-column: span 2;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+}
+
+.installation {
+  border-top: 1px solid var(--blue-50);
+  grid-column: 3 / 8;
+}
+.docs {
+  border-top: 1px solid var(--blue-50);
+  grid-column: 8 / 13;
+  grid-row: span 3;
+}
+
+.background {
+  grid-column: 3 / 8;
+  border-left: 1px solid var(--blue-50);
+}
+
+</style>

package/tsconfig.json

@@ -7,7 +7,7 @@
     "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
     "outDir": "dist",
-    "rootDir": "./lib",
+    "rootDir": ".",
     "declaration": true,
     "emitDeclarationOnly": true,
     "allowImportingTsExtensions": true,

package/site/src/pages/index.mdx

@@ -1,73 +0,0 @@
----
-layout: "../layouts/Base.astro"
-
----
-
-import Example from "../components/Example.astro"
-import ColumnChart from "../examples/ColumnChart.tsx"
-
-# ReactCake
-
-A headless chart framework for React inspired by [Layercake](https://layercake.graphics/).
-
-<Example height="12rem" width="20rem">
-  <ColumnChart></ColumnChart>
-</Example>
-
-## Installation
-
-```bash
-npm install --save @awesomephant/reactcake
-```
-
-## Usage
-
-```tsx
-import { ReactCake, Html, Svg } from "@awesomephant/reactcake";
-import { scaleLinear, scaleBand } from "d3-scale"
-
-// Chart components live in your project
-import { xScale, yScale, Bars } from "./lib";
-
-const data = [
-  {year: 2024, value: 32},
-  {year: 2025, value: 15},
-  {year: 2026, value: 52}
-];
-
-// Use any d3 scale
-const xScale = scaleTime();
-const xScale = scaleBand();
-
-// Build charts declaratively
-return (
-  <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
-    <Html>
-      <AxisX />
-      <AxisY />
-    </Html>
-    <Svg>
-      <Bars/>
-    </Svg>
-  </ReactCake>
-);
-```
-
-## Concepts
-
-ReactCake provides useful context for drawing data-driven charts, like a coordinate system, data extents and shared margins. Components that draw actual chart elements, like bars and lines, live in your project (or maybe a local component library), ReactCake is completely agnostic to what you render with it.
-
-It provides sensible defaults and infers as much information as possible from your data, but also exposes fine-grained props to configure things yourself.
-
-ReactCake is built on [D3](https://d3js.org/what-is-d3).
-
-### Relationship to Layercake
-
-This project is an attempt to carefully translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.
-
-
-### Prior work
-
-- [A new technique for making responsive, JavaScript-free charts](https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp)
-- [Layercake](https://layercake.graphics/)
-- [pancake](https://github.com/Rich-Harris/pancake)