@tinyvolt/pie 0.0.0-stage → 0.1.0

package/src/lib/autodiff/index.ts

@@ -0,0 +1,49 @@
+import { grad, numpy as np } from '@jax-js/jax';
+
+/**
+ * How to walk a graph whose items carry their own inputs.
+ * `inputs` gives undefined for an item that wasn't computed from others.
+ */
+export interface Graph<T> {
+  id: (item: T) => string;
+  inputs: (item: T) => T[] | undefined;
+  /** Computes `item` again from new inputs. */
+  recompute: (item: T, inputs: T[]) => T;
+}
+
+/**
+ * `target` computed again, with the item whose id is `varId` swapped for
+ * `replacement`. Items that don't read that item, directly or through others,
+ * are returned as they are and not recomputed.
+ */
+export function replay<T>(graph: Graph<T>, target: T, varId: string, replacement: T): T {
+  const done = new Map<string, T>();
+  const visit = (item: T): T => {
+    const id = graph.id(item);
+    if (id === varId) return replacement;
+    if (done.has(id)) return done.get(id)!;
+    const inputs = graph.inputs(item);
+    let result = item;
+    if (inputs) {
+      const newInputs = inputs.map(visit);
+      if (newInputs.some((input, i) => input !== inputs[i])) result = graph.recompute(item, newInputs);
+    }
+    done.set(id, result);
+    return result;
+  };
+  return visit(target);
+}
+
+/**
+ * df/dxᵢ for each xᵢ in `xs`.
+ *
+ * jax-js frees an array once it is used. This uses up `xs` and whatever `f`
+ * returns, so pass `.ref` copies of values you keep.
+ *
+ * Nesting works: `f` may itself call `gradient`. Any value the inner `f` reads
+ * from an outer one must be captured by `f`, not passed in as an extra argument —
+ * jax-js drops the gradient through arguments it is not differentiating.
+ */
+export function gradient(f: (...xs: np.Array[]) => np.Array, xs: np.Array[]): np.Array[] {
+  return grad(f, { argnums: xs.map((_, i) => i) })(...xs);
+}

package/src/lib/layouts/layout.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'solid-js';
+
+export type LayoutModules = Record<string, { default?: Component }>;
+
+/**
+ * The default export of a `layouts/` file, given an `import.meta.glob` of that one file,
+ * or `builtIn` when the site has no such file. Throws, naming the file, when it has no default export.
+ */
+export function layout(modules: LayoutModules, builtIn: Component): Component {
+  const [entry] = Object.entries(modules);
+  if (!entry) return builtIn;
+  const [file, mod] = entry;
+  if (typeof mod.default !== 'function') throw new Error(noDefaultExport(file.slice(1)));
+  return mod.default;
+}
+
+/** Shared with `vitePlugin.ts`, so dev and build say the same thing. */
+export function noDefaultExport(file: string): string {
+  return `${file} must have a default export: a Solid component`;
+}

package/src/lib/layouts/vitePlugin.ts

@@ -0,0 +1,39 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { parseSync, type Plugin } from 'vite';
+import { noDefaultExport } from './layout';
+
+// Each `layouts/` file that replaces a built-in part of the site.
+const LAYOUT_FILES = ['layouts/header.tsx', 'layouts/index.tsx'];
+
+/**
+ * Fails the build when a `layouts/` file has no default export.
+ * Without this, the error only stops pages from prerendering.
+ */
+export function checkLayouts(): Plugin {
+  let root = '';
+  let checked = false;
+
+  return {
+    name: 'check-layouts',
+    apply: 'build',
+    configResolved(config) {
+      root = config.root;
+    },
+    // Runs once per build environment (client, ssr, ...); one check is enough.
+    buildStart() {
+      if (checked) return;
+      checked = true;
+      const bad = LAYOUT_FILES.filter(file => {
+        const full = path.join(root, file);
+        if (!fs.existsSync(full)) return false;
+        const { module, errors } = parseSync(full, fs.readFileSync(full, 'utf8'));
+        // Vite reports syntax errors itself, with a better message.
+        if (errors.length) return false;
+        return !module.staticExports.some(e =>
+          e.entries.some(entry => entry.exportName.kind === 'Default' || entry.exportName.name === 'default'));
+      });
+      if (bad.length) this.error(bad.map(noDefaultExport).join('\n'));
+    },
+  };
+}

