@veluai/velu 0.2.13 → 0.2.15

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/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);
+}