@orbytes/astrolab 0.3.0

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

@@ -0,0 +1,108 @@
+// 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

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,39 @@
+---
+// 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

@@ -0,0 +1,65 @@
+---
+// 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>

package/src/ui/components/layout.astro

@@ -0,0 +1,110 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/layout.astro) — see
+// ../../core/LICENSE-astrobook.
+//
+// THE DIVERGENCE THAT MATTERS (ruled 2026-09-22): this layout no longer imports
+// `virtual:astrobook/user-css.mjs`. Upstream imported the consumer's stylesheets here, last, "so
+// it can override built-in styles" — which is exactly how the lab's chrome ended up wearing the
+// website's brand. The consumer's CSS now reaches the PREVIEW only, through
+// ./dashboard-layout.astro (the story rendered beside the chrome) and ./preview-layout.astro (the
+// bare story route). This layout is pure chrome and is what the `/lab` home page renders through.
+// Full reasoning: ../lab.css.
+//
+// Other divergences: the UnoCSS utility strings are the `.lab-shell` / `.lab-main` classes in
+// ../lab.css; `astro-theme-toggle`'s ThemeScript is ./theme-script.astro, vendored; and a
+// `<slot name="head" />` was added so a wrapping layout can put the consumer's head and CSS into
+// this document without this file importing either.
+//
+// DOM contracts LabHead.astro depends on, all unchanged: `<html data-active-story>`, the `.dark`
+// class (set by the theme script), `#astrobook-sidebar`, the resize-handle element, and
+// `astro:after-swap` / `astro:page-load` from <ClientRouter>.
+import '../lab.css'
+
+import { ClientRouter } from 'astro:transitions'
+
+import CustomHead from 'virtual:astrobook/components/head.mjs'
+import config from 'virtual:astrobook/global-config.mjs'
+
+import Sidebar from './sidebar.astro'
+import SidebarResizeHandle from './sidebar-resize-handle.astro'
+
+interface Props {
+  story: string | undefined
+  hasSidebar: boolean
+}
+
+const hasSidebar = Astro.props.hasSidebar ?? true
+const DEFAULT_SIDEBAR_WIDTH = 300
+const DEFAULT_SIDEBAR_RESIZING = false
+---
+
+<html
+  lang="en"
+  class="lab-shell"
+  data-astrobook-root
+  data-active-story={Astro.props.story ?? ''}
+  data-sidebar-width={DEFAULT_SIDEBAR_WIDTH}
+  data-sidebar-resizing={DEFAULT_SIDEBAR_RESIZING ? '' : undefined}
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{config.title}</title>
+    <script>
+      import { initThemeMessage } from './theme-message.ts'
+      initThemeMessage()
+    </script>
+    {/* CustomHead is the lab's own head (src/LabHead.astro), and the THEME SCRIPT comes with it.
+        Upstream rendered <ThemeScript /> here instead. It moved because the lab's folder pages and
+        viewport configurator are their own documents — they mount LabHead and never this layout —
+        so a theme script that lived here left `.dark` unset on them. That was invisible while the
+        chrome wore the consumer's dark-only tokens; now that the chrome has a light theme and a
+        dark one of its own (../lab.css), those pages rendered light while the dashboard rendered
+        dark. Measured 2026-09-22 on a real consumer site. One script per document either way:
+        LabHead carries it on every chrome page, and the bare story
+        page mounts no LabHead and carries its own (./preview-layout.astro). */}
+    <CustomHead />
+    <slot name="head" />
+    <ClientRouter fallback="none" />
+    <script is:inline>
+      ;(() => {
+        const STORAGE_KEY = 'astrobook-sidebar-width'
+        const restoreWidth = () => {
+          const width = parseFloat(localStorage.getItem(STORAGE_KEY) || '')
+          if (width) {
+            document.documentElement.dataset.sidebarWidth = String(width)
+          }
+        }
+
+        restoreWidth()
+        document.addEventListener('astro:after-swap', restoreWidth)
+      })()
+    </script>
+  </head>
+  <body class="lab-shell">
+    {
+      hasSidebar && (
+        <>
+          <div id="astrobook-sidebar" class="lab-chrome">
+            <Sidebar story={Astro.props.story} />
+          </div>
+          <SidebarResizeHandle />
+        </>
+      )
+    }
+    {
+      /*
+      Use `transition:animate="none"` here because we don't want the fade animation
+      when switching between stories. Sadly this also removes the animation when toggling the light/dark theme.
+      */
+    }
+    <main
+      class="lab-main"
+      transition:name="astrobook-main"
+      transition:animate="none"
+    >
+      <slot />
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,109 @@
+---
+// The PREVIEW document: the bare story at <subpath>/stories/<id>, with no chrome at all. New in
+// this package — upstream rendered the bare story through the same layout as the dashboard, so
+// every story page also carried the sidebar's stylesheet, its scripts and the lab's head.
+//
+// THE RULING (2026-09-22) runs both ways, and this file is the second half of it: the
+// story keeps the consumer's `css` list and `head` component, because seeing a component as the
+// real site renders it is the point of the lab — and it gets NOTHING of the lab's own styling.
+// ../lab.css is not imported here, LabHead.astro is not mounted here, and a component styled by
+// lab CSS the real site has never heard of is a lab that lies.
+//
+// What IS here, and why:
+//   · the document frame — the same `html { overflow: hidden }` / flex `body` / scrollable
+//     `<main>` the story has always rendered inside. It is structure, not styling: the thumbnail
+//     cards and the viewport configurator measure stories in fixed-size iframes, and changing
+//     which box scrolls would change what they show. The three rules live inline, on
+//     `.lab-preview-*` classes a story cannot collide with, rather than in the chrome stylesheet.
+//   · the theme script — it sets `.dark` on <html> and answers the `astrobook:set-theme`
+//     postMessage the embedding pages send. Behaviour, not chrome styling; a site with no `.dark`
+//     rules sees nothing.
+//   · the UNCONDITIONAL noindex. The lab is staging-only and never indexable (ruled 2026-09-02)
+//     and this is one of the two mechanisms that enforce it — the other is the consumer's build
+//     gate. `npm run check:lab-gate` walks every built lab page and fails on any without it, so
+//     this meta has to be here as well as in LabHead.astro. Do not make it conditional.
+//   · Feedbucket, when the consumer configured a key — a bare story page is a lab page you can
+//     open full screen, and it carried the widget before this split.
+import 'virtual:astrobook/user-css.mjs'
+
+import { ClientRouter } from 'astro:transitions'
+
+import config from 'virtual:astrobook/global-config.mjs'
+import labConfig from 'virtual:orbytes-lab/config.mjs'
+import UserHead from 'virtual:orbytes-lab/user-head.mjs'
+
+import ThemeScript from './theme-script.astro'
+
+interface Props {
+  story: string | undefined
+  hasSidebar: boolean
+}
+
+const feedbucketKey = labConfig.feedbucketKey
+---
+
+<html
+  lang="en"
+  class="lab-preview-shell"
+  data-astrobook-root
+  data-astrobook-preview
+  data-active-story={Astro.props.story ?? ''}
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{config.title}</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <ThemeScript />
+    <script>
+      import { initThemeMessage } from './theme-message.ts'
+      initThemeMessage()
+    </script>
+    <UserHead />
+    {
+      feedbucketKey && (
+        <script
+          is:inline
+          defer
+          src="https://cdn.feedbucket.app/assets/feedbucket.js"
+          data-feedbucket={feedbucketKey}
+        />
+      )
+    }
+    <ClientRouter fallback="none" />
+    <style is:global>
+      html.lab-preview-shell {
+        height: 100%;
+        max-height: 100vh;
+        overflow: hidden;
+      }
+
+      body.lab-preview-shell {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        justify-content: flex-start;
+        min-height: 100%;
+        max-height: 100%;
+      }
+
+      .lab-preview-main {
+        flex: 1;
+        min-width: 0;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body class="lab-preview-shell">
+    <main
+      class="lab-preview-main"
+      transition:name="astrobook-main"
+      transition:animate="none"
+    >
+      <slot />
+    </main>
+  </body>
+</html>

package/src/ui/components/sidebar-button-fullscreen.astro

@@ -0,0 +1,38 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-button-fullscreen.astro) —
+// see ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS icon class is an inline SVG (no build step here), and the
+// `import '@astrobook/types'` side-effect line is gone — the ambient declarations it pulled in
+// live in ../../types/virtual.d.ts now.
+import config from 'virtual:astrobook/global-config.mjs'
+
+import SidebarButton from './sidebar-button.astro'
+import { buildPath } from './build-path.ts'
+
+interface Props {
+  story?: string
+}
+---
+
+{
+  Astro.props.story ? (
+    <SidebarButton
+      href={buildPath(config.storyBase, Astro.props.story)}
+      title="Go full screen"
+    >
+      <svg
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M9.5 2.5H13.5V6.5" />
+        <path d="M13.5 2.5 8 8" />
+        <path d="M12 9.5v3a1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3" />
+      </svg>
+    </SidebarButton>
+  ) : null
+}

