@awesomephant/reactcake 1.2.0 → 1.3.0

package/CHANGELOG.md

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

package/lib/Html/index.tsx

@@ -3,6 +3,10 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface HtmlProps extends LayoutProps {
+  /**
+   * Sets the HTML `role` attribute
+   */
+  role?: string;
   children?: ReactNode;
 }
 
@@ -13,15 +17,17 @@ const Html = ({
   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`,

package/lib/ReactCake/index.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, type CSSProperties, type ReactNode } from "r
 import { extent } from "d3-array";
 
 import { useDimensions } from "../hooks/useDimensions";
-import type { Padding, ScaleLike, ContextValue, DomainLike, Accessor } from "../types";
+import type { ScaleLike, ContextValue, DomainLike, Accessor } from "../types";
 
 const ReactCakeContext = createContext<ContextValue>(null);
 
@@ -11,17 +11,27 @@ type RangeLike = [number, number];
 interface ReactCakeProps {
   data: object[];
   /**
-   * x accs comment
+   * The key in each row of data that corresponds to the x-field
    */
   x?: Accessor;
   x2?: Accessor;
   y?: Accessor;
   z?: Accessor;
   flatData?: object[];
-  padding?: Padding;
+  /**
+   * 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;
   xRange?: RangeLike;
+  x2Range?: RangeLike;
   xDomain?: DomainLike;
+  x2Domain?: DomainLike;
   x2Scale?: ScaleLike;
   yScale?: ScaleLike;
   yRange?: RangeLike;
@@ -29,15 +39,19 @@ interface ReactCakeProps {
   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;
 }
 
 /**
- * This is a comment
- * @param param0
- * @returns
+ * Top-level container element for your chart.
  */
 const ReactCake = ({
   data = [],
@@ -88,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],

package/lib/ScaledSvg/index.tsx

@@ -3,6 +3,9 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface ScaledSvgProps extends LayoutProps {
+  /**
+   * Sets the contents of the <title> tag
+   */
   title?: string;
   children?: ReactNode;
 }

package/lib/Svg/index.tsx

@@ -3,6 +3,9 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface SvgProps extends LayoutProps {
+  /**
+   * Sets the contents of the `<title>` tag
+   */
   title?: string;
   children?: ReactNode;
 }

package/lib/index.ts

@@ -2,6 +2,7 @@ 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 {
   Html,
@@ -13,4 +14,5 @@ export {
   type ScaledSvgProps,
   type SvgProps,
   type ReactCakeProps,
+  type Accessor,
 };

package/lib/types.ts

@@ -9,13 +9,6 @@ export type DomainLike =
   | ((domain: Array<any>) => Array<any>)
   | undefined;
 
-export type Padding = {
-  top?: number;
-  left?: number;
-  right?: number;
-  bottom?: number;
-};
-
 export interface ScaleLike<T = DatumValue> {
   (value: unknown): number;
   domain: (domain: DomainLike) => ScaleLike<T>;
@@ -41,19 +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 {
   /**
-   * Sets the CSS overflow property
+   * Sets the CSS `overflow` property.
+   * @defaultValue "visible"
    */
   overflow?: "hidden" | "visible";
+  /**
+   * Sets the `aria-label` attribute
+   */
   label?: string;
   /**
-   * Sets the aria-labelledby attribute
+   * 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.2.0",
+  "version": "1.3.0",
   "description": "A headless chart framework for React inspired by Layercake",
   "keywords": [
     "react",

package/site/astro.config.mjs

@@ -1,33 +1,54 @@
 // @ts-check
-import { defineConfig, fontProviders } 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"]
-}]
-    }
-  }],
+  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,
     },
     syntaxHighlight: {
-      type: 'shiki',
-  },
+      type: "shiki",
+    },
   },
 
-  integrations: [mdx(), react()]
+  integrations: [mdx(), react()],
 });

package/site/package.json

@@ -29,6 +29,8 @@
     "@types/react": "^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/PropList.astro

@@ -1,26 +1,60 @@
 ---
 import { getCollection } from "astro:content";
+import TsdComment from "./TSDComment.astro";
 
-const {data} = Astro.props;
-const typedoc = await getCollection('typedoc');
+const { data } = Astro.props;
+const typedoc = await getCollection("typedoc");
 
 const expandReferenceType = (name: string, data) => {
-  const ref = data.find(d => d.data.name === name)
+  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(): []
+};
 
+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>
-  </>
-  )}
+  {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">
@@ -36,20 +70,28 @@ const expanded = data[0].parameters ? data[0].parameters.map(d => {
   li {
     display: grid;
     grid-template-columns: subgrid;
-    grid-column: 1 / 4;
     border-bottom: 1px dotted currentColor;
+    grid-column: 1 / 4;
+    align-items: baseline;
     &:last-child {
       border-bottom: 0;
     }
   }
   .required {
-    margin-left: .5ch;
+    margin-left: 0.5ch;
     background: #f2d9d9;
     font-family: monospace;
-    padding: .1em .3em;
+    padding: 0.1em 0.3em;
     padding-bottom: 0;
-    font-size: .9em;
+    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/installation.md

@@ -8,15 +8,15 @@ npm install --save @awesomephant/reactcake
 
 ```tsx
 import { ReactCake, Html, Svg } from "@awesomephant/reactcake";
-import { scaleLinear, scaleBand } from "d3-scale"
+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}
+  { year: 2024, value: 32 },
+  { year: 2025, value: 15 },
+  { year: 2026, value: 52 },
 ];
 
 // Use any d3 scale
