@orbytes/astrolab 0.3.0 → 0.4.0-next.2

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
----
-// 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-toggle.astro

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