package/src/lib/markdown/components/CanvasPage.tsx

@@ -0,0 +1,25 @@
+import { SplitPane } from '~/components/SplitPane';
+import { NodeCanvas } from '~/lib/nodes/components/NodeCanvas';
+import { NodeStore } from '~/lib/nodes/state/NodeStore';
+import type { CanvasSide } from '../frontmatter';
+import { MarkdownBody } from './MarkdownBody';
+
+/** A canvas on `side` of the page's text. `python-editor` blocks in the text draw on it. */
+export function CanvasPage(props: { side: Exclude<CanvasSide, 'none'>; html: string }) {
+  const store = new NodeStore();
+
+  return (
+    <SplitPane
+      class="canvas-page"
+      side={props.side}
+      first={
+        <div class="canvas-page-canvas">
+          <NodeCanvas store={store} />
+        </div>
+      }
+      second={<MarkdownBody class="canvas-page-text" html={props.html} store={store} />}
+      firstLabel="canvas"
+      secondLabel="text"
+    />
+  );
+}

package/src/lib/markdown/components/MarkdownBody.tsx

@@ -0,0 +1,41 @@
+import { onCleanup, onMount } from 'solid-js';
+import { render } from 'solid-js/web';
+import type { NodeStore } from '~/lib/nodes/state/NodeStore';
+import { PythonScope } from '~/lib/python/runner';
+
+const PYTHON_EDITOR_LANG = 'python-editor';
+
+/**
+ * Rendered markdown. On the client, each ```python-editor block becomes a runnable editor;
+ * until then it shows as a plain code block. All editors on the page share Python variables.
+ * `store`: the canvas their `pie.*` calls draw on.
+ */
+export function MarkdownBody(props: { html: string; store?: NodeStore; class?: string }) {
+  let ref!: HTMLElement;
+
+  onMount(() => {
+    const blocks = ref.querySelectorAll<HTMLElement>(`pre > code.language-${PYTHON_EDITOR_LANG}`);
+    if (blocks.length === 0) return;
+
+    const scope = new PythonScope(props.store);
+    const disposers: (() => void)[] = [];
+    onCleanup(() => {
+      disposers.forEach((dispose) => dispose());
+      scope.dispose();
+    });
+
+    // Loaded only on pages that have an editor.
+    import('./PythonEditor').then(({ PythonEditor }) => {
+      blocks.forEach((codeEl) => {
+        const pre = codeEl.parentElement!;
+        if (!pre.isConnected) return;
+        const code = codeEl.textContent ?? '';
+        const host = document.createElement('div');
+        pre.replaceWith(host);
+        disposers.push(render(() => <PythonEditor code={code} scope={scope} />, host));
+      });
+    });
+  });
+
+  return <main ref={ref} class={props.class} innerHTML={props.html} />;
+}

package/src/lib/markdown/components/PythonEditor.tsx

