@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/virtual.d.ts

@@ -23,6 +23,19 @@ declare module "virtual:orbytes-lab/config.mjs" {
     cullDir: string | null;
     responsiveFile: string;
     cullFile: string;
+    /**
+     * The pin board, when it is running: dev only, and only when the board is on and found a git
+     * repository. Null in every build. Set by the pin half through the integration's shared state
+     * (../index.mjs), read when this module loads — after every integration's setup has run.
+     * `repoRoot` is an absolute local path, so this module must stay server-side only.
+     */
+    tasks: { base: string; api: string; assets: string; repoRoot: string; backlogDir: string } | null;
+    /** The viewport's screen sizes — defaults.mjs › DEFAULT_VIEWPORTS. */
+    viewports: {
+      design: { label: string; width: number; icon: string }[];
+      breakpoints: { name: string; min: number }[];
+      devices: { label: string; width: number; height: number }[];
+    };
   }
   const config: LabConfig;
   export default config;

package/src/shell/CardGrid.astro

@@ -1,297 +0,0 @@
----
-// One card per story: a scaled-down live <iframe> of the bare render, the module and story
-// names, the pills derived from the index — `live · slot N of M` when a page mounts the component
-// (`live · /about, slot 3` when that page is not the home page), `used by N` when a live component
-// imports it, plus the responsive mark on section versions — and a row of links: the viewport
-// configurator, the same story on staging, and (dev only) the component in VS Code. Factored out
-// of Home.astro so the folder pages (Browse.astro) draw the identical card.
-//
-// Thumbnails are the bare story routes themselves (/lab/stories/<id>) rendered in a virtual
-// viewport: sections at 1440×900 (page width), everything else at 960×540.
-//
-// The card is a <div> holding several links, not one <a>: the main link (thumb + label) opens the
-// dashboard and the link row sits under it. An <a> cannot nest in an <a>.
-import { isSectionLike, labBase, livePillText, liveTitle, type LabItem } from "./lab-index";
-
-interface Props {
-  items: LabItem[];
-  /** Shown when there is nothing to draw. */
-  empty?: string;
-}
-
-const { items, empty = "No stories here." } = Astro.props;
-
-type Pill = { text: string; kind: string; title?: string };
-
-const pillsOf = (item: LabItem): Pill[] => {
-  const pills: Pill[] = [];
-  const live = livePillText(item);
-  if (live) pills.push({ text: live, kind: "live", title: liveTitle(item) });
-  else if (item.usedBy.length > 0)
-    pills.push({ text: `used by ${item.usedBy.length}`, kind: "used", title: item.usedBy.join("\n") });
-  if (item.responsive) {
-    pills.push({
-      text: item.responsive.done ? "responsive" : "not responsive",
-      kind: item.responsive.done ? "responsive" : "unresponsive",
-      title: item.responsive.approved
-        ? "approved for responsive work"
-        : "not approved for responsive work yet",
-    });
-  }
-  return pills;
-};
-
-// What the page-level filter box matches against.
-const searchText = (item: LabItem) =>
-  [
-    item.moduleName,
-    item.storyName,
-    item.section,
-    item.version,
-    item.tier,
-    item.livePage,
-    item.live ? "live" : "",
-    // "unresponsive", not "not responsive": the filter is a substring match per term, so a card
-    // that said "not responsive" would still be a hit for "responsive". Same on the sidebar rows.
-    item.responsive ? (item.responsive.done ? "responsive" : "unresponsive") : "",
-    ...item.tags,
-  ]
-    .filter(Boolean)
-    .join(" ")
-    .toLowerCase();
----
-
-{
-  items.length === 0 ? (
-    <p class="lab-grid__empty">{empty}</p>
-  ) : (
-    <div class="lab-grid">
-      {items.map((item) => {
-        const section = isSectionLike(item);
-        const pills = pillsOf(item);
-        return (
-          <div class="lab-card" data-search={searchText(item)}>
-            <a class="lab-card__main" href={item.dashboardUrl}>
-              <span
-                class="lab-card__thumb"
-                data-frame-w={section ? 1440 : 960}
-                data-frame-h={section ? 900 : 540}
-              >
-                <iframe
-                  src={item.storyUrl}
-                  title={`${item.moduleName} — ${item.storyName}`}
-                  loading="lazy"
-                  tabindex="-1"
-                />
-                {pills.length > 0 && (
-                  <span class="lab-card__pills">
-                    {pills.map((pill) => (
-                      <span class:list={["lab-card__pill", `lab-card__pill--${pill.kind}`]} title={pill.title}>
-                        {pill.text}
-                      </span>
-                    ))}
-                  </span>
-                )}
-              </span>
-              <span class="lab-card__label">
-                <span class="lab-card__name">
-                  {item.moduleName}
-                  {item.version && <span class="lab-card__version">{item.version}</span>}
-                </span>
-                <span class="lab-card__variant">{item.storyName}</span>
-              </span>
-            </a>
-            <span class="lab-card__links">
-              <a
-                href={`${labBase}/viewport/${item.storyId}`}
-                title="Open in the viewport configurator"
-                data-astro-reload
-              >
-                viewport <span aria-hidden="true">&#8690;</span>
-              </a>
-              {item.stagingUrl && (
-                <a href={item.stagingUrl} title="The same story on the deployed lab" target="_blank" rel="noopener">
-                  staging <span aria-hidden="true">&#8599;</span>
-                </a>
-              )}
-              {item.editorUrl && (
-                <a href={item.editorUrl} title="Open the component in VS Code">
-                  code <span aria-hidden="true">&#8599;</span>
-                </a>
-              )}
-            </span>
-          </div>
-        );
-      })}
-    </div>
-  )
-}
-
-<script>
-  // Scale each thumbnail iframe so its virtual viewport (data-frame-w × data-frame-h) fits the
-  // card width exactly. Re-run on resize and after every Astro view-transition swap (the lab home
-  // sits inside Astrobook's ClientRouter, where module scripts do not re-execute on navigation).
-  const fit = () => {
-    for (const thumb of document.querySelectorAll<HTMLElement>(".lab-card__thumb")) {
-      const iframe = thumb.querySelector("iframe");
-      if (!iframe) continue;
-      const frameW = Number(thumb.dataset.frameW) || 1440;
-      const frameH = Number(thumb.dataset.frameH) || 900;
-      const scale = thumb.clientWidth / frameW;
-      iframe.style.width = `${frameW}px`;
-      iframe.style.height = `${frameH}px`;
-      iframe.style.transform = `scale(${scale})`;
-      thumb.style.height = `${Math.round(frameH * scale)}px`;
-    }
-  };
-  fit();
-  window.addEventListener("resize", fit);
-  document.addEventListener("astro:page-load", fit);
-</script>
-
-<style>
-  .lab-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
-    gap: 1.5em;
-  }
-
-  .lab-grid__empty {
-    font-family: var(--lab-font-mono);
-    font-size: 0.85em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .lab-card {
-    position: relative;
-    display: block;
-    border: 1px solid var(--lab-color-border);
-    background-color: var(--lab-color-surface);
-    transition: border-color var(--lab-transition);
-  }
-
-  .lab-card:hover,
-  .lab-card:focus-within {
-    border-color: var(--lab-color-border-strong);
-  }
-
-  .lab-card__main {
-    display: block;
-    text-decoration: none;
-  }
-
-  .lab-card__main:focus-visible {
-    outline: none;
-  }
-
-  /* The link row under the label. Three links no longer fit over the label's right end, so they
-     get their own row rather than a cramped overlay. */
-  .lab-card__links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.25em;
-    padding: 0 1em 0.85em;
-  }
-
-  .lab-card__links a {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.75em;
-    line-height: 1.5;
-    color: var(--lab-color-text-faint);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: color var(--lab-transition), border-color var(--lab-transition);
-  }
-
-  .lab-card__links a:hover,
-  .lab-card__links a:focus-visible {
-    color: var(--lab-color-text-strong);
-    border-bottom-color: var(--lab-color-text-strong);
-    outline: none;
-  }
-
-  .lab-card__thumb {
-    display: block;
-    position: relative;
-    overflow: hidden;
-    background-color: var(--lab-color-bg);
-    border-bottom: 1px solid var(--lab-color-border);
-  }
-
-  .lab-card__thumb iframe {
-    border: 0;
-    transform-origin: 0 0;
-    pointer-events: none; /* the card is the link; the live render is display-only */
-  }
-
-  .lab-card__pills {
-    position: absolute;
-    top: 0.6em;
-    left: 0.6em;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4em;
-  }
-
-  .lab-card__pill {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.7em;
-    line-height: 1;
-    padding: 0.5em 0.85em;
-    border-radius: var(--lab-radius-pill);
-    border: 1px solid var(--lab-color-border);
-    background-color: var(--lab-color-surface-raised);
-    color: var(--lab-color-text-muted);
-  }
-
-  .lab-card__pill--live {
-    background-color: var(--lab-color-accent);
-    border-color: var(--lab-color-accent);
-    color: var(--lab-color-accent-text);
-  }
-
-  /* The responsive mark: solid border when the version has been made responsive, dashed when it
-     has not — the same two-state reading as the sidebar's pill. */
-  .lab-card__pill--responsive {
-    border-color: var(--lab-color-border-strong);
-    color: var(--lab-color-text-strong);
-  }
-
-  .lab-card__pill--unresponsive {
-    border-style: dashed;
-    color: var(--lab-color-text-faint);
-  }
-
-  .lab-card__label {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1em;
-    padding: 0.75em 1em 0.5em;
-  }
-
-  .lab-card__name {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.6em;
-    color: var(--lab-color-text-strong);
-    font-weight: 500;
-    font-size: 0.95em;
-  }
-
-  .lab-card__version {
-    font-family: var(--lab-font-mono);
-    font-size: 0.75em;
-    color: var(--lab-color-text-faint);
-    border: 1px solid var(--lab-color-border);
-    padding: 0.1em 0.5em;
-  }
-
-  .lab-card__variant {
-    font-family: var(--lab-font-mono);
-    font-size: 0.8em;
-    color: var(--lab-color-text-faint);
-  }
-</style>

