npm - @goodbones/browser - Versions diffs - 0.1.0-beta.1 - Mend

@goodbones/browser 0.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/LICENSE +21 -0
package/build/dts/index.d.ts +12 -0
package/build/dts/index.d.ts.map +1 -0
package/build/dts/main.d.ts +3 -0
package/build/dts/main.d.ts.map +1 -0
package/build/dts/model/atlas.d.ts +157 -0
package/build/dts/model/atlas.d.ts.map +1 -0
package/build/dts/model/campaigns.d.ts +141 -0
package/build/dts/model/campaigns.d.ts.map +1 -0
package/build/dts/server/collect.d.ts +16 -0
package/build/dts/server/collect.d.ts.map +1 -0
package/build/dts/server/compose.d.ts +13 -0
package/build/dts/server/compose.d.ts.map +1 -0
package/build/dts/server/export.d.ts +3 -0
package/build/dts/server/export.d.ts.map +1 -0
package/build/dts/server/handler.d.ts +6 -0
package/build/dts/server/handler.d.ts.map +1 -0
package/build/dts/server/serve.d.ts +15 -0
package/build/dts/server/serve.d.ts.map +1 -0
package/build/dts/server/site.d.ts +2 -0
package/build/dts/server/site.d.ts.map +1 -0
package/build/dts/server/source.d.ts +19 -0
package/build/dts/server/source.d.ts.map +1 -0
package/build/dts/server/vite-plugin.d.ts +8 -0
package/build/dts/server/vite-plugin.d.ts.map +1 -0
package/build/dts/server/watch.d.ts +10 -0
package/build/dts/server/watch.d.ts.map +1 -0
package/build/esm/index.js +14 -0
package/build/esm/index.js.map +1 -0
package/build/esm/main.js +134 -0
package/build/esm/main.js.map +1 -0
package/build/esm/model/atlas.js +431 -0
package/build/esm/model/atlas.js.map +1 -0
package/build/esm/model/campaigns.js +181 -0
package/build/esm/model/campaigns.js.map +1 -0
package/build/esm/server/collect.js +83 -0
package/build/esm/server/collect.js.map +1 -0
package/build/esm/server/compose.js +50 -0
package/build/esm/server/compose.js.map +1 -0
package/build/esm/server/export.js +19 -0
package/build/esm/server/export.js.map +1 -0
package/build/esm/server/handler.js +67 -0
package/build/esm/server/handler.js.map +1 -0
package/build/esm/server/serve.js +80 -0
package/build/esm/server/serve.js.map +1 -0
package/build/esm/server/site.js +6 -0
package/build/esm/server/site.js.map +1 -0
package/build/esm/server/source.js +67 -0
package/build/esm/server/source.js.map +1 -0
package/build/esm/server/vite-plugin.js +21 -0
package/build/esm/server/vite-plugin.js.map +1 -0
package/build/esm/server/watch.js +56 -0
package/build/esm/server/watch.js.map +1 -0
package/build/site/_astro/Browser.yxldcnQ3.js +3 -0
package/build/site/_astro/client.Buyw3Q1S.js +9 -0
package/build/site/_astro/index.DQrWs1cb.css +1 -0
package/build/site/_astro/react.DJY1zw8Z.js +1 -0
package/build/site/favicon.svg +1 -0
package/build/site/index.html +8 -0
package/package.json +78 -0
package/src/app/components/Browser.tsx +153 -0
package/src/app/components/architecture/ArchitectureBrowser.tsx +240 -0
package/src/app/components/architecture/Detail.tsx +655 -0
package/src/app/components/architecture/ManifestPane.tsx +178 -0
package/src/app/components/architecture/Tree.tsx +205 -0
package/src/app/components/architecture/rows.ts +181 -0
package/src/app/components/architecture/selection.ts +6 -0
package/src/app/components/campaigns/CampaignBrowser.tsx +146 -0
package/src/app/components/campaigns/Detail.tsx +653 -0
package/src/app/components/campaigns/Ladder.tsx +326 -0
package/src/app/components/campaigns/pick.ts +7 -0
package/src/app/components/lib/data.ts +132 -0
package/src/app/pages/index.astro +34 -0
package/src/app/public/favicon.svg +1 -0
package/src/app/styles/theme.css +993 -0
package/src/index.ts +37 -0
package/src/main.ts +155 -0
package/src/model/atlas.ts +751 -0
package/src/model/campaigns.ts +376 -0
package/src/server/collect.ts +132 -0
package/src/server/compose.ts +79 -0
package/src/server/export.ts +24 -0
package/src/server/handler.ts +77 -0
package/src/server/serve.ts +100 -0
package/src/server/site.ts +6 -0
package/src/server/source.ts +89 -0
package/src/server/vite-plugin.ts +32 -0
package/src/server/watch.ts +65 -0

