@awesomephant/reactcake 1.1.2 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# [1.3.0](https://github.com/awesomephant/reactcake/compare/v1.2.0...v1.3.0) (2026-11-15)
+
+
+### Features
+
+* iterate LayoutProps ([e6ea26a](https://github.com/awesomephant/reactcake/commit/e6ea26ad9f583846f20925ada21b5b7504f83d1d))

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

@@ -3,18 +3,31 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface HtmlProps extends LayoutProps {
+  /**
+   * Sets the HTML `role` attribute
+   */
+  role?: string;
   children?: ReactNode;
 }
 
-const Html = ({ overflow = "visible", label, labelledBy, describedBy, children }: HtmlProps) => {
+const Html = ({
+  overflow = "visible",
+  zIndex,
+  label,
+  labelledBy,
+  describedBy,
+  children,
+  role = "figure",
+}: HtmlProps) => {
   const { padding } = useReactCake();
 
   return (
     <div
       className="reactcake-html"
-      aria-label={labelledBy}
+      aria-label={label}
+      aria-labelledby={labelledBy}
       aria-describedby={describedBy}
-      role={label ? "figure" : "none"}
+      role={role}
       style={{
         position: "absolute",
         top: `${padding.top}px`,
@@ -22,6 +35,7 @@ const Html = ({ overflow = "visible", label, labelledBy, describedBy, children }
         right: `${padding.right}px`,
         bottom: `${padding.bottom}px`,
         overflow,
+        zIndex,
       }}
     >
       {children}
@@ -29,4 +43,4 @@ const Html = ({ overflow = "visible", label, labelledBy, describedBy, children }
   );
 };
 
-export default Html;
+export { Html, type HtmlProps };

package/lib/ReactCake/index.tsx

@@ -2,26 +2,57 @@ 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 { 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[];
-  padding?: Padding;
+  data: object[];
+  /**
+   * The key in each row of data that corresponds to the x-field
+   */
+  x?: Accessor;
+  x2?: Accessor;
+  y?: Accessor;
+  z?: Accessor;
+  flatData?: object[];
+  /**
+   * Sets the chart area padding in pixels following the {@link https://gist.github.com/mbostock/3019563 | D3 margin convention}. All values are optional.
+   */
+  padding?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
   xScale?: ScaleLike;
-  yDomain?: [DatumValue | null, DatumValue | null];
+  xRange?: RangeLike;
+  x2Range?: RangeLike;
+  xDomain?: DomainLike;
+  x2Domain?: DomainLike;
+  x2Scale?: ScaleLike;
   yScale?: ScaleLike;
+  yRange?: RangeLike;
+  yDomain?: DomainLike;
   zScale?: ScaleLike;
+  zRange?: RangeLike;
+  zDomain?: DomainLike;
+  /**
+   * CSS property/value pairs applied to the container element.
+   */
   style?: CSSProperties;
+  /**
+   * Sets ranges to `[0, 100]` for SSR
+   */
   percentRange?: boolean;
   children?: ReactNode;
 }
 
+/**
+ * Top-level container element for your chart.
+ */
 const ReactCake = ({
   data = [],
   flatData,
@@ -50,7 +81,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";
@@ -71,10 +102,10 @@ const ReactCake = ({
     ? Array.from(new Set(data.map((d) => _z(d))))
     : extent(flatData || data, _z);
 
-  const _xScale = xScale?.range([0, width]).domain(xDomain || extentX);
+  const _xScale = xScale?.range(xRange || [0, width]).domain(xDomain || extentX);
 
   const _yScale = yScale
-    ?.range([0, height])
+    ?.range(yRange || [0, height])
     .domain([
       yDomain[0] !== null ? yDomain[0] : extentY[0],
       yDomain[1] !== null ? yDomain[1] : extentY[1],
@@ -123,4 +154,4 @@ function useReactCake() {
   return context;
 }
 
-export { ReactCake, useReactCake };
+export { ReactCake, useReactCake, type ReactCakeProps };

package/lib/ScaledSvg/index.tsx

@@ -2,7 +2,10 @@ import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
-interface SvgProps extends LayoutProps {
+interface ScaledSvgProps extends LayoutProps {
+  /**
+   * Sets the contents of the <title> tag
+   */
   title?: string;
   children?: ReactNode;
 }
@@ -14,7 +17,8 @@ const ScaledSvg = ({
   describedBy,
   title,
   overflow = "visible",
-}: SvgProps) => {
+  zIndex,
+}: ScaledSvgProps) => {
   const { padding } = useReactCake();
   return (
     <>
@@ -33,6 +37,7 @@ const ScaledSvg = ({
           top: `${padding.top}px`,
           left: `${padding.left}px`,
           overflow: overflow,
+          zIndex,
         }}
       >
         {title && <title>{title}</title>}
@@ -42,4 +47,4 @@ const ScaledSvg = ({
   );
 };
 
-export default ScaledSvg;
+export { ScaledSvg, type ScaledSvgProps };

package/lib/Svg/index.tsx

@@ -3,11 +3,14 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface SvgProps extends LayoutProps {
+  /**
+   * Sets the contents of the `<title>` tag
+   */
   title?: string;
   children?: ReactNode;
 }
 
-const Svg = ({ children, title, overflow = "hidden" }: SvgProps) => {
+const Svg = ({ children, title, overflow = "hidden", zIndex }: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <svg
@@ -23,6 +26,7 @@ const Svg = ({ children, title, overflow = "hidden" }: SvgProps) => {
         bottom: 0,
         right: 0,
         overflow: overflow,
+        zIndex,
       }}
     >
       {title && <title>{title}</title>}
@@ -31,4 +35,4 @@ const Svg = ({ children, title, overflow = "hidden" }: SvgProps) => {
   );
 };
 
-export default Svg;
+export { Svg, type SvgProps };

package/lib/index.ts

@@ -1,6 +1,18 @@
-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";
+import { type Accessor } from "./types.ts";
 
-export {ReactCake, useReactCake, Html, Svg, ScaledSvg};
+export {
+  Html,
+  ReactCake,
+  useReactCake,
+  Svg,
+  ScaledSvg,
+  type HtmlProps,
+  type ScaledSvgProps,
+  type SvgProps,
+  type ReactCakeProps,
+  type Accessor,
+};

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,18 +1,17 @@
 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 Padding = {
-  top?: number;
-  left?: number;
-  right?: number;
-  bottom?: number;
-};
+export type DomainLike =
+  | [min: number | null, max: number | null]
+  | Array<string | number | null>
+  | ((domain: Array<any>) => Array<any>)
+  | undefined;
 
 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 +19,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;
@@ -35,12 +34,39 @@ export interface ContextValue {
   xGet?: (d: unknown) => number;
   yGet?: (d: unknown) => number;
   zGet?: (d: unknown) => number | string;
-  padding: Padding;
+  padding: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 
 export interface LayoutProps {
-  overflow?: "hidden" | "visible",
+  /**
+   * Sets the CSS `overflow` property.
+   * @defaultValue "visible"
+   */
+  overflow?: "hidden" | "visible";
+  /**
+   * Sets the `aria-label` attribute
+   */
   label?: string;
+  /**
+   * Sets the `aria-labelledby` attribute
+   */
   labelledBy?: string;
+  /**
+   * Sets the `aria-describedby` attribute
+   */
   describedBy?: string;
+  /**
+   * Sets the CSS `z-index` property
+   */
+  zIndex?: number;
+  /**
+   * Sets the CSS `pointer-events` property.
+   * @defaultValue true
+   */
+  pointerEvents?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "1.1.2",
+  "version": "1.3.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,22 +1,54 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
-import {transformerRenderIndentGuides, transformerRenderLineNumber} from "@shikijs/transformers"
+import { defineConfig, fontProviders } from "astro/config";
+import {
+  transformerRenderIndentGuides,
+  transformerRenderLineNumber,
+} from "@shikijs/transformers";
 
-import mdx from '@astrojs/mdx';
+import mdx from "@astrojs/mdx";
 
-import react from '@astrojs/react';
+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"],
+          },
+        ],
+      },
+    },
+    {
+      provider: fontProviders.local(),
+      name: "Areal Mono",
+      cssVariable: "--font-areal-mono",
+      options: {
+        variants: [
+          {
+            weight: "100 900",
+            style: "normal",
+            src: ["./src/assets/ABCArealMonoVariable.woff2"],
+          },
+        ],
+      },
+    },
+  ],
   markdown: {
     shikiConfig: {
-      theme: 'css-variables',
+      theme: "css-variables",
       defaultColor: false,
-      transformers:[transformerRenderLineNumber(), transformerRenderIndentGuides()]
     },
     syntaxHighlight: {
-      type: 'shiki',
-  },
+      type: "shiki",
+    },
   },
 
-  integrations: [mdx(), react()]
+  integrations: [mdx(), react()],
 });

package/site/package.json

@@ -7,23 +7,31 @@
   },
   "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",
+    "prettier": "^3.10.1",
+    "prettier-plugin-astro": "^1.1.2",
+    "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,97 @@
+---
+import { getCollection } from "astro:content";
+import TsdComment from "./TSDComment.astro";
+
+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 class="value">
+            {d?.type.type === "union" ? (
+              `${d.type.types.map((t) => `"${t.value}"`).join(" | ")}`
+            ) : d?.type.type === "array" ? (
+              <>{d.type.elementType.name}[]</>
+            ) : d?.type.type === "reflection" ? (
+              <pre>{JSON.stringify(
+                  Object.fromEntries(
+                    d.type.declaration.children.map((c) => [
+                      c.name,
+                      c.type.name,
+                    ]),
+                  ),
+                  null,
+                  "  ",
+                ).replaceAll('"', "")}</pre>
+            ) : (
+              <>{d?.type?.name}</>
+            )}
+          </code>
+        </span>
+        {d.comment && <TsdComment comment={d.comment} />}
+      </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;
+    border-bottom: 1px dotted currentColor;
+    grid-column: 1 / 4;
+    align-items: baseline;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .required {
+    margin-left: 0.5ch;
+    background: #f2d9d9;
+    font-family: monospace;
+    padding: 0.1em 0.3em;
+    padding-bottom: 0;
+    font-size: 0.9em;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+
+  .value {
+    display: block;
+    hyphens: none;
+    max-width: 32ch;
+    overflow-wrap: break-word;
+  }
+</style>

package/site/src/components/TSDComment.astro

@@ -0,0 +1,32 @@
+---
+const { comment } = Astro.props;
+
+const defaultValue = comment.blockTags?.find((c) => c.tag === "@defaultValue");
+---
+
+<span>
+  {comment.summary.map((part) =>
+    part.kind === "text" ? (
+      <>{part.text}</>
+    ) : part.kind === "code" ? (
+      <code>{part.text.replaceAll("`", "")}</code>
+    ) : part.tag === "@link" ? (
+      <a href={part.target}>{part.text}</a>
+    ) : (
+      <></>
+    ),
+  )}
+  {defaultValue && (
+    <>
+      {" "}
+      Defaults to{" "}
+      <code>
+        {defaultValue.content[0].text
+          .replaceAll("```", "")
+          .replace("ts", "")
+          .trim()}
+      </code>
+      .
+    </>
+  )}
+</span>

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,82 +1,109 @@
 ---
-import "./code.css"
+import { Font } from "astro:assets";
+import "./code.scss";
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>ReactCake</title>
-	</head>
-	<body>
-	<main class="content">
-		<slot />
-	</main>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>ReactCake</title>
+    <Font cssVariable="--font-areal" />
+    <Font cssVariable="--font-areal-mono" />
+  </head>
+  <body>
+    <slot />
+  </body>
 </html>
 
 <style is:global>
   * {
     box-sizing: border-box;
+    font-size: inherit;
     margin: 0;
     padding: 0;
   }
 
-	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%);
-		--ms--1: .8rem
-	}
-
-	a, a:visited {
-	  color: var(--blue-70);
-	}
+  body {
+    margin: 0;
+    width: 100%;
+    padding: 0.5rem;
+    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: 0.8rem padding: 1rem;
+    background: #d8d2f6;
+    line-height: 1.25;
+    color: var(--blue-50);
+  }
 
-	.content {
-	  border: 1px solid var(--blue-70);
-	  max-width: 40rem;
-	  line-height: 1.4;
-		padding: 1rem;
-		border-right: 1px solid var(--blue-70);
-	}
+  a,
+  a:visited {
+    color: var(--blue-50);
+    background: #f0f0f0;
+    text-decoration: none;
+    border-bottom: 1px dotted currentColor;
+  }
 
-	p, li {
-	  letter-spacing: .002em;
-	}
+  code {
+    font-family: var(--font-areal-mono);
+    font-size: 0.825rem;
+  }
 
-	h1 {
-	  font-weight: 900;
-	}
+  p,
+  li {
+    letter-spacing: 0.002em;
+  }
 
-	h2 {
-	  margin-top: 1rem;
-	  margin-bottom: .25rem;
-	}
-	h3 {
-	  margin-top: 1.25rem;
-	  margin-bottom: 0.1rem;
-		font-weight: 600;
-	}
+  h1 {
+    font-weight: 900;
+    font-size: 2.75em;
+    transform: scaleX(0.8);
+    transform-origin: left;
+  }
 
-	p, ul, ol {
-	  margin-bottom: 1rem;
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+  h2 {
+    transform: scaleX(0.8) skew(-10deg);
+    transform-origin: left;
+    font-size: 1.85rem;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  h3 {
+    margin-bottom: 0.1rem;
+    font-weight: 600;
+    font-size: 1.2em;
+  }
+  h4 {
+    font-weight: 400;
+    font-size: 1.1rem;
+    margin-bottom: 0.25rem;
+    code {
+      font-size: 0.85em;
+      font-weight: 800;
+    }
+  }
 
-	ul, ol {
-	  margin-left: 1em;
-	}
+  p,
+  ul,
+  ol {
+    margin-bottom: 0.75em;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
+  ul,
+  ol {
+    margin-left: 1em;
+  }
 </style>

package/site/src/layouts/code.scss

@@ -0,0 +1,32 @@
+.astro-code {
+  --astro-code-background: white;
+  --astro-code-token-comment: #666;
+  font-family: var(--font-areal-mono);
+  border: 1px solid currentColor;
+  margin: 1em 0;
+  margin-top: 0.5em;
+  padding: 0.5em;
+  line-height: 0.95;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+pre.astro-code .indent {
+  display: inline-block;
+  position: relative;
+  left: var(--indent-offset);
+}
+
+pre.astro-code .indent:empty {
+  height: 1lh;
+  vertical-align: bottom;
+}
+
+pre.astro-code .indent::before {
+  content: "";
+  position: absolute;
+  opacity: 0.5;
+  width: 1px;
+  height: 100%;
+}

package/site/src/pages/index.astro

@@ -0,0 +1,137 @@
+---
+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");
+
+const components = ["Reactcake", "Html", "Svg", "ScaledSvg"];
+---
+
+<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"))
+        .sort(
+          (a, b) =>
+            components.indexOf(a.data.name) - components.indexOf(b.data.name),
+        )
+        .map((d) => {
+          return (
+            <>
+              <h4>
+                <code>
+                  {`<`}
+                  {d.data.name}
+                  {`/>`}
+                </code>
+              </h4>
+              {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);
+  }
+
+  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/layouts/code.css

@@ -1,37 +0,0 @@
-.astro-code {
-    --astro-code-background: hsl(51, 62.5%, 93.7%);
-    --astro-code-token-comment: #666;
-	  margin: 1em 0;
-		margin-top: .5em;
-		padding: .5em;
-		font-size: 12px;
-		line-height: 1.25;
-		font-family: monospace;
-	}
-
-
-pre.astro-code .indent {
-  display: inline-block;
-  position: relative;
-  left: var(--indent-offset);
-}
-
-pre.astro-code .indent:empty {
-  height: 1lh;
-  vertical-align: bottom;
-}
-
-pre.astro-code .indent::before {
-  content: '';
-  position: absolute;
-  opacity: 0.5;
-  width: 1px;
-  height: 100%;
-  background-color: red;
-}
-
-pre.astro-code .line-number {
-  user-select: none;
-  color: #666;
-  margin-right: 2ch;
-}

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)