@chassis-ui/docs 0.3.3 → 0.3.5

package/README.md

@@ -2,7 +2,7 @@
 
 > Shared Astro layouts, components, and utilities for Chassis documentation sites.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.3](https://img.shields.io/badge/Version-0.3.3-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.3.5](https://img.shields.io/badge/Version-0.3.5-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 
 ## Overview
 

package/index.ts

@@ -9,4 +9,3 @@ export * from './src/libs/shortcodes'
 export * from './src/libs/site'
 export * from './src/libs/toc'
 export * from './src/libs/utils'
-export * from './src/libs/vite'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@astrojs/markdown-remark": "^7.0.0",
-    "@chassis-ui/css": ">=0.3.1",
+    "@chassis-ui/css": ">=0.3.2",
     "@pagefind/component-ui": "^1.0.0",
     "@shikijs/transformers": "^4.3.1",
     "astro": "^7.0.0",

package/src/js/search.js

@@ -22,7 +22,74 @@ const LOADING_SKELETON_DELAY_MS = 200
 const RECENT_STORAGE_KEY = 'cxd:search:recent'
 const RECENT_LIMIT = 5
 
-const instance = getInstanceManager().getInstance('default')
+// ─── Multi-site search ────────────────────────────────────────────────────────
+// Every Chassis project deploys its own Pagefind index under its own path
+// prefix (e.g. `/tokens/pagefind/`), matching the prefix chassis-ui.com's
+// Vercel rewrites proxy that project under (see `ref/VERCEL_CONFIG.md`).
+// This lets one shared instance merge every project's index into a single,
+// site-filterable search — no cross-origin requests required, since
+// `chassis-ui.com/<slug>/...` and `<slug>.vercel.app/<slug>/...` both resolve
+// the same root-relative bundle path.
+
+/** All Chassis projects with their own Pagefind index, in nav order. `website` is the hub (root-level index, no path prefix). */
+const CHASSIS_SITES = [
+  { slug: 'website', label: 'Website' },
+  { slug: 'tokens', label: 'Tokens' },
+  { slug: 'css', label: 'CSS' },
+  { slug: 'assets', label: 'Assets' },
+  { slug: 'icons', label: 'Icons' },
+  { slug: 'figma', label: 'Figma' }
+]
+
+// Hosts where every project's index is reachable at its root-relative bundle
+// path via Vercel's proxy rewrites. Everywhere else (local dev, direct
+// `*.vercel.app` preview deployments) only this site's own pages exist, so
+// merging would 404. Pagefind has no built-in resilience for a failed
+// `mergeIndex` call — it throws and takes the whole search down with it — so
+// merging is only attempted on these hosts.
+const CANONICAL_HOSTS = new Set(['chassis-ui.com', 'staging.chassis-ui.com'])
+
+const getBundlePath = (slug) => (slug === 'website' ? '/pagefind/' : `/${slug}/pagefind/`)
+
+const getCurrentSite = () => {
+  const [, firstSegment] = typeof location === 'undefined' ? [] : location.pathname.split('/')
+  return CHASSIS_SITES.find((site) => site.slug === firstSegment) ?? CHASSIS_SITES[0]
+}
+
+const isCanonicalHost = () =>
+  typeof location !== 'undefined' && CANONICAL_HOSTS.has(location.hostname)
+
+const currentSite = getCurrentSite()
+
+// Pagefind derives `baseUrl` from `bundlePath` by stripping the trailing
+// `pagefind` segment (e.g. `/tokens/pagefind/` -> `/tokens/`), then prepends
+// that to every result's raw URL. Those raw URLs are already site-root-relative
+// (e.g. `tokens/docs/...`, because that's where the page actually lives inside
+// `_site`), so the auto-derived baseUrl would double up the prefix into
+// `/tokens/tokens/docs/...`. Force it back to `/` for every index.
+const BASE_URL = '/'
+
+const mergeIndex = isCanonicalHost()
+  ? CHASSIS_SITES.filter((site) => site.slug !== currentSite.slug).map((site) => ({
+      bundlePath: getBundlePath(site.slug),
+      baseUrl: BASE_URL,
+      mergeFilter: { site: site.slug }
+    }))
+  : []
+
+const instance = getInstanceManager().getInstance('default', {
+  bundlePath: getBundlePath(currentSite.slug),
+  baseUrl: BASE_URL,
+  mergeFilter: { site: currentSite.slug },
+  mergeIndex
+})
+
+// Default filter scope: the website (hub) defaults to searching everywhere;
+// every project site defaults to its own results, but can still be widened
+// or switched via the `cxd-search-filter` control.
+if (currentSite.slug !== 'website') {
+  instance.searchFilters = { site: currentSite.slug }
+}
 
 // ─── Recent visits ────────────────────────────────────────────────────────────
 // Opt-out via Do Not Track; silently no-op when storage is unavailable.
@@ -368,6 +435,44 @@ class CxdSearchResults extends HTMLElement {
   }
 }
 
