@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/index.mjs

@@ -25,8 +25,12 @@
 //      components (which render the consumer's head inside them).
 //   2. inject the shell's routes, prerendered like every Astrobook route:
 //        <subpath>/browse/[...path]   folder pages          → ./src/shell/Browse.astro
-//        <subpath>/viewport/[...id]   viewport configurator → ./src/shell/Viewport.astro
+//        <subpath>/pages/[...path]    the site's pages      → ./src/chrome/views/Pages.astro
+//        <subpath>/assets             the site's images     → ./src/chrome/views/Assets.astro
+//        <subpath>/[section]          support, settings     → ./src/chrome/views/Placeholder.astro
+//        <subpath>/viewport/[...id]   a redirect, kept for old links → ./src/shell/Viewport.astro
 //        <subpath>/index.json         the lab index         → ./src/shell/index.json.ts
+//      (the task views, <subpath>/tasks and /tasks/all, are the pin half's, dev only)
 //      and define `virtual:orbytes-lab/*` so those pages can read the resolved options, the
 //      consumer's head component and the consumer's CSS without importing anything by path.
 //   3. serve the two mark APIs on the Vite dev server only (astro:server:setup never runs in a
@@ -117,14 +121,23 @@ const send = (res, status, payload) => {
   res.end(JSON.stringify(payload));
 };
 
+/**
+ * What the lab and the pin half tell each other at setup. One object, created per `orbytesLab()`
+ * call and handed to both. The pin half fills `tasks` in its own `astro:config:setup` — only in dev,
+ * only when it found a repository — and the lab reads it when its config module LOADS, which Vite
+ * does on first request, after every integration's setup hook has run. So the lab's Tasks group
+ * exists exactly when the board does, and neither half decides for the other.
+ * @typedef {{ tasks: import("./defaults.mjs").LabConfig["tasks"] | { base: string; api: string; assets: string; repoRoot: string; backlogDir: string } }} Shared
+ */
+
 /** The virtual modules the package's own pages read. Everything in them is JSON-serialisable. */
