@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/src/chrome/views/Pages.astro

@@ -0,0 +1,178 @@
+---
+// Pages — <subpath>/pages/[...path], injected by ../../../index.mjs. The site's own pages, walked
+// from src/pages/ the same way the live derivation walks them (../../shell/live-files.mjs), in a
+// tree nested the way the routes nest.
+//
+//   <subpath>/pages          every page as a card, with a live thumbnail and what it mounts
+//   <subpath>/pages/<route>  one page on the viewport canvas — the REAL page, at its real URL, in
+//                            an <iframe> you size; `index` is the home page
+//
+// A dynamic route ([slug]) is listed but cannot be shown: the lab would need one of its generated
+// paths, and a static site only knows those at build time.
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import Shell from "../Shell.astro";
+import Tree from "../Tree.astro";
+import Icon from "../Icon.astro";
+import ViewportControls from "../ViewportControls.astro";
+import ViewportStage from "../ViewportStage.astro";
+import { hrefs, type Crumb, type FilterOption } from "../model";
+import { componentsOf } from "../trees";
+import { pagesTree, rootDir, sitePagesModel, type SitePage } from "../site-data";
+import { pinCounts } from "../pins-data";
+import { buildLabIndex } from "../../shell/lab-index";
+import { pageRoute, sitePages } from "../../shell/live-files.mjs";
+
+export const getStaticPaths = (() => [
+  { params: { path: undefined }, props: { route: null as string | null } },
+  ...sitePages(rootDir)
+    .map((file) => pageRoute(file))
+    .filter((route) => !route.includes("["))
+    .map((route) => ({
+      params: { path: route === "/" ? "index" : route.replace(/^\/+/, "") },
+      props: { route: route as string | null },
+    })),
+]) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { route } = Astro.props as Props;
+const pages = sitePagesModel();
+const page: SitePage | null = route ? (pages.find((p) => p.route === route) ?? null) : null;
+const components = componentsOf(buildLabIndex());
+const byFile = new Map(components.filter((c) => c.componentFile).map((c) => [c.componentFile!, c]));
+const pins = await pinCounts();
+
+const crumbs: Crumb[] = [{ label: "Site" }, { label: "Pages", href: hrefs.pages }];
+const filters: FilterOption[] = [
+  { value: "mounts", label: "Mounts components" },
+  { value: "static", label: "No components" },
+  { value: "dynamic", label: "Dynamic routes" },
+];
+// The iframe's address: the site's own route. Astro serves both `/about` and `/about/` in dev and
+// the build writes `/about/index.html`, so the bare route resolves either way.
+const base = import.meta.env.BASE_URL.replace(/\/+$/, "");
+const src = page ? `${base}${page.route}` : "";
+---
+
+<Shell
+  title={page ? page.label : "Pages"}
+  active="pages"
+  panel={{ label: "Pages", crumbs, filters, filterLabel: "Show pages", searchPlaceholder: "Search pages" }}
+>
+  <Tree slot="panel" nodes={pagesTree(pages, page?.route)} />
+
+  {
+    page ? (
+      <Fragment slot="navbar">
+        <div class="lab-navbar__id">
+          <h1 class="lab-navbar__title" title={page.title ?? undefined}>
+            {page.label}
+            <small>{page.route}</small>
+          </h1>
+          <button class="lab-status-btn" type="button" popovertarget="lab-mounts-menu" title="What this page mounts">
+            <span class="lab-pill">{page.mounts.length} component{page.mounts.length === 1 ? "" : "s"}</span>
+            {pins.openFor(page.file) > 0 && <span class="lab-pill lab-pill--brand">{pins.openFor(page.file)} open pins</span>}
+            <Icon name="chevron-down" size="sm" />
+          </button>
+          <div class="lab-menu" id="lab-mounts-menu" popover role="menu">
+            <p class="lab-menu__label">On this page, in order</p>
+            {page.mounts.length === 0 && <p class="lab-status-menu__fact">It mounts no components of its own.</p>}
+            {page.mounts.map((file, i) => {
+              const mod = byFile.get(file);
+              return mod ? (
+                <a class="lab-menu__item" role="menuitem" href={mod.stories[0]!.dashboardUrl}>
+                  <span class="lab-slots__n">{i + 1}</span>
+                  {mod.moduleName}
+                  {mod.version && <span class="lab-menu__hint">{mod.version}</span>}
+                </a>
+              ) : (
+                <span class="lab-menu__item" aria-disabled="true" title="Not in the lab — no stories file for it">
+                  <span class="lab-slots__n">{i + 1}</span>
+                  {file.split("/").pop()}
+                </span>
+              );
+            })}
+            <hr />
+            <p class="lab-status-menu__fact lab-mono">{page.file}</p>
+          </div>
+        </div>
+        <div class="lab-navbar__tools">
+          <button class="lab-btn lab-btn--sm" type="button" data-lab-reload title="Reload the page in the frame">
+            <Icon name="reload" />
+            Reload
+          </button>
+          <a class="lab-btn lab-btn--sm" href={src} target="_blank" rel="noopener" title="Open the real page in a new tab">
+            <Icon name="external" />
+            Open
+          </a>
+        </div>
+        <ViewportControls defaultW={1440} defaultH={900} kind="page" />
+        <div class="lab-navbar__tools">
+          <button class="lab-btn lab-btn--sm lab-btn--icon" type="button" popovertarget="lab-actions-menu" title="More">
+            <Icon name="more" />
+            <span class="lab-visually-hidden">More actions</span>
+          </button>
+        </div>
+        <div class="lab-menu" id="lab-actions-menu" popover role="menu" data-lab-align="end">
+          {import.meta.env.DEV && (
+            <a class="lab-menu__item" role="menuitem" href={`vscode://file${rootDir.startsWith("/") ? "" : "/"}${rootDir}/${page.file}`}>
+              <Icon name="code" />
+              Open in VS Code
+            </a>
+          )}
+          <button class="lab-menu__item" type="button" role="menuitem" data-lab-copy-link>
+            <Icon name="link" />
+            <span data-lab-copy-label>Copy link to this size</span>
+          </button>
+        </div>
+      </Fragment>
+    ) : (
+      <Fragment slot="navbar">
+        <div class="lab-navbar__id">
+          <h1 class="lab-navbar__title">Pages</h1>
+          <div class="lab-navbar__meta">
+            <span class="lab-pill">{pages.length} page{pages.length === 1 ? "" : "s"}</span>
+          </div>
+        </div>
+      </Fragment>
+    )
+  }
+
+  {
+    page ? (
+      <ViewportStage src={src} title={page.title ?? page.label} />
+    ) : (
+      <div class="lab-page">
+        <div class="lab-cards">
+          {pages.map((p) => (
+            <article class="lab-card" data-lab-search={`${p.label} ${p.route} ${p.title ?? ""}`.toLowerCase()} data-lab-facets={p.dynamic ? "dynamic" : p.mounts.length ? "mounts" : "static"}>
+              {p.dynamic ? (
+                <div class="lab-card__main">
+                  <span class="lab-card__thumb lab-card__thumb--note">A dynamic route — no single page to show</span>
+                  <span class="lab-card__body">
+                    <span class="lab-card__name"><span>{p.label}</span></span>
+                    <span class="lab-card__sub lab-mono">{p.route}</span>
+                  </span>
+                </div>
+              ) : (
+                <a class="lab-card__main" href={p.href}>
+                  <span class="lab-card__thumb" data-frame-w="1440" data-frame-h="900">
+                    <iframe src={`${base}${p.route}`} title={p.label} loading="lazy" tabindex="-1" />
+                  </span>
+                  <span class="lab-card__body">
+                    <span class="lab-card__name"><span>{p.label}</span></span>
+                    <span class="lab-card__sub">{p.title ?? p.route}</span>
+                    <span class="lab-card__pills">
+                      <span class="lab-pill lab-pill--mono">{p.route}</span>
+                      <span class="lab-pill">{p.mounts.length} component{p.mounts.length === 1 ? "" : "s"}</span>
+                    </span>
+                  </span>
+                </a>
+              )}
+            </article>
+          ))}
+        </div>
+      </div>
+    )
+  }
+</Shell>

