@immediately-run/grove 0.1.1

package/src/components/Directory.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback } from 'react';
+import { Link, useFileMetadata, useMetadataQuery } from '@immediately-run/sdk';
+import { contentDir, keyToHref } from '../lib/content';
+import { queryPaths } from '../lib/wiki';
+
+interface Props {
+  team?: string;
+  compact?: boolean;
+}
+
+function isPerson(m: any): boolean {
+  return m && m.name && m.role && m.team && m.phone;
+}
+
+function Row({ path, compact }: { path: string; compact?: boolean }) {
+  const m = useFileMetadata(path) as any;
+  if (!m) return null;
+  return (
+    <tr>
+      <td style={{ fontWeight: 600 }}>
+        <Link href={keyToHref(path)}>{m.name}</Link>
+      </td>
+      <td>{m.role}</td>
+      {!compact && <td>{m.team}</td>}
+      <td className="mono">{m.phone}</td>
+      {!compact && <td className="mono">{m.email}</td>}
+    </tr>
+  );
+}
+
+// Import-free engine component: the phone book, built from per-person entries.
+export default function Directory({ team, compact }: Props) {
+  const queryFn = useCallback(
+    (filesMetadata: Record<string, any>) =>
+      Object.keys(filesMetadata)
+        .filter((p) => p.startsWith(contentDir()) && isPerson(filesMetadata[p]))
+        .filter((p) => !team || filesMetadata[p].team === team)
+        .sort((a, b) => (filesMetadata[a].name < filesMetadata[b].name ? -1 : 1)),
+    [team]
+  );
+  const result = useMetadataQuery(queryFn);
+  const paths: string[] = queryPaths(result);
+
+  return (
+    <div className="grove-table-wrap">
+      <table className="grove-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+            {!compact && <th>Team</th>}
+            <th>Phone</th>
+            {!compact && <th>Email</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {paths.map((p) => (
+            <Row key={p} path={p} compact={compact} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/DirectoryList.test.tsx

@@ -0,0 +1,275 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ReactNode } from 'react';
+import { MDXProvider } from '@immediately-run/sdk';
+import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
+import { resetContentRoot, setContentRoot } from '../lib/contentRoot';
+import { GroveShellContext, type GroveShell } from '../lib/shell';
+
+// `useDirectoryListing` reads the real `fs` module — the one the host supplies inside the
+// sandbox. Mocked here so the table is exercised over a known tree, and mocked at the
+// MODULE level (not injected through a prop) because the injection point is not part of
+// the component's contract: content writes `<DirectoryList path="…"/>` and nothing else.
+const readdir = vi.fn();
+vi.mock('fs', () => ({ default: { promises: { readdir: (...a: unknown[]) => readdir(...a) } } }));
+
+const { default: DirectoryList } = await import('./DirectoryList');
+const { default: DirectoryView } = await import('./DirectoryView');
+
+/** The slice of the shell <DirectoryView> reads, cast in. */
+const shell = (entryKey: string): GroveShell =>
+  ({ entryKey, siteTitle: 'Meridian handbook' }) as GroveShell;
+
+const dirent = (name: string, isDirectory = false) => ({ name, isDirectory: () => isDirectory });
+
+const METADATA = {
+  '/app/content/handbook/onboarding.mdx': {
+    title: 'Onboarding, day one.',
+    description: 'What every new hire does in their first week.',
+    tags: ['handbook', 'ui/nav'],
+    date: '2026-06-22',
+  },
+  '/app/content/handbook/expenses.mdx': { title: 'Expenses.' },
+};
+
+function host(children: ReactNode, sandboxPath = '/files/content/handbook/onboarding.mdx') {
+  const value = {
+    outerHref: 'https://immediately.run/present/github/o/r/main/files/content/handbook/onboarding.mdx',
+    navigationState: { mode: 'present', namespace: 'github', provider: 'github', repository: 'o/r', ref: 'main', sandboxPath, hash: '', search: '' },
+    routingSpec: { routes: [] },
+    filesMetadata: METADATA,
+  };
+  return <TinkerableContext.Provider value={value as never}>{children}</TinkerableContext.Provider>;
+}
+
+async function render(node: ReactNode): Promise<HTMLElement> {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    createRoot(container).render(node);
+  });
+  return container;
+}
+
+beforeEach(() => {
+  readdir.mockReset();
+  readdir.mockResolvedValue([
+    dirent('archive', true),
+    dirent('onboarding.mdx'),
+    dirent('expenses.mdx'),
+    dirent('policy.pdf'),
+    dirent('_layout.mdx'),
+  ]);
+});
+afterEach(() => {
+  resetContentRoot();
+  document.body.innerHTML = '';
+});
+
+describe('<DirectoryList/>', () => {
+  it('lists the folder of the current entry when given no path', async () => {
+    const el = await render(host(<DirectoryList />));
+    expect(readdir).toHaveBeenCalledWith('/app/content/handbook', { withFileTypes: true });
+    const names = [...el.querySelectorAll('.gdir__labels')].map((n) => n.textContent);
+    // Directory first; the structural `_layout.mdx` is not a reader-facing row.
+    expect(names).toEqual([
+      'archive',
+      'Expensesexpenses.mdx',
+      'Onboarding, day oneonboarding.mdx',
+      'policy.pdf',
+    ]);
+  });
+
+  it('links entries and subfolders, and leaves an asset unlinked', async () => {
+    const el = await render(host(<DirectoryList />));
+    const hrefs = [...el.querySelectorAll('tbody a')].map((a) => a.getAttribute('href'));
+    expect(hrefs.some((h) => h?.endsWith('/files/content/handbook/archive'))).toBe(true);
+    expect(hrefs.some((h) => h?.endsWith('/files/content/handbook/onboarding.mdx'))).toBe(true);
+    expect(hrefs.some((h) => h?.includes('policy.pdf'))).toBe(false);
+    expect(el.querySelector('tr[data-kind="file"] .gdir__plain')?.textContent).toBe('policy.pdf');
+  });
+
+  it('shows only the metadata columns the corpus supplies, and drops `ui/` tags', async () => {
+    const el = await render(host(<DirectoryList />));
+    expect([...el.querySelectorAll('th')].map((t) => t.textContent)).toEqual([
+      'Name',
+      'Description',
+      'Tags',
+      'Updated',
+    ]);
+    expect([...el.querySelectorAll('.grove-tag')].map((t) => t.textContent)).toEqual(['#handbook']);
+  });
+
+  it('renders a plain table over a corpus with no frontmatter at all', async () => {
+    readdir.mockResolvedValue([dirent('a.md'), dirent('b.md')]);
+    const el = await render(host(<DirectoryList path="/plain" />));
+    expect([...el.querySelectorAll('th')].map((t) => t.textContent)).toEqual(['Name']);
+  });
+
+  it('resolves `path` corpus-relative with a leading slash, entry-relative without', async () => {
+    await render(host(<DirectoryList path="/teams" />));
+    expect(readdir).toHaveBeenCalledWith('/app/content/teams', { withFileTypes: true });
+    readdir.mockClear();
+    await render(host(<DirectoryList path="archive" />));
+    expect(readdir).toHaveBeenCalledWith('/app/content/handbook/archive', { withFileTypes: true });
+  });
+
+  it('says so when the folder is empty rather than rendering an empty table', async () => {
+    readdir.mockResolvedValue([]);
+    const el = await render(host(<DirectoryList />));
+    expect(el.textContent).toContain('This folder is empty.');
+    expect(el.textContent).toContain('No entries, subfolders or files here yet.');
+    expect(el.querySelector('table')).toBeNull();
+  });
+
+  it('distinguishes an EMPTY folder from one whose every child is hidden', async () => {
+    // Both produce zero rows. "This folder is empty." is false for the second, and a
+    // reader who knows `_layout.mdx` is in there goes looking for a bug that is not one.
+    readdir.mockResolvedValue([dirent('_layout.mdx'), dirent('.DS_Store')]);
+    const el = await render(host(<DirectoryList />));
+    expect(el.textContent).toContain('Nothing to show in this folder.');
+    expect(el.textContent).toContain('2 files skipped');
+    expect(el.textContent).not.toContain('This folder is empty.');
+  });
+
+  it('survives an unreadable path without throwing', async () => {
+    readdir.mockRejectedValue(new Error('ENOTDIR'));
+    const el = await render(host(<DirectoryList path="/nope" />));
+    expect(el.querySelector('table')).toBeNull();
+  });
+
+  it('reads `hidden` as a STRING attribute — the safe renderer passes literals only', async () => {
+    // Under the interpreter every attribute arrives as a string, so `hidden="false"`
+    // would switch the flag ON if truthiness were the test.
+    const off = await render(host(<DirectoryList hidden="false" />));
+    expect(off.textContent).not.toContain('_layout.mdx');
+    const on = await render(host(<DirectoryList hidden="true" />));
+    expect(on.textContent).toContain('_layout.mdx');
+  });
+
+  it('is overridable through the MDX provider — the FOLDER ROUTE included', async () => {
+    // The override contract in one assertion, driven through the real <DirectoryView>:
+    // whatever the provider resolves for the name `DirectoryList` is what the folder
+    // route renders. The view LOOKS THE COMPONENT UP rather than importing it, so a
+    // replacement reaches the route too — not only MDX bodies that spell the tag out.
+    const Replacement = ({ path }: { path?: string }) => <p className="mine">listing of {path}</p>;
+    const el = await render(
+      host(
+        <MDXProvider components={{ DirectoryList: Replacement }}>
+          <GroveShellContext.Provider value={shell('/app/content/handbook')}>
+            <DirectoryView />
+          </GroveShellContext.Provider>
+        </MDXProvider>,
+        '/files/content/handbook'
+      )
+    );
+    expect(el.querySelector('.mine')?.textContent).toBe('listing of /handbook');
+    // …and the stock table is genuinely gone, not merely joined.
+    expect(el.querySelector('.grove-dirlist__table')).toBeNull();
+  });
+
+  it('falls back to the built-in table when nothing overrides the name', async () => {
+    const el = await render(
+      host(
+        <GroveShellContext.Provider value={shell('/app/content/handbook')}>
+          <DirectoryView />
+        </GroveShellContext.Provider>,
+        '/files/content/handbook'
+      )
+    );
+    expect(el.querySelector('.grove-dirlist__table')).not.toBeNull();
+    expect(el.querySelector('h1')?.textContent).toContain('handbook');
+  });
+});
+
+// ── The DISPATCH packaging ────────────────────────────────────────────────────────────
+//
+// A dispatched Grove renders SOMEBODY ELSE'S corpus, mounted at a host-minted chroot
+// (`/mnt/<hash>/`), while the engine itself is loaded from Grove's own repo. Every path
+// helper is a function of that root — which is why `contentRoot.ts` warns "call it, don't
+// capture it": a helper that froze `/app/content/` at module scope renders the VIEWER's
+// corpus while claiming to render yours, and corrects itself never.
+//
+// Directory listings touch both path spaces at once — they READ through the mount and
+// LINK through the URL space — so they are exactly where the two can be got backwards.
+// Verified live against a dispatched corpus on the local host (2026-08-18); these pin it.
+describe('<DirectoryList/> under dispatch', () => {
+  const MOUNT = '/mnt/abc123def456/';
+  const CORPUS_META = {
+    '/mnt/abc123def456/context/ways_of_working.mdx': {
+      title: 'Ways of working.',
+      description: 'The engineering practices behind the product values.',
+      updated: '2026-07-11',
+    },
+  };
+
+  function dispatched(children: ReactNode, sandboxPath: string) {
+    setContentRoot(MOUNT);
+    const value = {
+      outerHref: `https://local.immediately.run/present/local/ns/corpus/live${sandboxPath}`,
+      navigationState: { mode: 'present', namespace: 'local', provider: 'local', repository: 'ns/corpus', ref: 'live', sandboxPath, hash: '', search: '' },
+      routingSpec: { routes: [] },
+      filesMetadata: CORPUS_META,
+    };
+    return <TinkerableContext.Provider value={value as never}>{children}</TinkerableContext.Provider>;
+  }
+
+  beforeEach(() => {
+    readdir.mockReset();
+    readdir.mockResolvedValue([dirent('ways_of_working.mdx'), dirent('diagram.svg')]);
+  });
+
+  it('reads through the MOUNT, not the fork root', async () => {
+    await render(dispatched(<DirectoryList />, '/files/context'));
+    // `/app/content/context` here would be the viewer rendering its own corpus.
+    expect(readdir).toHaveBeenCalledWith('/mnt/abc123def456/context', { withFileTypes: true });
+  });
+
+  it('links in CORPUS-relative URL space — the mount path never reaches the DOM', async () => {
+    const el = await render(
+      dispatched(
+        <GroveShellContext.Provider value={shell('/mnt/abc123def456/context')}>
+          <DirectoryView />
+        </GroveShellContext.Provider>,
+        '/files/context'
+      )
+    );
+    const hrefs = [...el.querySelectorAll('tbody a')].map((a) => a.getAttribute('href'));
+    expect(hrefs).toHaveLength(1); // the asset is listed, not linked
+    expect(hrefs[0]?.endsWith('/files/context/ways_of_working.mdx')).toBe(true);
+
+    // The load-bearing assertion, and the one that would have caught the R3-268 bug this
+    // same mapping already had once: the chroot prefix is HOST knowledge. Grove can read
+    // through it but must never publish it — a `/mnt/<hash>/…` href is a URL no router
+    // resolves and a path the host's existence check misses.
+    expect(el.innerHTML).not.toContain('mnt');
+    expect(el.innerHTML).not.toContain('abc123def456');
+    expect(el.innerHTML).not.toContain('/app/');
+  });
+
+  it('measures breadcrumbs from the corpus root, not from `/`', async () => {
+    const el = await render(
+      dispatched(
+        <GroveShellContext.Provider value={shell('/mnt/abc123def456/plans/ui-as-apps')}>
+          <DirectoryView />
+        </GroveShellContext.Provider>,
+        '/files/plans/ui-as-apps'
+      )
+    );
+    const crumb = el.querySelector('.crumb')?.textContent ?? '';
+    expect(crumb).toContain('plans');
+    expect(crumb).not.toContain('mnt');
+    expect(el.querySelector('h1')?.textContent).toContain('ui-as-apps');
+  });
+
+  it('resolves `path` against the mounted corpus, and confines traversal to it', async () => {
+    await render(dispatched(<DirectoryList path="/specs" />, '/files/context'));
+    expect(readdir).toHaveBeenCalledWith('/mnt/abc123def456/specs', { withFileTypes: true });
+    readdir.mockClear();
+    // Foreign content authored the href; `..` must not become a readdir of the host's fs.
+    await render(dispatched(<DirectoryList path="../../.." />, '/files/context'));
+    expect(readdir).toHaveBeenCalledWith('/mnt/abc123def456', { withFileTypes: true });
+  });
+});

package/src/components/DirectoryList.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useContext } from 'react';
+import { Link, useAllMetadata } from '@immediately-run/sdk';
+import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
+import { sandboxPathToKey } from '../lib/content';
+import {
+  buildDirectoryRows,
+  columnValue,
+  parseColumns,
+  resolveDirKey,
+  rowLabel,
+  visibleColumns,
+  type DirColumn,
+  type DirRow,
+} from '../lib/directory';
+import { useDirectoryListing } from '../hooks/useDirectoryListing';
+import Icon from './Icon';
+
+interface Props {
+  /** The folder to list. Corpus-relative with a leading `/` (`/handbook`), otherwise
+   *  relative to the current entry's folder. Omit it to list the current folder. */
+  path?: string;
+  /** Heading above the table. `null`/`""` renders no heading. */
+  title?: string | null;
+  /** `description,tags,updated,status` — which metadata columns to consider. A column
+   *  no row carries is dropped regardless, so this narrows, never pads. */
+  columns?: string;
+  sort?: 'name' | 'title' | 'updated';
+  /** Include dot- and `_`-prefixed names. */
+  hidden?: boolean | string;
+}
+
+const HEADINGS: Record<DirColumn, string> = {
+  name: 'Name',
+  description: 'Description',
+  tags: 'Tags',
+  updated: 'Updated',
+  status: 'Status',
+};
+
+// `hidden="false"` is a string in MDX, and under the safe renderer EVERY attribute is a
+// literal string — so a boolean prop that trusted truthiness would read `"false"` as on.
+function flag(v: boolean | string | undefined): boolean {
+  return v === true || v === '' || v === 'true';
+}
+
+function Cell({ row, col }: { row: DirRow; col: DirColumn }) {
+  const value = columnValue(row, col);
+  if (col === 'tags') {
+    const tags = Array.isArray(value) ? value : [];
+    return (
+      <td className="gdir__tags">
+        {/* Same reason as the name cell: the flex box goes INSIDE the `<td>`. */}
+        <div className="gdir__tagbox">
+          {tags.slice(0, 4).map((t) => (
+            <span key={t} className="grove-tag">#{t}</span>
+          ))}
+        </div>
+      </td>
+    );
+  }
+  if (col === 'updated' || col === 'status') {
+    return <td className={`mono gdir__${col}`}>{typeof value === 'string' ? value : null}</td>;
+  }
+  return <td className="gdir__desc">{typeof value === 'string' ? value : null}</td>;
+}
+
+function Row({ row, cols }: { row: DirRow; cols: DirColumn[] }) {
+  const label = rowLabel(row);
+  return (
+    <tr data-kind={row.kind}>
+      <td className="gdir__name">
+        {/* The flex box is INSIDE the cell. `display:flex` on a `<td>` takes it out of
+            the table layout algorithm, and the column stops sharing a width with its
+            header — the symptom is per-row borders that don't line up. */}
+        <div className="gdir__namebox">
+          <span className="gdir__icon" aria-hidden="true">
+            <Icon name={row.kind === 'dir' ? 'folder' : 'file'} />
+          </span>
+          <span className="gdir__labels">
+            {row.href ? (
+              <Link href={row.href} className="gdir__link">
+                {label}
+              </Link>
+            ) : (
+              // An asset is listed but not linked: Grove's route space renders entries,
+              // so a link here would resolve to the 404 it was meant to replace.
+              <span className="gdir__plain">{label}</span>
+            )}
+            {label !== row.name ? <span className="gdir__file">{row.name}</span> : null}
+          </span>
+        </div>
+      </td>
+      {cols.slice(1).map((c) => (
+        <Cell key={c} row={row} col={c} />
+      ))}
+    </tr>
+  );
+}
+
+/**
+ * `<DirectoryList/>` — every file in a folder as a table, enriched with whatever Grove
+ * frontmatter its entries carry.
+ *
+ * Two callers, one component. Content uses it as ordinary import-free vocabulary
+ * (`<DirectoryList path="/handbook"/>`); the router renders it for a URL that names a
+ * FOLDER rather than an entry — the case that used to 404. Both go through the MDX
+ * component map, so a fork or a content-provided `DirectoryList` (R3-174) replaces the
+ * built-in on *both* surfaces at once. That is the point of resolving it by name rather
+ * than importing it in the router: an override that only reached MDX bodies and left the
+ * folder route rendering the stock table would be a half-override nobody could see.
+ */
+export default function DirectoryList({ path, title, columns, sort = 'name', hidden }: Props) {
+  const ctx = useContext(TinkerableContext) as any;
+  const routeKey = sandboxPathToKey(ctx?.navigationState?.sandboxPath || '/');
+  // The route key is a FILE when it names an entry; a listing anchored at an entry means
+  // "the folder that entry lives in", which is what an author writing `<DirectoryList/>`
+  // inside a page means by "here".
+  const fromDir = /\.mdx?$/.test(routeKey) ? routeKey.slice(0, routeKey.lastIndexOf('/')) : routeKey;
+  const dirKey = resolveDirKey(path, fromDir);
+
+  const listing = useDirectoryListing(dirKey);
+  const metadata = useAllMetadata() as Record<string, any>;
+
+  if (listing.status !== 'ready') {
+    return (
+      <div className="grove-dirlist" data-state={listing.status}>
+        <div className="sk sk-line" style={{ width: '60%' }} />
+      </div>
+    );
+  }
+
+  const rows = buildDirectoryRows(dirKey, listing.entries, metadata, {
+    hidden: flag(hidden),
+    sort,
+  });
+  const cols = visibleColumns(rows, parseColumns(columns));
+
+  return (
+    <div className="grove-dirlist">
+      {title ? (
+        <div className="grove-doclist__head">
+          <h2>{title}</h2>
+          <span className="n">
+            {rows.length} {rows.length === 1 ? 'item' : 'items'}
+          </span>
+        </div>
+      ) : null}
+      {rows.length === 0 ? (
+        // Two different facts, said differently. A folder with nothing in it and a folder
+        // whose every child is structural (`_layout.mdx`) both produce zero rows, and
+        // "This folder is empty." is false for the second — the reader goes looking for
+        // the file they know is there. Say which it is.
+        <div className="grove-dirlist__empty">
+          <span className="gdir__icon" aria-hidden="true">
+            <Icon name="folder" />
+          </span>
+          <p className="grove-dirlist__empty-t">
+            {listing.entries.length === 0 ? 'This folder is empty.' : 'Nothing to show in this folder.'}
+          </p>
+          <p className="grove-dirlist__empty-d">
+            {listing.entries.length === 0
+              ? 'No entries, subfolders or files here yet.'
+              : `Everything here is hidden or structural — ${listing.entries.length} ${listing.entries.length === 1 ? 'file' : 'files'} skipped.`}
+          </p>
+        </div>
+      ) : (
+        <div className="grove-table-wrap">
+          <table className="grove-table grove-dirlist__table">
+            <thead>
+              <tr>
+                {cols.map((c) => (
+                  <th key={c} scope="col" className={`gdir__th gdir__th--${c}`}>
+                    {HEADINGS[c]}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <Row key={r.key} row={r} cols={cols} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/DirectoryView.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Fragment } from 'react';
+import type { ComponentType } from 'react';
+import { Link, useMDXComponents } from '@immediately-run/sdk';
+import { useShell } from '../lib/shell';
+import { keyToHref } from '../lib/content';
+import { dirCrumbs, dirKeyToPath } from '../lib/directory';
+import DirectoryList from './DirectoryList';
+import Icon from './Icon';
+
+// Resolving the table through the MDX component map is what makes it OVERRIDABLE.
+// `useMDXComponents({})` returns the provider's map — the SDK defaults, under Grove's
+// vocabulary, under whatever a fork or (once R3-174 lands) the CONTENT registered. So
+// replacing `DirectoryList` replaces it everywhere it renders, including this route,
+// rather than only where an author typed the tag. The literal `{}` is hoisted because
+// the SDK memoizes on the argument's identity.
+const NO_OVERRIDES = {};
+
+/**
+ * The reading view for a URL that names a FOLDER.
+ *
+ * Grove's routes are filesystem paths, so a folder is an address a reader can reach —
+ * by typing it, by trimming a URL, from the host's file explorer, or by following a
+ * link into a namespace. It used to resolve to "No entry at …", which is false: the
+ * entries exist, one level down. This renders the folder instead: breadcrumb, name, and
+ * the overridable `<DirectoryList/>`.
+ *
+ * (An author who wants a *curated* page at a folder URL writes `index.mdx` in it — the
+ * router prefers that over this view. See `folderIndexKey`.)
+ */
+export default function DirectoryView() {
+  const { entryKey, siteTitle } = useShell();
+  const components = useMDXComponents(NO_OVERRIDES) as Record<string, ComponentType<any> | undefined>;
+  const List = components.DirectoryList ?? DirectoryList;
+
+  const crumbs = dirCrumbs(entryKey);
+  const name = crumbs.length ? crumbs[crumbs.length - 1].label : siteTitle;
+
+  return (
+    <article className="grove-page" data-layout="doc" data-view="directory">
+      <div className="gp-main">
+        <header className="grove-entry-header">
+          <nav className="crumb">
+            <Link href="/">{siteTitle}</Link>
+            {crumbs.slice(0, -1).map((c) => (
+              <Fragment key={c.key}>
+                <span aria-hidden="true">/</span>
+                <Link href={keyToHref(c.key)}>{c.label}</Link>
+              </Fragment>
+            ))}
+          </nav>
+          <h1>
+            <span className="gdir__title-icon" aria-hidden="true">
+              <Icon name="folder" />
+            </span>
+            {name}
+          </h1>
+          <div className="grove-meta">
+            <span>Folder</span>
+          </div>
+        </header>
+        <div className="grove-prose">
+          <List path={dirKeyToPath(entryKey)} />
+        </div>
+      </div>
+    </article>
+  );
+}