@tinyvolt/pie 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,254 @@
+import { Accessor, Component, createSignal, For, onCleanup, onMount, Setter, Show } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { basicSetup, EditorView } from 'codemirror';
+import { keymap } from '@codemirror/view';
+import { python } from '@codemirror/lang-python';
+import { CheckIcon, Chevron, CopyIcon, CrossIcon, PlayIcon, ResetIcon, StopIcon } from '~/components/icons';
+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.',
+};
+
+/** How the last run ended, shown in the toolbar. */
+type RunResult = 'success' | 'error' | 'stopped';
+
+const RESULT: Record<RunResult, { icon: Component; text: string }> = {
+  success: { icon: CheckIcon, text: 'Ran successfully' },
+  error: { icon: CrossIcon, text: 'Error' },
+  stopped: { icon: StopIcon, text: 'Stopped' },
+};
+
+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.
+ * `collapsed`: start with only the toolbar showing.
+ */
+export function PythonEditor(props: { code: string; collapsed?: boolean; 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(props.collapsed ?? false);
+  const [copied, setCopied] = createSignal(false);
+  const active = () => isActive(status());
+  const result = (): RunResult | undefined => {
+    if (status() === 'finished') return error() ? 'error' : 'success';
+    if (status() === 'stopped' || status() === 'killed') return 'stopped';
+  };
+  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 }]),
+    );
+  };
+
+  /** Printed text and the error, without plots or the stop note. */
+  const copyText = () =>
+    [
+      ...output().flatMap((entry) => (entry.type === 'text' ? [entry.text()] : [])),
+      error(),
+    ]
+      .map((part) => part.replace(/\n+$/, ''))
+      .filter(Boolean)
+      .join('\n');
+
+  let copiedTimer: ReturnType<typeof setTimeout> | undefined;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(copyText());
+    } catch {
+      return; // Clipboard is only available on https or localhost.
+    }
+    setCopied(true);
+    clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(() => setCopied(false), 1500);
+  };
+
+  /** 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();
+  };
+
+  /** Drag the bar under the code to set the editor's height. */
+  const startResize = (e: PointerEvent) => {
+    if (!view || e.button !== 0) return;
+    e.preventDefault(); // no text selection while dragging
+    const handle = e.currentTarget as HTMLElement;
+    const editor = view.dom;
+    const startY = e.clientY;
+    const startHeight = editor.getBoundingClientRect().height;
+    // About one line, plus the 4px top and bottom padding CodeMirror puts on its content.
+    const minHeight = view.defaultLineHeight + 8;
+
+    const move = (ev: PointerEvent) => {
+      editor.style.maxHeight = 'none';
+      editor.style.height = `${Math.max(minHeight, startHeight + ev.clientY - startY)}px`;
+    };
+    const end = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+    };
+    handle.setPointerCapture(e.pointerId);
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  };
+
+  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?.();
+    clearTimeout(copiedTimer);
+    view?.destroy();
+  });
+
+  return (
+    <div class="python-editor" classList={{ 'python-editor-collapsed': collapsed() }}>
+      <div class="python-editor-code" ref={host} />
+      <div class="python-editor-resize" title="Drag to resize" onPointerDown={startResize} />
+      <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() ? <StopIcon /> : <PlayIcon />}
+        </button>
+        <button
+          type="button"
+          class="python-editor-button python-editor-reset"
+          title="Reset code"
+          aria-label="Reset code"
+          onClick={reset}
+        >
+          <ResetIcon />
+        </button>
+        <span class="python-editor-status">{STATUS_TEXT[status()]}</span>
+        <Show when={result()}>
+          {(r) => (
+            <span class={`python-editor-result python-editor-result-${r()}`}>
+              <Dynamic component={RESULT[r()].icon} />
+              {RESULT[r()].text}
+            </span>
+          )}
+        </Show>
+        <button
+          type="button"
+          class="python-editor-button python-editor-collapse"
+          title={collapsed() ? 'Expand' : 'Collapse'}
+          aria-label={collapsed() ? 'Expand' : 'Collapse'}
+          aria-expanded={!collapsed()}
+          onClick={toggleCollapsed}
+        >
+          <Chevron direction={collapsed() ? 'down' : 'up'} />
+        </button>
+      </div>
+      <Show when={output().length > 0 || error() || note()}>
+        <div class="python-editor-output">
+          <Show when={copyText()}>
+            <button
+              type="button"
+              class="python-editor-button python-editor-copy"
+              title={copied() ? 'Copied' : 'Copy output'}
+              aria-label={copied() ? 'Copied' : 'Copy output'}
+              onClick={copy}
+            >
+              {copied() ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </Show>
+          <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,83 @@
+/** 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(''),
+  // Empty: `site.yml`'s `description`.
+  description: 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,62 @@
+import katex from 'katex';
+import { Marked, Renderer } 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);
+      },
+    },
+  ],
+  renderer: {
+    // ```python-editor collapsed: marked keeps only the first word, so mark the block for the editor here.
+    code(token) {
+      const [lang, ...flags] = (token.lang ?? '').split(/\s+/);
+      if (lang !== 'python-editor' || !flags.includes('collapsed')) return false;
+      return new Renderer().code(token).replace('<code ', '<code data-collapsed ');
+    },
+  },
+});
+
+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>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { For, createMemo, JSX } from 'solid-js';
+import { NodeStore, type NodeSignal } from '../state/NodeStore';
+import { getNodeDefinition } from '../state/Node';
+import { CenteredGrid } from './CenteredGrid';
+import { useCanvasResize } from '../hooks/useCanvasResize';
+
+interface NodeCanvasProps {
+  store: NodeStore;
+}
+
+export function NodeCanvas(props: NodeCanvasProps): JSX.Element {
+  let svgContainerRef: HTMLDivElement | undefined;
+  useCanvasResize(() => svgContainerRef, props.store);
+
+  // Canvas size in grid units: the viewBox maps one unit to `unit` pixels.
+  const viewWidth = () => props.store.canvasBounds().width / props.store.unit();
+  const viewHeight = () => props.store.canvasBounds().height / props.store.unit();
+
+  // One pass over the store, partitioned into the two draw layers.
+  const layers = createMemo(() => {
+    const geometry: NodeSignal[] = [];
+    const points: NodeSignal[] = [];
+    for (const nodeSignal of Object.values(props.store.nodes)) {
+      if (!nodeSignal) continue;
+      const node = nodeSignal.signal();
+      if (!node || node.type === 'Dummy' || node.hidden) continue;
+      if (node.type === 'Point') points.push(nodeSignal);
+      else geometry.push(nodeSignal);
+    }
+    return { geometry, points };
+  });
+
+  const nodeGroup = (nodeSignal: NodeSignal) => {
+    const node = createMemo(() => nodeSignal?.signal());
+    // The element is rebuilt only when the type changes.
+    const type = createMemo(() => node()?.type);
+    return (
+      <g data-node-id={node()?.id}>
+        {/* The browser shows the `<title>` as a tooltip when hovering any shape in the group. */}
+        <title>{node()?.id}</title>
+        {type() && (getNodeDefinition(type()!)?.render?.(node, props.store.unit) ?? null)}
+      </g>
+    );
+  };
+
+  return (
+    <div class="node-canvas" ref={svgContainerRef}>
+      <svg viewBox={`0 0 ${viewWidth()} ${viewHeight()}`}>
+        <CenteredGrid width={viewWidth()} height={viewHeight()} unit={props.store.unit()}>
+          {/* Step 1: Draw non-`Point` nodes first */}
+          <For each={layers().geometry}>{(nodeSignal) => nodeGroup(nodeSignal)}</For>
+          {/* Step 2: Draw `Point` nodes above geometry */}
+          <For each={layers().points}>{(nodeSignal) => nodeGroup(nodeSignal)}</For>
+        </CenteredGrid>
+      </svg>
+    </div>
+  );
+}