@veluai/velu 0.1.0

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

@@ -0,0 +1,479 @@
+/* API documentation components — MethodBadge / ApiPath / TryItBar /
+   ApiClient. All values are tokens; light/dark via [data-theme].
+   Method colors come from --<method>-pill-color / -stroke-color /
+   -cta-color in base.css. */
+
+/* ── MethodBadge ────────────────────────────────────────────────────────── */
+/* 2px block / 8px inline padding — the pill hugs its label tightly so it
+   reads as a token, not a button. */
+.velu-method-badge {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 2px;
+  padding-inline: var(--s-3);
+  background: var(--method-pill, var(--surface-color));
+  border: var(--border-width) solid
+    var(--method-stroke, var(--border-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);
+  font-weight: var(--weight-medium);
+  /* Label stays in the theme's primary text color regardless of method
+     so the pill reads cleanly against any tint. */
+  color: var(--text-color);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.velu-method-badge--get {
+  --method-pill: var(--get-pill-color);
+  --method-stroke: var(--get-pill-stroke-color);
+  --method-cta: var(--get-cta-color);
+}
+.velu-method-badge--post {
+  --method-pill: var(--post-pill-color);
+  --method-stroke: var(--post-pill-stroke-color);
+  --method-cta: var(--post-cta-color);
+}
+.velu-method-badge--put {
+  --method-pill: var(--put-pill-color);
+  --method-stroke: var(--put-pill-stroke-color);
+  --method-cta: var(--put-cta-color);
+}
+.velu-method-badge--patch {
+  --method-pill: var(--patch-pill-color);
+  --method-stroke: var(--patch-pill-stroke-color);
+  --method-cta: var(--patch-cta-color);
+}
+.velu-method-badge--delete {
+  --method-pill: var(--delete-pill-color);
+  --method-stroke: var(--delete-pill-stroke-color);
+  --method-cta: var(--delete-cta-color);
+}
+
+/* ── ApiPath ───────────────────────────────────────────────────────────── */
+/* Layout (inline-flex + wrap + gap) is provided by <Cluster>; this rule
+   only owns typography. min-inline-size:0 lets ApiPath shrink below
+   its content's min-content width so its own internal Cluster wrap
+   actually kicks in (default flex min-width is auto = content). */
+.velu-api-path {
+  min-inline-size: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+}
+/* Hardcoded chunks stay together at the segment boundary but can
+   break mid-text when there's no other choice (very narrow container)
+   so they never overflow horizontally. */
+.velu-api-path__segment {
+  overflow-wrap: anywhere;
+}
+.velu-api-path__param {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 2px;
+  padding-inline: var(--s-3);
+  background: var(--method-pill, var(--surface-color));
+  border: var(--border-width) solid
+    var(--method-stroke, var(--border-color));
+  border-radius: var(--radius-sm);
+  color: var(--text-color);
+}
+.velu-api-path__param--get {
+  --method-pill: var(--get-pill-color);
+  --method-stroke: var(--get-pill-stroke-color);
+  --method-cta: var(--get-cta-color);
+}
+.velu-api-path__param--post {
+  --method-pill: var(--post-pill-color);
+  --method-stroke: var(--post-pill-stroke-color);
+  --method-cta: var(--post-cta-color);
+}
+.velu-api-path__param--put {
+  --method-pill: var(--put-pill-color);
+  --method-stroke: var(--put-pill-stroke-color);
+  --method-cta: var(--put-cta-color);
+}
+.velu-api-path__param--patch {
+  --method-pill: var(--patch-pill-color);
+  --method-stroke: var(--patch-pill-stroke-color);
+  --method-cta: var(--patch-cta-color);
+}
+.velu-api-path__param--delete {
+  --method-pill: var(--delete-pill-color);
+  --method-stroke: var(--delete-pill-stroke-color);
+  --method-cta: var(--delete-cta-color);
+}
+
+/* ── TryItBar ──────────────────────────────────────────────────────────── */
+/* Radius chain — the Try It BUTTON is the fixed basis (--radius-sm):
+     button  --radius-sm                 (8px)   ← basis, never changes
+     outer   calc(--radius-sm + --s-3)    (16px)  = button + --s-3
+     inner   --radius-sm                  (8px)   = outer  - --s-3
+     pill    --radius-sm                  (8px)   ← keeps its own corner
+   outer↔button and outer↔inner are strictly concentric (one --s-3 step
+   apart). The pill keeps --radius-sm so it stays visibly rounded — a
+   strict pill↔inner concentric would force it to 0 (8 - 8).
+
+   Layout (flex-wrap + gap + justify/align) is provided by <Cluster>;
+   this rule only owns the chrome (padding / border / radius / bg).
+
+   --try-it-row-min: the inner row's minimum width (see __row below).
+   ch-based so it scales with the monospace endpoint text; override
+   per-instance if a longer/shorter endpoint needs a different floor. */
+.velu-try-it {
+  --try-it-row-min: 24ch;
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: calc(var(--radius-sm) + var(--s-3));
+  background: var(--page-bg);
+}
+/* Inner bordered row — flex, items aligned to the top so the copy
+   button stays pinned up even when the endpoint group wraps onto
+   multiple lines.
+   min-inline-size gives the row a real floor (--try-it-row-min, capped
+   at 100% so it never overflows a tiny container). Once row + Try It
+   button can't both fit, the outer Cluster wraps the button to the
+   next line — without the floor the row would just shrink forever and
+   the button would never drop. */
+.velu-try-it__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-1);
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  /* = outer (calc(--radius-sm + --s-3)) - --s-3 padding = --radius-sm */
+  border-radius: var(--radius-sm);
+  flex: 1;
+  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
+  background: var(--page-bg);
+}
+/* Method pill + path — wraps internally (Cluster), fills the row minus
+   the copy button. */
+.velu-try-it__endpoint {
+  flex: 1;
+  min-inline-size: 0;
+}
+.velu-try-it__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--muted-color);
+  cursor: pointer;
+  /* Non-shrinking; pinned to the top of the row so it stays on the
+     first line when the endpoint group wraps below. */
+  flex: none;
+  align-self: flex-start;
+}
+.velu-try-it__copy:hover {
+  color: var(--text-color);
+}
+.velu-try-it__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-block: var(--s-3);
+  padding-inline: var(--s0);
+  background: var(--method-cta, var(--accent-color));
+  border: 0;
+  /* The fixed basis of the concentric chain — never changes. */
+  border-radius: var(--radius-sm);
+  color: #fff;
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h6);
+  cursor: pointer;
+}
+.velu-try-it__cta:hover {
+  background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
+}
+.velu-try-it--get   { --method-cta: var(--get-cta-color); }
+.velu-try-it--post  { --method-cta: var(--post-cta-color); }
+.velu-try-it--put   { --method-cta: var(--put-cta-color); }
+.velu-try-it--patch { --method-cta: var(--patch-cta-color); }
+.velu-try-it--delete{ --method-cta: var(--delete-cta-color); }
+
+/* ── ApiClient ─────────────────────────────────────────────────────────── */
+/* max-inline-size: 100% + min-inline-size: 0 keep the client contained
+   when it's a flex/grid child (e.g. rendered inside a production
+   modal) — without min-inline-size:0 a flex item's default
+   `min-width: auto` lets wide content bleed past the container. */
+.velu-api-client {
+  position: relative;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--page-bg);
+  overflow: hidden;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* Modal close button — sits in its own row at the top of the client,
+   X aligned to the inline-end. */
+.velu-api-client__close-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--s-3) var(--s-3) 0;
+}
+.velu-api-client__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-api-client__close:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* base.css applies a global `* { max-width: var(--measure) }` (66ch
+   text-measure cap). Inside ApiClient that would pin the non-excluded
+   structural elements — <details>, <table>, <h3>, <p>, <summary> — to
+   66ch, making the whole client look fixed-width even in a wide modal.
+   Reset it: every element here manages its own width via flex +
+   wrapping, so the client fills whatever container it's given. */
+.velu-api-client * {
+  max-inline-size: none;
+}
+
+/* Head row: operation dropdown + TryItBar. Layout (flex-wrap + gap +
+   align) is provided by <Cluster>; this rule only owns the padding
+   that insets both children from the ApiClient frame. */
+.velu-api-client__head {
+  padding: var(--s-3);
+}
+
+/* Operation dropdown — same shape as TryItBar's inner row so the two
+   read as a matched pair. flex: none → hugs its text (natural width
+   AND natural height; the Cluster's align: flex-start keeps it from
+   stretching to the taller TryItBar's height). */
+.velu-api-client__op {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--page-bg);
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  flex: none;
+}
+.velu-api-client__op-label {
+  font-weight: var(--weight-medium);
+}
+.velu-api-client__op-chevron {
+  display: inline-flex;
+  align-items: center;
+  color: var(--muted-color);
+}
+
+/* Inside ApiClient the outer frame already supplies the box — strip
+   the TryItBar's own outer border / radius / padding (the head's
+   padding wraps both children). flex: 1 fills the head beside the
+   natural-width dropdown; the min-width floor makes Cluster wrap the
+   bar below the dropdown once it can't keep that width. */
+.velu-api-client__bar {
+  flex: 1;
+  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
+/* Two-column body. Falls back to single column on narrow widths via
+   a Switcher-style flex-wrap trick: flex-basis with a calc() that
+   flips when the container drops below the threshold. */
+.velu-api-client__body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s2);
+  padding: var(--s2);
+}
+.velu-api-client__left,
+.velu-api-client__right {
+  flex-grow: 1;
+  flex-basis: calc((40rem - 100%) * 999);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  min-inline-size: 0;
+}
+
+.velu-api-client__title {
+  margin: 0;
+  font-size: var(--f-h3);
+  line-height: var(--lh-h3);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-api-client__description {
+  margin: 0;
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+
+/* ── ApiField (input-bearing field inside an Accordion section) ─────────── */
+/* flex-wrap pair: info column (label + description) and the control
+   column (input). Wraps to stacked on narrow widths — no media query. */
+.velu-api-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s0);
+  align-items: flex-start;
+}
+.velu-api-field__info {
+  flex: 1 1 16ch;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+.velu-api-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);
+}
+/* Chip + required pill — same recipe as Field's, kept local so ApiField
+   doesn't depend on field.css. */
+.velu-api-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);
+}
+.velu-api-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);
+}
+.velu-api-field__desc {
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+}
+
+/* Control column — the actual <input>, optionally with a static prefix
+   (e.g. "Bearer"). The whole thing reads as one bordered field. */
+.velu-api-field__control {
+  flex: 1 1 16ch;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+}
+.velu-api-field__control:focus-within {
+  border-color: var(--text-color);
+}
+.velu-api-field__prefix {
+  flex: none;
+  padding-inline: var(--s-2);
+  color: var(--muted-color);
+}
+.velu-api-field__input {
+  flex: 1;
+  min-inline-size: 0;
+  padding-block: var(--s-3);
+  padding-inline: var(--s-2);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: var(--text-color);
+}
+.velu-api-field__input::placeholder {
+  color: var(--muted-color);
+}
+.velu-api-field__input:focus {
+  outline: none;
+}
+
+/* ── ApiSidebar ────────────────────────────────────────────────────────── */
+/* Vertical rhythm is the Stack primitive (set inline by ApiSidebar.jsx);
+   this block holds only the rail, group header, row layout, active
+   state, and icon sizing — same split as sidebar.css. */
+.velu-api-sidebar {
+  border-inline-start: var(--border-width) solid var(--border-color);
+  margin-inline-start: var(--s1);
+}
+
+.velu-api-sidebar__section {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-inline: var(--s-3);
+  inline-size: fit-content;
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+}
+
+.velu-api-sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Endpoint row — method pill + name. align-items: flex-start so the
+   pill stays on the first line when a long name wraps. */
+.velu-api-sidebar__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-2);
+  padding-inline: var(--s0);
+  color: var(--text-color);
+  text-decoration: none;
+}
+.velu-api-sidebar__item--active {
+  color: var(--accent-color);
+  border-inline-start: 2px solid var(--accent-color);
+}
+.velu-api-sidebar__label {
+  font-size: var(--f-body);
+  line-height: var(--lh-h6);
+}
+
+.velu-api-sidebar__icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--f-body);
+  block-size: var(--f-body);
+}
+.velu-api-sidebar__icon svg {
+  inline-size: 100%;
+  block-size: 100%;
+}