package/build/site/index.html ADDED Viewed

@@ -0,0 +1,8 @@
+<!DOCTYPE html><html lang="en" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>goodbones browser</title><meta name="description" content="The Architecture Browser and the Campaign Browser: a repository's tree with its architecture.yaml laid over it, and every campaign's phases, sectors and holdouts."><link rel="icon" href="favicon.svg" type="image/svg+xml"><script>
+      try {
+        const held = window.localStorage.getItem("goodbones-theme");
+        if (held === "light" || held === "dark") document.documentElement.dataset.theme = held;
+        else if (window.matchMedia("(prefers-color-scheme: light)").matches)
+          document.documentElement.dataset.theme = "light";
+      } catch {}
+    </script><link rel="stylesheet" href="/_astro/index.DQrWs1cb.css"></head><body><style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var g=Object.defineProperty;var w=(a,s,c)=>s in a?g(a,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[s]=c;var l=(a,s,c)=>w(a,typeof s!="symbol"?s+"":s,c);var E=new Set(["__proto__","constructor","prototype"]);{let a={0:t=>y(t),1:t=>c(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(c(t)),5:t=>new Set(c(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>Number.POSITIVE_INFINITY*t},s=t=>{let[p,e]=t;return p in a?a[p](e):void 0},c=t=>t.map(s),y=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([p,e])=>[p,s(e)]));class f extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),n={},d=this.querySelectorAll("template[data-astro-template]");for(let o of d){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of r){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[o.getAttribute("name")||"default"]=o.innerHTML)}let u;try{u=this.hasAttribute("props")?y(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(i+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let h;await this.hydrator(this)(this.Component,u,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),r.disconnect(),this.childrenConnectedCallback()},r=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});r.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}getRetryImportUrl(e){let r=new URL(e,document.baseURI);return r.searchParams.set("astro-retry",Date.now().toString()),r.toString()}async importWithRetry(e){try{return await import(e)}catch(r){return await new Promise(n=>setTimeout(n,1e3)),import(this.getRetryImportUrl(e))}}handleHydrationError(e){let r=this.getAttribute("component-url"),n=new CustomEvent("astro:hydration-error",{cancelable:!0,bubbles:!0,composed:!0,detail:{error:e,componentUrl:r}});this.dispatchEvent(n)&&console.error(`[astro-island] Error hydrating ${r}`,e)}async start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}try{await Astro[r](async()=>{let n=this.getAttribute("renderer-url");try{let[d,{default:u}]=await Promise.all([this.importWithRetry(this.getAttribute("component-url")),n?this.importWithRetry(n):Promise.resolve({default:()=>()=>{}})]),h=this.getAttribute("component-export")||"default";if(h.includes(".")){this.Component=d;for(let m of h.split(".")){if(E.has(m)||!this.Component||typeof this.Component!="object"&&typeof this.Component!="function"||!Object.hasOwn(this.Component,m))throw new Error(`Invalid component export path: ${h}`);this.Component=this.Component[m]}}else{if(E.has(h))throw new Error(`Invalid component export path: ${h}`);this.Component=d[h]}return this.hydrator=u,this.hydrate}catch(d){return this.handleHydrationError(d),()=>{}}},e,this)}catch(n){this.handleHydrationError(n)}}attributeChangedCallback(){this.hydrate()}}l(f,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",f)}})();</script><astro-island uid="Z1JrR2L" component-url="/_astro/Browser.yxldcnQ3.js" component-export="Browser" renderer-url="/_astro/client.Buyw3Q1S.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;Browser&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island><noscript>The goodbones browser needs JavaScript.</noscript></body></html>

package/package.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "name": "@goodbones/browser",
+  "version": "0.1.0-beta.1",
+  "type": "module",
+  "license": "MIT",
+  "description": "The Architecture Browser and the Campaign Browser for @goodbones: an Astro app, prebuilt and served by one bin, that draws a repository's tree with its architecture.yaml laid over it and every campaign's phases, sectors and holdouts — and redraws as the code changes.",
+  "author": "zacharyweidenbach",
+  "keywords": [
+    "architecture",
+    "lint",
+    "import-boundaries",
+    "campaigns",
+    "diagram",
+    "monorepo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dataquail/goodbones.git",
+    "directory": "packages/browser"
+  },
+  "homepage": "https://dataquail.github.io/goodbones",
+  "bugs": {
+    "url": "https://github.com/dataquail/goodbones/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./build/dts/index.d.ts",
+      "default": "./build/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./build/dts/index.d.ts",
+  "bin": {
+    "goodbones-browser": "./build/esm/main.js"
+  },
+  "files": [
+    "build/dts",
+    "build/esm",
+    "build/site",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.test-helper.ts"
+  ],
+  "dependencies": {
+    "effect": "4.0.0-beta.94",
+    "@goodbones/campaigns": "0.1.1-beta.2",
+    "@goodbones/core": "0.1.0-beta.13",
+    "@goodbones/ast-grep": "0.1.3-beta.2",
+    "@goodbones/typescript": "0.1.0-beta.13"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^7.0.0",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^25.9.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "astro": "^7.2.2",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "vite": "^8.2.2"
+  },
+  "nx": {
+    "includedScripts": []
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json && astro build",
+    "check": "tsc -b tsconfig.json",
+    "clean": "rm -rf build .tsbuildinfo .astro",
+    "dev": "astro dev",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage"
+  }
+}

package/src/app/components/Browser.tsx ADDED Viewed

@@ -0,0 +1,153 @@
+import { useEffect, useState } from "react";
+import type { Atlas } from "../../model/atlas.js";
+import type { CampaignView } from "../../model/campaigns.js";
+import { ArchitectureBrowser } from "./architecture/ArchitectureBrowser.js";
+import { CampaignBrowser } from "./campaigns/CampaignBrowser.js";
+import { useFeed, useModel, useRoute } from "./lib/data.js";
+// The page: two browsers under one bar. The bar says which repository, how
+// fresh the drawing is and whether it will redraw on its own; the hash says
+// which browser is open and what is selected, so a view is a link.
+type Theme = "dark" | "light";
+const storedTheme = (): Theme | null => {
+  try {
+    const held = window.localStorage.getItem("goodbones-theme");
+    return held === "dark" || held === "light" ? held : null;
+  } catch {
+    return null;
+  }
+};
+const formatTime = (iso: string): string => {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleTimeString();
+};
+export const Browser = (): React.JSX.Element => {
+  const [route, setRoute] = useRoute();
+  const feed = useFeed();
+  const atlas = useModel<Atlas>("atlas.json", feed.version);
+  const campaigns = useModel<CampaignView>("campaigns.json", feed.version);
+  const [theme, setTheme] = useState<Theme>(() => storedTheme() ?? "dark");
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    try {
+      window.localStorage.setItem("goodbones-theme", theme);
+    } catch {
+      // A private window keeps no preference; the page still renders.
+    }
+  }, [theme]);
+  const name = atlas.value?.name ?? campaigns.value?.name ?? "";
+  const generatedAt = atlas.value?.generatedAt ?? campaigns.value?.generatedAt ?? null;
+  const error = atlas.error ?? campaigns.error;
+  const loading = atlas.state === "loading" || campaigns.state === "loading";
+  return (
+    <div className="page">
+      <header className="bar">
+        <div className="brand">
+          <span className="mark" aria-hidden="true" />
+          <span className="brand-name">goodbones</span>
+          {name !== "" ? <span className="repo">{name}</span> : null}
+        </div>
+        <nav className="tabs" aria-label="Browsers">
+          <button
+            type="button"
+            className={route.tab === "architecture" ? "tab active" : "tab"}
+            onClick={() => {
+              setRoute({ tab: "architecture", selection: null });
+            }}
+          >
+            Architecture Browser
+          </button>
+          <button
+            type="button"
+            className={route.tab === "campaigns" ? "tab active" : "tab"}
+            onClick={() => {
+              setRoute({ tab: "campaigns", selection: null });
+            }}
+          >
+            Campaign Browser
+            {campaigns.value !== null && campaigns.value.campaigns.length > 0 ? (
+              <span className="count">{campaigns.value.campaigns.length}</span>
+            ) : null}
+          </button>
+        </nav>
+        <div className="status">
+          <span
+            className={`live ${feed.live ? "on" : "off"}`}
+            title={
+              feed.live
+                ? "Live: the page redraws when the repository changes."
+                : "A snapshot: no feed of changes is reachable."
+            }
+          >
+            <span className="dot" aria-hidden="true" />
+            {feed.live ? "live" : "snapshot"}
+          </span>
+          {generatedAt !== null ? (
+            <span className="stamp" title={generatedAt}>
+              {loading ? "redrawing…" : `drawn ${formatTime(generatedAt)}`}
+            </span>
+          ) : null}
+          <button
+            type="button"
+            className="theme"
+            onClick={() => {
+              setTheme(theme === "dark" ? "light" : "dark");
+            }}
+            aria-label="Toggle light and dark"
+            title="Toggle light and dark"
+          >
+            {theme === "dark" ? "☾" : "☀"}
+          </button>
+        </div>
+      </header>
+      {error !== null ? (
+        <div className="banner error" role="alert">
+          <strong>The repository could not be read.</strong> {error}
+          {atlas.value !== null ? " Showing the last drawing." : ""}
+        </div>
+      ) : null}
+      {feed.changed.length > 0 && loading ? (
+        <div className="banner">
+          Changed: {feed.changed.slice(0, 4).join(", ")}
+          {feed.changed.length > 4 ? ` and ${String(feed.changed.length - 4)} more` : ""}
+        </div>
+      ) : null}
+      <main className="body">
+        {route.tab === "architecture" ? (
+          atlas.value === null ? (
+            <Placeholder loading={atlas.state === "loading"} what="the architecture" />
+          ) : (
+            <ArchitectureBrowser
+              atlas={atlas.value}
+              selection={route.selection}
+              onSelect={(selection) => {
+                setRoute({ tab: "architecture", selection });
+              }}
+            />
+          )
+        ) : campaigns.value === null ? (
+          <Placeholder loading={campaigns.state === "loading"} what="the campaigns" />
+        ) : (
+          <CampaignBrowser
+            view={campaigns.value}
+            selection={route.selection}
+            onSelect={(selection) => {
+              setRoute({ tab: "campaigns", selection });
+            }}
+          />
+        )}
+      </main>
+    </div>
+  );
+};
+const Placeholder = ({ loading, what }: { loading: boolean; what: string }): React.JSX.Element => (
+  <div className="placeholder">{loading ? `Reading ${what}…` : `Nothing to draw for ${what}.`}</div>
+);

