@veluai/velu 0.1.14 → 0.1.16

package/runtime/velu-ui/components/SocialLinks.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Cluster from '../primitives/Cluster.jsx';
+
+/**
+ * SocialLinks — a row of social-platform icon links. Shared by the full
+ * PageFooter (centered at its base) and the compact content-foot row (next to
+ * "Powered by Velu" when there are no footer link columns).
+ *
+ * `socials` is `[{ kind, href }]`. Unknown kinds (no icon) are skipped.
+ *
+ * @param {{ socials?: {kind: string, href: string}[],
+ *           justify?: string, className?: string }} props
+ */
+
+/* Inline SVGs, fill: currentColor so they inherit the themed text color. */
+function GithubIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg viewBox="0 0 1200 1227" fill="currentColor" aria-hidden="true">
+      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
+    </svg>
+  );
+}
+function YoutubeIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+}
+function LinkedinIcon() {
+  return (
+    <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" />
+    </svg>
+  );
+}
+
+export const SOCIAL_ICONS = {
+  github: GithubIcon,
+  x: XIcon,
+  youtube: YoutubeIcon,
+  linkedin: LinkedinIcon,
+};
+const SOCIAL_LABELS = {
+  github: 'GitHub',
+  x: 'X',
+  youtube: 'YouTube',
+  linkedin: 'LinkedIn',
+};
+
+export default function SocialLinks({ socials = [], justify, className = '' }) {
+  const known = socials.filter((s) => s && SOCIAL_ICONS[s.kind]);
+  if (!known.length) return null;
+  return (
+    <Cluster
+      space="var(--s-2)"
+      align="center"
+      justify={justify}
+      className={`velu-socials ${className}`.trim()}
+    >
+      {known.map((s, i) => {
+        const Icon = SOCIAL_ICONS[s.kind];
+        return (
+          <a
+            key={i}
+            href={s.href}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={SOCIAL_LABELS[s.kind] ?? s.kind}
+            className="velu-social"
+            data-kind={s.kind}
+          >
+            <Icon />
+          </a>
+        );
+      })}
+    </Cluster>
+  );
+}

package/runtime/velu-ui/components/TryItBar.jsx

