@orbytes/astrolab 0.3.0

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

@@ -0,0 +1,41 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-search-panel.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility strings and the scoped <style> block are rules in ../lab.css, and
+// the search icon is an inline SVG. The ids are DOM contracts — LabHead.astro and
+// ./sidebar-search-script.ts both bind to them.
+---
+
+<div id="astrobook-search-panel">
+  <div class="lab-search__row">
+    <div class="lab-search__field">
+      <svg
+        class="lab-search__icon"
+        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>
+      <input
+        id="astrobook-search-input"
+        type="text"
+        placeholder="Search..."
+        aria-label="Search stories"
+      />
+    </div>
+  </div>
+</div>
+
+<script>
+  import { initSearch } from './sidebar-search-script.ts'
+
+  initSearch(document)
+  document.addEventListener('astro:before-swap', (event) => {
+    initSearch((event as unknown as { newDocument: Document }).newDocument)
+  })
+</script>

package/src/ui/components/sidebar-search-script.ts

@@ -0,0 +1,103 @@
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-search-script.ts) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the relative import carries the .ts extension.
+//
+// Every id below is a DOM contract shared with LabHead.astro, which opens this panel on ⌘K and
+// widens a match by appending lower-cased terms to `data-search-text`. Do not rename them.
+import { compressTerms } from './compress-terms.ts'
+
+const TREE_ID = 'astrobook-sidebar-tree'
+const SEARCH_INPUT_ID = 'astrobook-search-input'
+const SEARCH_TOGGLE_ID = 'astrobook-search-toggle'
+const SEARCH_PANEL_ID = 'astrobook-search-panel'
+const STYLE_ID = 'astrobook-search-style'
+const OPEN_KEY = 'astrobook-sidebar-search-open'
+const QUERY_KEY = 'astrobook-sidebar-search-query'
+
+function getStyleElement(doc: Document): HTMLStyleElement {
+  let styleEl = doc.getElementById(STYLE_ID) as HTMLStyleElement | null
+  if (!styleEl) {
+    styleEl = doc.createElement('style')
+    styleEl.id = STYLE_ID
+    doc.head.appendChild(styleEl)
+  }
+  return styleEl
+}
+
+function updateQueryStyle(doc: Document, query: string): void {
+  const trimmed = query.trim()
+  const el = getStyleElement(doc)
+
+  if (!trimmed) {
+    el.textContent = ''
+    return
+  }
+
+  const terms = compressTerms(trimmed.split(/[\s\p{P}]+/u))
+  const rules = terms.map((term) => {
+    return `#${TREE_ID} [data-search-text]:not([data-search-text*="${CSS.escape(term)}"]) { display: none !important; }`
+  })
+  el.textContent = rules.join('\n')
+}
+
+function saveQuery(query: string): void {
+  if (query) {
+    sessionStorage.setItem(QUERY_KEY, query)
+  } else {
+    sessionStorage.removeItem(QUERY_KEY)
+  }
+}
+
+export function initSearch(doc: Document): void {
+  const searchInputElement = doc.getElementById(
+    SEARCH_INPUT_ID,
+  ) as HTMLInputElement | null
+  const searchToggleElement = doc.getElementById(SEARCH_TOGGLE_ID)
+  const searchPanelElement = doc.getElementById(SEARCH_PANEL_ID)
+  if (!searchInputElement || !searchToggleElement || !searchPanelElement) return
+
+  const searchInput = searchInputElement
+  const searchToggle = searchToggleElement
+  const searchPanel = searchPanelElement
+
+  function openPanel(): void {
+    searchPanel.setAttribute('data-open', '')
+    searchToggle.setAttribute('data-active', '')
+    sessionStorage.setItem(OPEN_KEY, '1')
+    requestAnimationFrame(() => searchInput.focus())
+  }
+
+  function closePanel(): void {
+    searchInput.value = ''
+    saveQuery('')
+    updateQueryStyle(doc, '')
+    searchPanel.removeAttribute('data-open')
+    searchToggle.removeAttribute('data-active')
+    sessionStorage.removeItem(OPEN_KEY)
+  }
+
+  function handleInput(): void {
+    saveQuery(searchInput.value)
+    updateQueryStyle(document, searchInput.value)
+  }
+
+  searchToggle.addEventListener('click', () => {
+    if (searchPanel.hasAttribute('data-open')) {
+      closePanel()
+    } else {
+      openPanel()
+    }
+  })
+
+  searchInput.addEventListener('input', handleInput)
+
+  // Restore state from sessionStorage after a page navigation
+  const isOpen = sessionStorage.getItem(OPEN_KEY) === '1'
+  if (isOpen) {
+    const query = sessionStorage.getItem(QUERY_KEY) || ''
+    searchPanel.setAttribute('data-open', '')
+    searchToggle.setAttribute('data-active', '')
+    searchInput.value = query
+    updateQueryStyle(doc, query)
+  }
+}

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

