@veluai/velu 0.2.13 → 0.2.15

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

@@ -1,64 +1,64 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * Accordion + AccordionGroup — collapsible disclosure.
- *
- * Native <details>/<summary>: zero JS, SSR-safe, accessible, chevron rotates
- * via CSS on [open] (same pattern as Sidebar). Fully tokenized — border /
- * hover / expanded surface / radius / spacing / type all from base.css
- * tokens, so light + dark theme automatically via [data-theme].
- *
- * - <Accordion title=… defaultOpen?>content</Accordion> — standalone bordered
- *   rounded box.
- * - <AccordionGroup><Accordion/>…</AccordionGroup> — items joined into ONE
- *   bordered box with dividers between them (no per-item border/radius). A
- *   context tells nested Accordions they're grouped so they drop their own
- *   chrome; the group container owns the border + radius + dividers.
- *
- * @param {{ title: React.ReactNode, defaultOpen?: boolean,
- *   children: React.ReactNode, className?: string }} props
- */
-
-const GroupCtx = React.createContext(false);
-
-export function Accordion({
-  title,
-  defaultOpen = false,
-  children,
-  className = '',
-  ...rest
-}) {
-  const inGroup = React.useContext(GroupCtx);
-  const cls = [
-    'velu-accordion',
-    inGroup ? 'velu-accordion--in-group' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <details className={cls} open={defaultOpen || undefined} {...rest}>
-      <summary className="velu-accordion__summary">
-        <span className="velu-accordion__chevron" aria-hidden="true">
-          {resolveIcon('chevron-right', { size: '1em' })}
-        </span>
-        <span className="velu-accordion__title">{title}</span>
-      </summary>
-      <div className="velu-accordion__content">{children}</div>
-    </details>
-  );
-}
-
-export function AccordionGroup({ children, className = '', ...rest }) {
-  return (
-    <GroupCtx.Provider value={true}>
-      <div className={`velu-accordion-group ${className}`.trim()} {...rest}>
-        {children}
-      </div>
-    </GroupCtx.Provider>
-  );
-}
-
-export default Accordion;
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * Accordion + AccordionGroup — collapsible disclosure.
+ *
+ * Native <details>/<summary>: zero JS, SSR-safe, accessible, chevron rotates
+ * via CSS on [open] (same pattern as Sidebar). Fully tokenized — border /
+ * hover / expanded surface / radius / spacing / type all from base.css
+ * tokens, so light + dark theme automatically via [data-theme].
+ *
+ * - <Accordion title=… defaultOpen?>content</Accordion> — standalone bordered
+ *   rounded box.
+ * - <AccordionGroup><Accordion/>…</AccordionGroup> — items joined into ONE
+ *   bordered box with dividers between them (no per-item border/radius). A
+ *   context tells nested Accordions they're grouped so they drop their own
+ *   chrome; the group container owns the border + radius + dividers.
+ *
+ * @param {{ title: React.ReactNode, defaultOpen?: boolean,
+ *   children: React.ReactNode, className?: string }} props
+ */
+
+const GroupCtx = React.createContext(false);
+
+export function Accordion({
+  title,
+  defaultOpen = false,
+  children,
+  className = '',
+  ...rest
+}) {
+  const inGroup = React.useContext(GroupCtx);
+  const cls = [
+    'velu-accordion',
+    inGroup ? 'velu-accordion--in-group' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <details className={cls} open={defaultOpen || undefined} {...rest}>
+      <summary className="velu-accordion__summary">
+        <span className="velu-accordion__chevron" aria-hidden="true">
+          {resolveIcon('chevron-right', { size: '1em' })}
+        </span>
+        <span className="velu-accordion__title">{title}</span>
+      </summary>
+      <div className="velu-accordion__content">{children}</div>
+    </details>
+  );
+}
+
+export function AccordionGroup({ children, className = '', ...rest }) {
+  return (
+    <GroupCtx.Provider value={true}>
+      <div className={`velu-accordion-group ${className}`.trim()} {...rest}>
+        {children}
+      </div>
+    </GroupCtx.Provider>
+  );
+}
+
+export default Accordion;

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