package/src/chrome/views/Placeholder.astro

@@ -0,0 +1,37 @@
+---
+// Support and Settings — <subpath>/support and <subpath>/settings, injected by ../../../index.mjs.
+// In the design, with nothing decided to go under either yet, so each page says exactly that.
+// Both are open design questions in the project's work list.
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import Shell from "../Shell.astro";
+import Icon from "../Icon.astro";
+
+export const getStaticPaths = (() => [
+  { params: { section: "support" }, props: { key: "support" as const, title: "Support", icon: "support" as const } },
+  { params: { section: "settings" }, props: { key: "settings" as const, title: "Settings", icon: "settings" as const } },
+]) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+const { key, title, icon } = Astro.props as Props;
+---
+
+<Shell title={title} active={key}>
+  <Fragment slot="navbar">
+    <div class="lab-navbar__id">
+      <h1 class="lab-navbar__title">{title}</h1>
+    </div>
+  </Fragment>
+  <div class="lab-placeholder">
+    <div class="lab-placeholder__box">
+      <span class="lab-placeholder__icon"><Icon name={icon} /></span>
+      <h1>{title} is still to be designed</h1>
+      <p>
+        {
+          key === "settings"
+            ? "The lab has no settings screen yet. Everything it does is configured in astro.config.mjs, in the orbytesLab() call."
+            : "There is no support page yet. The package's README and docs/ folder are the documentation for now."
+        }
+      </p>
+    </div>
+  </div>
+</Shell>

