@veluai/velu 0.1.0

package/runtime/velu-ui/components/field.css

@@ -0,0 +1,82 @@
+/* Field — parameter docs row. All values are tokens; light/dark via
+   [data-theme]. The chip / pill recipes are kept simple so they read
+   identically against both `--surface-color` and `--page-bg`. */
+
+.velu-field {
+  display: block;
+}
+
+/* Header row of chips + name + type + required + default + post.
+   flex-wrap so a long set of badges falls cleanly onto a second line
+   on narrow widths. Items align on text baseline so the bold `name`
+   never visually shifts when chips have different padding. */
+/* The chip row layout lives in <Cluster> now (primitives/Cluster.jsx) —
+   no .velu-field__head selector needed. */
+
+/* Generic chip — used for pre / type / post. Hugs the line-height
+   vertically (zero block padding) with 8px / --s-3 horizontal padding;
+   reads as a tiny code-like badge. */
+.velu-field__chip {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: var(--surface-color);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--muted-color);
+}
+
+/* The parameter name — accent, medium weight, slightly larger than the
+   chips so it reads as the row's primary token. */
+.velu-field__name {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h5);
+  line-height: var(--lh-h5);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+}
+
+/* Required pill — accent-tinted background + accent text. Same hugging
+   line-height as the generic chip. */
+.velu-field__required {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--accent-color);
+}
+
+/* default: VALUE — light italic Google Sans Code, regular text color
+   (not muted). */
+.velu-field__default {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-style: italic;
+  font-weight: var(--weight-light);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+}
+
+/* Description block beneath the chip row. */
+.velu-field__body {
+  margin-block-start: var(--s-1);
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+
+/* Sibling separator — drop two <Field> next to each other and the
+   hairline divider appears between them. No wrapper component needed. */
+.velu-field + .velu-field {
+  margin-block-start: var(--s2);
+  padding-block-start: var(--s2);
+  border-block-start: var(--border-width) solid var(--border-color);
+}

package/runtime/velu-ui/components/image.css

@@ -0,0 +1,237 @@
+/* Image — plain / captioned / window-chrome / device-frame variants.
+   Tokenized; light/dark via [data-theme]. The window + frame variants share
+   an accent-glow + noise backdrop, plus the liquid-glass layered surface
+   (effect/tint/shine/content) for chrome bar + device bezel — SVG
+   feTurbulence→feDisplacementMap provides the actual refraction. */
+
+.velu-image {
+  display: block;
+  margin: 0; /* reset <figure> default margin */
+}
+/* Chrome variants: figure hugs the contained card so the caption
+   naturally centers under it instead of under the full content column. */
+.velu-image--chrome {
+  inline-size: fit-content;
+  margin-inline: auto;
+}
+
+.velu-image__img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+}
+.velu-image__img--flush {
+  border-radius: 0;
+}
+
+.velu-image__caption {
+  margin-block-start: var(--s-1);
+  text-align: center;
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--muted-color);
+}
+
+/* ── Accent glow + noise grain (shared by window + frame) ────────────────── */
+/* Big soft blob peeking from outside the container. The position uses
+   negative insets so the blob's center is outside; overflow:hidden on
+   the parent clips it to a quarter visible. */
+.velu-image__glow {
+  position: absolute;
+  inset-block-start: calc(var(--s4) * -1);
+  inset-inline-start: calc(var(--s4) * -1);
+  inline-size: calc(var(--s5) * 5);
+  block-size: calc(var(--s5) * 5);
+  background: var(--accent-color);
+  border-radius: 50%;
+  filter: blur(var(--s3));
+  opacity: 0.95;
+  pointer-events: none;
+  z-index: 0;
+}
+.velu-image__noise {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.6;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ── Liquid-glass surface (lucasromerodb pattern) ────────────────────────── */
+/* Four-layer stack: effect (backdrop-blur + SVG displacement filter),
+   tint (translucent white), shine (inset highlights), content (children).
+   Stays usable across themes — tint+shine are universal optical constants
+   (white), not palette tokens. */
+.velu-glass {
+  position: relative;
+  display: flex;
+  /* No overflow:hidden — each inner layer rounds itself via
+     `border-radius: inherit`, so we don't need to clip at the parent.
+     Skipping the clip lets children's box-shadows (e.g. the raised
+     screen inside the bezel) extend outside the glass surface. */
+  box-shadow:
+    0 var(--s-1) var(--s-1) color-mix(in srgb, #000 20%, transparent),
+    0 0 var(--s1) color-mix(in srgb, #000 10%, transparent);
+}
+/* Each layer rounds itself rather than relying on parent overflow:hidden —
+   Chrome doesn't reliably clip backdrop-filter / inset-box-shadow to a
+   rounded parent, which produces 90° corners poking through curves. */
+.velu-glass__effect,
+.velu-glass__tint,
+.velu-glass__shine,
+.velu-glass__content {
+  border-radius: inherit;
+}
+/* Displacement must be applied to the BACKDROP (what's behind the element),
+   not to the element itself. `filter: url()` would apply to the (empty)
+   effect div; `backdrop-filter: url()` refracts the actual backdrop.
+   Chromium-only; Safari/Firefox fall back to plain blur. */
+.velu-glass__effect {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  -webkit-backdrop-filter: blur(3px) url(#velu-glass-distortion);
+  backdrop-filter: blur(3px) url(#velu-glass-distortion);
+  isolation: isolate;
+}
+.velu-glass__tint {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.25);
+}
+.velu-glass__shine {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  box-shadow:
+    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
+    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
+}
+.velu-glass__content {
+  position: relative;
+  z-index: 3;
+  inline-size: 100%;
+}
+
+/* ── Window-chrome variant ──────────────────────────────────────────────── */
+/* Outer = grey card. Nested radii are properly concentric:
+   outer_radius ▸ surface_radius (= outer - outer_padding) ▸
+   inner_radius (= surface - surface_padding). Padding is kept small
+   enough that every level's curve stays positive. */
+.velu-image__window {
+  position: relative;
+  padding: var(--s-1);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--surface-color);
+  max-inline-size: 36rem;
+  margin-inline: auto;
+}
+/* Glass surface (tray) that the chrome+image card sits on. Peeks out
+   around the inner card as a visible glass border.
+   radius = outer_radius - outer_padding (concentric with outer card). */
+.velu-image__window-surface {
+  position: relative;
+  z-index: 1;
+  inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1));
+}
+.velu-image__window-surface > .velu-glass__content {
+  padding: var(--s-2);
+}
+/* Inner card holds the chrome bar + image.
+   radius = surface_radius - surface_padding (concentric with surface).
+   A soft drop-shadow lifts it off the glass tray. */
+.velu-image__window-inner {
+  position: relative;
+  inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  overflow: hidden;
+  box-shadow:
+    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
+    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
+}
+/* Chrome bar sits ABOVE the image (in flow, no overlap). The image
+   renders below it. Chrome is glass-styled via the Glass wrapper.
+   Top corners match the window's radius; bottom stays flat where it
+   meets the image. Inner glass layers inherit via `border-radius:
+   inherit`. */
+.velu-image__chrome {
+  border-start-start-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  border-start-end-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  /* The default `.velu-glass` drop-shadow casts a dark line onto the
+     image below — undesired here since the chrome meets the image
+     directly. The bezel keeps its shadow because it sits in a padded
+     grey card that absorbs it. */
+  box-shadow: none;
+}
+.velu-image__chrome > .velu-glass__content {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  padding: var(--s-1);
+}
+.velu-image__dots {
+  display: inline-flex;
+  gap: var(--s-3);
+  padding-inline: var(--s-3);
+}
+.velu-image__dot {
+  inline-size: 0.75em;
+  block-size: 0.75em;
+  border-radius: 50%;
+}
+.velu-image__dot--red    { background: #ff5f57; }
+.velu-image__dot--yellow { background: #febc2e; }
+.velu-image__dot--green  { background: #28c840; }
+/* URL bar is absolutely centered in the chrome regardless of the dots'
+   width on the left — the .velu-glass__content already has
+   position: relative, so this anchors to that. */
+.velu-image__urlbar {
+  position: absolute;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  inline-size: 15%;
+  block-size: 0.5em;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-color) 14%, transparent);
+}
+
+/* ── Device-frame variant ───────────────────────────────────────────────── */
+/* Outer = grey card. Concentric nesting: outer → bezel → screen, each
+   radius = parent_radius - padding so all corner curves align. */
+.velu-image__frame {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding: var(--s-1);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--surface-color);
+  max-inline-size: 18rem;
+  margin-inline: auto;
+}
+/* Bezel: concentric with outer card. */
+.velu-image__frame-bezel {
+  position: relative;
+  z-index: 1;
+  inline-size: 13rem;
+  max-inline-size: 100%;
+  border-radius: calc(var(--radius-lg) - var(--s-1));
+}
+.velu-image__frame-bezel > .velu-glass__content {
+  padding: var(--s-2);
+}
+/* Screen: concentric with bezel. Soft drop-shadow lifts it off the bezel. */
+.velu-image__frame-screen {
+  border-radius: calc(var(--radius-lg) - var(--s-1) - var(--s-2));
+  overflow: hidden;
+  box-shadow:
+    0 var(--s-2) var(--s-1) color-mix(in srgb, #000 18%, transparent),
+    0 var(--s-4) var(--s-3) color-mix(in srgb, #000 12%, transparent);
+}

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

@@ -0,0 +1,157 @@
+/* NavSelect — dropdown switcher for product / version / language.
+   Shares the visual recipe with the docs drawer's doc-select. All
+   values are tokens; light/dark via [data-theme]. */
+
+.velu-nav-select {
+  position: relative;
+  display: inline-block;
+}
+
+.velu-nav-select__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  inline-size: 100%;
+  padding-block: var(--s-3);
+  padding-inline: var(--s0);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h5);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease;
+}
+.velu-nav-select__btn:hover {
+  border-color: var(--accent-color);
+}
+
+/* Bare variant — borderless text trigger (e.g. the language switcher
+   at the header's bottom-right, GitBook-style). */
+.velu-nav-select--bare .velu-nav-select__btn {
+  inline-size: auto;
+  padding-inline: 0;
+  background: transparent;
+  border: 0;
+  font-size: var(--f-h6);
+}
+.velu-nav-select--bare .velu-nav-select__btn:hover {
+  color: var(--accent-color);
+}
+
+/* Language (or other) code shown uppercase before the name. Kept at
+   text color (not muted) — distinguished by case + size, not grey. */
+.velu-nav-select__code {
+  flex: none;
+  color: var(--text-color);
+  text-transform: uppercase;
+  font-size: 0.85em;
+  letter-spacing: 0.02em;
+}
+
+/* Compact variant — the version pill sitting next to the brand. */
+.velu-nav-select--sm .velu-nav-select__btn {
+  padding-block: var(--s-5);
+  padding-inline: var(--s-2);
+  font-size: var(--f-h6);
+}
+
+.velu-nav-select__btn-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--text-color);
+}
+.velu-nav-select__value {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.velu-nav-select__chev {
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+  stroke-width: 1;
+  color: var(--text-color);
+  transition: transform 0.18s ease;
+}
+.velu-nav-select[data-open='true'] .velu-nav-select__chev {
+  transform: rotate(180deg);
+}
+
+/* Menu — anchored below the button, fades + slides in. Always in DOM
+   so the transition runs both directions; visibility delayed so the
+   closed menu isn't focusable. */
+.velu-nav-select__menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-start: 0;
+  min-inline-size: 100%;
+  margin: 0;
+  padding-block: var(--s-2);
+  padding-inline: 0;
+  list-style: none;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 var(--s-2) var(--s1)
+    color-mix(in srgb, #000 12%, transparent);
+  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: 40;
+}
+.velu-nav-select[data-open='true'] .velu-nav-select__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s;
+}
+/* Right-align the menu when the trigger sits at the trailing edge
+   (e.g. the language switcher at the header's bottom-right). */
+.velu-nav-select--align-end .velu-nav-select__menu {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+.velu-nav-select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  font-size: var(--f-h5);
+  color: var(--text-color);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-nav-select__item:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+.velu-nav-select__item--active {
+  color: var(--accent-color);
+}
+.velu-nav-select__item-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--text-color);
+}
+.velu-nav-select__item:hover .velu-nav-select__item-icon,
+.velu-nav-select__item--active .velu-nav-select__item-icon {
+  color: var(--accent-color);
+}