@@ -0,0 +1,17 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-title.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility string is the `.lab-sidebar__title` class in ../lab.css, and the
+// `import '@astrobook/types'` side-effect line is gone (ambient declarations now live in
+// ../../types/virtual.d.ts).
+import config from 'virtual:astrobook/global-config.mjs'
+
+import { buildPath } from './build-path.ts'
+---
+
+<a
+  class:list={['lab-sidebar__title', 'lab-focus-ring']}
+  href={buildPath('/', config.astrobookBase)}
+>
+  {config.title}
+</a>

package/src/ui/components/sidebar-tree-node.astro

@@ -0,0 +1,143 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-tree-node.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility strings and shortcuts are real classes in ../lab.css, the icons
+// are inline SVGs, and the scoped <style> block moved there with them.
+//
+// EVERY ATTRIBUTE AND STATE CLASS BELOW IS A DOM CONTRACT, shared with LabHead.astro's sidebar
+// decorator and with ./sidebar-search-script.ts — `data-astrobook-collapsible`,
+// `data-id="dir:…"` / `"module:…"`, `data-search-text`, `data-astrobook-story-link`,
+// `data-story-id`, `data-astrobook-chevron`, and the two
+// `astrobook-sidebar-story-link-active|inactive` classes. Do not rename any of them.
+import config from 'virtual:astrobook/global-config.mjs'
+
+import type { TreeNode } from './build-tree.ts'
+import { buildPath } from './build-path.ts'
+import { getCollapseDuration } from './collapse-duration.ts'
+
+interface Props {
+  node: TreeNode
+}
+
+const { node } = Astro.props
+
+// The inline script in sidebar-tree.astro sets the real active state on the client; the initial
+// state here is always inactive.
+const active = false
+
+const collapseDuration = getCollapseDuration(node)
+---
+
+{
+  node.type === 'directory' && (
+    <astrobook-sidebar-node>
+      <details
+        open
+        data-astrobook-collapsible
+        data-id={`dir:${node.name}`}
+        data-search-text={node.searchText}
+        style={`--collapse-duration: ${collapseDuration}ms`}
+      >
+        <summary
+          class:list={[
+            'astrobook-sidebar-link',
+            'lab-tree-row--group',
+            'lab-focus-ring',
+          ]}
+        >
+          <svg
+            data-astrobook-chevron
+            class="lab-tree-icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m4 6 4 4 4-4" />
+          </svg>
+          <span>{node.name}</span>
+        </summary>
+        <div class="lab-tree-children">
+          {node.children.map((child) => (
+            <Astro.self node={child} />
+          ))}
+        </div>
+      </details>
+    </astrobook-sidebar-node>
+  )
+}
+
+{
+  node.type === 'module' && (
+    <astrobook-sidebar-node>
+      <details
+        open
+        data-astrobook-collapsible
+        data-id={`module:${node.id}`}
+        data-search-text={node.searchText}
+        style={`--collapse-duration: ${collapseDuration}ms`}
+      >
+        <summary
+          class:list={[
+            'astrobook-sidebar-link',
+            'lab-tree-row--group',
+            'lab-focus-ring',
+          ]}
+        >
+          <svg
+            class="lab-tree-icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="2.5" y="2.5" width="11" height="11" rx="1.5" />
+            <path d="M2.5 6.5h11" />
+          </svg>
+          <span>{node.name}</span>
+        </summary>
+        <div class="lab-tree-children">
+          {node.children.map((child) => (
+            <Astro.self node={child} />
+          ))}
+        </div>
+      </details>
+    </astrobook-sidebar-node>
+  )
+}
+
+{
+  node.type === 'story' && (
+    <a
+      href={buildPath(config.dashboardBase, node.id)}
+      data-astrobook-story-link
+      data-story-id={node.id}
+      data-search-text={node.searchText}
+      class:list={[
+        'astrobook-sidebar-link',
+        'lab-focus-ring',
+        active
+          ? 'astrobook-sidebar-story-link-active'
+          : 'astrobook-sidebar-story-link-inactive',
+      ]}
+    >
+      <svg
+        class="lab-tree-icon"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M8 2.5 13.5 8 8 13.5 2.5 8z" />
+      </svg>
+      <span>{node.name}</span>
+    </a>
+  )
+}

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