package/runtime/velu-ui/components/ask-bar.css

@@ -0,0 +1,94 @@
+/* AskBar — "ask a question" input card. All values are tokens;
+   light/dark via [data-theme]. The component itself only owns the
+   card visuals — the CONSUMER places it (the docs page pins it to the
+   bottom of the scrolling article so content scrolls behind it). */
+
+/* Hidden at mobile widths — too crowded on a 375px column, and the
+   header's Ask AI icon already opens the same chatbot. */
+@container docs (max-width: 640px) {
+  .velu-ask-bar {
+    display: none;
+  }
+}
+
+.velu-ask-bar {
+  /* `relative` establishes the containing block for the absolute send
+     button. Actual page placement (absolute / sticky / fixed) is set
+     by the consumer. */
+  position: relative;
+  z-index: 20;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  /* Soft lift so it reads as floating above the scrolling article. */
+  box-shadow:
+    0 var(--s-1) var(--s1) color-mix(in srgb, #000 14%, transparent),
+    0 0 var(--s0) color-mix(in srgb, #000 6%, transparent);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* Cursor in the input → accent border + accent glow ring. */
+.velu-ask-bar:focus-within {
+  border-color: var(--accent-color);
+  box-shadow:
+    0 0 0 var(--border-width) var(--accent-color),
+    0 0 var(--s1) color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+/* Multi-line input. padding-inline-end clears the send button so typed
+   text never runs under it. */
+.velu-ask-bar__input {
+  display: block;
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--s0);
+  padding-inline-end: calc(var(--s0) + 2.5em);
+  border: 0;
+  background: transparent;
+  resize: none;
+  font: inherit;
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-ask-bar__input:focus {
+  outline: none;
+}
+.velu-ask-bar__input::placeholder {
+  color: var(--muted-color);
+}
+
+/* Circular accent send button, pinned to the bottom-inline-end corner. */
+.velu-ask-bar__send {
+  position: absolute;
+  inset-block-end: var(--s-1);
+  inset-inline-end: var(--s-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5em;
+  block-size: 2.5em;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: #fff;
+  cursor: pointer;
+}
+.velu-ask-bar__send:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+.velu-ask-bar__send:focus-visible {
+  outline: var(--border-width) solid var(--text-color);
+  outline-offset: 2px;
+}
+/* Disabled (input empty) — a dimmed accent (still in the brand
+   palette) so the button reads as "not yet ready" rather than a
+   different control entirely. No pointer events / hover affordance. */
+.velu-ask-bar__send:disabled {
+  background: color-mix(in srgb, var(--accent-color) 35%, transparent);
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -0,0 +1,105 @@
+/* Card — all values tokens; light/dark via [data-theme]. Selectors required
+   (cta hover, image clip, group grid) so this has CSS. Namespaced. */
+
+.velu-card {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden; /* clips the image to the rounded corners */
+  background: var(--page-bg);
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+/* CTA card: the whole card is the click target (stretched-link pattern —
+   the CTA stays the single real <a>; a ::after overlay makes the entire
+   card clickable, valid + accessible, no JS). Hover highlights border+CTA. */
+.velu-card--cta {
+  position: relative;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.velu-card--cta .velu-card__cta::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.velu-card--cta:hover {
+  border-color: var(--accent-color);
+}
+.velu-card--cta:hover .velu-card__cta {
+  color: var(--accent-color);
+}
+
+.velu-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  padding: var(--s0) var(--s3);
+}
+.velu-card--horizontal .velu-card__body {
+  flex-direction: row;
+  align-items: center; /* icon vertically centered against the content */
+  gap: var(--s0);
+}
+.velu-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  min-width: 0;
+}
+
+.velu-card__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  inline-size: var(--f-h2);
+  block-size: var(--f-h2);
+  color: var(--accent-color);
+  font-size: var(--f-h2);
+}
+.velu-card__title {
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: 500;
+}
+.velu-card__text {
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+.velu-card__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  margin-block-start: var(--s-2);
+  font-weight: 500;
+  color: var(--text-color);
+  text-decoration: none;
+  cursor: pointer;
+  width: fit-content; /* only the link itself is the click target */
+  transition: color 0.15s ease;
+}
+.velu-card__cta:hover {
+  color: var(--accent-color);
+}
+.velu-card__cta-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.velu-card__media {
+  display: block;
+}
+.velu-card__media img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  object-fit: cover;
+}
+
+/* CardGroup layout is the Switcher primitive (composed in Card.jsx). Its
+   threshold is computed count-aware in Card.jsx so the row flips to a full
+   vertical stack the moment any one card would fall below --card-min — true
+   Switcher behaviour (all-or-nothing), not multi-row wrap. No rule needed
+   here; Switcher owns row↔column + gap via switcher.css. */