@veluai/velu 0.1.0

package/runtime/velu-ui/components/page-header.css

@@ -0,0 +1,520 @@
+/* PageHeader — top-of-page header. All values are tokens; light/dark
+   via [data-theme]. Vertical rhythm is the Stack primitive; columns
+   are CSS grid (so the centre slot stays centred regardless of how
+   wide the brand or actions get). */
+
+.velu-header {
+  /* Sticky to the viewport top so the header stays visible as the
+     page scrolls. z-index is above sidebars/article content but
+     below modals (chatbot z:50, search palette z:60). */
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 30;
+  /* No bottom padding — the tabs row sits flush at the header's
+     bottom edge so the active tab's 2px underline meets the header's
+     bottom border (the selector "touches" the header line). */
+  padding-block-start: var(--s-1);
+  padding-block-end: 0;
+  /* Symmetric inline gutter so the brand (left) and the actions
+     (right) are pulled in to the same level and align with the page
+     content below. */
+  padding-inline: var(--s5);
+  /* --surface-color resolves to #f2f3f4 in light mode (and themes
+     to #323334 in dark) — a subtle hairline separator. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+  background: var(--page-bg);
+  color: var(--text-color);
+  /* Background + shadow animate so the rest-state↔scrolled-state flip
+     is smooth (not a hard cut). backdrop-filter can't transition
+     cleanly in every engine, so we don't try. */
+  transition: background 0.18s ease, box-shadow 0.18s ease;
+  /* Lift shadow recipe, theme-aware. On the near-black dark surface a
+     low-alpha black shadow is invisible, so dark mode uses a much
+     higher alpha + larger blur to read as a lift. */
+  --velu-header-shadow: 0 var(--s-4) var(--s0)
+    color-mix(in srgb, #000 8%, transparent);
+}
+[data-theme='dark'] .velu-header {
+  --velu-header-shadow: 0 var(--s-3) var(--s1)
+    color-mix(in srgb, #000 55%, transparent);
+}
+
+/* Once the user has scrolled even a single pixel, the header becomes
+   a translucent frosted-glass overlay so the article content shows
+   through faintly underneath. color-mix keeps the recipe token-driven:
+   75% --page-bg + transparent → 75% opaque in either theme. */
+.velu-header--scrolled {
+  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
+  backdrop-filter: saturate(140%) blur(12px);
+  -webkit-backdrop-filter: saturate(140%) blur(12px);
+  /* Lift shadow (theme-aware recipe defined on .velu-header) so the
+     header reads as raised above the article scrolling beneath it. */
+  box-shadow: var(--velu-header-shadow);
+}
+
+
+/* ── Top row ────────────────────────────────────────────────────────── */
+/* 3-column grid: brand at the inline-start, center slot in the middle,
+   actions at the inline-end. The center column flexes (1fr) so the
+   brand and actions stay snug to their edges while the search sits
+   between them; justify-self centers the center node within its 1fr
+   cell so it doesn't stretch. */
+.velu-header__top {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--s1);
+}
+.velu-header__col--brand {
+  justify-self: start;
+}
+.velu-header__col--center {
+  justify-self: center;
+  min-inline-size: 0;
+}
+.velu-header__col--actions {
+  justify-self: end;
+}
+
+/* Brand */
+.velu-header__brand-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.velu-header__mark {
+  flex: none;
+  /* 32 × 24 — exact ratio of the brand mark's viewBox. */
+  inline-size: 2em;
+  block-size: 1.5em;
+  color: var(--accent-color);
+}
+.velu-header__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  /* 32px wordmark. */
+  font-size: 2rem;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+
+/* ── Action buttons ─────────────────────────────────────────────────── */
+.velu-header__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  /* No explicit line-height — inherits the page's --lh-body so the
+     button computes to the same height as the Search trigger (which
+     also inherits). The button's text contributes the same vertical
+     space as the search label. */
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease,
+    color 0.12s ease;
+}
+.velu-header__action--outlined {
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-color);
+}
+.velu-header__action--outlined:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.velu-header__action--primary {
+  background: var(--accent-color);
+  border: var(--border-width) solid var(--accent-color);
+  color: #fff;
+}
+.velu-header__action--primary:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+.velu-header__action-icon {
+  display: inline-flex;
+  flex: none;
+  /* Match the Search trigger's icon at rest — muted. Flips to the
+     accent color on hover of an outlined action (the text + border
+     also go accent there, so the icon shifts with them). */
+  color: var(--muted-color);
+  transition: color 0.12s ease;
+}
+.velu-header__action--outlined:hover .velu-header__action-icon {
+  color: var(--accent-color);
+}
+
+/* Inline list of action buttons. Same cluster spacing as before; gets
+   `display: none` at narrow widths so the kebab takes over. */
+.velu-header__actions-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+/* ── Kebab overflow menu (narrow widths only) ──────────────────────── */
+/* Hidden at wide widths — the inline action list is shown instead. */
+.velu-header__kebab {
+  position: relative;
+  display: none;
+}
+.velu-header__kebab-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.velu-header__kebab-toggle:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* Dropdown — anchored to the kebab button's bottom-right. Same fabric
+   as the page (no shadow flourish — matches the TocBar dropdown). */
+.velu-header__kebab-menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-end: 0;
+  margin: 0;
+  padding-block: var(--s-2);
+  padding-inline: 0;
+  list-style: none;
+  min-inline-size: 10rem;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s linear 0.15s;
+  z-index: 31;
+}
+.velu-header__kebab[data-open='true'] .velu-header__kebab-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s;
+}
+.velu-header__kebab-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  inline-size: 100%;
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-size: var(--f-h6);
+  color: var(--text-color);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-header__kebab-item:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+.velu-header__kebab-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--muted-color);
+}
+.velu-header__kebab-item:hover .velu-header__kebab-icon {
+  color: var(--accent-color);
+}
+
+/* ── Breadcrumb (mobile-only replacement for tabs) ─────────────────── */
+/* Single-line trail with character-unit max width — long content
+   truncates with `text-overflow: ellipsis` rather than reflowing the
+   row or pushing the trailing burger. `display: inline-block` (not
+   flex) so the inline children can be ellipsed by text-overflow,
+   which only applies to inline-level content. Hidden by default;
+   the @container block at the bottom flips it on at mobile widths. */
+.velu-header__crumbs {
+  --velu-crumb-max: 24ch;
+  display: none;
+  align-items: center;
+  flex-wrap: nowrap;
+  max-inline-size: var(--velu-crumb-max);
+  min-inline-size: 0;
+  overflow: hidden;
+  /* Native-button reset — the strip is now a <button> so we need to
+     null out the browser's default chrome (background, border,
+     focus padding) and inherit the font from the header. */
+  padding: 0;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  cursor: pointer;
+}
+/* Each segment is a flex child that can shrink independently — the
+   final ("current page") segment is the one that ellipses if the
+   trail outgrows the max-width. */
+.velu-header__crumb {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.velu-header__crumb-link {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+}
+.velu-header__crumb-link:hover {
+  color: var(--accent-color);
+}
+/* Chevron separator — never shrinks (flex: none). Sized in `em` so
+   it scales with the breadcrumb's font-size (h6 currently); 1em
+   matches the text glyph height, keeping the trail visually
+   balanced if --f-h6 ever changes. Gap to neighbouring segments
+   comes from `margin-inline: var(--s-3)` (~8px). */
+.velu-header__crumb-sep {
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+  stroke-width: 1;
+  margin-inline: var(--s-3);
+}
+
+/* ── Mobile burger nav button ──────────────────────────────────────── */
+/* Hidden by default; the @container query at the bottom flips it to
+   `inline-flex` at mobile widths. Defined BEFORE the @container so
+   that block's `display: inline-flex` overrides this `display: none`
+   via source-order cascade (same specificity). Sized 1.5rem (24px)
+   to match the top-row icon glyphs — no inner padding, the button
+   IS the icon. */
+/* Trailing slot at the right end of the tabs row (e.g. language
+   switcher). Pushed right by auto margin; hidden on mobile (above). */
+.velu-header__tabs-trailing {
+  margin-inline-start: auto;
+}
+
+.velu-header__menu {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.velu-header__menu:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* ── Narrow-width swap ─────────────────────────────────────────────── */
+/* Same threshold as docs-layout / toc-bar — at < 1024px the inline
+   action buttons collapse into the kebab menu. The header lives inside
+   `.velu-docs-layout` (which is the `docs` container), so this query
+   reacts to the layout's width, not the viewport. */
+@container docs (max-width: 1024px) {
+  .velu-header__actions-list {
+    display: none;
+  }
+  .velu-header__kebab {
+    display: inline-block;
+  }
+  /* The big desktop inline inset is desktop-only; dial it back at
+     tablet (mobile reduces it further below). */
+  .velu-header {
+    padding-inline: var(--s2);
+  }
+}
+
+/* ── Mobile collapse (< 640px) ─────────────────────────────────────── */
+/* At mobile widths the header has to fit brand + search-icon + ask-ai
+   + kebab on one row at 375px. Hide the labels on action buttons (the
+   icon span keeps its class, so the unnamed text span is the second
+   child) and tighten the column gap. The trailing slot (theme toggle)
+   is hidden — it can be re-surfaced inside the kebab dropdown later. */
+@container docs (max-width: 640px) {
+  /* Language switcher (tabs-row trailing slot) folds into the drawer
+     on mobile. */
+  .velu-header__tabs-trailing {
+    display: none;
+  }
+  /* Drop the visible "Ask AI" / "Book Demo" label; icon survives. */
+  .velu-header__action > span:not(.velu-header__action-icon) {
+    display: none;
+  }
+  /* Compact padding when only the icon remains. */
+  .velu-header__action {
+    padding: var(--s-3);
+  }
+  /* Theme toggle hidden at mobile — too crowded; users can rely on
+     OS-level theme until we surface it inside the kebab. */
+  .velu-header__col--actions .velu-theme-toggle {
+    display: none;
+  }
+  /* 16px gap between the top-right icons (Search ↔ AskAI ↔ Kebab) —
+     applied at three levels because the icons live in two separate
+     Cluster components whose `space` prop sets an inline `gap`, so the
+     CSS needs `!important` to win over the inline style. --s0 is 1rem
+     which evaluates to 16px at the default root font-size. */
+  .velu-header__top {
+    gap: var(--s0) !important;
+  }
+  .velu-header__col--center,
+  .velu-header__col--actions {
+    gap: var(--s0) !important;
+  }
+  /* Reduce the header's outer horizontal padding so brand + actions
+     get more breathing room at 375px. */
+  .velu-header {
+    padding-inline: var(--s-1);
+  }
+  /* Shrink the wordmark slightly — 2rem competes with the icon row
+     for horizontal space; 1.5rem still reads as the brand. */
+  .velu-header__wordmark {
+    font-size: 1.5rem;
+  }
+  /* Flatten the 3-col grid into a flex row so the center cluster
+     (Search + Ask AI) sits flush with the actions cluster (Kebab) on
+     the right side. `margin-inline-start: auto` on center pushes both
+     clusters to the trailing edge, brand stays at the leading edge. */
+  .velu-header__top {
+    display: flex;
+    align-items: center;
+  }
+  .velu-header__col--center {
+    justify-self: auto;
+    margin-inline-start: auto;
+  }
+  .velu-header__col--actions {
+    justify-self: auto;
+  }
+  /* Borderless / transparent icon buttons in the right cluster — at
+     mobile they read as a row of icon chips alongside the kebab, not
+     pill-shaped buttons. */
+  .velu-header__col--center .velu-search__trigger,
+  .velu-header__col--center .velu-header__action--outlined,
+  .velu-header__col--center .velu-header__action--primary {
+    background: transparent;
+    border: 0;
+  }
+  /* Uniform 1.5rem glyphs across all icon buttons in the right cluster
+     (Search, Ask AI, kebab, burger) so they read as a single coherent
+     row. Targets the SVG directly — lucide icons render as <svg>.
+     `stroke-width: 1` thins the lucide default (2) so the icons read
+     as light line glyphs rather than chunky outlines. */
+  .velu-header__col--center .velu-search__trigger-icon svg,
+  .velu-header__col--center .velu-header__action-icon svg,
+  .velu-header__kebab-toggle svg,
+  .velu-header__menu svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    stroke-width: 1;
+  }
+  /* Use the body text color (not muted) for the icon buttons at
+     mobile — without the surrounding label/border to give them
+     weight, the muted-grey tint reads as "disabled". */
+  .velu-header__col--center .velu-search__trigger,
+  .velu-header__col--center .velu-search__trigger-icon,
+  .velu-header__col--center .velu-header__action,
+  .velu-header__col--center .velu-header__action-icon,
+  .velu-header__kebab-toggle,
+  .velu-header__menu {
+    color: var(--text-color);
+  }
+  /* Tabs row swap: hide the individual tabs (they collapse into the
+     mobile menu later), reveal the breadcrumb in their place. The
+     `.velu-header__tabs > .velu-header__tab` selector raises the
+     specificity above the base `.velu-header__tab { display: inline-flex }`
+     rule that appears later in this file, so the cascade resolves in
+     this block's favor without re-ordering the whole file. */
+  .velu-header__tabs > .velu-header__tab {
+    display: none;
+  }
+  .velu-header__crumbs {
+    display: flex;
+  }
+  /* Burger sits at the trailing edge of the tabs row — pushes itself
+     to the right via auto margin so the tabs cluster left as usual.
+     Hidden at wider widths via the default `display: none` below. */
+  .velu-header__menu {
+    display: inline-flex;
+    margin-inline-start: auto;
+  }
+  .velu-header__menu svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+}
+
+
+/* ── Tabs row ───────────────────────────────────────────────────────── */
+/* Tab is a horizontal link row with an optional icon, a label, and an
+   optional external-link chip. Active tab has accent color + an
+   underline rail. */
+.velu-header__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-3);
+  padding-inline: var(--s-3);
+  border-block-end: 2px solid transparent;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+.velu-header__tab:hover {
+  color: var(--accent-color);
+}
+.velu-header__tab--active {
+  color: var(--accent-color);
+  border-block-end-color: var(--accent-color);
+}
+.velu-header__tab-icon,
+.velu-header__tab-external {
+  display: inline-flex;
+  flex: none;
+  color: var(--muted-color);
+}
+/* On hover / active, the icon follows the tab's accent color. */
+.velu-header__tab:hover .velu-header__tab-icon,
+.velu-header__tab--active .velu-header__tab-icon {
+  color: inherit;
+}
+.velu-header__tab-external {
+  font-size: var(--f-h7);
+  opacity: 0.7;
+}