package/src/chrome/views/Tasks.astro

@@ -0,0 +1,107 @@
+---
+// Tasks — <route>/[...view]: the pin board's kanban at <route> and the All Tasks table at
+// <route>/all, where <route> is <subpath>/tasks by default. Injected by the PIN half
+// (../../pin/index.mjs), in `astro dev` only — past its first dev-only assertion — so no build ever
+// contains it. Every ticket is read off disk on each request.
+//
+// The board's markup, stylesheet and script are the pin half's own (../../pin/board.mjs ›
+// boardParts), the same ones the standalone gallery file uses; this page only lays them out in the
+// lab's chrome and maps their palette onto the lab's tokens (`.pin-board--lab`). The Astro dev
+// toolbar's ticket panel reads this page the way it read /pin: by the `[data-board]` and
+// `script.card-data` payloads it carries, so the two cannot disagree about what a ticket is.
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import Shell from "../Shell.astro";
+import Tree from "../Tree.astro";
+import { labConfig, type TreeNode } from "../model";
+import { BOARD_CSS, BOARD_SCRIPT, boardParts, collectTickets, READY_FOR_REVIEW, STATUSES } from "../../pin/board.mjs";
+
+export const getStaticPaths = (() => [
+  { params: { view: undefined }, props: { view: "board" as const } },
+  { params: { view: "all" }, props: { view: "table" as const } },
+]) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+const { view } = Astro.props as Props;
+const tasks = labConfig.tasks;
+
+type Ticket = { status: string; shotName?: string };
+let tickets: Ticket[] = [];
+let broken: { file: string; reason: string }[] = [];
+let error: string | null = null;
+if (tasks) {
+  try {
+    ({ tickets, broken } = collectTickets(tasks.repoRoot, { backlogDir: tasks.backlogDir, includeCancelled: true }));
+  } catch (e) {
+    error = String((e as Error)?.message ?? e).split("\n")[0]!;
+  }
+}
+const assetHref = (t: Ticket) =>
+  tasks && t.shotName ? tasks.assets + t.shotName.split("/").map(encodeURIComponent).join("/") : null;
+const parts = boardParts(tickets, broken, { assetHref, apiHref: tasks?.api ?? null, links: [], view });
+
+const base = tasks?.base ?? "";
+const here = view === "table" ? `${base}/all` : base;
+let wanted: string | null = null;
+try {
+  wanted = Astro.url.searchParams.get("status");
+} catch {
+  wanted = null;
+}
+const statusNodes: TreeNode[] = [
+  { id: "status:all", label: "All tickets", href: here, icon: "tasks", count: tickets.length, current: !wanted },
+  ...[...STATUSES, ...new Set(tickets.map((t) => t.status).filter((s) => !STATUSES.includes(s)))].map((status) => {
+    const n = tickets.filter((t) => t.status === status).length;
+    return {
+      id: `status:${status}`,
+      label: status,
+      href: `${here}?status=${encodeURIComponent(status)}`,
+      icon: "check" as const,
+      count: n,
+      dot: status === READY_FOR_REVIEW && n > 0 ? ("open" as const) : undefined,
+      current: wanted === status,
+    };
+  }),
+];
+const title = view === "table" ? "All Tasks" : "Kanban Board";
+---
+
+<Shell
+  title={title}
+  active={view === "table" ? "tasks-all" : "tasks-board"}
+  panel={{ label: "Tasks", crumbs: [{ label: "Tasks" }, { label: title }], search: false }}
+>
+  <Tree slot="panel" nodes={statusNodes} />
+
+  <Fragment slot="navbar">
+    <div class="lab-navbar__id">
+      <h1 class="lab-navbar__title">{title}</h1>
+      <div class="lab-navbar__meta">
+        {parts.counts.waiting > 0 && <span class="lab-pill lab-pill--brand">{parts.counts.waiting} ready for your review</span>}
+        <span class="lab-pill">{parts.counts.total} ticket{parts.counts.total === 1 ? "" : "s"}</span>
+        {parts.counts.needsHuman > 0 && <span class="lab-pill lab-pill--error">{parts.counts.needsHuman} needing a human</span>}
+      </div>
+    </div>
+  </Fragment>
+
+  <style is:inline set:html={BOARD_CSS}></style>
+  <div class="pin-board pin-board--lab">
+    {
+      !tasks || error ? (
+        <div class="lab-page">
+          <div class="lab-empty">
+            <strong>The pin board is not running</strong>
+            {error ?? "Tasks exist in `astro dev` only, with the pin half on and a git repository to write tickets into."}
+          </div>
+        </div>
+      ) : (
+        <>
+          <header class="top" set:html={parts.tools} />
+          <Fragment set:html={parts.broken} />
+          <Fragment set:html={parts.main} />
+          <Fragment set:html={parts.dialog} />
+        </>
+      )
+    }
+  </div>
+  {tasks && !error && <script is:inline set:html={BOARD_SCRIPT}></script>}
+</Shell>

