feat(docs): v0.32.0 — Directory page (community registry discovery surface)

shadcn's /docs/directory analog. Closes the Tooling track parity gap except
for the optional /create preset page.

- New registry/directory.json — schema-shaped list of registries (namespace +
  title + description + url + homepage + maintainer + counts + license + tags).
  Default entry seeds with the slintcn official set; community registries land
  via PR.
- scripts/build-docs.mjs gains directoryPage() — renders /docs/directory.html
  as a card per registry (chips for namespace / counts / license / tags + an
  `slintcn add @ns/...` install command line), plus "how it works" and "list
  yours" PR template sections.
- Sidebar Directory link in every docs page.
- README "Community registries" section pointing at the directory + the JSON.

No new runtime code, pure docs/ecosystem surface; the underlying multi-registry
support has been in the CLI since v0.14.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: stevekwon211

README.md

@@ -91,6 +91,7 @@ node /path/to/slintcn/bin/slintcn.mjs add button card input dialog
 | **v0.29** | **Catalog round-out** — `Collapsible` (single show/hide section), `ButtonGroup` (joined Buttons) → 53 components | ✅ |
 | **v0.30** | **Game HUD expansion** — `Hotbar` (SlotTile strip), `Reticle` (crosshair overlay), `CompassStrip` (scrolling heading) → 56 components | ✅ |
 | **v0.31** | **MCP server** — `slintcn-mcp` bin exposes the registry to MCP-capable AI agents (Claude Desktop, Cursor, Windsurf). Tools: `list_components`, `list_blocks`, `view_component`, `install_command` | ✅ |
+| **v0.32** | **Directory page** — `/docs/directory` lists community + official registries; entries land via PR to `registry/directory.json` (ecosystem discovery surface) | ✅ |
 
 SaaS-first is a **wedge**, not a ceiling. Once tokens + motion + hover semantics
 exist, a second registry (`registry/game/`) is just more `.slint` files.
@@ -158,6 +159,16 @@ against the same registry. The official registry is served at
 > **Maintainers:** publish to npm with `npm login && npm publish` (the package
 > ships `bin`, `registry`, `templates`, `schema`; `prepublishOnly` runs tests).
 