-const virtualModulesPlugin = (config, headEntrypoint) => ({
+const virtualModulesPlugin = (config, headEntrypoint, shared) => ({
   name: "orbytes-lab/virtual",
   resolveId: (id) => RESOLVED[id],
   load(id) {
     switch (id) {
       case RESOLVED[VIRTUAL.config]:
-        return `export default ${JSON.stringify(config)};`;
+        return `export default ${JSON.stringify({ ...config, tasks: shared.tasks ?? null })};`;
       case RESOLVED[VIRTUAL.head]:
         return `export { default } from ${JSON.stringify(headEntrypoint)};`;
       case RESOLVED[VIRTUAL.css]:
@@ -133,8 +146,8 @@ const virtualModulesPlugin = (config, headEntrypoint) => ({
   },
 });
 
-/** @param {Record<string, unknown>} [options] */
-function labShell(options) {
+/** @param {Record<string, unknown>} [options] @param {Shared} [shared] */
+function labShell(options, shared = { tasks: null }) {
   const config = resolveLabOptions(options);
   let rootDir = process.cwd();
   return {
@@ -153,6 +166,9 @@ function labShell(options) {
 
         for (const [pattern, entrypoint] of [
           [`${config.subpath}/browse/[...path]`, "./src/shell/Browse.astro"],
+          [`${config.subpath}/pages/[...path]`, "./src/chrome/views/Pages.astro"],
+          [`${config.subpath}/assets`, "./src/chrome/views/Assets.astro"],
+          [`${config.subpath}/[section]`, "./src/chrome/views/Placeholder.astro"],
           [`${config.subpath}/viewport/[...id]`, "./src/shell/Viewport.astro"],
           [`${config.subpath}/index.json`, "./src/shell/index.json.ts"],
         ]) {
@@ -161,7 +177,7 @@ function labShell(options) {
 
         updateConfig({
           vite: {
-            plugins: [virtualModulesPlugin(config, head)],
+            plugins: [virtualModulesPlugin(config, head, shared)],
             // This package ships SOURCE — .astro and .ts compiled by the consumer's Vite, the way
             // Starlight ships its components. Vite externalises node_modules for SSR by default,
             // and an externalised .astro file is handed to Node, which cannot read it. The
@@ -176,7 +192,7 @@ function labShell(options) {
           },
         });
         logger.info(
-          `folder pages at ${config.subpath}/browse, viewport at ${config.subpath}/viewport, index at ${config.subpath}/index.json`,
+          `pages at ${config.subpath}/pages, folders at ${config.subpath}/browse, assets at ${config.subpath}/assets, index at ${config.subpath}/index.json`,
         );
       },
       "astro:server:setup": ({ server, logger }) => {
@@ -277,7 +293,7 @@ function labShell(options) {
  * @param {Record<string, unknown>} [options] the lab's options
  * @param {import("./defaults.mjs").LabConfig} config the RESOLVED lab config
  */
-const pinHalf = (options, config) => {
+const pinHalf = (options, config, shared) => {
   const pin = options?.pin;
   if (pin === false || pin === null) return [];
   const given = typeof pin === "object" ? pin : {};
@@ -289,7 +305,11 @@ const pinHalf = (options, config) => {
         { href: "/", label: "Site" },
         { href: config.subpath || "/", label: "Lab" },
       ],
+      // ONE URL (decided 2026-09-24): the board lives under the lab, at <subpath>/tasks, drawn in
+      // the lab's own chrome. `/pin` still answers, with a redirect. A consumer's `route` wins.
+      route: `${config.subpath}/tasks`,
       ...given,
+      lab: { shared },
     }),
   ];
 };
@@ -302,6 +322,8 @@ const pinHalf = (options, config) => {
  */
 export default function orbytesLab(options = {}) {
   const config = resolveLabOptions(options);
+  /** @type {Shared} */
+  const shared = { tasks: null };
   return [
     createAstrobookIntegration({
       directory: config.directory,
@@ -313,8 +335,8 @@ export default function orbytesLab(options = {}) {
       head: "@orbytes/astrolab/head",
       home: "@orbytes/astrolab/home",
     }),
-    labShell(options),
-    ...pinHalf(options, config),
+    labShell(options, shared),
+    ...pinHalf(options, config, shared),
   ];
 }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@orbytes/astrolab",
-  "version": "0.3.0",
+  "version": "0.4.0-next.1",
   "type": "module",
-  "description": "The orbytes component lab and pin board — an Astrobook shell for Astro sites (live/used-by pills, a viewport configurator, responsive and cull marks, a parameters panel) plus a dev-only click-to-ticket feedback board at /pin.",
+  "description": "The orbytes lab for Astro sites — every page, section and component rendered live, which of them the site actually mounts, a viewport canvas to size them on, and a dev-only click-to-ticket pin board — in one integration, all local.",
   "keywords": [
     "astro",
     "astro-integration",
@@ -70,6 +70,10 @@
     "src",
     "virtual.d.ts"
   ],
+  "publishConfig": {
+    "access": "public",
+    "tag": "next"
+  },
   "dependencies": {
     "@sveltejs/acorn-typescript": "^1.0.12",
     "acorn": "^8.18.0",

package/src/Home.astro

@@ -1,47 +1,69 @@
 ---
-// Lab home — Astrobook's `home` component, given to it by the integration (../index.mjs).
-// Replaces the stock splash with the lab index: a row of tier cards (each opening its folder page
-// at <subpath>/browse/<tier>), then every story as a live thumbnail card grouped by tier, each
-// card carrying its derived pill — live slot, used-by, or nothing.
+// Lab home — Astrobook's `home` component, given to it by the integration (../index.mjs) and
+// rendered as the whole `/lab` document (./ui/components/app.astro).
 //
-// Everything drawn here comes from ./shell/lab-index.ts, which reads Astrobook's own story list
-// (so ids and URLs never drift from what it routes) and derives "live" from what the pages under
-// src/pages/ actually mount. The cards themselves are ./shell/CardGrid.astro, shared with the
-// folder pages.
+// A summary, not a gallery (redesigned 2026-09-24). The previous home drew every story in the lab
+// as a live <iframe> thumbnail — forty-odd full renders of the site, each loading its fonts and
+// stylesheets, before you could click anything. Those cards now live one tier at a time on the
+// tier pages, lazily; the home page is the counts and the one thing only this lab can tell you —
+// what is mounted on which page, in which slot, right now.
 import { execSync } from "node:child_process";
-import labConfig from "virtual:orbytes-lab/config.mjs";
-import CardGrid from "./shell/CardGrid.astro";
-import {
-  buildLabIndex,
-  labBase,
-  liveCountOf,
-  sortTiers,
-  STAGING_URL,
-  tierLabel,
-} from "./shell/lab-index";
+import Shell from "./chrome/Shell.astro";
+import Icon from "./chrome/Icon.astro";
+import { hrefs, labConfig, tasksBase } from "./chrome/model";
+import { componentsOf } from "./chrome/trees";
+import { rootDir, siteAssetsModel, sitePagesModel } from "./chrome/site-data";
+import { buildLabIndex, STAGING_URL, sortTiers, tierLabel } from "./shell/lab-index";
 
 const index = buildLabIndex();
-const tiers = sortTiers([...new Set(index.items.map((item) => item.tier))]).map((tier) => {
-  const items = index.items.filter((item) => item.tier === tier);
+const components = componentsOf(index);
+const pages = sitePagesModel();
+const assets = siteAssetsModel();
+
+const tiers = sortTiers([...new Set(components.map((c) => c.tier))]).map((tier) => {
+  const mods = components.filter((c) => c.tier === tier);
   return {
     tier,
     label: tierLabel(tier),
-    href: tier ? `${labBase}/browse/${tier}` : `${labBase}/browse`,
-    count: items.length,
-    live: liveCountOf(items),
-    items,
+    href: hrefs.tier(tier),
+    components: mods.length,
+    stories: mods.reduce((n, m) => n + m.stories.length, 0),
+    live: mods.filter((m) => m.live).length,
+    used: mods.filter((m) => !m.live && m.usedBy.length).length,
+    unused: mods.filter((m) => !m.live && !m.usedBy.length).length,
   };
 });
 
+// The pin board's counts, in dev only (tasksBase is null in every build).
+let tasks: { open: number; review: number } | null = null;
+if (tasksBase && labConfig.tasks) {
+  const { collectTickets, OPEN_STATUSES, READY_FOR_REVIEW } = await import("./pin/board.mjs");
+  try {
+    const { tickets } = collectTickets(labConfig.tasks.repoRoot, { backlogDir: labConfig.tasks.backlogDir });
+    tasks = {
+      open: tickets.filter((t: { status: string }) => OPEN_STATUSES.includes(t.status)).length,
+      review: tickets.filter((t: { status: string }) => t.status === READY_FOR_REVIEW).length,
+    };
+  } catch {
+    tasks = null;
+  }
+}
+
+// What is on the site: every page, and in slot order what it mounts, with the lab component it is.
+const byComponentFile = new Map(components.filter((c) => c.componentFile).map((c) => [c.componentFile!, c]));
+const onSite = pages
+  .filter((page) => page.mounts.length > 0)
+  .map((page) => ({
+    page,
+    slots: page.mounts.map((file, i) => ({ slot: i + 1, file, component: byComponentFile.get(file) ?? null })),
+  }));
+
 // Local branches → per-branch preview builds, when the consumer configured a URL template.
-// `previewUrlTemplate` is a string with a {branch} placeholder rather than a function because the
-// config crosses a virtual module and has to stay JSON-serialisable. No template, no branch list:
-// a host that does not build branches has nothing to link to.
 const previewTemplate = labConfig.previewUrlTemplate;
 let branches: string[] = [];
 if (previewTemplate) {
   try {
-    branches = execSync('git branch --format="%(refname:short)"', { encoding: "utf8" })
+    branches = execSync('git branch --format="%(refname:short)"', { encoding: "utf8", cwd: rootDir })
       .split("\n")
       .map((line) => line.trim())
       .filter(Boolean);
@@ -52,247 +74,128 @@ if (previewTemplate) {
 const previewAlias = (branch: string) =>
   (previewTemplate ?? "").replace(
     /\{branch\}/g,
-    branch
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, ""),
+    branch.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
   );
+const unusedAssets = assets.filter((a) => a.usedBy.length === 0).length;
 ---
 
-<div class="lab-home lab-chrome">
-  <header class="lab-home__header">
-    <p class="lab-home__eyebrow">// component lab</p>
-    <h1 class="lab-home__title">{labConfig.title}</h1>
-    <p class="lab-home__intro">
-      Every section, component and exploration in the build, rendered live. Cards open the story
-      in the dashboard; thumbnails are the bare renders themselves, scaled down. A white pill means
-      a page mounts that component right now, and names the page when it is not the home page. On
-      section versions a second pill says whether that version has been made responsive; tick it in
-      the sidebar. Where a deployed lab is configured, each card also links to the same story
-      there — the real minified build, which this dev server is not — and, locally, to the
-      component in VS Code.
-    </p>
-    {
-      STAGING_URL && (
-        <a class="lab-home__staging" href={STAGING_URL} target="_blank" rel="noopener">
-          Staging site
-          <span aria-hidden="true">&nbsp;&#8599;</span>
-        </a>
-      )
-    }
-  </header>
+<Shell title="Home" active="home">
+  <Fragment slot="navbar">
+    <div class="lab-navbar__id">
+      <h1 class="lab-navbar__title">Home <small>{labConfig.title}</small></h1>
+    </div>
+    <div class="lab-navbar__tools">
+      {
+        STAGING_URL && (
+          <a class="lab-btn lab-btn--sm" href={STAGING_URL} target="_blank" rel="noopener">
+            <Icon name="external" />
+            Staging
+          </a>
+        )
+      }
+    </div>
+  </Fragment>
+
+  <div class="lab-page">
+    <header class="lab-page__head">
+      <h2 class="lab-page__title">What is on this site</h2>
+      <p class="lab-page__lede">
+        Every page, section and component in the build, rendered live — and which of them the site
+        actually mounts right now, read from <code>src/pages/</code> rather than declared.
+      </p>
+    </header>
+
+    <div class="lab-stats">
+      <a class="lab-stat" href={hrefs.pages}>
+        <span class="lab-stat__head"><Icon name="pages" />Pages</span>
+        <span class="lab-stat__value">{pages.length}</span>
+        <span class="lab-stat__foot">
+          <span class="lab-pill">{onSite.length} with components</span>
+          {pages.some((p) => p.dynamic) && <span class="lab-pill">{pages.filter((p) => p.dynamic).length} dynamic</span>}
+        </span>
+      </a>
+      {
+        tiers.map((tier) => (
+          <a class="lab-stat" href={tier.href}>
+            <span class="lab-stat__head">
+              <Icon name={tier.tier === labConfig.sectionsTier ? "sections" : tier.tier === "components" ? "components" : "component"} />
+              {tier.label}
+            </span>
+            <span class="lab-stat__value">{tier.components}</span>
+            <span class="lab-stat__foot">
+              {tier.live > 0 && <span class="lab-pill lab-pill--live">{tier.live} live</span>}
+              {tier.used > 0 && <span class="lab-pill lab-pill--used">{tier.used} used</span>}
+              {tier.unused > 0 && <span class="lab-pill">{tier.unused} unused</span>}
+              <span class="lab-pill">{tier.stories} stories</span>
+            </span>
+          </a>
+        ))
+      }
+      <a class="lab-stat" href={hrefs.assets}>
+        <span class="lab-stat__head"><Icon name="assets" />Assets</span>
+        <span class="lab-stat__value">{assets.length}</span>
+        <span class="lab-stat__foot">
+          {unusedAssets > 0 ? <span class="lab-pill lab-pill--unresponsive">{unusedAssets} unused</span> : <span class="lab-pill">all referenced</span>}
+        </span>
+      </a>
+      {
+        tasks && tasksBase && (
+          <a class="lab-stat" href={tasksBase}>
+            <span class="lab-stat__head"><Icon name="tasks" />Tasks</span>
+            <span class="lab-stat__value">{tasks.open}</span>
+            <span class="lab-stat__foot">
+              {tasks.review > 0 ? <span class="lab-pill lab-pill--brand">{tasks.review} ready for review</span> : <span class="lab-pill">open</span>}
+            </span>
+          </a>
+        )
+      }
+    </div>
 
-  <section class="lab-home__tiers">
     {
-      tiers.map((tier) => (
-        <a class="tier-card" href={tier.href}>
-          <span class="tier-card__eyebrow">// {tier.tier || "root"}</span>
-          <span class="tier-card__name">{tier.label}</span>
-          <span class="tier-card__meta">
-            <span>
-              {tier.count} stor{tier.count === 1 ? "y" : "ies"}
-            </span>
-            {tier.live > 0 && <span class="tier-card__live">{tier.live} live</span>}
-          </span>
-        </a>
+      onSite.map(({ page, slots }) => (
+        <section>
+          <h3 class="lab-section-title">
+            <a href={page.href}>{page.label}</a>
+            <small>{page.route} · {slots.length} mounted</small>
+          </h3>
+          <ol class="lab-slots">
+            {slots.map(({ slot, file, component }) => (
+              <li class="lab-slots__row">
+                <span class="lab-slots__n">{slot}</span>
+                {component ? (
+                  <a class="lab-slots__name" href={component.stories[0]!.dashboardUrl}>
+                    {component.moduleName}
+                    {component.version && <span class="lab-card__version">{component.version}</span>}
+                  </a>
+                ) : (
+                  <span class="lab-slots__name lab-slots__name--bare" title="Not in the lab — no stories file for it">
+                    {file.split("/").pop()}
+                  </span>
+                )}
+                <span class="lab-slots__file lab-mono">{file}</span>
+              </li>
+            ))}
+          </ol>
+        </section>
       ))
     }
-  </section>
-
-  {
-    branches.length > 0 && (
-      <section class="lab-home__branches">
-        <h2 class="lab-home__group-title">Branches</h2>
-        <ul>
-          {branches.map((branch) => (
-            <li>
-              <code>{branch}</code>
-              <a href={previewAlias(branch)} target="_blank" rel="noopener">
-                branch preview
-              </a>
-            </li>
-          ))}
-        </ul>
-      </section>
-    )
-  }
-
-  {
-    tiers.map((tier) => (
-      <section class="lab-home__group">
-        <h2 class="lab-home__group-title">
-          <a href={tier.href}>{tier.label}</a>
-        </h2>
-        <CardGrid items={tier.items} />
-      </section>
-    ))
-  }
-</div>
-
-<style>
-  .lab-home {
-    background-color: var(--lab-color-bg);
-    color: var(--lab-color-text);
-    font-family: var(--lab-font-body);
-    min-height: 100%;
-    padding: 3em 2.5em 5em;
-  }
-
-  .lab-home__eyebrow {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    color: var(--lab-color-text-muted);
-    margin-bottom: 0.75em;
-  }
-
-  .lab-home__title {
-    font-family: var(--lab-font-heading);
-    color: var(--lab-color-text-strong);
-    font-size: 2.25em;
-    font-weight: 500;
-    letter-spacing: -0.5px;
-    margin-bottom: 0.4em;
-  }
-
-  .lab-home__intro {
-    max-width: 42em;
-    color: var(--lab-color-text-faint);
-    line-height: 1.55;
-    margin-bottom: 1.5em;
-  }
-
-  .lab-home__staging {
-    display: inline-block;
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    color: var(--lab-color-text-strong);
-    text-decoration: none;
-    border: 1px solid var(--lab-color-border);
-    border-left: 1px solid var(--lab-color-text-strong);
-    padding: 0.75em 1.25em;
-    transition: background-color var(--lab-transition), color var(--lab-transition);
-  }
-
-  .lab-home__staging:hover,
-  .lab-home__staging:focus-visible {
-    background-color: var(--lab-color-text-strong);
-    color: var(--lab-color-accent-text);
-  }
-
-  .lab-home__tiers {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
-    gap: 1em;
-    margin-top: 2.5em;
-  }
-
-  .tier-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-    text-decoration: none;
-    border: 1px solid var(--lab-color-border);
-    background-color: var(--lab-color-surface);
-    padding: 1.25em 1.5em;
-    transition: border-color var(--lab-transition);
-  }
-
-  .tier-card:hover,
-  .tier-card:focus-visible {
-    border-color: var(--lab-color-border-strong);
-  }
-
-  .tier-card__eyebrow {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.75em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .tier-card__name {
-    font-family: var(--lab-font-heading);
-    font-size: 1.4em;
-    font-weight: 500;
-    color: var(--lab-color-text-strong);
-  }
-
-  .tier-card__meta {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1em;
-    font-family: var(--lab-font-mono);
-    font-size: 0.8em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .tier-card__live {
-    font-weight: 500;
-    line-height: 1;
-    padding: 0.45em 0.85em;
-    border-radius: var(--lab-radius-pill);
-    background-color: var(--lab-color-accent);
-    color: var(--lab-color-accent-text);
-  }
-
-  .lab-home__branches {
-    margin-top: 2.5em;
-  }
-
-  .lab-home__branches ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .lab-home__branches li {
-    display: flex;
-    align-items: baseline;
-    gap: 1em;
-    padding: 0.5em 0;
-    border-bottom: 1px solid var(--lab-color-border);
-  }
 
-  .lab-home__branches code {
-    font-family: var(--lab-font-mono);
-    color: var(--lab-color-text-strong);
-  }
-
-  .lab-home__branches a {
-    font-family: var(--lab-font-mono);
-    font-size: 0.85em;
-    color: var(--lab-color-text-faint);
-    text-decoration: none;
-  }
-
-  .lab-home__branches a:hover,
-  .lab-home__branches a:focus-visible {
-    color: var(--lab-color-text-strong);
-    text-decoration: underline;
-  }
-
-  .lab-home__group {
-    margin-top: 3em;
-  }
-
-  .lab-home__group-title {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 1em;
-    color: var(--lab-color-text-muted);
-    margin-bottom: 1em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid var(--lab-color-border);
-  }
-
-  .lab-home__group-title a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  .lab-home__group-title a:hover,
-  .lab-home__group-title a:focus-visible {
-    color: var(--lab-color-text-strong);
-    text-decoration: underline;
-  }
-</style>
+    {
+      branches.length > 0 && (
+        <section>
+          <h3 class="lab-section-title">Branches</h3>
+          <ol class="lab-slots">
+            {branches.map((branch) => (
+              <li class="lab-slots__row">
+                <span class="lab-slots__name lab-mono">{branch}</span>
+                <a class="lab-slots__file" href={previewAlias(branch)} target="_blank" rel="noopener">
+                  branch preview ↗
+                </a>
+              </li>
+            ))}
+          </ol>
+        </section>
+      )
+    }
+  </div>
+</Shell>