@@ -0,0 +1,166 @@
+import { Accessor, createSignal, For, onCleanup, onMount, Setter, Show } from 'solid-js';
+import { basicSetup, EditorView } from 'codemirror';
+import { keymap } from '@codemirror/view';
+import { python } from '@codemirror/lang-python';
+import type { PythonScope, RunStatus } from '~/lib/python/runner';
+
+const STATUS_TEXT: Record<RunStatus | 'idle', string> = {
+  idle: '',
+  waiting: 'Waiting for another block…',
+  loading: 'Loading Python…',
+  running: 'Running…',
+  finished: '',
+  stopped: '',
+  killed: '',
+};
+
+const END_NOTE: Partial<Record<RunStatus, string>> = {
+  stopped: 'Stopped.',
+  killed: 'Stopped. Python restarted, so variables from earlier blocks are gone.',
+};
+
+const isActive = (status: RunStatus | 'idle') =>
+  status === 'waiting' || status === 'loading' || status === 'running';
+
+/** One piece of a run's output. Text printed in a row is one entry. */
+type OutputEntry =
+  | { type: 'text'; text: Accessor<string>; setText: Setter<string> }
+  | { type: 'plot'; png: string };
+
+/** An editable block of Python. Run draws its `pie.*` calls on the scope's canvas. */
+export function PythonEditor(props: { code: string; scope: PythonScope }) {
+  let host!: HTMLDivElement;
+  let view: EditorView | undefined;
+  let stop: (() => void) | undefined;
+
+  const [status, setStatus] = createSignal<RunStatus | 'idle'>('idle');
+  const [output, setOutput] = createSignal<OutputEntry[]>([]);
+  const [error, setError] = createSignal('');
+  const [note, setNote] = createSignal('');
+  const [collapsed, setCollapsed] = createSignal(false);
+  const active = () => isActive(status());
+  const initialCode = props.code.replace(/\n$/, '');
+
+  const addText = (text: string) => {
+    const last = output().at(-1);
+    if (last?.type === 'text') {
+      last.setText((prev) => prev + text);
+      return;
+    }
+    const [value, setValue] = createSignal(text);
+    setOutput((prev) => [...prev, { type: 'text', text: value, setText: setValue }]);
+  };
+
+  const run = () => {
+    if (active() || !view) return;
+    setOutput([]);
+    setError('');
+    setNote('');
+    stop = props.scope.run(
+      view.state.doc.toString(),
+      (next, err) => {
+        setStatus(next);
+        if (isActive(next)) return;
+        stop = undefined;
+        if (err) setError(err);
+        setNote(END_NOTE[next] ?? '');
+      },
+      addText,
+      (png) => setOutput((prev) => [...prev, { type: 'plot', png }]),
+    );
+  };
+
+  /** Puts the original code back. Ctrl/Cmd+Z undoes it. */
+  const reset = () => {
+    if (!view) return;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: initialCode } });
+  };
+
+  const toggleCollapsed = () => {
+    setCollapsed((prev) => !prev);
+    // CodeMirror can't measure while hidden, so measure again once it's shown.
+    if (!collapsed()) view?.requestMeasure();
+  };
+
+  const runFromKeyboard = () => {
+    run();
+    return true;
+  };
+
+  onMount(() => {
+    view = new EditorView({
+      doc: initialCode,
+      extensions: [
+        // Before basicSetup, so these win over its Enter bindings.
+        keymap.of([
+          { key: 'Shift-Enter', run: runFromKeyboard },
+          { key: 'Mod-Enter', run: runFromKeyboard },
+        ]),
+        basicSetup,
+        python(),
+      ],
+      parent: host,
+    });
+  });
+
+  onCleanup(() => {
+    stop?.();
+    view?.destroy();
+  });
+
+  return (
+    <div class="python-editor" classList={{ 'python-editor-collapsed': collapsed() }}>
+      <div class="python-editor-code" ref={host} />
+      <div class="python-editor-toolbar">
+        <button
+          type="button"
+          class="python-editor-button"
+          title={active() ? 'Stop' : 'Run (Shift+Enter)'}
+          aria-label={active() ? 'Stop' : 'Run'}
+          onClick={() => (active() ? stop?.() : run())}
+        >
+          {active() ? '■' : '▶'}
+        </button>
+        <button
+          type="button"
+          class="python-editor-button python-editor-reset"
+          title="Reset code"
+          aria-label="Reset code"
+          onClick={reset}
+        >
+          ↺
+        </button>
+        <span class="python-editor-status">{STATUS_TEXT[status()]}</span>
+        <button
+          type="button"
+          class="python-editor-button python-editor-collapse"
+          title={collapsed() ? 'Expand' : 'Collapse'}
+          aria-label={collapsed() ? 'Expand' : 'Collapse'}
+          aria-expanded={!collapsed()}
+          onClick={toggleCollapsed}
+        >
+          {collapsed() ? '▼' : '▲'}
+        </button>
+      </div>
+      <Show when={output().length > 0 || error() || note()}>
+        <div class="python-editor-output">
+          <For each={output()}>
+            {(entry) =>
+              entry.type === 'text' ? (
+                <pre class="python-editor-text">{entry.text()}</pre>
+              ) : (
+                <img class="python-editor-plot" src={`data:image/png;base64,${entry.png}`} alt="Plot" />
+              )
+            }
+          </For>
+          <Show when={error() || note()}>
+            <pre class="python-editor-text">
+              <span class="python-editor-error">{error()}</span>
+              <span class="python-editor-note">{note()}</span>
+            </pre>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/lib/markdown/frontmatter.ts

@@ -0,0 +1,81 @@
+/** How one field is read: its value when absent, and how to check the raw text. */
+export interface Field<T> {
+  default: T;
+  /** Throws a message that reads after the field name, e.g. "must be one of …". */
+  parse: (raw: string) => T;
+}
+
+export type Values<F extends Record<string, Field<unknown>>> = { [K in keyof F]: F[K]['default'] };
+
+function oneOf<const T extends readonly string[]>(values: T, fallback: T[number]): Field<T[number]> {
+  return {
+    default: fallback,
+    parse(raw) {
+      if (!(values as readonly string[]).includes(raw)) {
+        throw new Error(`must be one of ${values.join(', ')}, got ${JSON.stringify(raw)}`);
+      }
+      return raw as T[number];
+    },
+  };
+}
+
+export function text(fallback: string): Field<string> {
+  return { default: fallback, parse: raw => raw };
+}
+
+/** Every frontmatter field a page can set. Keys not listed here are ignored. */
+const FIELDS = {
+  canvas: oneOf(['left', 'right', 'top', 'bottom', 'none'], 'none'),
+  // Empty: the tab shows the site title alone.
+  title: text(''),
+};
+
+export type Frontmatter = Values<typeof FIELDS>;
+export type CanvasSide = Frontmatter['canvas'];
+
+/**
+ * Reads flat `key: value` lines, skipping blank ones. Values may be wrapped in single or double quotes.
+ * Shared by frontmatter and `site.yml`.
+ */
+export function parseKeyValues(text: string): Record<string, string> {
+  const raw: Record<string, string> = {};
+  for (const line of text.split(/\r?\n/)) {
+    if (line.trim() === '') continue;
+    const kv = /^([A-Za-z_][\w-]*)[ \t]*:[ \t]*(.*?)[ \t]*$/.exec(line);
+    if (!kv) throw new Error(`line is not \`key: value\`: ${JSON.stringify(line)}`);
+    const [, key, value] = kv;
+    if (Object.hasOwn(raw, key)) throw new Error(`key \`${key}\` appears twice`);
+    raw[key] = /^(["']).*\1$/.test(value) ? value.slice(1, -1) : value;
+  }
+  return raw;
+}
+
+/** Reads each of `fields` from `raw`, using its default when absent. Unknown keys are ignored. */
+export function readFields<F extends Record<string, Field<unknown>>>(fields: F, raw: Record<string, string>): Values<F> {
+  const values: Record<string, unknown> = {};
+  for (const [key, field] of Object.entries(fields)) {
+    try {
+      values[key] = Object.hasOwn(raw, key) ? field.parse(raw[key]) : field.default;
+    } catch (e) {
+      throw new Error(`\`${key}\` ${(e as Error).message}`);
+    }
+  }
+  return values as Values<F>;
+}
+
+/** Splits off a `---` block at the very start of the markdown. No block: no fields, whole markdown as body. */
+function splitFrontmatter(markdown: string): { raw: Record<string, string>; body: string } {
+  const match = /^---\r?\n([\s\S]*?)\r?\n?^---[ \t]*(?:\r?\n|$)/m.exec(markdown);
+  if (!match || match.index !== 0) return { raw: {}, body: markdown };
+  return { raw: parseKeyValues(match[1]), body: markdown.slice(match[0].length) };
+}
+
+/** Reads the frontmatter of the file at `path`. Throws, naming `path`, on a malformed block or a bad value. */
+export function parseFrontmatter(path: string, markdown: string): { frontmatter: Frontmatter; body: string } {
+  try {
+    const { raw, body } = splitFrontmatter(markdown);
+    return { frontmatter: readFields(FIELDS, raw), body };
+  } catch (e) {
+    throw new Error(`${path}: ${(e as Error).message}`);
+  }
+}

package/src/lib/markdown/pages.ts

@@ -0,0 +1,23 @@
+import type { Frontmatter } from './frontmatter';
+
+/** One `pages/**\/*.md`, as `vitePlugin.ts` turns it into a module at build time. */
+export interface Page {
+  frontmatter: Frontmatter;
+  html: string;
+}
+
+// Not eager: each page is its own file, downloaded only when that page is opened.
+const loaders = import.meta.glob<Page>('/pages/**/*.md', { import: 'default' });
+
+// Slug -> loader. `/pages/a/b.md` has the slug `a/b`.
+const bySlug = new Map(
+  Object.entries(loaders).map(([path, load]) => [path.replace(/^\/pages\//, '').replace(/\.md$/, ''), load]),
+);
+
+export const slugs = [...bySlug.keys()];
+
+/** `null` when no page has this slug. */
+export async function loadPage(slug: string): Promise<Page | null> {
+  const load = bySlug.get(slug);
+  return load ? load() : null;
+}

package/src/lib/markdown/render.ts

@@ -0,0 +1,54 @@
+import katex from 'katex';
+import { Marked } from 'marked';
+
+function renderMath(formula: string, displayMode: boolean): string {
+  return katex.renderToString(formula, { displayMode, throwOnError: false });
+}
+
+const marked = new Marked({
+  extensions: [
+    {
+      // `$$…$$` that fills its own lines.
+      name: 'mathblock',
+      level: 'block',
+      start(src) {
+        const at = src.indexOf('\n$$');
+        return at === -1 ? undefined : at + 1;
+      },
+      tokenizer(src) {
+        const match = /^\$\$([^$]+)\$\$[ \t]*(?:\n|$)/.exec(src);
+        if (!match) return undefined;
+        return { type: 'mathblock', raw: match[0], formula: match[1].trim() };
+      },
+      renderer(token) {
+        return `${renderMath(token.formula, true)}\n`;
+      },
+    },
+    {
+      // `$…$`, and `$$…$$` inside a line of text.
+      name: 'math',
+      level: 'inline',
+      start(src) {
+        const at = src.indexOf('$');
+        return at === -1 ? undefined : at;
+      },
+      tokenizer(src) {
+        const match = /^\$\$([^$]+)\$\$/.exec(src) ?? /^\$([^$]+)\$/.exec(src);
+        if (!match) return undefined;
+        return {
+          type: 'math',
+          raw: match[0],
+          formula: match[1].trim(),
+          displayMode: match[0].startsWith('$$'),
+        };
+      },
+      renderer(token) {
+        return renderMath(token.formula, token.displayMode);
+      },
+    },
+  ],
+});
+
+export function renderMarkdown(markdown: string): string {
+  return marked.parse(markdown) as string;
+}

package/src/lib/markdown/vitePlugin.ts

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+import { parseFrontmatter } from './frontmatter';
+import type { Page } from './pages';
+import { renderMarkdown } from './render';
+import { APP_DIR } from '../appDir';
+
+/**
+ * Turns each `pages/**\/*.md` into a module whose default export is a `Page`, at build time,
+ * so the browser gets finished HTML and never runs the markdown tools.
+ * Bad frontmatter fails the build; in dev it shows Vite's error screen.
+ */
+export function markdownPages(): Plugin {
+  let root = '';
+
+  return {
+    name: 'markdown-pages',
+    enforce: 'pre',
+    configResolved(config) {
+      root = config.root;
+    },
+    transform(markdown, id) {
+      const file = path.relative(root, id.split('?')[0]);
+      if (!file.startsWith(`pages${path.sep}`) || !file.endsWith('.md')) return;
+      const { frontmatter, body } = parseFrontmatter(file, markdown);
+      const page: Page = { frontmatter, html: renderMarkdown(body) };
+      return { code: `export default ${JSON.stringify(page)};`, map: null };
+    },
+  };
+}
+
+// The route that serves markdown pages. Every other route wins over it.
+const PAGE_ROUTE = '[...slug].tsx';
+
+/**
+ * Fails the build when a `pages/**\/*.md` has the same URL as a route in `src/routes/`,
+ * e.g. `pages/about.md` and `src/routes/about.tsx`, or `pages/blog/a.md` and `src/routes/blog/[id].tsx`.
+ * Without this, the route wins and the page can't be reached.
+ */
+export function checkPageRoutes(): Plugin {
+  let root = '';
+  let checked = false;
+
+  return {
+    name: 'check-page-routes',
+    apply: 'build',
+    configResolved(config) {
+      root = config.root;
+    },
+    // Runs once per build environment (client, ssr, ...); one check is enough.
+    buildStart() {
+      if (checked) return;
+      checked = true;
+      const routes = listFiles(path.join(APP_DIR, 'routes'))
+        .filter(file => /\.(tsx|ts|jsx|js)$/.test(file) && file !== PAGE_ROUTE)
+        .map(file => ({ file, pattern: routePattern(file) }));
+      const clashes: string[] = [];
+      for (const file of listFiles(path.join(root, 'pages')).filter(file => file.endsWith('.md'))) {
+        const url = file.replace(/\.md$/, '').split('/');
+        for (const route of routes) {
+          if (matches(route.pattern, url)) {
+            clashes.push(`pages/${file} (/${url.join('/')}) clashes with src/routes/${route.file}`);
+          }
+        }
+      }
+      if (clashes.length) this.error(`Markdown pages clash with routes:\n${clashes.join('\n')}`);
+    },
+  };
+}
+
+/** Every file under `dir`, as a path relative to it with `/` separators. */
+function listFiles(dir: string): string[] {
+  return fs.readdirSync(dir, { recursive: true, withFileTypes: true })
+    .filter(entry => entry.isFile())
+    .map(entry => path.relative(dir, path.join(entry.parentPath, entry.name)).split(path.sep).join('/'));
+}
+
+/** `blog/(group)/[id]/index.tsx` -> `['blog', '[id]']`, following SolidStart's file routes. */
+function routePattern(file: string): string[] {
+  const segments = file.replace(/\.(tsx|ts|jsx|js)$/, '').split('/').filter(s => !/^\(.*\)$/.test(s));
+  if (segments.at(-1) === 'index') segments.pop();
+  return segments;
+}
+
+/** Whether a route pattern matches a URL, both as segments. */
+function matches(pattern: string[], url: string[]): boolean {
+  const [head, ...rest] = pattern;
+  if (head === undefined) return url.length === 0;
+  if (/^\[\[?\.\.\./.test(head)) return true; // [...x] or [[...x]]: matches the rest
+  if (head.startsWith('[[')) return matches(rest, url) || (url.length > 0 && matches(rest, url.slice(1)));
+  if (head.startsWith('[')) return url.length > 0 && matches(rest, url.slice(1));
+  return url[0] === head && matches(rest, url.slice(1));
+}

package/src/lib/nodes/components/CenteredGrid.tsx

@@ -0,0 +1,59 @@
+import { JSX, createMemo } from 'solid-js';
+import { MIN_GRID_UNIT } from '../state/NodeStore';
+
+interface CenteredGridProps {
+  /** Canvas size in viewBox units. The origin sits at the center. */
+  width: number;
+  height: number;
+  /** Pixels per grid unit. */
+  unit: number;
+  children: JSX.Element;
+}
+
+const GRID_OPACITY = 0.15;
+const AXIS_OPACITY = 0.4;
+
+export function CenteredGrid(props: CenteredGridProps) {
+  const originX = () => props.width / 2;
+  const originY = () => props.height / 2;
+
+  // Local (post-transform) extents of the canvas relative to the origin.
+  const extents = createMemo(() => ({
+    xLeft: -originX(),
+    xRight: props.width - originX(),
+    yBottom: -(props.height - originY()),
+    yTop: originY(),
+  }));
+
+  const gridLines = createMemo(() => {
+    const lines: JSX.Element[] = [];
+    const { xLeft, xRight, yBottom, yTop } = extents();
+
+    if (props.unit >= MIN_GRID_UNIT) {
+      // Vertical lines (every 1 unit)
+      for (let x = Math.ceil(xLeft); x <= Math.floor(xRight); x += 1) {
+        if (x === 0) continue;
+        lines.push(<line x1={x} y1={yBottom} x2={x} y2={yTop} stroke="currentColor" stroke-width={1 / props.unit} opacity={GRID_OPACITY} />);
+      }
+
+      // Horizontal lines (every 1 unit)
+      for (let y = Math.ceil(yBottom); y <= Math.floor(yTop); y += 1) {
+        if (y === 0) continue;
+        lines.push(<line x1={xLeft} y1={y} x2={xRight} y2={y} stroke="currentColor" stroke-width={1 / props.unit} opacity={GRID_OPACITY} />);
+      }
+    }
+
+    // Axes (thicker lines)
+    lines.push(<line x1={xLeft} y1={0} x2={xRight} y2={0} stroke="currentColor" stroke-width={2 / props.unit} opacity={AXIS_OPACITY} />);
+    lines.push(<line x1={0} y1={yBottom} x2={0} y2={yTop} stroke="currentColor" stroke-width={2 / props.unit} opacity={AXIS_OPACITY} />);
+
+    return lines;
+  });
+
+  return (
+    <g transform={`translate(${originX()}, ${originY()}) scale(1, -1)`}>
+      {gridLines()}
+      {props.children}
+    </g>
+  );
+}