package/src/ui/components/build-path.ts

@@ -1,13 +0,0 @@
-// Vendored from astrobook 0.13.3 (packages/ui/src/components/build-path.ts) — see
-// ../../core/LICENSE-astrobook.
-// Divergence: `@astrobook/core/client` → the vendored core's own path-builder, by relative path
-// with the .ts extension. The `import '@astrobook/types'` side-effect line is gone: the ambient
-// declarations it pulled in now live in ../../types/virtual.d.ts, referenced from the package's
-// own virtual.d.ts.
-import config from 'virtual:astrobook/global-config.mjs'
-
-import { createPathBuilder } from '../../core/utils/path-builder.ts'
-
-export const buildPath: (...parts: string[]) => string = createPathBuilder({
-  trailingSlash: config.trailingSlash,
-})

package/src/ui/components/build-tree.ts

@@ -1,108 +0,0 @@
-// Vendored from astrobook 0.13.3 (packages/ui/src/components/build-tree.ts) — see
-// ../../core/LICENSE-astrobook.
-// Divergence: relative imports carry the .ts extension, and the StoryModule type comes from the
-// vendored types (../../types/) rather than the `@astrobook/types` package.
-import type { StoryModule } from '../../types/types.ts'
-
-import { compressTerms } from './compress-terms.ts'
-
-export interface DirectoryNode {
-  type: 'directory'
-  name: string
-  searchText: string
-  children: TreeNode[]
-}
-
-export interface ModuleNode {
-  type: 'module'
-  id: string
-  name: string
-  searchText: string
-  children: StoryNode[]
-}
-
-export interface StoryNode {
-  type: 'story'
-  id: string
-  name: string
-  searchText: string
-  children?: undefined
-}
-
-export type TreeNode = DirectoryNode | ModuleNode | StoryNode
-
-export function isSingleStory(module: StoryModule): boolean {
-  return module.stories.length === 1 && module.stories[0].name === module.name
-}
-
-function findOrCreateDirectory(
-  children: TreeNode[],
-  segments: string[],
-): TreeNode[] {
-  let current = children
-  for (const segment of segments) {
-    let dir: DirectoryNode | undefined
-    for (const node of current) {
-      if (node.type === 'directory' && node.name === segment) {
-        dir = node
-        break
-      }
-    }
-    if (!dir) {
-      dir = { type: 'directory', name: segment, children: [], searchText: '' }
-      current.push(dir)
-    }
-    current = dir.children
-  }
-  return current
-}
-
-export function buildTree(modules: StoryModule[]): TreeNode[] {
-  const root: TreeNode[] = []
-
-  for (const module of modules) {
-    const segments = module.directory ? module.directory.split('/') : []
-    const children = findOrCreateDirectory(root, segments)
-
-    const storyNodes: StoryNode[] = module.stories.map((story) => ({
-      type: 'story',
-      id: story.id,
-      name: story.name,
-      searchText: '',
-    }))
-
-    if (isSingleStory(module)) {
-      children.push(storyNodes[0])
-    } else {
-      const moduleNode: ModuleNode = {
-        type: 'module',
-        id: module.id,
-        name: module.name,
-        searchText: '',
-        children: storyNodes,
-      }
-      children.push(moduleNode)
-    }
-  }
-
-  for (const node of root) {
-    assignSearchText(node, [])
-  }
-
-  return root
-}
-
-function assignSearchText(
-  node: TreeNode,
-  ancestorTerms: readonly string[],
-): readonly string[] {
-  const currTerms = [...ancestorTerms, node.name]
-  const subTreeTerms: Array<readonly string[]> = Array.from(
-    node.children || [],
-    (child) => assignSearchText(child, currTerms),
-  )
-
-  const mergedTerms = compressTerms([...currTerms, ...subTreeTerms.flat()])
-  node.searchText = mergedTerms.join(' ')
-  return mergedTerms
-}