package/src/core/LICENSE-astrobook

@@ -65,6 +65,12 @@ Every deliberate divergence in src/core/
    `story.astro` per route (2026-09-22). Upstream routes the dashboard and the bare story through
    one page, so a bare story also received the lab's chrome. Splitting them is what lets the
    lab's own styling stop at the preview's edge — see src/ui/lab.css.
+8a. The dashboard route renders NO story (2026-09-24, the redesign). `virtual-routes.ts` emits a
+    dashboard route that imports neither the story module nor the decorators, and
+    `lib/pages/story.astro` renders the package's own component view (src/chrome/StoryView.astro),
+    which shows the story in an <iframe> of its bare route. That is what keeps every section's CSS
+    off every chrome page. `lib/components/home.astro` — upstream's default home — mounts the
+    package's own home (src/Home.astro), since the splash it used to mount is gone (see 16).
 
 --------------------------------------------------------------------------------
 Every deliberate divergence in src/ui/ (all of it added 2026-09-22)
@@ -100,6 +106,16 @@ Every deliberate divergence in src/ui/ (all of it added 2026-09-22)
     than from `@astrobook/core/client`, and the `import '@astrobook/types'` side-effect lines are
     gone — the ambient declarations they pulled in live in src/types/virtual.d.ts.
 
+16. THE VENDORED SIDEBAR UI IS RETIRED (2026-09-24). The lab's chrome was redesigned and is
+    orbytes-authored now, in src/chrome/ — it is not upstream's and carries no vendoring header.
+    Deleted from src/ui/components/: layout.astro, dashboard-layout.astro, home.astro (the
+    splash), theme-toggle.astro, the eleven sidebar*.astro / sidebar-search-script.ts files,
+    build-tree.ts, build-path.ts, collapse-duration.ts and compress-terms.ts. What remains of
+    upstream's UI is what the bare story page and the home route still need: app.astro,
+    preview-layout.astro, theme-script.astro, theme-message.ts, theme.ts and index.ts. lab.css
+    was never upstream's (9) and is the redesign's stylesheet. `theme-script.astro` gained a
+    `storageKey` prop, so the chrome and the preview each keep their own light/dark.
+
 --------------------------------------------------------------------------------
 Every deliberate divergence in src/types/ (all of it added 2026-09-22)
 --------------------------------------------------------------------------------

package/src/core/lib/components/home.astro

