@veluai/velu 0.2.25 → 0.2.27

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

@@ -1,102 +1,102 @@
-import React, { useState } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-import copyText from '../lib/copyText.js';
-import MethodBadge from './MethodBadge.jsx';
-import ApiPath from './ApiPath.jsx';
-
-/**
- * TryItBar — compact endpoint row: method badge + path + copy icon + a
- * method-colored "Try It" CTA. Mirrors Mintlify's docs "try-it" row.
- *
- *   <TryItBar method="POST" path="/project/preview/{projectId}" />
- *
- * CTA is a dummy `<button>` (no fetch / playground wiring) — slot a
- * handler in via the `onTry` prop when there's a real client. Copy
- * writes the full "METHOD path" string to clipboard.
- */
-
-export default function TryItBar({
-  method = 'GET',
-  path = '',
-  cta = 'Try It',
-  onTry,
-  loading = false,
-  className = '',
-  ...rest
-}) {
-  const [copied, setCopied] = useState(false);
-  const key = String(method).toLowerCase();
-
-  function copy() {
-    copyText(`${String(method).toUpperCase()} ${path}`).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1400);
-      },
-      () => {
-        /* silently no-op */
-      },
-    );
-  }
-
-  const cls = `velu-try-it velu-try-it--${key} ${className}`.trim();
-
-  return (
-    // Outer bar is a Cluster — the inner bordered row and the Try It
-    // button are its two children, so they wrap as a unit on narrow
-    // widths (Try It drops below the row).
-    <Cluster
-      space="var(--s-1)"
-      justify="flex-end"
-      align="center"
-      className={cls}
-      {...rest}
-    >
-      {/* Inner bordered group. The method pill + url segments live in
-          their own Cluster that wraps internally; the copy button is a
-          separate sibling pinned to the top-right (align-self:
-          flex-start) so it never drops below the wrapped path. */}
-      <div className="velu-try-it__row">
-        <Cluster
-          space="var(--s-1)"
-          align="center"
-          className="velu-try-it__endpoint"
-        >
-          <MethodBadge method={method} />
-          <ApiPath method={method} path={path} />
-        </Cluster>
-        <button
-          type="button"
-          className="velu-try-it__copy"
-          onClick={copy}
-          aria-label={copied ? 'Copied' : 'Copy endpoint'}
-          title={copied ? 'Copied' : 'Copy'}
-        >
-          {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
-        </button>
-      </div>
-      <button
-        type="button"
-        className="velu-try-it__cta"
-        onClick={onTry}
-        data-loading={loading ? 'true' : undefined}
-        disabled={loading || undefined}
-        aria-busy={loading || undefined}
-      >
-        {/* 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>
-  );
-}
+import React, { useState } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+import copyText from '../lib/copyText.js';
+import MethodBadge from './MethodBadge.jsx';
+import ApiPath from './ApiPath.jsx';
+
+/**
+ * TryItBar — compact endpoint row: method badge + path + copy icon + a
+ * method-colored "Try It" CTA. Mirrors Mintlify's docs "try-it" row.
+ *
+ *   <TryItBar method="POST" path="/project/preview/{projectId}" />
+ *
+ * CTA is a dummy `<button>` (no fetch / playground wiring) — slot a
+ * handler in via the `onTry` prop when there's a real client. Copy
+ * writes the full "METHOD path" string to clipboard.
+ */
+
+export default function TryItBar({
+  method = 'GET',
+  path = '',
+  cta = 'Try It',
+  onTry,
+  loading = false,
+  className = '',
+  ...rest
+}) {
+  const [copied, setCopied] = useState(false);
+  const key = String(method).toLowerCase();
+
+  function copy() {
+    copyText(`${String(method).toUpperCase()} ${path}`).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+        /* silently no-op */
+      },
+    );
+  }
+
+  const cls = `velu-try-it velu-try-it--${key} ${className}`.trim();
+
+  return (
+    // Outer bar is a Cluster — the inner bordered row and the Try It
+    // button are its two children, so they wrap as a unit on narrow
+    // widths (Try It drops below the row).
+    <Cluster
+      space="var(--s-1)"
+      justify="flex-end"
+      align="center"
+      className={cls}
+      {...rest}
+    >
+      {/* Inner bordered group. The method pill + url segments live in
+          their own Cluster that wraps internally; the copy button is a
+          separate sibling pinned to the top-right (align-self:
+          flex-start) so it never drops below the wrapped path. */}
+      <div className="velu-try-it__row">
+        <Cluster
+          space="var(--s-1)"
+          align="center"
+          className="velu-try-it__endpoint"
+        >
+          <MethodBadge method={method} />
+          <ApiPath method={method} path={path} />
+        </Cluster>
+        <button
+          type="button"
+          className="velu-try-it__copy"
+          onClick={copy}
+          aria-label={copied ? 'Copied' : 'Copy endpoint'}
+          title={copied ? 'Copied' : 'Copy'}
+        >
+          {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
+        </button>
+      </div>
+      <button
+        type="button"
+        className="velu-try-it__cta"
+        onClick={onTry}
+        data-loading={loading ? 'true' : undefined}
+        disabled={loading || undefined}
+        aria-busy={loading || undefined}
+      >
+        {/* 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/Update.jsx

@@ -1,92 +1,92 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * Update — a single changelog entry.
- *
- * A changelog page is just a normal docs page that contains one or more
- * <Update> blocks; there is no special page type. Each entry renders as a
- * two-column row: a sticky left rail with the date/label pill (+ optional
- * description and tags) and a right column with the entry body (the MDX
- * children — usually `##` sub-headings and prose).
- *
- * The section gets a stable `id` derived from the label so it is linkable
- * and shows up in the table of contents. The id MUST match the slug the
- * `extract-toc` remark plugin computes for the same label (see
- * velu-cli/src/mdx-plugins/extract-toc.js → `slugifyUpdate`), so click→scroll
- * and scroll-spy line up.
- *
- * `data-update-tags` (pipe-joined) is emitted so a future tag-filter can show
- * / hide entries purely from the DOM.
- *
- * SSR-safe & presentational.
- *
- * @param {{ label?: string, date?: string, description?: string,
- *   tags?: string | string[], rss?: any, children?: React.ReactNode,
- *   className?: string }} props
- */
-export function slugifyUpdate(value) {
-  const base = String(value || '')
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-  return `update-${base || 'item'}`;
-}
-
-function toTagList(value) {
-  if (Array.isArray(value)) return value.map(String).filter(Boolean);
-  if (value == null || value === false || value === '') return [];
-  return [String(value)];
-}
-
-export default function Update({
-  label,
-  date,
-  description,
-  tags,
-  rss, // accepted for authoring parity; RSS metadata is handled at build time
-  children,
-  className = '',
-  ...rest
-}) {
-  void rss;
-  const updateLabel = String(label ?? date ?? 'Update');
-  const anchorId = slugifyUpdate(updateLabel);
-  const tagList = toTagList(tags);
-
-  return (
-    <section
-      id={anchorId}
-      data-update-label={updateLabel}
-      data-update-tags={tagList.join('|')}
-      className={`velu-update ${className}`.trim()}
-      {...rest}
-    >
-      <div className="velu-update__meta">
-        <a
-          className="velu-update__anchor"
-          href={`#${anchorId}`}
-          aria-label={`Link to ${updateLabel}`}
-        >
-          {resolveIcon('link', { size: '1em' })}
-        </a>
-        <a className="velu-update__label" href={`#${anchorId}`}>
-          {updateLabel}
-        </a>
-        {description ? (
-          <div className="velu-update__description">{String(description)}</div>
-        ) : null}
-        {tagList.length ? (
-          <div className="velu-update__tags">
-            {tagList.map((tag, i) => (
-              <span key={`${tag}-${i}`} className="velu-update__tag">
-                {tag}
-              </span>
-            ))}
-          </div>
-        ) : null}
-      </div>
-      {children ? <div className="velu-update__content">{children}</div> : null}
-    </section>
-  );
-}
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * Update — a single changelog entry.
+ *
+ * A changelog page is just a normal docs page that contains one or more
+ * <Update> blocks; there is no special page type. Each entry renders as a
+ * two-column row: a sticky left rail with the date/label pill (+ optional
+ * description and tags) and a right column with the entry body (the MDX
+ * children — usually `##` sub-headings and prose).
+ *
+ * The section gets a stable `id` derived from the label so it is linkable
+ * and shows up in the table of contents. The id MUST match the slug the
+ * `extract-toc` remark plugin computes for the same label (see
+ * velu-cli/src/mdx-plugins/extract-toc.js → `slugifyUpdate`), so click→scroll
+ * and scroll-spy line up.
+ *
+ * `data-update-tags` (pipe-joined) is emitted so a future tag-filter can show
+ * / hide entries purely from the DOM.
+ *
+ * SSR-safe & presentational.
+ *
+ * @param {{ label?: string, date?: string, description?: string,
+ *   tags?: string | string[], rss?: any, children?: React.ReactNode,
+ *   className?: string }} props
+ */
+export function slugifyUpdate(value) {
+  const base = String(value || '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return `update-${base || 'item'}`;
+}
+
+function toTagList(value) {
+  if (Array.isArray(value)) return value.map(String).filter(Boolean);
+  if (value == null || value === false || value === '') return [];
+  return [String(value)];
+}
+
+export default function Update({
+  label,
+  date,
+  description,
+  tags,
+  rss, // accepted for authoring parity; RSS metadata is handled at build time
+  children,
+  className = '',
+  ...rest
+}) {
+  void rss;
+  const updateLabel = String(label ?? date ?? 'Update');
+  const anchorId = slugifyUpdate(updateLabel);
+  const tagList = toTagList(tags);
+
+  return (
+    <section
+      id={anchorId}
+      data-update-label={updateLabel}
+      data-update-tags={tagList.join('|')}
+      className={`velu-update ${className}`.trim()}
+      {...rest}
+    >
+      <div className="velu-update__meta">
+        <a
+          className="velu-update__anchor"
+          href={`#${anchorId}`}
+          aria-label={`Link to ${updateLabel}`}
+        >
+          {resolveIcon('link', { size: '1em' })}
+        </a>
+        <a className="velu-update__label" href={`#${anchorId}`}>
+          {updateLabel}
+        </a>
+        {description ? (
+          <div className="velu-update__description">{String(description)}</div>
+        ) : null}
+        {tagList.length ? (
+          <div className="velu-update__tags">
+            {tagList.map((tag, i) => (
+              <span key={`${tag}-${i}`} className="velu-update__tag">
+                {tag}
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      {children ? <div className="velu-update__content">{children}</div> : null}
+    </section>
+  );
+}

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

@@ -1,92 +1,92 @@
-/* Accordion — all values are tokens; light/dark via [data-theme].
-   Selectors required (summary:hover, [open], chevron rotate, group
-   dividers) so this component has CSS, like sidebar.css. Namespaced. */
-
-.velu-accordion {
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  overflow: hidden; /* clip header tint + dividers to the rounded corners */
-  /* `<details>` isn't in base.css's `max-width: none` override list, so
-     it'd otherwise clamp to --measure (66ch). Opt out so the accordion
-     fills the article column. Same fix is applied to the group below. */
-  max-inline-size: none;
-  inline-size: 100%;
-}
-
-.velu-accordion__summary {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  /* matches Callout padding exactly: --s0 block, --s3 inline */
-  padding: var(--s0) var(--s3);
-  cursor: pointer;
-  list-style: none; /* removes the native disclosure triangle */
-  color: var(--text-color);
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-  /* `<summary>` isn't in base.css's `max-width: none` override list,
-     so without this it'd clamp to --measure (66ch) and the hover
-     surface would stop short of the accordion's right edge. */
-  max-inline-size: none;
-  inline-size: 100%;
-  box-sizing: border-box;
-}
-.velu-accordion__summary::-webkit-details-marker {
-  display: none;
-}
-.velu-accordion__summary:hover {
-  background: var(--surface-color);
-}
-.velu-accordion[open] > .velu-accordion__summary {
-  background: var(--surface-color);
-}
-
-.velu-accordion__chevron {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--f-body);
-  block-size: var(--f-body);
-  transition: transform 0.15s ease;
-}
-.velu-accordion[open] > .velu-accordion__summary .velu-accordion__chevron {
-  transform: rotate(90deg);
-}
-
-.velu-accordion__content {
-  /* same inline padding as the header so body text aligns under it */
-  padding: var(--s0) var(--s3);
-  border-top: var(--border-width) solid var(--border-color); /* header / content divider */
-  color: var(--text-color);
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-  /* Same reason as `__summary` above — opt out of base.css's
-     --measure cap so the divider line + content area span the full
-     accordion width. */
-  max-inline-size: none;
-  inline-size: 100%;
-  box-sizing: border-box;
-}
-
-/* Group: many items in ONE bordered box; dividers between; outer radius
-   only (children clipped by overflow:hidden). */
-.velu-accordion-group {
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  /* Group is a <div> (already covered by base.css's override), but we
-     pin it explicitly here so a future markup swap can't regress. */
-  max-inline-size: none;
-  inline-size: 100%;
-}
-.velu-accordion--in-group {
-  border: 0;
-  border-radius: 0;
-  overflow: visible;
-}
-.velu-accordion-group
-  > .velu-accordion--in-group
-  + .velu-accordion--in-group {
-  border-top: var(--border-width) solid var(--border-color);
-}
+/* Accordion — all values are tokens; light/dark via [data-theme].
+   Selectors required (summary:hover, [open], chevron rotate, group
+   dividers) so this component has CSS, like sidebar.css. Namespaced. */
+
+.velu-accordion {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden; /* clip header tint + dividers to the rounded corners */
+  /* `<details>` isn't in base.css's `max-width: none` override list, so
+     it'd otherwise clamp to --measure (66ch). Opt out so the accordion
+     fills the article column. Same fix is applied to the group below. */
+  max-inline-size: none;
+  inline-size: 100%;
+}
+
+.velu-accordion__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  /* matches Callout padding exactly: --s0 block, --s3 inline */
+  padding: var(--s0) var(--s3);
+  cursor: pointer;
+  list-style: none; /* removes the native disclosure triangle */
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+  /* `<summary>` isn't in base.css's `max-width: none` override list,
+     so without this it'd clamp to --measure (66ch) and the hover
+     surface would stop short of the accordion's right edge. */
+  max-inline-size: none;
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+.velu-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+.velu-accordion__summary:hover {
+  background: var(--surface-color);
+}
+.velu-accordion[open] > .velu-accordion__summary {
+  background: var(--surface-color);
+}
+
+.velu-accordion__chevron {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--f-body);
+  block-size: var(--f-body);
+  transition: transform 0.15s ease;
+}
+.velu-accordion[open] > .velu-accordion__summary .velu-accordion__chevron {
+  transform: rotate(90deg);
+}
+
+.velu-accordion__content {
+  /* same inline padding as the header so body text aligns under it */
+  padding: var(--s0) var(--s3);
+  border-top: var(--border-width) solid var(--border-color); /* header / content divider */
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+  /* Same reason as `__summary` above — opt out of base.css's
+     --measure cap so the divider line + content area span the full
+     accordion width. */
+  max-inline-size: none;
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+
+/* Group: many items in ONE bordered box; dividers between; outer radius
+   only (children clipped by overflow:hidden). */
+.velu-accordion-group {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  /* Group is a <div> (already covered by base.css's override), but we
+     pin it explicitly here so a future markup swap can't regress. */
+  max-inline-size: none;
+  inline-size: 100%;
+}
+.velu-accordion--in-group {
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+.velu-accordion-group
+  > .velu-accordion--in-group
+  + .velu-accordion--in-group {
+  border-top: var(--border-width) solid var(--border-color);
+}