@@ -21,6 +21,7 @@ export default function TryItBar({
   path = '',
   cta = 'Try It',
   onTry,
+  loading = false,
   className = '',
   ...rest
 }) {
@@ -79,10 +80,21 @@ export default function TryItBar({
         type="button"
         className="velu-try-it__cta"
         onClick={onTry}
+        data-loading={loading ? 'true' : undefined}
+        disabled={loading || undefined}
+        aria-busy={loading || undefined}
       >
-        {cta}
-        <span className="velu-try-it__cta-icon" aria-hidden="true">
-          {resolveIcon('chevron-right', { size: '1em' })}
+        {/* Two stacked layers swap with a vertical slide: the label slides
+            down and out the bottom while the spinner slides in from the top.
+            overflow:hidden on the button clips both off-screen states. */}
+        <span className="velu-try-it__cta-label">
+          {cta}
+          <span className="velu-try-it__cta-icon" aria-hidden="true">
+            {resolveIcon('chevron-right', { size: '1em' })}
+          </span>
+        </span>
+        <span className="velu-try-it__cta-spinner" aria-hidden="true">
+          {resolveIcon('loader-circle', { size: '1em' })}
         </span>
       </button>
     </Cluster>

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

@@ -0,0 +1,215 @@
+/* Auto-generated OpenAPI reference page. Composes existing API components; this
+   only adds the page-level rhythm, the response tabs, and the playground's
+   live-response panel + body input. All tokens — light/dark via [data-theme]. */
+
+.velu-api-page__title {
+  font-size: var(--f-h1);
+  font-weight: var(--weight-bold);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  margin: 0 0 var(--s1);
+}
+.velu-api-page__lede {
+  color: var(--muted-color);
+  margin: 0 0 var(--s2);
+}
+.velu-api-page__tryit {
+  margin-block: var(--s2);
+}
+.velu-api-page__section {
+  margin-block-start: var(--s3);
+}
+.velu-api-page__section > h2 {
+  font-size: var(--f-h3);
+  font-weight: var(--weight-semibold);
+  margin: 0 0 var(--s1);
+}
+.velu-api-page__enum {
+  margin-block-start: var(--s-3);
+  color: var(--muted-color);
+  font-size: var(--f-h6);
+}
+.velu-api-page__enum code {
+  margin-inline-end: var(--s-4);
+}
+
+/* ── Response sections (doc body) ──────────────────────────────────────── */
+/* One default-open accordion per status; the summary shows a status pill +
+   the content-type. */
+.velu-api-resp__head {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s0);
+}
+/* Plain status code — no pill chrome, no per-status color, regular weight. */
+.velu-api-resp__status {
+  font-family: var(--font-mono);
+}
+.velu-api-resp__ctype {
+  color: var(--muted-color);
+  font-family: var(--font-mono);
+  font-size: var(--f-h6);
+}
+.velu-api-resp__desc {
+  color: var(--muted-color);
+  margin: 0 0 var(--s1);
+}
+
+/* ── Playground live-response panel (ApiClient aside) ──────────────────── */
+/* A Body / Header tabbed card reusing the CodeGroup tab chrome
+   (.velu-code-block__*): Body shows a status-colored callout + the response
+   body; Header shows the response headers as a fixed-height scrollable table. */
+.velu-api-resp-panel__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  padding: var(--s1);
+  background: var(--page-bg);
+}
+.velu-api-resp-panel__status {
+  /* The Callout owns its color; keep the weight regular. */
+  font-size: var(--f-h6);
+}
+
+/* Body + Header tabs — fixed height, vertically scrollable, so a long
+   response never makes the panel grow unbounded. */
+.velu-api-resp-headers__scroll,
+.velu-api-resp-body__scroll {
+  max-block-size: 15rem;
+  overflow-y: auto;
+}
+/* The CodeBlock owns its own border/radius; let it fill the scroll box. */
+.velu-api-resp-body__scroll > .velu-code-block {
+  border: 0;
+  border-radius: 0;
+}
+
+/* Response headers table — flush rows with hairline dividers. */
+.velu-api-resp-headers {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--f-h6);
+}
+.velu-api-resp-headers tr + tr td {
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-api-resp-headers td {
+  padding: var(--s-2) var(--s-1);
+  vertical-align: top;
+  word-break: break-word;
+}
+.velu-api-resp-headers__key {
+  color: var(--muted-color);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  padding-inline-end: var(--s1) !important;
+}
+.velu-api-resp-headers__val {
+  font-family: var(--font-mono);
+  inline-size: 100%;
+}
+
+/* Editable JSON body in the playground. */
+.velu-api-body-input {
+  inline-size: 100%;
+  resize: vertical;
+  padding: var(--s0);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  color: var(--text-color);
+  font-family: var(--font-mono);
+  font-size: var(--f-h6);
+  line-height: 1.5;
+}
+
+/* ── Right-rail samples ────────────────────────────────────────────────── */
+/* A TOC needs only ~280px, but the request/response code samples were being
+   cropped in that width. On API pages widen the right rail — both the aside
+   width AND the centre column's right margin read this one var, so they stay
+   in sync. (At < 1024px the @container query hides the rail + zeroes the
+   margin, so this wider value never affects narrow layouts.) */
+.velu-docs-layout[data-api='true'] {
+  --velu-aside-right-width: 28rem; /* 448px */
+}
+
+.velu-api-samples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+}
+
+/* Playground right column: live response (when present) stacked above the
+   same request/response code samples shown in the page's right rail. */
+.velu-api-pg-aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+}
+/* Breathing room inside each sample group — the code panels were reading
+   as cramped against the rail edge. */
+.velu-api-samples > * {
+  margin: 0;
+}
+.velu-api-samples :is(pre, code) {
+  font-size: var(--f-h6);
+  line-height: 1.6;
+}
+
+/* ── Try-It playground modal ───────────────────────────────────────────── */
+/* The playground renders above the page on a dimmed, blurred backdrop
+   rather than inline. */
+.velu-api-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: clamp(var(--s1), 6vh, var(--s5)) var(--s2);
+  overflow-y: auto;
+  background: color-mix(in srgb, var(--page-bg) 35%, rgba(0, 0, 0, 0.55));
+  backdrop-filter: blur(6px) saturate(1.1);
+  -webkit-backdrop-filter: blur(6px) saturate(1.1);
+  animation: velu-api-modal-in 140ms ease-out;
+}
+.velu-api-modal__panel {
+  inline-size: 100%;
+  max-inline-size: 64rem;
+  border-radius: var(--radius-md);
+  box-shadow:
+    0 24px 64px -16px rgba(0, 0, 0, 0.45),
+    0 8px 24px -12px rgba(0, 0, 0, 0.35);
+  animation: velu-api-modal-rise 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes velu-api-modal-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes velu-api-modal-rise {
+  from { opacity: 0; transform: translateY(8px) scale(0.99); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .velu-api-modal,
+  .velu-api-modal__panel {
+    animation: none;
+  }
+}
+
+/* Compact method pill in the sidebar (replaces the icon for API endpoints). */
+.velu-sidebar__method {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.03em;
+  padding: 0.18em 0.36em;
+  border-radius: var(--radius-xs, 4px);
+  text-transform: uppercase;
+}
+.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: color-mix(in srgb, var(--get-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: color-mix(in srgb, var(--post-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: color-mix(in srgb, var(--put-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: color-mix(in srgb, var(--patch-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: color-mix(in srgb, var(--delete-pill-color) 14%, transparent); }

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

@@ -175,9 +175,11 @@
   color: var(--text-color);
 }
 .velu-try-it__cta {
+  position: relative;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
-  gap: var(--s-2);
+  justify-content: center;
   padding-block: var(--s-3);
   padding-inline: var(--s0);
   background: var(--method-cta, var(--accent-color));
@@ -194,6 +196,56 @@
 .velu-try-it__cta:hover {
   background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
 }
+.velu-try-it__cta:disabled {
+  cursor: default;
+}
+
+/* Label (text + chevron) and the loading spinner are two stacked layers
+   that swap with a vertical slide: when loading, the label slides DOWN and
+   out the bottom while the spinner slides IN from the top. overflow:hidden
+   on the button clips the off-screen states. The label stays in normal flow
+   so it fixes the button's width; the spinner overlays it. */
+.velu-try-it__cta-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  transition: transform 0.22s ease, opacity 0.18s ease;
+}
+.velu-try-it__cta-spinner {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-110%);
+  opacity: 0;
+  transition: transform 0.22s ease, opacity 0.18s ease;
+}
+.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-label {
+  transform: translateY(120%);
+  opacity: 0;
+}
+.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-spinner {
+  transform: translateY(0);
+  opacity: 1;
+}
+.velu-try-it__cta-spinner svg {
+  animation: velu-cta-spin 0.7s linear infinite;
+}
+@keyframes velu-cta-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .velu-try-it__cta-label,
+  .velu-try-it__cta-spinner {
+    transition-duration: 0.01ms;
+  }
+  .velu-try-it__cta-spinner svg {
+    animation-duration: 1.4s;
+  }
+}
 .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); }
@@ -262,6 +314,7 @@
    AND natural height; the Cluster's align: flex-start keeps it from
    stretching to the taller TryItBar's height). */
 .velu-api-client__op {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--s-2);
@@ -274,6 +327,20 @@
   line-height: var(--lh-h6);
   flex: none;
 }
+/* The clickable trigger when the operation is switchable — a bare button
+   that keeps the same layout as the static row. */
+.velu-api-client__op-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
 .velu-api-client__op-label {
   font-weight: var(--weight-medium);
 }
@@ -281,6 +348,55 @@
   display: inline-flex;
   align-items: center;
   color: var(--muted-color);
+  transition: transform 0.15s ease;
+}
+.velu-api-client__op-btn[aria-expanded='true'] .velu-api-client__op-chevron {
+  transform: rotate(180deg);
+}
+
+/* Operation switcher menu — lists every operation in the tab. */
+.velu-api-client__op-menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-start: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: var(--s-3);
+  list-style: none;
+  min-inline-size: 16rem;
+  max-block-size: 18rem;
+  overflow-y: auto;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4);
+}
+.velu-api-client__op-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  inline-size: 100%;
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-color);
+  font: inherit;
+  font-size: var(--f-h6);
+  text-align: start;
+  cursor: pointer;
+}
+.velu-api-client__op-item:hover,
+.velu-api-client__op-item--active {
+  background: var(--surface-color);
+}
+.velu-api-client__op-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Inside ApiClient the outer frame already supplies the box — strip

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