@@ -1,8 +1,10 @@
 ---
 // Vendored from astrobook 0.13.3 (packages/astrobook/lib/components/home.astro) — see
 // ../../LICENSE-astrobook.
-// Divergence: `@astrobook/ui/components/home.astro` → the vendored UI, by relative path.
-import Home from '../../../ui/components/home.astro'
+// Divergence: upstream's default home is the UI package's splash. The redesign (2026-09-24)
+// retired that splash with the rest of the vendored sidebar UI, so the default is the package's
+// own home page (../../../Home.astro) — the one `orbytesLab()` always passes anyway.
+import Home from '../../../Home.astro'
 ---
 
 <Home />

package/src/core/lib/pages/story.astro

@@ -1,16 +1,18 @@
 ---
 // Vendored from astrobook 0.13.3 (packages/astrobook/lib/pages/story.astro) — see
 // ../../LICENSE-astrobook.
-// Divergence: `@astrobook/ui/components/layout.astro` → the vendored UI's DASHBOARD layout, by
-// relative path. Upstream used one layout for the dashboard and the bare story alike; this page
-// is now the dashboard only (chrome + the story inside it), and the bare story route renders
-// through ./preview.astro. Why the two split: ../../../ui/lab.css.
-import LayoutComponent from '../../../ui/components/dashboard-layout.astro'
-import type { ComponentProps } from 'astro/types'
+// Divergence: this is the DASHBOARD page only, and since the redesign (2026-09-24) it renders the
+// package's own component view (../../../chrome/StoryView.astro) — the chrome with the story in an
+// <iframe> on a sizable canvas — rather than a layout with the story rendered inline. So it takes no
+// slot: ../../virtual-module/virtual-routes.ts no longer imports the story module into the
+// dashboard route at all, which is what keeps every section's CSS off every chrome page. The bare
+// story route renders through ./preview.astro. Why the two split: ../../../ui/lab.css.
+import StoryView from '../../../chrome/StoryView.astro'
 
-type Props = ComponentProps<typeof LayoutComponent>
+interface Props {
+  story: string
+  hasSidebar: boolean
+}
 ---
 
-<LayoutComponent {...Astro.props}>
-  <slot />
-</LayoutComponent>
+<StoryView story={Astro.props.story} />

package/src/core/virtual-module/virtual-routes.ts

@@ -3,6 +3,8 @@
 // (upstream is bundled before it ships; this package is not).
 // Divergence: the specifiers this file emits into every generated route are absolute paths into ./lib-paths.ts rather
 // than bare `astrobook/...` ids — see that file for why.
+// Divergence: the dashboard route imports no story module (2026-09-24) — see
+// createVirtualRouteComponent.
 import path from 'node:path'
 
 import type { AstroIntegrationLogger } from 'astro'
@@ -98,10 +100,24 @@ export function createVirtualRouteComponent(route: VirtualRoute): string {
     .replaceAll(/_+/g, '_')
     .replace(/_+$/, '')
 
-  // Divergence: upstream emits STORY_PAGE for both routes. The dashboard route (hasSidebar) is
-  // chrome plus preview and keeps it; the bare story route gets PREVIEW_PAGE, which carries the
-  // consumer's CSS and none of the lab's — decided 2026-09-22, see ../../ui/lab.css.
-  const page = route.props.hasSidebar ? STORY_PAGE : PREVIEW_PAGE
+  // Divergence: upstream emits STORY_PAGE for both routes, each rendering the story inline. Here
+  // the bare story route gets PREVIEW_PAGE, which carries the consumer's CSS and none of the lab's
+  // (decided 2026-09-22, see ../../ui/lab.css) — and the dashboard route (hasSidebar) renders the
+  // story NOT AT ALL (2026-09-24): the component view shows it in an <iframe> of the bare route, so
+  // the dashboard imports neither the story module nor anything it pulls in. That is what keeps
+  // every section's scoped CSS off every chrome page.
+  if (route.props.hasSidebar) {
+    return `
+---
+// Automatically generated by Astrobook
+
+import StoryPage from '${STORY_PAGE}';
+---
+
+<StoryPage story={'${route.props.story}'} hasSidebar={true} />
+`.trim()
+  }
+  const page = PREVIEW_PAGE
 
   return `
 ---