package/src/ui/components/collapse-duration.ts

@@ -1,28 +0,0 @@
-// Vendored from astrobook 0.13.3 (packages/ui/src/components/collapse-duration.ts) — see
-// ../../core/LICENSE-astrobook.
-// Divergence: the relative import carries the .ts extension.
-import type { TreeNode } from './build-tree.ts'
-
-function countDescendantRows(node: TreeNode): number {
-  if (node.type === 'story') return 0
-  let rows = node.children.length
-  for (const child of node.children) {
-    rows += countDescendantRows(child)
-  }
-  return rows
-}
-
-export function getCollapseDuration(node: TreeNode): number {
-  if (node.type === 'story') return 0
-  return computeCollapseDuration(countDescendantRows(node))
-}
-
-export function computeCollapseDuration(rows: number): number {
-  const minMs = 100
-  const maxMs = 500
-  const scale = 35
-  return Math.min(
-    maxMs,
-    Math.round(minMs + scale * Math.log(Math.max(1, rows))),
-  )
-}

package/src/ui/components/compress-terms.ts

@@ -1,10 +0,0 @@
-// Vendored from astrobook 0.13.3 (packages/ui/src/components/compress-terms.ts) — see
-// ../../core/LICENSE-astrobook. Unchanged.
-export function compressTerms(terms: readonly string[]): readonly string[] {
-  const unique = Array.from(new Set(terms.map((k) => k.toLowerCase())))
-  return unique
-    .filter(
-      (term) => !unique.some((other) => other !== term && other.includes(term)),
-    )
-    .sort()
-}