@@ -0,0 +1,84 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar-tree.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility string is a rule on the `astrobook-sidebar-tree` element
+// selector in ../lab.css, and the two `customElements.define` calls are guarded.
+//
+// `id="astrobook-sidebar-tree"` and `transition:persist` are DOM contracts: LabHead.astro hangs
+// its pills, marks and j/k navigation on this element and relies on it surviving a view
+// transition.
+import modules from 'virtual:astrobook/story-modules.mjs'
+
+import { buildTree } from './build-tree.ts'
+import SidebarTreeNode from './sidebar-tree-node.astro'
+
+const tree = buildTree(modules)
+---
+
+<astrobook-sidebar-tree
+  id="astrobook-sidebar-tree"
+  transition:persist="astrobook-sidebar-tree"
+>
+  {tree.map((node) => <SidebarTreeNode node={node} />)}
+</astrobook-sidebar-tree>
+
+<script is:inline>
+  {
+    class AstrobookSidebarTree extends HTMLElement {
+      connectedCallback() {
+        const activeStory = document.documentElement.dataset.activeStory || ''
+        this.querySelectorAll(
+          'a[data-astrobook-story-link][data-story-id]',
+        ).forEach((link) => {
+          const active = link.dataset.storyId === activeStory
+          link.classList.toggle('astrobook-sidebar-story-link-active', active)
+          link.classList.toggle(
+            'astrobook-sidebar-story-link-inactive',
+            !active,
+          )
+        })
+
+        const SCROLL_KEY = 'astrobook-sidebar-scroll'
+        const scrollPosition = parseFloat(
+          sessionStorage.getItem(SCROLL_KEY) || '',
+        )
+        if (scrollPosition) {
+          this.scrollTop = scrollPosition
+        }
+        this.onscrollend = () => {
+          sessionStorage.setItem(SCROLL_KEY, String(this.scrollTop))
+        }
+      }
+    }
+    if (!customElements.get('astrobook-sidebar-tree')) {
+      customElements.define('astrobook-sidebar-tree', AstrobookSidebarTree)
+    }
+  }
+  {
+    class AstrobookSidebarNode extends HTMLElement {
+      connectedCallback() {
+        const details = this.querySelector('details[data-id]')
+        if (!details) return
+        const id = details.dataset.id
+        if (!id) return
+        const key = 'astrobook-sidebar-collapse-' + id
+        const collapsed = localStorage.getItem(key) === '1'
+
+        if (collapsed) {
+          details.removeAttribute('open')
+        }
+
+        details.addEventListener('toggle', () => {
+          if (details.open) {
+            localStorage.removeItem(key)
+          } else {
+            localStorage.setItem(key, '1')
+          }
+        })
+      }
+    }
+    if (!customElements.get('astrobook-sidebar-node')) {
+      customElements.define('astrobook-sidebar-node', AstrobookSidebarNode)
+    }
+  }
+</script>