+// ─── Site filter ──────────────────────────────────────────────────────────────
+// Dropdown letting the visitor scope results to a single project, or back out
+// to "Everywhere". Only rendered when other sites were actually merged in
+// (see `mergeIndex` above) — with a single, un-merged index there's nothing
+// meaningful to filter.
+
+const FILTER_OPTIONS = [{ slug: '', label: 'Everywhere' }, ...CHASSIS_SITES]
+
+class CxdSearchFilter extends HTMLElement {
+  connectedCallback() {
+    this.select = this.querySelector('select')
+    if (!this.select) return
+
+    // Always rendered — even outside merging (local dev, direct preview
+    // deployments) the current site's own results are tagged with `site`, so
+    // "Everywhere" and the current site both work; switching to a *different*
+    // site just yields no results until it's actually merged in.
+    this.hidden = false
+
+    this.select.innerHTML = FILTER_OPTIONS.map(
+      (option) => `<option value="${option.slug}">${escapeHtml(option.label)}</option>`
+    ).join('')
+    this.select.value = currentSite.slug === 'website' ? '' : currentSite.slug
+
+    this._onChange = this._onChange.bind(this)
+    this.select.addEventListener('change', this._onChange)
+  }
+
+  disconnectedCallback() {
+    this.select?.removeEventListener('change', this._onChange)
+  }
+
+  _onChange() {
+    const value = this.select.value
+    instance.triggerSearchWithFilters(instance.searchTerm, value ? { site: value } : {})
+  }
+}
+
 // ─── Registration ─────────────────────────────────────────────────────────────
 
 const defineSearchCustomElements = () => {
@@ -377,6 +482,9 @@ const defineSearchCustomElements = () => {
   if (!customElements.get('cxd-search-results')) {
     customElements.define('cxd-search-results', CxdSearchResults)
   }
+  if (!customElements.get('cxd-search-filter')) {
+    customElements.define('cxd-search-filter', CxdSearchFilter)
+  }
 }
 
 // ─── Trigger shortcut hints ───────────────────────────────────────────────────

package/src/layouts/footer/Scripts.astro

@@ -6,7 +6,6 @@
  */
 
 import type { Layout } from '../../libs/layout'
-import type { HTMLAttributes } from 'astro/types'
 
 interface Props {
   /** Current layout context */
@@ -14,21 +13,11 @@ interface Props {
 }
 
 const { layout } = Astro.props
-
-function getChassisJsProps() {
-  // __CHASSIS_JS_SRC__ is an optional dev-mode override injected via vite.define by the
-  // host project's integration. When set, it replaces the default public-dir bundle path.
-  const src =
-    (import.meta.env.DEV && (globalThis as any).__CHASSIS_JS_SRC__) ||
-    (import.meta.env.PROD ? '/static/js/chassis.bundle.min.js' : '/static/js/chassis.bundle.js')
-
-  const cxJsLinkProps: HTMLAttributes<'script'> = { type: 'module', src }
-
-  return cxJsLinkProps
-}
 ---
 
 <script src="../../js/search.js"></script>
-<script is:inline {...getChassisJsProps()}></script>
+<script>
+  import '@chassis-ui/css'
+</script>
 {layout === 'docs' && <script src="../../js/sidebar.js" />}
 <slot name="scripts" />

package/src/layouts/header/SearchDialog.astro

@@ -44,6 +44,10 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
         />
       </div>
     </cxd-search-input>
+    <cxd-search-filter class="cxd-search-filter" hidden>
+      <label class="visually-hidden" for={`${id}-filter`}>Search in</label>
+      <select id={`${id}-filter`} class="form-input cxd-search-filter-select"></select>
+    </cxd-search-filter>
     <button
       type="button"
       class="close-button"

package/src/scss/_search.scss

@@ -1,418 +1,434 @@
 @use "@chassis-ui/css/scss/mixins" as *;
 @use "@chassis-ui/css/scss/placeholders" as *;
 
-//
-// Pagefind search UI
-//
-
-.cxd-search {
-  position: relative;
-
-  @include media-breakpoint-up(large) {
-    position: absolute;
-    top: 20%;
-    right: 13rem;
-    width: 200px;
-
-    [dir="rtl"] & {
-      right: auto;
-      left: 13rem;
+@layer custom {
+  //
+  // Pagefind search UI
+  //
+
+  .cxd-search {
+    position: relative;
+
+    @include media-breakpoint-up(large) {
+      position: absolute;
+      top: 20%;
+      right: 13rem;
+      width: 200px;
+
+      [dir="rtl"] & {
+        right: auto;
+        left: 13rem;
+      }
     }
+
   }
 
-}
 
+  // Trigger button
+  //
+  // Mobile (< md): icon-only, no chrome.
+  // md+:           expands to a faux input with label and ⌘K shortcut hint.
 
-// Trigger button
-//
-// Mobile (< md): icon-only, no chrome.
-// md+:           expands to a faux input with label and ⌘K shortcut hint.
-
-.cxd-search-trigger {
-  // @extend %form-input;
-  --cx-padding-x: var(--cx-space-xsmall);
-  --cx-padding-y: .375rem;
-  --cx-icon-color: var(--cx-fg-color);
-  display: inline-flex;
-  gap: .5rem;
-  align-items: center;
-  margin-block: .125rem;
-  // padding-inline-end: .5rem;
-  // padding: .25rem .5rem;
-  @include exclude-strokes(form-input);
-  @include font-size(var(--cx-font-size-small));
-  color: var(--cx-fg-subtle);
-  text-align: start;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  @include border-radius(var(--cx-border-radius-medium));
-  @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out);
-
-  &:focus-visible {
-    @include focus-ring(true);
-  }
+  .cxd-search-trigger {
+    // @extend %form-input;
+    --cx-padding-x: var(--cx-space-xsmall);
+    --cx-padding-y: .375rem;
+    --cx-icon-color: var(--cx-fg-color);
+    display: inline-flex;
+    gap: .5rem;
+    align-items: center;
+    margin-block: .125rem;
+    // padding-inline-end: .5rem;
+    // padding: .25rem .5rem;
+    @include exclude-strokes(form-input);
+    @include font-size(var(--cx-font-size-small));
+    color: var(--cx-fg-subtle);
+    text-align: start;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(var(--cx-border-radius-medium));
+    @include transition(color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out);
 
-  @include media-breakpoint-up(large) {
-    --cx-border-color: var(--cx-border-subtle);
-    --cx-icon-size: var(--cx-icon-small);
-    --cx-icon-color: var(--cx-fg-subtle);
-    width: 100%;
-    background-color: var(--cx-bg-main);
-    @include border();
+    &:focus-visible {
+      @include focus-ring(true);
+    }
 
-    &:hover {
-      // --fg-color: var(--cx-fg-main);
-      --cx-icon-color: var(--cx-fg-color);
-      --cx-border-color: var(--cx-border-main);
+    @include media-breakpoint-up(large) {
+      --cx-border-color: var(--cx-border-subtle);
+      --cx-icon-size: var(--cx-icon-small);
+      --cx-icon-color: var(--cx-fg-subtle);
+      width: 100%;
+      background-color: var(--cx-bg-main);
+      @include border();
+
+      &:hover {
+        // --fg-color: var(--cx-fg-main);
+        --cx-icon-color: var(--cx-fg-color);
+        --cx-border-color: var(--cx-border-main);
+      }
     }
   }
-}
 
-.cxd-search-trigger-icon {
-  flex-shrink: 0;
-  color: var(--cx-fg-subtle);
-}
+  .cxd-search-trigger-icon {
+    flex-shrink: 0;
+    color: var(--cx-fg-subtle);
+  }
 
-.cxd-search-trigger-label,
-.cxd-search-trigger-shortcut {
-  display: none;
+  .cxd-search-trigger-label,
+  .cxd-search-trigger-shortcut {
+    display: none;
 
-  @include media-breakpoint-up(large) {
-    display: inline-flex;
+    @include media-breakpoint-up(large) {
+      display: inline-flex;
+    }
   }
-}
 
-.cxd-search-trigger-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .cxd-search-trigger-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.cxd-search-trigger-shortcut {
-  flex-shrink: 0;
-  gap: .125rem;
-}
+  .cxd-search-trigger-shortcut {
+    flex-shrink: 0;
+    gap: .125rem;
+  }
 
-.cxd-search-trigger-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  padding: .125rem .375rem;
-  font-family: var(--cx-font-family-code);
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
-  color: var(--cx-fg-subtle);
-  background-color: var(--cx-bg-evident);
-  // border: var(--cx-border-width) solid var(--cx-border-color);
-  @include border-radius(var(--cx-border-radius-small));
-}
+  .cxd-search-trigger-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    padding: .125rem .375rem;
+    font-family: var(--cx-font-family-code);
+    @include font-size(var(--cx-font-size-small));
+    @include line-height(var(--cx-line-height-small));
+    color: var(--cx-fg-subtle);
+    background-color: var(--cx-bg-evident);
+    // border: var(--cx-border-width) solid var(--cx-border-color);
+    @include border-radius(var(--cx-border-radius-small));
+  }
 
-// Search dialog shell
-//
-// Top-aligned overlay using the existing `.dialog` surface.
-// Sizing and position make it feel like a command palette.
+  // Search dialog shell
+  //
+  // Top-aligned overlay using the existing `.dialog` surface.
+  // Sizing and position make it feel like a command palette.
+
+  .cxd-search-dialog {
+    --cx-dialog-margin: 1.5rem;
+    --cx-dialog-padding: .75rem;
+    --cx-dialog-header-padding: .75rem;
+    --cx-dialog-footer-padding: .5rem .75rem;
+    --cx-dialog-border-radius: var(--cx-border-radius-large);
+
+    align-self: flex-start;
+    width: 640px;
+    max-height: min(80dvh, 720px);
+    margin-block-start: 3rem;
+    overflow: hidden;
+    background-color: var(--cx-bg-even);
+
+    @include media-breakpoint-down(small) {
+      max-height: calc(100dvh - 4rem);
+    }
+  }
 
-.cxd-search-dialog {
-  --cx-dialog-margin: 1.5rem;
-  --cx-dialog-padding: .75rem;
-  --cx-dialog-header-padding: .75rem;
-  --cx-dialog-footer-padding: .5rem .75rem;
-  --cx-dialog-border-radius: var(--cx-border-radius-large);
+  // Header / search form
 
-  align-self: flex-start;
-  width: 640px;
-  max-height: min(80dvh, 720px);
-  margin-block-start: 3rem;
-  overflow: hidden;
-  background-color: var(--cx-bg-even);
+  .cxd-search-form {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: .75rem;
+    align-items: center;
+    padding: var(--cx-space-medium);
+    border-bottom: 0;
+  }
 
-  @include media-breakpoint-down(small) {
-    max-height: calc(100dvh - 4rem);
+  cxd-search-input {
+    flex-grow: 1;
   }
-}
 
-// Header / search form
+  // Site filter dropdown — only shown when other project indexes were merged
+  // in (see `search.js`), letting the visitor scope results to one project or
+  // back out to "Everywhere".
+  .cxd-search-filter {
+    flex-shrink: 0;
+  }
 
-.cxd-search-form {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: .75rem;
-  align-items: center;
-  padding: var(--cx-space-medium);
-  border-bottom: 0;
-}
+  // .cxd-search-filter-select {
+  //   --cx-padding-y: .375rem;
+  //   --cx-padding-x: .5rem;
+  //   width: auto;
+  //   @include font-size(var(--cx-font-size-small));
+  // }
+  // .cxd-search-input {
+  //   flex: 1;
+  //   width: 100%;
+  //   min-width: 0;
+  //   background-color: transparent;
+  //   border-color: transparent;
+  //   box-shadow: none;
+
+  //   &:focus {
+  //     background-color: transparent;
+  //     border-color: transparent;
+  //     box-shadow: none;
+  //   }
+  // }
 
-cxd-search-input {
-  width: 100%;
-}
-// .cxd-search-input {
-//   flex: 1;
-//   width: 100%;
-//   min-width: 0;
-//   background-color: transparent;
-//   border-color: transparent;
-//   box-shadow: none;
-
-//   &:focus {
-//     background-color: transparent;
-//     border-color: transparent;
-//     box-shadow: none;
-//   }
-// }
-
-// .cxd-search-close {
-//   flex-shrink: 0;
-//   margin-inline-start: 0;
-// }
-
-// Body / results
-
-.cxd-search-body {
-  padding: 0 var(--cx-space-medium) var(--cx-space-medium);
-}
+  // .cxd-search-close {
+  //   flex-shrink: 0;
+  //   margin-inline-start: 0;
+  // }
 
-.cxd-search-results {
-  display: block;
-  min-height: 6rem;
-  border: 0;
-}
+  // Body / results
 
-.cxd-search-results-list {
-  // --cx-list-border-width: 0;
-  // --cx-list-border-radius: 0;
+  .cxd-search-body {
+    padding: 0 var(--cx-space-medium) var(--cx-space-medium);
+  }
 
-  gap: var(--cx-space-small);
-  padding-block-start: var(--cx-space-xsmall);
-  list-style: none;
-  .list-item {
-    padding: 0;
+  .cxd-search-results {
+    display: block;
+    min-height: 6rem;
     border: 0;
   }
-}
 
-.cxd-search-result {
-  display: flex;
-  flex-direction: column;
-  // gap: var(--cx-space-xsmall);
-  gap: 0;
-  padding: 0;
-}
+  .cxd-search-results-list {
+    // --cx-list-border-width: 0;
+    // --cx-list-border-radius: 0;
 
-// Default-active state: while focus is in the search input, the first result
-// is highlighted as the Enter target. Once the user arrows into the list,
-// :focus-within takes over.
-.cxd-search-results:not(:focus-within) .cxd-search-result:first-child > .cxd-search-item {
-  @include focus-ring(true);
-  --cx-focus-ring-offset: -2px;
-  background-color: var(--cx-bg-main);
-}
-
-// Single row template: top-level results, sub-results, and recent visits.
-.cxd-search-item {
-  --cx-icon-size: var(--cx-icon-medium);
-  --cx-icon-color: var(--cx-fg-subtle);
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: .5rem;
-  align-items: center;
-  padding: var(--cx-space-xsmall);
-  text-decoration: none;
-  background-color: var(--cx-bg-main);
-  @include border();
-  @include border-radius(var(--cx-border-radius-medium));
-
-  mark {
-    background: none;
+    gap: var(--cx-space-small);
+    padding-block-start: var(--cx-space-xsmall);
+    list-style: none;
+    .list-item {
+      padding: 0;
+      border: 0;
+    }
   }
 
-  &:has(+ .cxd-search-subresults) {
-    border-block-end-width: 0;
-    @include border-bottom-radius(0);
+  .cxd-search-result {
+    display: flex;
+    flex-direction: column;
+    // gap: var(--cx-space-xsmall);
+    gap: 0;
+    padding: 0;
   }
 
-  &:hover {
+  // Default-active state: while focus is in the search input, the first result
+  // is highlighted as the Enter target. Once the user arrows into the list,
+  // :focus-within takes over.
+  .cxd-search-results:not(:focus-within) .cxd-search-result:first-child > .cxd-search-item {
+    @include focus-ring(true);
+    --cx-focus-ring-offset: -2px;
     background-color: var(--cx-bg-main);
   }
 
-  &:focus-visible {
-    --cx-focus-ring-offset: -2px;
-    z-index: 1;
-    @include focus-ring(true);
-  }
+  // Single row template: top-level results, sub-results, and recent visits.
+  .cxd-search-item {
+    --cx-icon-size: var(--cx-icon-medium);
+    --cx-icon-color: var(--cx-fg-subtle);
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: .5rem;
+    align-items: center;
+    padding: var(--cx-space-xsmall);
+    text-decoration: none;
+    background-color: var(--cx-bg-main);
+    @include border();
+    @include border-radius(var(--cx-border-radius-medium));
 
-  // &:not(.cxd-search-item-sub) {
-  //   border: var(--cx-border-width) solid var(--cx-border-color);
-  // }
-}
+    mark {
+      background: none;
+    }
 
-.cxd-search-item-icon {
-  // margin-block-start: .15rem;
-  color: var(--cx-fg-subtle);
-}
+    &:has(+ .cxd-search-subresults) {
+      border-block-end-width: 0;
+      @include border-bottom-radius(0);
+    }
 
-.cxd-search-item-body {
-  grid-column: 2;
-  min-width: 0;
-}
+    &:hover {
+      background-color: var(--cx-bg-main);
+    }
 
-.cxd-search-item-title {
-  font-weight: var(--cx-font-weight-strong);
-  color: var(--cx-fg-main);
-}
+    &:focus-visible {
+      --cx-focus-ring-offset: -2px;
+      z-index: 1;
+      @include focus-ring(true);
+    }
 
-.cxd-search-item-excerpt {
-  overflow: hidden;
-  color: var(--cx-fg-subtle);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
-}
+    // &:not(.cxd-search-item-sub) {
+    //   border: var(--cx-border-width) solid var(--cx-border-color);
+    // }
+  }
+
+  .cxd-search-item-icon {
+    // margin-block-start: .15rem;
+    color: var(--cx-fg-subtle);
+  }
 
-.cxd-search-subitem {
-  --cx-icon-size: var(--cx-icon-small);
-  --cx-icon-color: var(--cx-fg-subtle);
-  align-items: center;
-  padding-inline-start: var(--cx-space-4xlarge);
-  // padding-inline-start: var(--cx-space-medium);
-
-  &::before {
-    position: absolute;
-    inset-block: 15%;
-    inset-inline: 0;
-    width: var(--cx-border-width);
-    height: 70%;
-    margin-inline-start: 1.25rem;
-    content: " ";
-    background-color: var(--cx-fg-subtle);
-  }
-  &::after {
-    position: absolute;
-    inset: 0;
-    width: .75rem;
-    height: var(--cx-border-width);
-    margin-block: auto;
-    margin-inline-start: 1.25rem;
-    content: " ";
-    background-color: var(--cx-fg-subtle);
+  .cxd-search-item-body {
+    grid-column: 2;
+    min-width: 0;
   }
+
   .cxd-search-item-title {
+    font-weight: var(--cx-font-weight-strong);
+    color: var(--cx-fg-main);
+  }
+
+  .cxd-search-item-excerpt {
+    overflow: hidden;
+    color: var(--cx-fg-subtle);
+    text-overflow: ellipsis;
+    white-space: nowrap;
     @include font-size(var(--cx-font-size-small));
     @include line-height(var(--cx-line-height-small));
   }
 
-}
-
-.cxd-search-subresults {
-  display: flex;
-  flex-direction: column;
-  // gap: var(--cx-space-xsmall);
-  gap: 0;
-  // padding-inline-start: var(--cx-space-large);
   .cxd-search-subitem {
-    border-block-end-width: 0;
-    @include border-radius(0);
-    &:is(:last-child > .cxd-search-subitem) {
-      border-block-end-width: var(--cx-border-width);
-      @include border-bottom-radius(var(--cx-border-radius));
-      &::before {
-        height: 35%;
-      }
+    --cx-icon-size: var(--cx-icon-small);
+    --cx-icon-color: var(--cx-fg-subtle);
+    align-items: center;
+    padding-inline-start: var(--cx-space-4xlarge);
+    // padding-inline-start: var(--cx-space-medium);
+
+    &::before {
+      position: absolute;
+      inset-block: 15%;
+      inset-inline: 0;
+      width: var(--cx-border-width);
+      height: 70%;
+      margin-inline-start: 1.25rem;
+      content: " ";
+      background-color: var(--cx-fg-subtle);
+    }
+    &::after {
+      position: absolute;
+      inset: 0;
+      width: .75rem;
+      height: var(--cx-border-width);
+      margin-block: auto;
+      margin-inline-start: 1.25rem;
+      content: " ";
+      background-color: var(--cx-fg-subtle);
+    }
+    .cxd-search-item-title {
+      @include font-size(var(--cx-font-size-small));
+      @include line-height(var(--cx-line-height-small));
     }
 
   }
-}
 
-// Recently visited
+  .cxd-search-subresults {
+    display: flex;
+    flex-direction: column;
+    // gap: var(--cx-space-xsmall);
+    gap: 0;
+    // padding-inline-start: var(--cx-space-large);
+    .cxd-search-subitem {
+      border-block-end-width: 0;
+      @include border-radius(0);
+      &:is(:last-child > .cxd-search-subitem) {
+        border-block-end-width: var(--cx-border-width);
+        @include border-bottom-radius(var(--cx-border-radius));
+        &::before {
+          height: 35%;
+        }
+      }
 
-.cxd-search-recent-header {
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  justify-content: space-between;
-  padding-block: .5rem;
-}
+    }
+  }
 
-.cxd-search-recent-label {
-  @include font-size(var(--cx-font-size-xsmall));
-  font-weight: 600;
-  color: var(--cx-fg-subtle);
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
+  // Recently visited
 
-.cxd-search-recent-clear {
-  padding: .125rem .375rem;
-  @include font-size(var(--cx-font-size-xsmall));
-  color: var(--cx-fg-subtle);
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  @include border-radius(var(--cx-border-radius-medium));
-  @include transition(color .15s ease-in-out, background-color .15s ease-in-out);
-
-  &:hover {
-    color: var(--cx-fg-main);
-    background-color: var(--cx-bg-main);
+  .cxd-search-recent-header {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+    justify-content: space-between;
+    padding-block: .5rem;
   }
 
-  &:focus-visible {
-    @include focus-ring(true);
+  .cxd-search-recent-label {
+    @include font-size(var(--cx-font-size-xsmall));
+    font-weight: 600;
+    color: var(--cx-fg-subtle);
+    text-transform: uppercase;
+    letter-spacing: .04em;
   }
-}
 
-// Empty / loading / error states
+  .cxd-search-recent-clear {
+    padding: .125rem .375rem;
+    @include font-size(var(--cx-font-size-xsmall));
+    color: var(--cx-fg-subtle);
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(var(--cx-border-radius-medium));
+    @include transition(color .15s ease-in-out, background-color .15s ease-in-out);
 
-.cxd-search-empty,
-.cxd-search-error {
-  padding: 2rem 1rem;
-  @include font-size(var(--cx-font-size-small));
-  color: var(--cx-fg-subtle);
-  text-align: center;
-}
+    &:hover {
+      color: var(--cx-fg-main);
+      background-color: var(--cx-bg-main);
+    }
 
-.cxd-search-error {
-  color: var(--cx-danger-fg-main);
-}
+    &:focus-visible {
+      @include focus-ring(true);
+    }
+  }
 
-.cxd-search-loading {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cx-space-small);
-}
+  // Empty / loading / error states
 
+  .cxd-search-empty,
+  .cxd-search-error {
+    padding: 2rem 1rem;
+    @include font-size(var(--cx-font-size-small));
+    color: var(--cx-fg-subtle);
+    text-align: center;
+  }
 
-.cxd-search-footer {
-  padding-block: var(--cx-space-small);
-  background-color: var(--cx-bg-evident);
-}
+  .cxd-search-error {
+    color: var(--cx-danger-fg-main);
+  }
 
-.cxd-search-shortcuts-list > .list-item {
-  display: inline-flex;
-  gap: .25rem;
-  align-items: center;
-  padding: 0 .5rem;
-  color: var(--cx-fg-subtle);
-  background: none;
-  border: 0;
-}
+  .cxd-search-loading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cx-space-small);
+  }
 
-.cxd-search-shortcut-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
-  padding: 0 .25rem;
-  background-color: var(--cx-bg-main);
-}
 
-.cxd-search-shortcut-label {
-  padding-inline-start: .25rem;
-  @include font-size(var(--cx-font-size-small));
-  @include line-height(var(--cx-line-height-small));
+  .cxd-search-footer {
+    padding-block: var(--cx-space-small);
+    background-color: var(--cx-bg-evident);
+  }
+
+  .cxd-search-shortcuts-list > .list-item {
+    display: inline-flex;
+    gap: .25rem;
+    align-items: center;
+    padding: 0 .5rem;
+    color: var(--cx-fg-subtle);
+    background: none;
+    border: 0;
+  }
+
+  .cxd-search-shortcut-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    min-height: 1.25rem;
+    padding: 0 .25rem;
+    background-color: var(--cx-bg-main);
+  }
+
+  .cxd-search-shortcut-label {
+    padding-inline-start: .25rem;
+    @include font-size(var(--cx-font-size-small));
+    @include line-height(var(--cx-line-height-small));
+  }
 }

package/src/libs/vite.ts

@@ -1,45 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import type { Plugin } from 'vite'
-
-// Virtual module URL served by Vite's module graph at /@id/__x00__chassis-bundle.
-// Used to give the browser a single shared ESM instance of the chassis bundle in dev.
-const CHASSIS_BUNDLE_VIRTUAL_URL = '/@id/__x00__chassis-bundle'
-
-/**
- * Vite plugin that resolves `@chassis-ui/css` to a virtual module in dev so
- * both the `<script>` tag and any `import()` share one ESM instance.
- *
- * In build, `rollupOptions.external` + `paths` in the consuming `astro.config.ts`
- * handles deduplication instead.
- *
- * @param getChassisCSSFsPath - Returns the absolute path to the compiled Chassis CSS dist folder.
- */
-export function chassisBundlePlugin(getChassisCSSFsPath: () => string) {
-  return {
-    plugin: {
-      name: 'chassis-ui-css',
-      enforce: 'pre',
-      apply: 'serve',
-      resolveId(id: string) {
-        if (id === '@chassis-ui/css') return '\0@chassis-ui/css'
-        if (id === '/@chassis-bundle') return '\0chassis-bundle'
-      },
-      load(id: string) {
-        if (id === '\0@chassis-ui/css') return `export * from "/@chassis-bundle"`
-        if (id === '\0chassis-bundle') {
-          const bundlePath = path.join(getChassisCSSFsPath(), 'js/chassis.bundle.js')
-          const content = fs.readFileSync(bundlePath, 'utf-8')
-          // Strip sourceMappingURL — the map isn't resolvable from a virtual module URL.
-          return content.replace(/^\/\/# sourceMappingURL=.+$/m, '')
-        }
-      }
-    } satisfies Plugin,
-    // __CHASSIS_JS_SRC__ is a @chassis-ui/docs extension point: sets the URL for the
-    // chassis JS <script> tag in dev mode. Points at the virtual module so the browser
-    // gets one shared ESM instance instead of a second copy from public/.
-    define: {
-      'globalThis.__CHASSIS_JS_SRC__': JSON.stringify(CHASSIS_BUNDLE_VIRTUAL_URL)
-    }
-  }
-}