@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/src/pin/index.mjs

@@ -232,6 +232,14 @@ const DEFAULTS = {
   appId: "orbytes-pin",
   appName: "Pin",
   icon: "bug",
+  /**
+   * Set by `orbytesLab()` (../../index.mjs), never by a consumer: `{ shared }`, the object the two
+   * halves talk through. When present, the board is drawn IN THE LAB'S CHROME at `<route>` and
+   * `<route>/all` (../chrome/views/Tasks.astro, injected here, dev only) instead of as this
+   * middleware's standalone page, and `/pin` — the board's address until 2026-09-24 — redirects
+   * there. Absent, the pin half behaves exactly as it did on its own.
+   */
+  lab: null,
 };
 
 /** The dev server's own origin, read from Vite. Never hardcode 4321 — Astro picks a free port. */
@@ -257,7 +265,7 @@ export default function orbytesPin(options = {}) {
   return {
     name: "orbytes-pin",
     hooks: {
-      "astro:config:setup": ({ config: astroConfig, command, updateConfig, addDevToolbarApp, logger }) => {
+      "astro:config:setup": ({ config: astroConfig, command, updateConfig, addDevToolbarApp, injectRoute, logger }) => {
         // Assertion one. In `build`, `preview` or `sync` this integration registers nothing at
         // all — no plugin, no toolbar app, no stamp.
         if (command !== "dev") {
@@ -288,6 +296,21 @@ export default function orbytesPin(options = {}) {
         }
         project = String(config.project ?? projectName(repoRoot));
 
+        // Inside the lab: the Tasks views are Astro pages in the lab's chrome, injected HERE — past
+        // assertion one, so they exist in `astro dev` and in no build — and the lab is told where
+        // they are through the shared object, which is how its Tasks group knows to appear.
+        if (config.lab && config.lab.shared) {
+          const route = boardRoute(config.route);
+          injectRoute({ pattern: `${route}/[...view]`, entrypoint: file("../chrome/views/Tasks.astro"), prerender: true });
+          config.lab.shared.tasks = {
+            base: route,
+            api: `${route}/api/ticket`,
+            assets: `${route}/assets/`,
+            repoRoot,
+            backlogDir: config.backlogDir,
+          };
+        }
+
         addDevToolbarApp({
           id: config.appId,
           name: config.appName,
@@ -411,7 +434,15 @@ export default function orbytesPin(options = {}) {
             return next();
           }
           const path = url.pathname;
-          const wall = path === route || path === `${route}/`;
+          // The board's old address, kept as a redirect for bookmarks and muscle memory.
+          if (config.lab && route !== "/pin" && (path === "/pin" || path === "/pin/")) {
+            res.statusCode = 302;
+            res.setHeader("Location", route + url.search);
+            return res.end();
+          }
+          // Inside the lab the board itself is an Astro page (injected above), so the wall is not
+          // this middleware's to draw — only its screenshots and its one write endpoint are.
+          const wall = !config.lab && (path === route || path === `${route}/`);
           const api = path === apiPath;
           if (!wall && !api && !path.startsWith(assetPrefix)) return next();
 

package/src/pin/toolbar.js

@@ -698,7 +698,7 @@ const BOARD_ROUTE = (pinConfig && pinConfig.route) || '/pin';
  * The panel has exactly TWO tabs, which is fixed and not a preference, so the six map onto them:
  * **Open is everything that is not `Resolved` and not `Cancelled`**, `Resolved` is its own tab, and
  * `Cancelled` appears in neither and draws no marker — drawing an archived ticket on the page is
- * precisely the "taking up space" the status exists to stop. It stays reachable on `/pin`.
+ * precisely the "taking up space" the status exists to stop. It stays reachable on the board.
  *
  * These names are for CLASSIFYING and LABELLING only. Every write sends the status string the
  * board itself reported (› `setStatus`), never a string from this list, because `expect` is

package/src/shell/Browse.astro

@@ -1,371 +1,124 @@
 ---
-// Folder pages — <subpath>/browse/[...path], injected by ../../index.mjs. One page per folder in
-// the lab index (sections, sections/Section02Manifesto, …) plus the root, which lists the tiers.
-// Each page shows the folder's sub-folders as cards and its stories as live-render cards with
-// their pills, behind a client-side filter box.
+// Folder pages — <subpath>/browse/[...path], injected by ../../index.mjs. One page per tier and per
+// folder under it (sections, sections/Section02Manifesto, …), plus the root, which lists the tiers.
+// Level 2 is the tier's tree; the content is the folder's components as cards, grouped by the
+// sub-folder they sit in, and the panel's search and filter narrow both at once.
 //
-// This page is NOT rendered through Astrobook's layout, so it carries its own <head> — and with
-// it <LabHead />, which brings the chrome stylesheet (../ui/lab.css) and the UNCONDITIONAL
-// noindex. A consumer's lab gate walks every built lab page and fails on any without it. Do not
-// drop that import.
+// REDESIGNED 2026-09-24 onto the chrome shell (../chrome/Shell.astro). Cards are per component
+// now, not per story — a component's stories are tabs on its own page.
 //
-// CHANGED 2026-09-22 — the lab is not styled in the styles of the website being built. This
-// file used to open with `import "virtual:orbytes-lab/user-css.mjs"` — it asked for the
-// consumer's stylesheets by hand, because Astrobook injects the `css` option into its own pages
-// only. A folder page is pure chrome: it renders no story, and its thumbnails are iframes of
-// /lab/stories/<id>, which are their own documents and get the consumer's CSS there. So it asks
-// for nothing now, and the chrome below is drawn entirely in `--lab-*` tokens. Reasoning:
-// ../ui/lab.css.
+// Pure chrome: this page renders no story. Its thumbnails are iframes of /lab/stories/<id>, which
+// are their own documents and get the consumer's CSS there (decided 2026-09-22 — ../ui/lab.css).
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
-import LabHead from "../LabHead.astro";
-import CardGrid from "./CardGrid.astro";
-import { buildLabIndex, itemsUnder, labBase, type LabFolder } from "./lab-index";
+import Shell from "../chrome/Shell.astro";
+import Tree from "../chrome/Tree.astro";
+import ComponentCard from "../chrome/ComponentCard.astro";
+import { hrefs, labConfig, type Crumb, type FilterOption, type TreeNode } from "../chrome/model";
+import { componentsOf, tierTree, type LabComponent } from "../chrome/trees";
+import { buildLabIndex, sortTiers, tierLabel } from "./lab-index";
 
 export const getStaticPaths = (() => {
   const index = buildLabIndex();
   return [
-    { params: { path: undefined }, props: { index, folder: null } },
-    ...index.folders.map((folder) => ({ params: { path: folder.path }, props: { index, folder } })),
+    { params: { path: undefined }, props: { folder: "" } },
+    ...index.folders.map((folder) => ({ params: { path: folder.path }, props: { folder: folder.path } })),
   ];
 }) satisfies GetStaticPaths;
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { index, folder } = Astro.props as Props;
-const browseBase = `${labBase}/browse`;
-
-const folderByPath = new Map(index.folders.map((f) => [f.path, f]));
-const itemById = new Map(index.items.map((i) => [i.storyId, i]));
-
-const children: LabFolder[] = folder
-  ? folder.children.map((p) => folderByPath.get(p)).filter((f): f is LabFolder => Boolean(f))
-  : index.folders.filter((f) => !f.path.includes("/"));
-
-const items = folder
-  ? folder.items.map((id) => itemById.get(id)).filter((i) => i !== undefined)
-  : index.items.filter((i) => i.directory === "");
-
-const storyCount = (f: LabFolder) => itemsUnder(index, f.path).length;
-const firstStory = folder ? itemsUnder(index, folder.path)[0] : index.items[0];
-
-const segments = folder ? folder.path.split("/") : [];
-const crumbs = [
-  { label: "lab", href: labBase },
-  ...segments.map((segment, i) => ({
-    label: segment,
-    href: `${browseBase}/${segments.slice(0, i + 1).join("/")}`,
-  })),
+const { folder } = Astro.props as Props;
+const index = buildLabIndex();
+const all = componentsOf(index);
+const segments = folder ? folder.split("/") : [];
+const tier = segments[0] ?? "";
+
+const under = (mod: LabComponent) => !folder || mod.directory === folder || mod.directory.startsWith(`${folder}/`);
+
+// One grid, in the tree's own order, so the cards read in the same sequence as level 2. The root
+// page (no folder) lists every tier in turn, each under its name.
+const leafOrder = (tierId: string) => {
+  const ids: string[] = [];
+  const walk = (nodes: TreeNode[]) => {
+    for (const node of nodes) node.children ? walk(node.children) : ids.push(node.id);
+  };
+  walk(tierTree(index, tierId));
+  return ids;
+};
+const inOrder = (tierId: string) => {
+  const byId = new Map(all.filter((m) => m.tier === tierId).map((m) => [`mod:${m.moduleId}`, m]));
+  return leafOrder(tierId).map((id) => byId.get(id)!).filter(Boolean);
+};
+const ordered: (readonly [string, LabComponent[]])[] = folder
+  ? [["", inOrder(tier).filter(under)] as const]
+  : sortTiers([...new Set(all.map((m) => m.tier))]).map((t) => [t, inOrder(t)] as const);
+const mods = ordered.flatMap(([, list]) => list);
+
+const tierDef = labConfig.tiers.find((t) => t.id === tier);
+const title = folder ? (segments.length === 1 ? tierLabel(tier) : segments[segments.length - 1]!) : "All components";
+// Level 2's breadcrumb names the panel's place (Site › Sections); a deeper folder is the navbar's.
+const crumbs: Crumb[] = folder
+  ? [{ label: "Site" }, { label: tierLabel(tier), href: hrefs.tier(tier) }]
+  : [{ label: "Site" }, { label: "All components" }];
+
+const filters: FilterOption[] = [
+  { value: "live", label: "Live on the site" },
+  { value: "used", label: "Used by something live" },
+  { value: "unused", label: "Unused" },
+  ...(tierDef?.responsive
+    ? [
+        { value: "responsive", label: "Made responsive" },
+        { value: "unresponsive", label: "Not responsive yet" },
+      ]
+    : []),
 ];
-const title = crumbs.map((c) => c.label).join(" › ");
+const live = mods.filter((m) => m.live).length;
+const stories = mods.reduce((n, m) => n + m.stories.length, 0);
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-    <LabHead />
-  </head>
-  <body>
-    <div class="browse lab-chrome">
-      <header class="browse__header">
-        <nav class="browse__crumbs" aria-label="Breadcrumb">
-          <a class="browse__back" href={labBase}>← lab</a>
-          <ol>
-            {
-              crumbs.map((crumb, i) => (
-                <li>
-                  {i < crumbs.length - 1 ? <a href={crumb.href}>{crumb.label}</a> : <span aria-current="page">{crumb.label}</span>}
-                </li>
-              ))
-            }
-          </ol>
-        </nav>
-        <h1 class="browse__title">{folder ? folder.name : "Orbytes lab"}</h1>
-        <p class="browse__meta">
-          {children.length > 0 && <span>{children.length} folder{children.length === 1 ? "" : "s"}</span>}
-          {items.length > 0 && <span>{items.length} stor{items.length === 1 ? "y" : "ies"} here</span>}
-          {folder && folder.liveCount > 0 && <span class="browse__live">{folder.liveCount} live</span>}
-          {
-            folder && folder.responsive.of > 0 && (
-              <span class="browse__responsive" title="section versions made responsive">
-                {folder.responsive.done}/{folder.responsive.of} responsive
-              </span>
-            )
-          }
-          {
-            firstStory && (
-              <a href={firstStory.dashboardUrl}>
-                open in the dashboard <span aria-hidden="true">&#8599;</span>
-              </a>
-            )
-          }
-        </p>
-        <label class="browse__filter">
-          <span class="browse__filter-label">// filter</span>
-          <input id="lab-filter" type="search" placeholder="name, section, version, tag…" autocomplete="off" />
-        </label>
-      </header>
-
-      {
-        children.length > 0 && (
-          <section class="browse__group">
-            <h2 class="browse__group-title">Folders</h2>
-            <div class="browse__folders">
-              {children.map((child) => {
-                const count = storyCount(child);
-                return (
-                  <a class="folder-card" href={`${browseBase}/${child.path}`} data-search={child.path.toLowerCase()}>
-                    <span class="folder-card__name">{child.name}</span>
-                    <span class="folder-card__meta">
-                      <span>
-                        {count} stor{count === 1 ? "y" : "ies"}
-                      </span>
-                      {child.responsive.of > 0 && (
-                        <span class="folder-card__responsive" title="section versions made responsive">
-                          {child.responsive.done}/{child.responsive.of} responsive
-                        </span>
-                      )}
-                      {child.liveCount > 0 && <span class="folder-card__live">{child.liveCount} live</span>}
-                    </span>
-                  </a>
-                );
-              })}
+<Shell
+  title={title}
+  active={tier ? `tier:${tier}` : "home"}
+  panel={folder ? { label: tierLabel(tier), crumbs, filters, filterLabel: "Show components", searchPlaceholder: `Search ${tierLabel(tier).toLowerCase()}` } : undefined}
+>
+  {folder && <Tree slot="panel" nodes={tierTree(index, tier)} />}
+
+  <Fragment slot="navbar">
+    <div class="lab-navbar__id">
+      <h1 class="lab-navbar__title">
+        {title}
+        {segments.length > 1 && <small>{segments.slice(0, -1).map((s, i) => (i === 0 ? tierLabel(s) : s)).join(" / ")}</small>}
+      </h1>
+      <div class="lab-navbar__meta">
+        <span class="lab-pill">{mods.length} component{mods.length === 1 ? "" : "s"}</span>
+        <span class="lab-pill">{stories} stor{stories === 1 ? "y" : "ies"}</span>
+        {live > 0 && <span class="lab-pill lab-pill--live">{live} live</span>}
+      </div>
+    </div>
+  </Fragment>
+
+  <div class="lab-page">
+    {
+      mods.length === 0 ? (
+        <div class="lab-empty">
+          <strong>Nothing here yet</strong>
+          Add a <code>*.stories.ts</code> file under <code>{labConfig.directory}/{folder}</code> and it appears here.
+        </div>
+      ) : (
+        ordered.map(([key, list]) => (
+          <section data-lab-filter-section>
+            {key && (
+              <h2 class="lab-section-title">
+                <a href={hrefs.tier(key)}>{tierLabel(key)}</a>
+                <small>{list.length}</small>
+              </h2>
+            )}
+            <div class="lab-cards">
+              {list.map((mod) => <ComponentCard mod={mod} />)}
             </div>
           </section>
-        )
-      }
-
-      {
-        items.length > 0 && (
-          <section class="browse__group">
-            <h2 class="browse__group-title">Stories</h2>
-            <CardGrid items={items} />
-          </section>
-        )
-      }
-
-      {children.length === 0 && items.length === 0 && <p class="browse__empty">Nothing in this folder.</p>}
-    </div>
-
-    <script>
-      // Client-side filter: every term typed must appear in a card's data-search text.
-      const input = document.getElementById("lab-filter") as HTMLInputElement | null;
-      const cards = document.querySelectorAll<HTMLElement>("[data-search]");
-      input?.addEventListener("input", () => {
-        const terms = input.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
-        for (const card of cards) {
-          const text = card.dataset.search ?? "";
-          card.hidden = !terms.every((term) => text.includes(term));
-        }
-      });
-    </script>
-  </body>
-</html>
-
-<style is:global>
-  /* The filter hides cards with the `hidden` attribute; the cards' own `display` rules (CardGrid's
-     scoped styles) would otherwise beat the UA stylesheet, so this is global and !important. */
-  [hidden] {
-    display: none !important;
-  }
-</style>
-
-<style>
-  .browse {
-    background-color: var(--lab-color-bg);
-    color: var(--lab-color-text);
-    font-family: var(--lab-font-body);
-    min-height: 100vh;
-    padding: 3em 2.5em 5em;
-  }
-
-  .browse__crumbs {
-    display: flex;
-    align-items: baseline;
-    gap: 1.5em;
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.85em;
-    color: var(--lab-color-text-muted);
-    margin-bottom: 1.25em;
-  }
-
-  .browse__crumbs ol {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    gap: 0.5em;
-  }
-
-  .browse__crumbs li + li::before {
-    content: "›";
-    color: var(--lab-color-text-faint);
-    margin-right: 0.5em;
-  }
-
-  .browse__crumbs a,
-  .browse__back {
-    color: var(--lab-color-text-faint);
-    text-decoration: none;
-  }
-
-  .browse__crumbs a:hover,
-  .browse__crumbs a:focus-visible,
-  .browse__back:hover,
-  .browse__back:focus-visible {
-    color: var(--lab-color-text-strong);
-    text-decoration: underline;
-  }
-
-  .browse__crumbs [aria-current] {
-    color: var(--lab-color-text-strong);
-  }
-
-  .browse__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;
-  }
-
-  .browse__meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 1.25em;
-    font-family: var(--lab-font-mono);
-    font-size: 0.85em;
-    color: var(--lab-color-text-faint);
-    margin-bottom: 1.5em;
-  }
-
-  .browse__meta a {
-    color: var(--lab-color-text-strong);
-    text-decoration: none;
-    border-bottom: 1px solid var(--lab-color-border);
-  }
-
-  .browse__meta a:hover,
-  .browse__meta a:focus-visible {
-    border-bottom-color: var(--lab-color-text-strong);
-  }
-
-  .browse__responsive,
-  .folder-card__responsive {
-    line-height: 1;
-    padding: 0.45em 0.85em;
-    border-radius: var(--lab-radius-pill);
-    border: 1px dashed var(--lab-color-border);
-    color: var(--lab-color-text-faint);
-  }
-
-  .browse__live,
-  .folder-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);
-  }
-
-  .browse__filter {
-    display: flex;
-    align-items: baseline;
-    gap: 1em;
-    max-width: 36em;
-    border: 1px solid var(--lab-color-border);
-    border-left: 1px solid var(--lab-color-text-strong);
-    padding: 0.65em 1em;
-  }
-
-  .browse__filter-label {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.85em;
-    color: var(--lab-color-text-muted);
-    white-space: nowrap;
-  }
-
-  .browse__filter input {
-    flex: 1;
-    font: inherit;
-    font-family: var(--lab-font-mono);
-    font-size: 0.9em;
-    color: var(--lab-color-text-strong);
-    background: transparent;
-    border: 0;
-    outline: none;
-  }
-
-  .browse__filter input::placeholder {
-    color: var(--lab-color-text-faint);
-  }
-
-  .browse__filter:focus-within {
-    border-color: var(--lab-color-border-strong);
-    border-left-color: var(--lab-color-text-strong);
-  }
-
-  .browse__group {
-    margin-top: 3em;
-  }
-
-  .browse__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);
-  }
-
-  .browse__folders {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
-    gap: 1em;
-  }
-
-  .folder-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75em;
-    text-decoration: none;
-    border: 1px solid var(--lab-color-border);
-    background-color: var(--lab-color-surface);
-    padding: 1.1em 1.25em;
-    transition: border-color var(--lab-transition);
-  }
-
-  .folder-card:hover,
-  .folder-card:focus-visible {
-    border-color: var(--lab-color-border-strong);
-  }
-
-  .folder-card__name {
-    color: var(--lab-color-text-strong);
-    font-weight: 500;
-  }
-
-  .folder-card__meta {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1em;
-    font-family: var(--lab-font-mono);
-    font-size: 0.75em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .browse__empty {
-    margin-top: 3em;
-    font-family: var(--lab-font-mono);
-    font-size: 0.85em;
-    color: var(--lab-color-text-faint);
-  }
-</style>
+        ))
+      )
+    }
+  </div>
+</Shell>