package/src/ui/components/sidebar.astro

@@ -0,0 +1,29 @@
+---
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/sidebar.astro) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: the UnoCSS utility string is `.lab-sidebar__nav` in ../lab.css. The header row's
+// shape matters: LabHead.astro appends the collapse and cull buttons to `#astrobook-sidebar > nav
+// > div`, so the header stays the FIRST child <div> of this <nav>.
+import SidebarButtonFullscreen from './sidebar-button-fullscreen.astro'
+import SidebarButtonSearch from './sidebar-button-search.astro'
+import SidebarButtonTheme from './sidebar-button-theme.astro'
+import SidebarSearchPanel from './sidebar-search-panel.astro'
+import SidebarTree from './sidebar-tree.astro'
+import SidebarTitle from './sidebar-title.astro'
+
+interface Props {
+  story?: string
+}
+---
+
+<nav class="lab-sidebar__nav">
+  <div class="lab-sidebar__header">
+    <SidebarTitle />
+    <span class="lab-sidebar__spacer"></span>
+    <SidebarButtonFullscreen story={Astro.props.story} />
+    <SidebarButtonSearch />
+    <SidebarButtonTheme />
+  </div>
+  <SidebarSearchPanel />
+  <SidebarTree />
+</nav>

package/src/ui/components/theme-message.ts

@@ -0,0 +1,26 @@
+// Vendored from astrobook 0.13.3 (packages/ui/src/components/theme-message.ts) — see
+// ../../core/LICENSE-astrobook.
+// Divergence: `setTheme` comes from the vendored ./theme.ts rather than `astro-theme-toggle`.
+//
+// The protocol is unchanged and still `astrobook:set-theme`: a page that embeds a story in an
+// iframe (the lab's own thumbnail cards, the viewport configurator) can push its theme into the
+// frame with postMessage.
+import { setTheme } from './theme.ts'
+
+export function initThemeMessage(): void {
+  if (typeof window === 'undefined') return
+
+  window.addEventListener('message', (event) => {
+    try {
+      const { type, theme } = event.data as { type: string; theme: string }
+      if (
+        type === 'astrobook:set-theme' &&
+        (theme === 'dark' || theme === 'light')
+      ) {
+        setTheme(theme)
+      }
+    } catch {
+      // ignore
+    }
+  })
+}

package/src/ui/components/theme-script.astro

@@ -0,0 +1,71 @@
+---
+// The theme, set before paint. Written for this package; it replaces `astro-theme-toggle`.
+//
+// WHY THE DEPENDENCY WENT (2026-09-22). Upstream's UI took the toggle from `astro-theme-toggle`,
+// which ships source and would have kept working. Three reasons it did not survive the vendoring:
+//
+//   1. The whole point of the pass is that the lab depends on nothing but Astro. One npm package
+//      left behind for a sun/moon button is the one that would surprise the next reader.
+//   2. `.dark` on <html> is a DOM contract this package leans on hard — LabHead.astro styles the
+//      live pill, the cull switch and the row error against it. A contract that load-bearing
+//      should be owned here, not read off a third party's minified inline script.
+//   3. What was left after dropping the ripple `startViewTransition` animation — presentation,
+//      and phase 2's business if it wants it back — was about forty lines.
+//
+// Everything observable is unchanged: the same `theme-toggle` localStorage key, the same
+// `.dark` class, `data-theme` and `color-scheme` on <html>, the same re-apply on
+// `astro:after-swap`. An existing reader's stored preference carries over untouched.
+//
+// `is:inline` and no bundling on purpose: this must run before the first paint, or the lab
+// flashes light before turning dark.
+---
+
+<script is:inline>
+  (() => {
+    const STORAGE_KEY = "theme-toggle";
+    let current;
+
+    const systemTheme = () =>
+      window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+    const storedTheme = () => {
+      try {
+        const theme = localStorage.getItem(STORAGE_KEY);
+        return theme === "dark" || theme === "light" ? theme : null;
+      } catch {
+        return null;
+      }
+    };
+
+    const getTheme = () => current || storedTheme() || systemTheme();
+
+    const store = (theme) => {
+      try {
+        if (theme === systemTheme()) localStorage.removeItem(STORAGE_KEY);
+        else localStorage.setItem(STORAGE_KEY, theme);
+      } catch {
+        /* private mode — the theme still applies, it just does not persist */
+      }
+    };
+
+    const paint = (theme) => {
+      const root = document.documentElement;
+      root.classList.toggle("dark", theme === "dark");
+      root.dataset.theme = theme;
+      root.style.colorScheme = theme;
+    };
+
+    const setTheme = (theme) => {
+      current = theme;
+      store(theme);
+      paint(theme);
+    };
+
+    const apply = () => setTheme(getTheme());
+
+    apply();
+    document.addEventListener("astro:after-swap", apply);
+
+    window.labTheme = { setTheme, getTheme };
+  })();
+</script>

