Builtins are chips that link to a glossary generated from the registry, and the virtual filesystem is drawn as a tree

#word draws a builtin as a chip on the tag's ground over a rule (Look and
Exec in acme's look green and exec red), a <code class="word"> in HTML,
and links it to its entry in a new Builtins chapter wherever that
chapter is in the same output (the book, the site). The chapter is
drawn from docs/typ/builtins-tty.json and builtins-gui.json, which
`zig build builtins-json -Dplatform=tty|gui` writes from the registry
and the Help rows (src/builtins_json.zig, tools/gen_builtins_json.zig;
summaryOf in ninep/ctl.zig is now pub); style.typ merges them, marking
the window-only words. The doc steps refresh their build's file first,
and each build's unit-test fails when its file is stale. Everyday words
first (`everyday` in style.typ), then groups by leader prefix as Help
has them, then settings, the words with no path, debugging and
internals, and last an A-Z index of every word. `zig build book` joins
the doc steps.

#fstree draws a directory tree with its connectors, a description
column and links to the sections that document each file; reference.typ
draws the served tree with it, each pane, pty and column file on its
own line, and a test in config.zig checks it against ninep/tree.zig's
files both ways. The cheatsheet has a two-level version. On the site
the tree reads as `tree` text in w3m and wraps descriptions under the
names on a phone.

The site's tutor draws its B1, B2, B3 and 1-2 chords as mouse glyphs;
the landing credits Plan 9 and acme, as does the book's title page;
install.typ no longer lists the mirrors (the footer does).

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2 files changed, 55 insertions, 4 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index bab762d0..ae59e79a 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -81,8 +81,13 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 /* --- the semantic elements (docs/typ/style.typ) ------------------------------ */
 .key { display:inline-block; padding:0 .3em; border-radius:4px; background:color-mix(in srgb, var(--leaf) 20%, transparent); color:var(--ink); font-size:.82em; white-space:nowrap; line-height:1.4; }
 .key .plus, .key .then { color:var(--leaf); opacity:.8; padding:0 .12em; }