package/src/ui/components/sidebar-button-search.astro

@@ -0,0 +1,23 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-button-search.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS icon class (`i-fluent-search-16-regular`, which presetIcons turned into
+// a background-image at build time) is an inline SVG — this package has no build step.
+// `id="astrobook-search-toggle"` is a DOM contract: sidebar-search-script.ts binds the panel to
+// it, and LabHead.astro clicks it to open the panel on ⌘K.
+import SidebarButton from './sidebar-button.astro'
+---
+
+<SidebarButton id="astrobook-search-toggle" title="Search">
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    aria-hidden="true"
+  >
+    <circle cx="7" cy="7" r="4.5"></circle>
+    <path d="m10.5 10.5 3 3"></path>
+  </svg>
+</SidebarButton>

package/src/ui/components/sidebar-button-theme.astro

@@ -0,0 +1,9 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-button-theme.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: `astro-theme-toggle`'s Toggle is ./theme-toggle.astro, vendored into this package
+// (why: ./theme-script.astro).
+import Toggle from './theme-toggle.astro'
+---
+
+<Toggle class="astrobook-sidebar-button lab-focus-ring" />

package/src/ui/components/sidebar-button.astro

@@ -0,0 +1,24 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-button.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS `astrobook-sidebar-button` shortcut is now a real class in
+// ../lab.css. The CLASS NAME is unchanged on purpose — LabHead.astro creates the collapse, cull,
+// viewport, staging and code buttons in JavaScript and sets exactly this className on each.
+interface Props {
+  id?: string
+  href?: string
+  title: string
+}
+
+const Element = Astro.props.href ? 'a' : 'button'
+---
+
+<Element
+  id={Astro.props.id}
+  href={Astro.props.href}
+  class:list={['astrobook-sidebar-button', 'lab-focus-ring']}
+  title={Astro.props.title}
+>
+  <span class="lab-sr-only">{Astro.props.title}</span>
+  <slot />
+</Element>

package/src/ui/components/sidebar-resize-handle.astro

@@ -0,0 +1,74 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-resize-handle.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility string is a real rule on the `astrobook-sidebar-resize-handle`
+// element selector in ../lab.css. The ELEMENT NAME is unchanged — LabHead.astro's collapse styles
+// hide it by that name.
+---
+
+<astrobook-sidebar-resize-handle role="separator"></astrobook-sidebar-resize-handle>
+
+<script>
+  const STORAGE_KEY = 'astrobook-sidebar-width'
+  const DEFAULT_WIDTH = 300
+  let previousWidth = ''
+
+  function setSidebarWidth(width: number): void {
+    const widthString = width.toFixed(0)
+    if (widthString === previousWidth) {
+      return
+    }
+    previousWidth = widthString
+    document.documentElement.dataset.sidebarWidth = widthString
+    localStorage.setItem(STORAGE_KEY, widthString)
+  }
+
+  class AstrobookSidebarResizeHandle extends HTMLElement {
+    #handleCapture = (event: PointerEvent) => {
+      event.preventDefault()
+      this.setPointerCapture(event.pointerId)
+      document.documentElement.dataset.sidebarResizing = ''
+
+      document.body.addEventListener('pointermove', this.#handleMove)
+      document.body.addEventListener('pointerup', this.#handleRelease, {
+        once: true,
+      })
+    }
+
+    #handleRelease = (event?: PointerEvent) => {
+      if (event) {
+        event.preventDefault()
+        this.releasePointerCapture(event.pointerId)
+      }
+      delete document.documentElement.dataset.sidebarResizing
+      document.body.removeEventListener('pointermove', this.#handleMove)
+      document.body.removeEventListener('pointerup', this.#handleRelease)
+    }
+
+    #handleMove = (event: PointerEvent) => {
+      setSidebarWidth(event.clientX)
+    }
+
+    #handleReset = () => {
+      setSidebarWidth(DEFAULT_WIDTH)
+    }
+
+    connectedCallback() {
+      this.addEventListener('pointerdown', this.#handleCapture)
+      this.addEventListener('dblclick', this.#handleReset)
+    }
+
+    disconnectedCallback() {
+      this.removeEventListener('pointerdown', this.#handleCapture)
+      this.removeEventListener('dblclick', this.#handleReset)
+      this.#handleRelease()
+    }
+  }
+
+  if (!customElements.get('astrobook-sidebar-resize-handle')) {
+    customElements.define(
+      'astrobook-sidebar-resize-handle',
+      AstrobookSidebarResizeHandle,
+    )
+  }
+</script>