@@ -31,7 +31,7 @@ return (
       <AxisY />
     </Html>
     <Svg>
-      <Bars/>
+      <Bars />
     </Svg>
   </ReactCake>
 );

package/site/src/layouts/Base.astro

@@ -1,98 +1,109 @@
 ---
 import { Font } from "astro:assets";
-import "./code.scss"
+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>
-		<Font cssVariable="--font-areal" />
-	</head>
-	<body>
-		<slot />
-	</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;
-    font-size: inherit;
   }
 
-	body {
-		margin: 0;
-		width: 100%;
-		padding: .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: .8rem
-		padding: 1rem;
-		background: #d8d2f6;
-		line-height: 1.25;
-		color: var(--blue-50);
-	}
-
-	a, a:visited {
-	  color: var(--blue-50);
-		background: #f0f0f0;
-		text-decoration: none;
-		border-bottom: 1px dotted currentColor;
-	}
+  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);
+  }
 
+  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;
-		font-size: 2.75em;
-		transform: scaleX(.8);
-		transform-origin: left;
-	}
+  p,
+  li {
+    letter-spacing: 0.002em;
+  }
 
-	h2 {
-		transform: scaleX(.8);
-		transform-origin: left;
-		font-size: 1.75rem;
-	  margin-top: 1rem;
-	  margin-bottom: .25rem;
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-	h3 {
-	  margin-bottom: 0.1rem;
-		font-weight: 600;
-		font-size: 1.2em;
-	}
-	h4 {
-		font-weight: 400;
-		font-size: 1rem;
-		opacity: .7;
-	  margin-bottom: 0.1rem;
-	}
+  h1 {
+    font-weight: 900;
+    font-size: 2.75em;
+    transform: scaleX(0.8);
+    transform-origin: left;
+  }
 
-	p, ul, ol {
-	  margin-bottom: .75em;
-		&: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

@@ -1,18 +1,16 @@
 .astro-code {
-    --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.1;
-		font-family: monospace;
-		&:last-child {
-		  margin-bottom: 0;
-		}
-	}
-
+  --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;
@@ -26,15 +24,9 @@ pre.astro-code .indent:empty {
 }
 
 pre.astro-code .indent::before {
-  content: '';
+  content: "";
   position: absolute;
   opacity: 0.5;
   width: 1px;
   height: 100%;
 }
-
-pre.astro-code .line-number {
-  user-select: none;
-  color: rgba(black, .5);
-  margin-right: 3ch;
-}

package/site/src/pages/index.astro

@@ -1,108 +1,137 @@
 ---
-import { getCollection } from 'astro:content';
+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"
+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 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")).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>
-
+  <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);
-  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);
-}
-
+  .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>