package/src/ui/components/theme-toggle.astro

@@ -0,0 +1,63 @@
+---
+// The sun/moon button. Written for this package; replaces `astro-theme-toggle`'s Toggle (see
+// ./theme-script.astro for why the dependency went).
+//
+// Divergence from what it replaces: no ripple `startViewTransition` animation. That is
+// presentation, and this pass is function; phase 2 can put it back.
+interface Props {
+  class?: string
+}
+
+const { class: className } = Astro.props;
+---
+
+<lab-theme-toggle class:list={["lab-theme-toggle", className]} title="Toggle theme">
+  <span class="lab-sr-only">Toggle theme</span>
+  <svg
+    class="lab-theme-icon--light"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
+  </svg>
+  <svg
+    class="lab-theme-icon--dark"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</lab-theme-toggle>
+
+<script>
+  import { toggleTheme } from "./theme.ts";
+
+  class LabThemeToggle extends HTMLElement {
+    connectedCallback() {
+      if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+      if (!this.hasAttribute("role")) this.setAttribute("role", "button");
+      this.addEventListener("click", () => toggleTheme());
+      this.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          toggleTheme();
+        }
+      });
+    }
+  }
+
+  if (!customElements.get("lab-theme-toggle")) {
+    customElements.define("lab-theme-toggle", LabThemeToggle);
+  }
+</script>

package/src/ui/components/theme.ts

@@ -0,0 +1,32 @@
+// The theme API, written for this package — it replaces the `astro-theme-toggle` dependency
+// (see ./theme-script.astro for the decision).
+//
+// The inline script in ./theme-script.astro owns the state and publishes this window API before
+// paint; everything else in the lab goes through these two functions. The key, the `.dark` class,
+// `data-theme` and `color-scheme` are all kept exactly as `astro-theme-toggle@0.8` set them, so a
+// reader who already has a preference stored keeps it, and `.dark` — which LabHead.astro's own
+// styles key off — means what it has always meant.
+export type Theme = 'light' | 'dark'
+
+declare global {
+  interface Window {
+    labTheme?: {
+      setTheme: (theme: Theme) => void
+      getTheme: () => Theme
+    }
+  }
+}
+
+export function getTheme(): Theme {
+  if (typeof window === 'undefined') return 'light'
+  return window.labTheme?.getTheme() ?? 'light'
+}
+
+export function setTheme(theme: Theme): void {
+  if (typeof window === 'undefined') return
+  window.labTheme?.setTheme(theme)
+}
+
+export function toggleTheme(): void {
+  setTheme(getTheme() === 'light' ? 'dark' : 'light')
+}

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+// Vendored from astrobook 0.13.3 (packages/ui/src/index.ts) — see ../core/LICENSE-astrobook.
+// Upstream's UI package has no public API: everything is reached by component path. Kept so the
+// mirrored layout still lines up with a future `diff -r` against an upstream tag.
+export {}