@@ -100,7 +100,7 @@
    little breathing room remains around it. Each kind gets its OWN
    brand color (set via the data-kind attribute below). Monochrome
    brands (github, x) inherit --text-color so they theme correctly. */
-.velu-footer__social {
+.velu-social {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -112,19 +112,19 @@
   text-decoration: none;
   transition: opacity 0.12s ease;
 }
-.velu-footer__social:hover {
+.velu-social:hover {
   opacity: 0.78;
 }
-.velu-footer__social svg {
+.velu-social svg {
   inline-size: var(--icon-size-lg);
   block-size: var(--icon-size-lg);
 }
 /* Brand colors — YouTube red, LinkedIn blue. GitHub + X stay
    --text-color (their canonical brand is monochrome and follows the
    surrounding theme). */
-.velu-footer__social[data-kind='youtube'] {
+.velu-social[data-kind='youtube'] {
   color: #ff0000;
 }
-.velu-footer__social[data-kind='linkedin'] {
+.velu-social[data-kind='linkedin'] {
   color: #0a66c2;
 }

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

@@ -100,6 +100,28 @@
   color: var(--text-color);
 }
 
+/* Configured site logo (replaces the mark + wordmark). Height-constrained to
+   the brand row; width scales by aspect ratio up to a sane cap. */
+.velu-logo {
+  display: block;
+  block-size: 2rem;
+  inline-size: auto;
+  max-inline-size: 12rem;
+  object-fit: contain;
+}
+/* Per-theme swap: light image by default, dark image under [data-theme=dark].
+   `display` (not opacity) so the inactive one leaves the a11y tree too. The
+   `mono` single-image case has neither modifier and always shows. */
+.velu-logo--dark {
+  display: none;
+}
+[data-theme='dark'] .velu-logo--light {
+  display: none;
+}
+[data-theme='dark'] .velu-logo--dark {
+  display: block;
+}
+
 /* ── Action buttons ─────────────────────────────────────────────────── */
 .velu-header__action {
   display: inline-flex;
@@ -136,6 +158,21 @@
 .velu-header__action--primary:hover {
   background: color-mix(in srgb, var(--accent-color) 88%, #000);
 }
+/* Plain text link (navbar.links) — no fill or border, just text that goes
+   accent on hover. Transparent border keeps it the same height as the
+   buttons beside it; tighter inline padding reads as a link, not a button. */
+.velu-header__action--link {
+  background: transparent;
+  border: var(--border-width) solid transparent;
+  color: var(--text-color);
+  padding-inline: var(--s-5);
+}
+.velu-header__action--link:hover {
+  color: var(--accent-color);
+}
+.velu-header__action--link:hover .velu-header__action-icon {
+  color: var(--accent-color);
+}
 .velu-header__action-icon {
   display: inline-flex;
   flex: none;

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

@@ -1,6 +1,26 @@
 /* PoweredBy — "Powered by Velu" badge, right-aligned. Sits above the
    site footer. All values are tokens; light/dark via [data-theme]. */
 
+/* Content foot — social icons (left) + the "Powered by" badge (right) in one
+   row. Shown at the base of the article column when the footer has no link
+   columns (so there's no full footer section). The row owns the vertical
+   rhythm; the nested badge drops its own standalone margins. */
+.velu-content-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s2);
+  margin-block: 2rem;
+  padding-inline: var(--s3);
+}
+.velu-content-foot .velu-powered-by {
+  margin: 0;
+  padding: 0;
+}
+.velu-content-foot .velu-social {
+  color: var(--muted-color);
+}
+
 .velu-powered-by {
   display: flex;
   justify-content: flex-end;

package/runtime/velu-ui/index.js

@@ -8,6 +8,8 @@ export { default as Toc } from './components/Toc.jsx';
 export { default as TocBar } from './components/TocBar.jsx';
 export { default as Callout } from './components/Callout.jsx';
 export { default as ErrorCard } from './components/ErrorCard.jsx';
+export { default as Logo } from './components/Logo.jsx';
+export { default as SocialLinks } from './components/SocialLinks.jsx';
 export {
   default as Accordion,
   AccordionGroup,
@@ -24,6 +26,8 @@ export { default as TryItBar } from './components/TryItBar.jsx';
 export { default as ApiField } from './components/ApiField.jsx';
 export { default as ApiClient } from './components/ApiClient.jsx';
 export { default as ApiSidebar } from './components/ApiSidebar.jsx';
+export { default as ApiReferencePage } from './components/ApiReferencePage.jsx';
+export { default as ApiSamples } from './components/ApiSamples.jsx';
 export { default as AskBar } from './components/AskBar.jsx';
 export { default as Chatbot } from './components/Chatbot.jsx';
 export { default as PageFeedback } from './components/PageFeedback.jsx';