+## Community registries
+
+slintcn isn't tied to one registry. Any host that serves a `registry.json` +
+per-item `r/<name>.json` (the shape `slintcn build` emits) is a valid registry,
+and `slintcn add @namespace/name` installs from it once you wire the namespace
+into `slintcn.json`'s `registries` map.
+
+Browse + list yours at **[stevekwon211.github.io/slintcn/docs/directory](https://stevekwon211.github.io/slintcn/docs/directory.html)** —
+open a PR to [`registry/directory.json`](registry/directory.json) to be listed.
+
 ## MCP server (AI agents)
 
 slintcn ships a Model Context Protocol server so MCP-capable agents (Claude

docs/ROADMAP.md

@@ -1,6 +1,25 @@
 # slintcn roadmap
 
-## v0.31 — MCP server (current)
+## v0.32 — Directory page (current)
+
+shadcn's `/docs/directory` shipped here. The discovery surface for community
++ official registries.
+
+- [x] New `registry/directory.json` — schema-shaped list of registries
+      (namespace · title · description · url · homepage · maintainer · counts
+      · license · tags). Default entry seeded with the slintcn official set.
+- [x] `scripts/build-docs.mjs` renders **`/docs/directory.html`** — card per
+      registry (chips for namespace / counts / license / tags + an
+      `slintcn add @ns/...` install command line), plus "how it works" + "list
+      yours" PR template sections.
+- [x] Sidebar `Directory` link in every docs page.
+- [x] README "Community registries" section pointing to the directory + the
+      JSON to PR into.
+
+No new runtime code — pure docs / ecosystem surface. Closes the shadcn-
+Tooling-Track parity except for the optional `/create` preset page.
+
+## v0.31 — MCP server
 
 shadcn's most-active growth lane is the AI-agent integration. Ship our own:
 
@@ -175,7 +194,7 @@ heavy, separate R&D track; the Game/HUD layer is the long-term differentiator.
 
 ### Tooling track (parallel)
 - **MCP server** shipped in v0.31.
-- **Directory page** (shadcn `/docs/directory` analog) for community registries.
+- **Directory page** shipped in v0.32.
 - Optional **`/create`-style preset page** (pick components → copy command).
 
 ### v1.0+ — Game / HUD round-out (the differentiator)

examples/showcase/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "slintcn-showcase"
-version = "0.31.1"
+version = "0.32.0"
 edition = "2021"
 publish = false
 

examples/showcase/Cargo.toml

@@ -1,6 +1,6 @@
 {
   "name": "slintcn",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "Beautiful copy-paste Slint components — shadcn for native UI",
   "keywords": [
     "slint",

package.json

@@ -2,7 +2,7 @@
   "$schema": "https://slintcn.dev/schema/registry.schema.json",
   "name": "default",
   "homepage": "https://stevekwon211.github.io/slintcn",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "Dark glass theme — shadcn-adjacent primitives for Slint",
   "slintVersion": ">=1.16",
   "theme": {

registry/default/registry.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://slintcn.dev/schema/directory.schema.json",
+  "_comment": "Community + official slintcn-compatible registries. To list your registry here, open a PR adding an entry to `registries`. The slintcn CLI consumes registries via slintcn.json's `registries` map; this directory is the public discovery surface.",
+  "registries": [
+    {
+      "namespace": "default",
+      "title": "slintcn (default)",
+      "description": "The official dark-glass registry — 56 components + 8 blocks, an a11y contract per item, and a games / tools HUD layer.",
+      "url": "https://stevekwon211.github.io/slintcn/r",
+      "homepage": "https://stevekwon211.github.io/slintcn/docs",
+      "repo": "https://github.com/stevekwon211/slintcn",
+      "maintainer": "stevekwon211",
+      "license": "MIT",
+      "components": 56,
+      "blocks": 8,
+      "tags": ["dark", "glass", "games", "hud", "shadcn-style"]
+    }
+  ]
+}

registry/directory.json

@@ -58,7 +58,8 @@ function sidebar(items, activeName) {
   html += `<div class="s-group"><div class="s-label">Get started</div>`;
   html += `<a class="s-item" href="./index.html">Introduction</a>`;
   html += `<a class="s-item" href="../">Landing</a>`;
-  html += `<a class="s-item" href="../demo.html">Playground</a></div>`;
+  html += `<a class="s-item" href="../demo.html">Playground</a>`;
+  html += `<a class="s-item" href="./directory.html">Directory</a></div>`;
   html += `<div class="s-group"><div class="s-label">Components</div>`;
   for (const c of cats) {
     html += `<div class="s-sub">${esc(CATEGORY_LABEL[c] ?? c)}</div>`;
@@ -193,6 +194,82 @@ ${apiSection}
 </html>`;
 }
 
+function directoryPage(items, directory) {
+  // Card per registry — namespace + meta + install command + counts + tags.
+  const card = (r) => `
+    <a class="idx-card" href="${escAttr(r.homepage)}" target="_blank" rel="noreferrer">
+      <div class="idx-t">${esc(r.title)}</div>
+      <div class="idx-d">${esc(r.description)}</div>
+      <div class="dir-meta">
+        <span class="chip">@${esc(r.namespace)}</span>
+        ${r.components != null ? `<span class="chip">${esc(r.components)} components</span>` : ""}
+        ${r.blocks != null     ? `<span class="chip">${esc(r.blocks)} blocks</span>` : ""}
+        ${r.license            ? `<span class="chip">${esc(r.license)}</span>` : ""}
+        ${(r.tags ?? []).map((t) => `<span class="chip muted">${esc(t)}</span>`).join("")}
+      </div>
+      <div class="dir-cmd"><code>slintcn add @${esc(r.namespace)}/&lt;name&gt;</code></div>
+    </a>`;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Directory — slintcn docs</title>
+<link rel="stylesheet" href="./docs.css">
+</head>
+<body>
+${topnav()}
+<div class="shell">
+${sidebar(items, "")}
+<main class="main">
+  <div class="hdr">
+    <h1>Directory</h1>
+    <p class="desc">Registries you can install slintcn components from. Add yours with a PR to
+      <a href="https://github.com/stevekwon211/slintcn/blob/main/registry/directory.json"><code>registry/directory.json</code></a>.</p>
+  </div>
+
+  <h2>Registries</h2>
+  <div class="idx-grid">${directory.registries.map(card).join("")}</div>
+
+  <h2>How it works</h2>
+  <p class="muted">slintcn isn't tied to a single registry. Any host serving a <code>registry.json</code>
+    + per-item <code>r/&lt;name&gt;.json</code> files (the shape <code>slintcn build</code> emits) is a
+    valid registry. Wire it into your project's <code>slintcn.json</code>:</p>
+  <div class="code-block"><pre><code>{
+  "style": "default",
+  "registries": {
+    "default": "https://stevekwon211.github.io/slintcn/r",
+    "acme":    "https://acme.dev/slintcn"
+  }
+}</code></pre></div>
+  <p class="muted">Then install with the namespace prefix:</p>
+  <div class="code-block"><pre><code>slintcn add @acme/button-pro
+slintcn add https://example.com/registry/r/special.json   # direct URL also works</code></pre></div>
+
+  <h2>List yours</h2>
+  <p class="muted">Open a PR that adds an entry to
+    <a href="https://github.com/stevekwon211/slintcn/blob/main/registry/directory.json"><code>registry/directory.json</code></a>:</p>
+  <div class="code-block"><pre><code>{
+  "namespace": "yours",
+  "title":     "Your registry",
+  "description": "What it offers in one line.",
+  "url":       "https://yours.example/r",
+  "homepage":  "https://yours.example",
+  "repo":      "https://github.com/you/yours",
+  "maintainer": "you",
+  "license":   "MIT",
+  "components": 12,
+  "blocks":     2,
+  "tags":      ["light", "minimal"]
+}</code></pre></div>
+</main>
+</div>
+<script src="./docs.js"></script>
+</body>
+</html>`;
+}
+
 function indexPage(items) {
   const ui = items.filter((i) => i.type === "registry:ui");
   const blocks = items.filter((i) => i.type === "registry:block");
@@ -234,6 +311,9 @@ async function main() {
   const a11y = JSON.parse(
     await readFile(path.join(ROOT, "registry", "default", "a11y.json"), "utf8"),
   );
+  const directory = JSON.parse(
+    await readFile(path.join(ROOT, "registry", "directory.json"), "utf8"),
+  );
   // docs pages = user-facing items only (ui + blocks); skip theme + lib helpers.
   const items = catalogFromRegistry(registry).filter(
     (i) => i.type === "registry:ui" || i.type === "registry:block",
@@ -243,6 +323,7 @@ async function main() {
   await writeFile(path.join(outDir, "docs.css"), DOCS_CSS);
   await writeFile(path.join(outDir, "docs.js"), DOCS_JS);
   await writeFile(path.join(outDir, "index.html"), indexPage(items));
+  await writeFile(path.join(outDir, "directory.html"), directoryPage(items, directory));
 
   for (let i = 0; i < items.length; i++) {
     const api = {
@@ -379,6 +460,10 @@ h2{font-size:21px;letter-spacing:-.01em;margin:40px 0 14px;scroll-margin-top:72p
 .idx-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:16px}
 .idx-card:hover{border-color:var(--line-strong)}
 .idx-t{font-weight:600;margin-bottom:4px}.idx-d{font-size:13px;color:var(--muted)}
+.dir-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
+.dir-meta .chip{font-size:11px;padding:2px 8px}
+.dir-meta .chip.muted{opacity:.65}
+.dir-cmd{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;overflow-x:auto;white-space:nowrap}
 /* slint syntax highlight */
 .tok-cmt{color:#6b7280}.tok-str{color:#86efac}.tok-kw{color:#c4b5fd}.tok-type{color:#7dd3fc}.tok-prop{color:#fca5a5}
 /* mobile nav drawer */