@@ -1,207 +1,207 @@
-import React, { useState, useRef, useEffect } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-import MethodBadge from './MethodBadge.jsx';
-import TryItBar from './TryItBar.jsx';
-
-/**
- * ApiClient — the "try-it" playground layout shell.
- *
- *   <ApiClient
- *     method="DELETE"
- *     label="Trigger Delete"
- *     path="/project/preview/{projectId}"
- *     description="Trigger a documentation deployment…"
- *     onClose={() => …}
- *     aside={
- *       <CodeGroup>…response / samples / examples…</CodeGroup>
- *     }
- *   >
- *     <AccordionGroup>
- *       <Accordion title="Authorization">
- *         <ApiField name="Authorization" type="string" required
- *                   prefix="Bearer" />
- *       </Accordion>
- *       <Accordion title="Path">
- *         <ApiField name="projectId" type="string" required />
- *       </Accordion>
- *     </AccordionGroup>
- *   </ApiClient>
- *
- * ApiClient is a pure layout shell — it owns the frame, the close
- * button, the operation/endpoint head row, and the two-column body.
- * It does NOT re-implement collapsibles or code panels:
- *
- *  - LEFT column  = `children` — compose the request sections with the
- *    shared <Accordion> / <AccordionGroup> + <ApiField>.
- *  - RIGHT column = `aside`    — compose the response / code-sample
- *    panels with the shared <CodeBlock> / <CodeGroup>.
- *
- * CTAs (Send, the operation dropdown) are presentational stubs — wire
- * `onSend` / a real selector when the OpenAPI adapter lands.
- */
-
-export default function ApiClient({
-  method = 'GET',
-  label,
-  path = '',
-  description,
-  operations = [],
-  activeId,
-  onSelectOperation,
-  onSend,
-  sending = false,
-  onClose,
-  response,
-  aside,
-  children,
-  className = '',
-  ...rest
-}) {
-  const key = String(method).toLowerCase();
-  const cls = `velu-api-client velu-api-client--${key} ${className}`.trim();
-
-  // The operation dropdown is interactive only when there's more than one
-  // operation to switch between and a handler to call.
-  const canSwitch =
-    Array.isArray(operations) && operations.length > 1 && typeof onSelectOperation === 'function';
-  const [menuOpen, setMenuOpen] = useState(false);
-  const opRef = useRef(null);
-
-  useEffect(() => {
-    if (!menuOpen) return undefined;
-    const onDown = (e) => {
-      if (opRef.current && !opRef.current.contains(e.target)) setMenuOpen(false);
-    };
-    const onKey = (e) => {
-      if (e.key === 'Escape') setMenuOpen(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [menuOpen]);
-
-  return (
-    <div className={cls} {...rest}>
-      {/* Close button row — only when shown as a modal (onClose set). */}
-      {onClose && (
-        <div className="velu-api-client__close-row">
-          <button
-            type="button"
-            className="velu-api-client__close"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            {resolveIcon('x', { size: '1em' })}
-          </button>
-        </div>
-      )}
-
-      {/* Head — operation dropdown (dummy) + TryItBar relabeled "Send".
-          Cluster keeps each at its natural width: the dropdown hugs its
-          text (flex: none), the bar fills the rest (flex: 1). When the
-          bar can't keep its min width, Cluster wraps it below the
-          dropdown. */}
-      <Cluster
-        space="var(--s-1)"
-        align="flex-start"
-        className="velu-api-client__head"
-      >
-        <div className="velu-api-client__op" ref={opRef}>
-          {canSwitch ? (
-            <button
-              type="button"
-              className="velu-api-client__op-btn"
-              onClick={() => setMenuOpen((v) => !v)}
-              aria-haspopup="listbox"
-              aria-expanded={menuOpen}
-            >
-              <MethodBadge method={method} />
-              {label && (
-                <span className="velu-api-client__op-label">{label}</span>
-              )}
-              <span className="velu-api-client__op-chevron" aria-hidden="true">
-                {resolveIcon('chevron-down', { size: '1em' })}
-              </span>
-            </button>
-          ) : (
-            <>
-              <MethodBadge method={method} />
-              {label && (
-                <span className="velu-api-client__op-label">{label}</span>
-              )}
-              <span className="velu-api-client__op-chevron" aria-hidden="true">
-                {resolveIcon('chevron-down', { size: '1em' })}
-              </span>
-            </>
-          )}
-          {canSwitch && menuOpen && (
-            <ul
-              className="velu-api-client__op-menu velu-hide-scrollbar"
-              role="listbox"
-            >
-              {operations.map((o) => (
-                <li key={o.id}>
-                  <button
-                    type="button"
-                    role="option"
-                    aria-selected={o.id === activeId}
-                    className={`velu-api-client__op-item${
-                      o.id === activeId ? ' velu-api-client__op-item--active' : ''
-                    }`}
-                    onClick={() => {
-                      onSelectOperation(o.id);
-                      setMenuOpen(false);
-                    }}
-                  >
-                    <MethodBadge method={o.method} />
-                    <span className="velu-api-client__op-item-label">
-                      {o.title}
-                    </span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-        <TryItBar
-          method={method}
-          path={path}
-          cta="Send"
-          onTry={onSend}
-          loading={sending}
-          className="velu-api-client__bar"
-        />
-      </Cluster>
-
-      {/* Body grid (areas: form / response / aside). Desktop: form fills the
-          left column, response + aside stack in the right. Mobile (single
-          column): the live response moves ABOVE the form so a Send result is
-          visible without scrolling past the inputs; the form and code samples
-          follow. See api.css. */}
-      <div
-        className="velu-api-client__body"
-        data-has-response={response != null ? 'true' : undefined}
-      >
-        <div className="velu-api-client__left">
-          {label && (
-            <h3 className="velu-api-client__title">{label}</h3>
-          )}
-          {description && (
-            <p className="velu-api-client__description">{description}</p>
-          )}
-          {children}
-        </div>
-        {response != null && (
-          <div className="velu-api-client__response">{response}</div>
-        )}
-        {aside != null && (
-          <div className="velu-api-client__right">{aside}</div>
-        )}
-      </div>
-    </div>
-  );
-}
+import React, { useState, useRef, useEffect } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+import MethodBadge from './MethodBadge.jsx';
+import TryItBar from './TryItBar.jsx';
+
+/**
+ * ApiClient — the "try-it" playground layout shell.
+ *
+ *   <ApiClient
+ *     method="DELETE"
+ *     label="Trigger Delete"
+ *     path="/project/preview/{projectId}"
+ *     description="Trigger a documentation deployment…"
+ *     onClose={() => …}
+ *     aside={
+ *       <CodeGroup>…response / samples / examples…</CodeGroup>
+ *     }
+ *   >
+ *     <AccordionGroup>
+ *       <Accordion title="Authorization">
+ *         <ApiField name="Authorization" type="string" required
+ *                   prefix="Bearer" />
+ *       </Accordion>
+ *       <Accordion title="Path">
+ *         <ApiField name="projectId" type="string" required />
+ *       </Accordion>
+ *     </AccordionGroup>
+ *   </ApiClient>
+ *
+ * ApiClient is a pure layout shell — it owns the frame, the close
+ * button, the operation/endpoint head row, and the two-column body.
+ * It does NOT re-implement collapsibles or code panels:
+ *
+ *  - LEFT column  = `children` — compose the request sections with the
+ *    shared <Accordion> / <AccordionGroup> + <ApiField>.
+ *  - RIGHT column = `aside`    — compose the response / code-sample
+ *    panels with the shared <CodeBlock> / <CodeGroup>.
+ *
+ * CTAs (Send, the operation dropdown) are presentational stubs — wire
+ * `onSend` / a real selector when the OpenAPI adapter lands.
+ */
+
+export default function ApiClient({
+  method = 'GET',
+  label,
+  path = '',
+  description,
+  operations = [],
+  activeId,
+  onSelectOperation,
+  onSend,
+  sending = false,
+  onClose,
+  response,
+  aside,
+  children,
+  className = '',
+  ...rest
+}) {
+  const key = String(method).toLowerCase();
+  const cls = `velu-api-client velu-api-client--${key} ${className}`.trim();
+
+  // The operation dropdown is interactive only when there's more than one
+  // operation to switch between and a handler to call.
+  const canSwitch =
+    Array.isArray(operations) && operations.length > 1 && typeof onSelectOperation === 'function';
+  const [menuOpen, setMenuOpen] = useState(false);
+  const opRef = useRef(null);
+
+  useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onDown = (e) => {
+      if (opRef.current && !opRef.current.contains(e.target)) setMenuOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  return (
+    <div className={cls} {...rest}>
+      {/* Close button row — only when shown as a modal (onClose set). */}
+      {onClose && (
+        <div className="velu-api-client__close-row">
+          <button
+            type="button"
+            className="velu-api-client__close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            {resolveIcon('x', { size: '1em' })}
+          </button>
+        </div>
+      )}
+
+      {/* Head — operation dropdown (dummy) + TryItBar relabeled "Send".
+          Cluster keeps each at its natural width: the dropdown hugs its
+          text (flex: none), the bar fills the rest (flex: 1). When the
+          bar can't keep its min width, Cluster wraps it below the
+          dropdown. */}
+      <Cluster
+        space="var(--s-1)"
+        align="flex-start"
+        className="velu-api-client__head"
+      >
+        <div className="velu-api-client__op" ref={opRef}>
+          {canSwitch ? (
+            <button
+              type="button"
+              className="velu-api-client__op-btn"
+              onClick={() => setMenuOpen((v) => !v)}
+              aria-haspopup="listbox"
+              aria-expanded={menuOpen}
+            >
+              <MethodBadge method={method} />
+              {label && (
+                <span className="velu-api-client__op-label">{label}</span>
+              )}
+              <span className="velu-api-client__op-chevron" aria-hidden="true">
+                {resolveIcon('chevron-down', { size: '1em' })}
+              </span>
+            </button>
+          ) : (
+            <>
+              <MethodBadge method={method} />
+              {label && (
+                <span className="velu-api-client__op-label">{label}</span>
+              )}
+              <span className="velu-api-client__op-chevron" aria-hidden="true">
+                {resolveIcon('chevron-down', { size: '1em' })}
+              </span>
+            </>
+          )}
+          {canSwitch && menuOpen && (
+            <ul
+              className="velu-api-client__op-menu velu-hide-scrollbar"
+              role="listbox"
+            >
+              {operations.map((o) => (
+                <li key={o.id}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={o.id === activeId}
+                    className={`velu-api-client__op-item${
+                      o.id === activeId ? ' velu-api-client__op-item--active' : ''
+                    }`}
+                    onClick={() => {
+                      onSelectOperation(o.id);
+                      setMenuOpen(false);
+                    }}
+                  >
+                    <MethodBadge method={o.method} />
+                    <span className="velu-api-client__op-item-label">
+                      {o.title}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+        <TryItBar
+          method={method}
+          path={path}
+          cta="Send"
+          onTry={onSend}
+          loading={sending}
+          className="velu-api-client__bar"
+        />
+      </Cluster>
+
+      {/* Body grid (areas: form / response / aside). Desktop: form fills the
+          left column, response + aside stack in the right. Mobile (single
+          column): the live response moves ABOVE the form so a Send result is
+          visible without scrolling past the inputs; the form and code samples
+          follow. See api.css. */}
+      <div
+        className="velu-api-client__body"
+        data-has-response={response != null ? 'true' : undefined}
+      >
+        <div className="velu-api-client__left">
+          {label && (
+            <h3 className="velu-api-client__title">{label}</h3>
+          )}
+          {description && (
+            <p className="velu-api-client__description">{description}</p>
+          )}
+          {children}
+        </div>
+        {response != null && (
+          <div className="velu-api-client__response">{response}</div>
+        )}
+        {aside != null && (
+          <div className="velu-api-client__right">{aside}</div>
+        )}
+      </div>
+    </div>
+  );
+}