package/src/app/components/architecture/ArchitectureBrowser.tsx ADDED Viewed

@@ -0,0 +1,240 @@
+import { useEffect, useMemo, useState } from "react";
+import type { Atlas, AtlasNode, AtlasPosition } from "../../../model/atlas.js";
+import { Detail } from "./Detail.js";
+import { ManifestPane } from "./ManifestPane.js";
+import { arcsOf, initiallyExpanded, relationsOf, rowsOf } from "./rows.js";
+import type { Selection } from "./selection.js";
+import { Tree } from "./Tree.js";
+// The Architecture Browser: the tree on the left with every edge drawn beside
+// it, the manifest on the right, and what the two say about the thing under
+// the pointer between them. Hover a file and its edges come forward, its
+// governing node lights up in the manifest; hover a node and the files it
+// governs light up in the tree. Click to keep either.
+const selectionOf = (atlas: Atlas, text: string | null): Selection | null => {
+  if (text === null) return null;
+  if (text.startsWith("node:")) return { kind: "node", id: text.slice(5) };
+  if (atlas.files.some((file) => file.path === text)) return { kind: "file", path: text };
+  if (atlas.folders.some((folder) => folder.path === text)) return { kind: "folder", path: text };
+  return null;
+};
+const textOf = (selection: Selection | null): string | null =>
+  selection === null ? null : selection.kind === "node" ? `node:${selection.id}` : selection.path;
+type Props = {
+  readonly atlas: Atlas;
+  readonly selection: string | null;
+  readonly onSelect: (selection: string | null) => void;
+};
+export const ArchitectureBrowser = ({ atlas, onSelect, selection }: Props): React.JSX.Element => {
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => initiallyExpanded(atlas));
+  const [filter, setFilter] = useState("");
+  const [hoverRow, setHoverRow] = useState<string | null>(null);
+  const [hoverNode, setHoverNode] = useState<string | null>(null);
+  // A folder that appears after a redraw opens as the rest did.
+  useEffect(() => {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      const known = new Set(atlas.folders.map((folder) => folder.path));
+      for (const folder of initiallyExpanded(atlas)) if (!previous.has(folder)) next.add(folder);
+      for (const folder of previous) if (!known.has(folder)) next.delete(folder);
+      return next;
+    });
+  }, [atlas]);
+  const selected = useMemo(() => selectionOf(atlas, selection), [atlas, selection]);
+  const nodes = useMemo(
+    () => new Map(atlas.manifest.nodes.map((node) => [node.id, node] as const)),
+    [atlas],
+  );
+  const files = useMemo(
+    () => new Map(atlas.files.map((file) => [file.path, file] as const)),
+    [atlas],
+  );
+  const folders = useMemo(
+    () => new Map(atlas.folders.map((folder) => [folder.path, folder] as const)),
+    [atlas],
+  );
+  const filtered = useMemo(() => {
+    if (filter.trim() === "") return null;
+    const needle = filter.trim().toLowerCase();
+    const keep = new Set<string>();
+    for (const file of atlas.files) {
+      if (!file.path.toLowerCase().includes(needle)) continue;
+      keep.add(file.path);
+      let folder = file.folder;
+      while (folder !== "") {
+        keep.add(folder);
+        folder = folder.slice(0, Math.max(0, folder.lastIndexOf("/")));
+      }
+    }
+    return keep;
+  }, [atlas, filter]);
+  const effectiveExpanded = useMemo(
+    () =>
+      filtered === null ? expanded : new Set([...filtered].filter((path) => folders.has(path))),
+    [expanded, filtered, folders],
+  );
+  const rows = useMemo(() => {
+    const all = rowsOf(atlas, effectiveExpanded);
+    return filtered === null ? all : all.filter((row) => filtered.has(row.path));
+  }, [atlas, effectiveExpanded, filtered]);
+  const arcs = useMemo(
+    () => arcsOf(atlas, rows, effectiveExpanded),
+    [atlas, rows, effectiveExpanded],
+  );
+  // The focus: what the pointer is over, else what was clicked.
+  const focusRow =
+    hoverRow ?? (selected !== null && selected.kind !== "node" ? selected.path : null);
+  const focusIsFolder = focusRow !== null && folders.has(focusRow);
+  const relations = useMemo(
+    () => relationsOf(atlas, focusRow, focusIsFolder),
+    [atlas, focusRow, focusIsFolder],
+  );
+  const focusNode: AtlasNode | null = (() => {
+    const id =
+      hoverNode ??
+      (selected?.kind === "node"
+        ? selected.id
+        : focusRow === null
+          ? null
+          : (files.get(focusRow)?.node ?? folders.get(focusRow)?.node ?? null));
+    return id === null ? null : (nodes.get(id) ?? null);
+  })();
+  const chain: ReadonlyArray<string> =
+    focusRow === null
+      ? focusNode === null
+        ? []
+        : chainOfNode(nodes, focusNode)
+      : (files.get(focusRow)?.chain ?? (focusNode === null ? [] : chainOfNode(nodes, focusNode)));
+  const governedBy: string | null = hoverNode ?? (selected?.kind === "node" ? selected.id : null);
+  const scrollTo: AtlasPosition | null = focusNode?.position ?? null;
+  const select = (next: Selection | null): void => {
+    onSelect(textOf(next));
+  };
+  const toggle = (folder: string): void => {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      if (next.has(folder)) next.delete(folder);
+      else next.add(folder);
+      return next;
+    });
+  };
+  return (
+    <div className="arch">
+      <section className="pane tree-pane" aria-label="Repository tree">
+        <div className="pane-head">
+          <input
+            className="filter"
+            type="search"
+            placeholder="filter files…"
+            value={filter}
+            onChange={(event) => {
+              setFilter(event.target.value);
+            }}
+          />
+          <button
+            type="button"
+            className="small"
+            onClick={() => {
+              setExpanded(new Set(atlas.folders.map((folder) => folder.path)));
+            }}
+          >
+            expand
+          </button>
+          <button
+            type="button"
+            className="small"
+            onClick={() => {
+              setExpanded(new Set());
+            }}
+          >
+            collapse
+          </button>
+        </div>
+        <Tree
+          rows={rows}
+          arcs={arcs}
+          focus={focusRow}
+          focusIsFolder={focusIsFolder}
+          relations={relations}
+          governedBy={governedBy}
+          selected={selected !== null && selected.kind !== "node" ? selected.path : null}
+          onHover={setHoverRow}
+          onToggle={toggle}
+          onSelect={(row) => {
+            select(
+              row.kind === "folder"
+                ? { kind: "folder", path: row.path }
+                : { kind: "file", path: row.path },
+            );
+          }}
+        />
+        <Legend />
+      </section>
+      <section className="pane manifest-pane" aria-label="architecture.yaml">
+        <ManifestPane
+          atlas={atlas}
+          activeNode={focusNode?.id ?? null}
+          chain={chain}
+          scrollTo={scrollTo}
+          selectedNode={selected?.kind === "node" ? selected.id : null}
+          onHoverNode={setHoverNode}
+          onSelectNode={(id) => {
+            select(id === null ? null : { kind: "node", id });
+          }}
+        />
+      </section>
+      <section className="pane detail-pane" aria-label="Details">
+        <Detail
+          atlas={atlas}
+          selected={selected}
+          hovered={
+            hoverRow === null
+              ? hoverNode === null
+                ? null
+                : { kind: "node", id: hoverNode }
+              : folders.has(hoverRow)
+                ? { kind: "folder", path: hoverRow }
+                : { kind: "file", path: hoverRow }
+          }
+          onSelect={select}
+        />
+      </section>
+    </div>
+  );
+};
+const chainOfNode = (
+  nodes: ReadonlyMap<string, AtlasNode>,
+  node: AtlasNode,
+): ReadonlyArray<string> => {
+  const chain: Array<string> = [];
+  let cursor: AtlasNode | undefined = node;
+  while (cursor !== undefined) {
+    chain.unshift(cursor.id);
+    cursor = cursor.parent === null ? undefined : nodes.get(cursor.parent);
+  }
+  return chain;
+};
+const Legend = (): React.JSX.Element => (
+  <div className="legend">
+    <span className="key out">imports</span>
+    <span className="key in">imported by</span>
+    <span className="key refused">refused</span>
+    <span className="key sibling">owed sibling</span>
+    <span className="key governed">governed by node</span>
+  </div>
+);