-.word { background:var(--tag); padding:0 .25em; color:var(--dim); }
-.word code { font-size:.82em; color:var(--ink); }
+/* a builtin or tag word: a chip to click, on the tag's ground over a rule
+   (Look and Exec in acme's look green and exec red) */
+:root { --look:#7fd07f; --exec:#ff8a7a; }
+@media (prefers-color-scheme: light) { :root { --look:#006600; --exec:#aa0000; } }
+.content code.word { font-size:.82em; color:var(--ink); background:var(--tag); padding:.05em .3em; border-radius:2px; border-bottom:2px solid var(--leaf); white-space:nowrap; }
+.content code.word.look { border-bottom-color:var(--look); }
+.content code.word.exec { border-bottom-color:var(--exec); }
 .addr code { color:var(--plum); }
 .file code { color:var(--leaf); }
 .btn, .chord { display:inline-flex; align-items:center; gap:2px; vertical-align:-.38em; margin-block:-.3em; }
@@ -157,3 +162,31 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .shot figcaption { padding:3px 8px; font:16px var(--pixel); color:var(--dim); border-top:2px solid var(--leaf); }
 .shot.light figcaption::after { content:" · light"; color:var(--amber); }
 .shot .pending { aspect-ratio:960/700; display:flex; align-items:center; justify-content:center; font:15px var(--pixel); color:var(--dim); }
+
+/* a builtin's chip that links to its glossary entry */
+.content a:has(> code.word) { text-decoration:none; }
+.content a:hover > code.word { text-decoration:underline; text-underline-offset:3px; }
+.credit { font-size:18px; color:var(--dim); margin:0 0 .3em; }
+/* the glossary: each entry's name is a small heading over its line */
+main[data-page="builtins"] .content h4 { font:600 18px var(--mono); color:var(--leaf); margin:1.1em 0 .1em; }
+main[data-page="builtins"] .content h4 + p { margin-top:0; }
+.content pre.tutor .btn, .content pre.tutor .chord { vertical-align:-.3em; }
+.all-words { line-height:2.1; }
+
+/* the virtual filesystem as a tree: names and connectors, descriptions
+   in a quiet column; on a phone a description wraps under its name */
+.content pre.fstree { font-size:15px; line-height:1.35; overflow-x:visible; }
+.fstree .row { display:grid; grid-template-columns:var(--name) 1fr; align-items:baseline; }
+.fstree .nl { display:none; }
+.fstree .branch { color:var(--rule); }
+.fstree .dir, .fstree .dir a { color:var(--leaf); font-weight:700; }
+.fstree a { color:var(--amber); text-decoration:none; }
+.fstree a:hover { text-decoration:underline; }
+.fstree .desc { color:var(--dim); font-family:var(--hand); font-size:17px; white-space:normal; line-height:1.3; }
+@media (max-width:600px) {
+  .content pre.fstree { font-size:13px; }
+  .fstree .row { display:block; }
+  .fstree .name { display:block; }
+  /* under the name: its prefix is --cols cells of the 13px mono font */
+  .fstree .desc { display:block; padding-left:calc(var(--cols) * 7.8px); font-size:15px; margin-bottom:.15em; }
+}
diff --git a/docs/site/site.typ b/docs/site/site.typ
index afcd1041..52e19b01 100644
--- a/docs/site/site.typ
+++ b/docs/site/site.typ
@@ -4,7 +4,7 @@
 //   typst compile --root . --format bundle --features bundle,html docs/site/site.typ OUT
 // Every link is relative and every page sits at the top of OUT, so the site
 // works from file:// and from any static server.
-#import "../typ/style.typ": chapters, tutor-path, doc-links, project
+#import "../typ/style.typ": chapters, tutor-path, doc-links, project, btn, chord
 
 #let clips = toml("media/clips.toml").clip
 #let casts = toml("casts/casts.toml").cast
@@ -23,6 +23,9 @@
     or finds the word) and middle-click runs it (a builtin or a shell
     command). Read PDFs and source, edit code and use terminals with it, in
     a terminal or in its own window.],
+  credit: [It is built on ideas from #link("https://9p.io/plan9/")[Plan 9] from
+    Bell Labs: #link("https://9p.io/sys/doc/acme/acme.html")[acme]'s text as
+    the interface, and the 9P protocol.],
   status: [Linux; macOS in progress. Version #version.],
   terminal: [In a terminal],
   window: [In its own window],
@@ -154,6 +157,7 @@
 #document(href("index"), title: "pardes", shell("index", "pardes")[
   #el("h1", (class: "masthead"))[pardes]
   #el("p", (class: "lead"))[#landing.lead]
+  #el("p", (class: "credit"))[#landing.credit]
   #el("p", (class: "runs"))[#landing.status]
   #el("div", (class: "start"))[
     #for s in landing.start {
@@ -197,8 +201,22 @@
   ])
 }
 
+/// The tutor's text with its mouse buttons drawn: B1, B2, B3 and the
+/// chords it writes 1-2 (hold 1, click 2) become the docs' mouse glyphs,
+/// each with its hidden words, inside the preformatted block.
+#let tutor-text(t) = {
+  let at = 0
+  for m in t.matches(regex("\\bB([123])\\b|\\b([123])-([123])\\b")) {
+    t.slice(at, m.start)
+    if m.captures.at(0) != none { btn("B" + m.captures.at(0)) }
+    else { chord("B" + m.captures.at(1), "B" + m.captures.at(2)) }
+    at = m.end
+  }
+  t.slice(at)
+}
+
 #document(href("tutor"), title: "The tutor", shell("tutor", "The tutor")[
   #heading(level: 1)[The tutor] <tutor>
   The tutor as the editor shows it (#raw("Tutor"), or #raw("SPC h t")).
-  #el("pre", (class: "tutor"))[#read(tutor-path)]
+  #el("pre", (class: "tutor"))[#tutor-text(read(tutor-path))]
 ])