package/runtime/velu-ui/components/page-nav.css

@@ -0,0 +1,50 @@
+/* PageNav — previous/next page cards. The two-column / stacked layout
+   is the <Switcher> primitive; this file owns only the card chrome.
+   All values are tokens; light/dark via [data-theme]. */
+
+.velu-pagenav__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+  min-inline-size: 0;
+  padding: var(--s0);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  text-decoration: none;
+  transition: border-color 0.12s ease;
+}
+.velu-pagenav__card:hover {
+  border-color: var(--accent-color);
+}
+
+/* Previous hugs the inline start, Next the inline end. */
+.velu-pagenav__card--prev {
+  align-items: flex-start;
+  text-align: start;
+}
+.velu-pagenav__card--next {
+  align-items: flex-end;
+  text-align: end;
+}
+
+.velu-pagenav__title {
+  font-size: var(--f-h5);
+  line-height: var(--lh-h5);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+
+/* "‹ Previous" / "Next ›" — muted, turns accent on card hover. */
+.velu-pagenav__dir {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+  transition: color 0.12s ease;
+}
+.velu-pagenav__dir svg {
+  flex: none;
+}
+.velu-pagenav__card:hover .velu-pagenav__dir {
+  color: var(--accent-color);
+}

package/runtime/velu-ui/components/powered-by.css

@@ -0,0 +1,66 @@
+/* PoweredBy — "Powered by Velu" badge, right-aligned. Sits above the
+   site footer. All values are tokens; light/dark via [data-theme]. */
+
+.velu-powered-by {
+  display: flex;
+  justify-content: flex-end;
+  /* 32px gap above (to the previous element — usually the AskBar) and
+     32px gap below (to the site footer). Margins, not padding, so the
+     gap is OUTSIDE the badge — i.e. it's the actual whitespace the
+     reader sees rather than a tap-target buffer. */
+  margin-block-start: 2rem;
+  margin-block-end: 2rem;
+  padding-block: 0;
+  padding-inline: var(--s3);
+}
+
+.velu-powered-by__link {
+  display: inline-flex;
+  align-items: center;
+  /* Gap here is only between the "Powered by" label and the brand
+     sub-cluster — the mark↔wordmark spacing is set tighter inside
+     .velu-powered-by__brand. */
+  gap: var(--s-3);
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  transition: opacity 0.12s ease;
+}
+.velu-powered-by__link:hover {
+  opacity: 0.78;
+}
+
+.velu-powered-by__label {
+  color: var(--muted-color);
+  font-weight: var(--weight-normal);
+}
+
+/* Mark + wordmark form one visual unit ("Velu" the brand) — tighter
+   gap than the label↔brand spacing above. */
+.velu-powered-by__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-5);
+}
+
+/* Mark: same 32×24 ratio as the brand mark, sized one modular step up
+   from body text so it reads at the same scale as the wordmark beside
+   it. Muted (not accent) here so the badge sits quietly as an
+   attribution rather than a brand statement. */
+.velu-powered-by__mark {
+  flex: none;
+  inline-size: calc(var(--icon-size-lg) * (32 / 24));
+  block-size: var(--icon-size-lg);
+  color: var(--muted-color);
+}
+
+.velu-powered-by__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  font-size: var(--f-h4);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  /* Muted to match the mark — the whole badge is a single tonal
+     attribution. */
+  color: var(--muted-color);
+}