package/src/ui/components/dashboard-layout.astro

@@ -1,39 +0,0 @@
----
-// The DASHBOARD document: the lab's chrome with the story rendered inside it. New in this
-// package — upstream had one layout for the dashboard, the bare story and the home page alike,
-// and gave all three the consumer's CSS.
-//
-// This is the one document that legitimately carries BOTH stylesheets, because it is both things
-// at once (ruled 2026-09-22):
-//
-//   · the chrome — sidebar, search, toolbar — styled by ../lab.css and by nothing else;
-//   · the preview — the story in <main> — which must be rendered exactly as the real site
-//     renders it, so it gets the consumer's `css` list and the consumer's head component.
-//
-// Nothing crosses. The chrome reads only `--lab-*` tokens and is anchored on chrome classes and
-// ids, so the consumer's `body`/`a`/`*` rules cannot reach it; the chrome sets no font, colour or
-// size on `body`, so nothing of ours inherits down into the story. The full argument, and what it
-// costs, is at the top of ../lab.css.
-//
-// The consumer's head arrives via `virtual:orbytes-lab/user-head.mjs` — the lab shell's own
-// virtual module (../../../index.mjs), which is how it reached this package before too: the
-// package's LabHead used to mount it on EVERY lab page, which is what carried the site's fonts
-// into the chrome.
-import 'virtual:astrobook/user-css.mjs'
-
-import UserHead from 'virtual:orbytes-lab/user-head.mjs'
-
-import Layout from './layout.astro'
-
-interface Props {
-  story: string | undefined
-  hasSidebar: boolean
-}
----
-
-<Layout story={Astro.props.story} hasSidebar={Astro.props.hasSidebar}>
-  <Fragment slot="head">
-    <UserHead />
-  </Fragment>
-  <slot />
-</Layout>

package/src/ui/components/home.astro

@@ -1,65 +0,0 @@
----
-// Vendored from astrobook 0.13.3 (packages/ui/src/components/home.astro) — see
-// ../../core/LICENSE-astrobook.
-// Divergence: the UnoCSS utility strings (including the `@container` queries, which had no
-// container to query once the chrome stopped shipping Uno's preflight) are the `.lab-splash*`
-// classes in ../lab.css, and the star glyph is an inline SVG.
-//
-// This is Astrobook's BUILT-IN splash. The orbytes lab always passes its own `home`
-// (src/Home.astro — the tier cards and live thumbnails), so this renders only for a consumer
-// that leaves the option at its default. Kept working, not designed.
-import config from 'virtual:astrobook/global-config.mjs'
-
-const content = config.homeContent
-const showBadges = !!(content.version || content.repo)
----
-
-<div class="lab-splash lab-chrome">
-  {
-    content.title == null ? null : (
-      <h1 class="lab-splash__title">{content.title}</h1>
-    )
-  }
-  {
-    content.subtitle == null ? null : (
-      <p class="lab-splash__subtitle">{content.subtitle}</p>
-    )
-  }
-
-  {
-    showBadges && (
-      <div class="lab-splash__badges">
-        {content.version && (
-          <a
-            href={content.version.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="lab-splash__badge"
-          >
-            {content.version.label}
-          </a>
-        )}
-        {content.repo && (
-          <a
-            href={content.repo.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="lab-splash__badge"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M8 1.75 10 6l4.25.5-3.1 2.9.85 4.35L8 11.6l-4 2.15.85-4.35L1.75 6.5 6 6z" />
-            </svg>
-            <span>{content.repo.label}</span>
-          </a>
-        )}
-      </div>
-    )
-  }
-</div>