@veluai/velu 0.1.13 → 0.1.14

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

@@ -1,121 +1,121 @@
-import React 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,
-  onSend,
-  onClose,
-  aside,
-  children,
-  className = '',
-  ...rest
-}) {
-  const key = String(method).toLowerCase();
-  const cls = `velu-api-client velu-api-client--${key} ${className}`.trim();
-
-  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">
-          <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>
-        </div>
-        <TryItBar
-          method={method}
-          path={path}
-          cta="Send"
-          onTry={onSend}
-          className="velu-api-client__bar"
-        />
-      </Cluster>
-
-      {/* Two-column body — left: request sections, right: response /
-          code panels. */}
-      <div className="velu-api-client__body">
-        <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>
-        {aside != null && (
-          <div className="velu-api-client__right">{aside}</div>
-        )}
-      </div>
-    </div>
-  );
-}
+import React 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,
+  onSend,
+  onClose,
+  aside,
+  children,
+  className = '',
+  ...rest
+}) {
+  const key = String(method).toLowerCase();
+  const cls = `velu-api-client velu-api-client--${key} ${className}`.trim();
+
+  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">
+          <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>
+        </div>
+        <TryItBar
+          method={method}
+          path={path}
+          cta="Send"
+          onTry={onSend}
+          className="velu-api-client__bar"
+        />
+      </Cluster>
+
+      {/* Two-column body — left: request sections, right: response /
+          code panels. */}
+      <div className="velu-api-client__body">
+        <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>
+        {aside != null && (
+          <div className="velu-api-client__right">{aside}</div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,87 +1,87 @@
-import React, { useId } from 'react';
-import Cluster from '../primitives/Cluster.jsx';
-
-/**
- * ApiField — an input-bearing field for the ApiClient playground.
- *
- * Distinct from <Field> (which is doc-only — it documents a parameter
- * but has no control). ApiField renders a real <input> the user types
- * a value into when trying an endpoint.
- *
- *   <ApiSection title="Path">
- *     <ApiField name="projectId" type="string" required>
- *       Your project ID. Copy it from the API keys page.
- *     </ApiField>
- *   </ApiSection>
- *
- * Layout — a flex-wrap pair:
- *   [ name + type + required ]      [ prefix? input ]
- *   [ description … ]
- * The info column (label + description) and the control column wrap
- * onto separate lines on narrow widths; no media queries.
- *
- *  - `name`        parameter identifier (mono, accent)
- *  - `type`        schema type → grey chip ("string", "boolean", …)
- *  - `required`    boolean → red "required" pill
- *  - `default`     pre-fills the input's value
- *  - `prefix`      static text shown inside the input before the field
- *                  (e.g. "Bearer" for an Authorization header)
- *  - `placeholder` input placeholder (defaults to `enter <name>`)
- *  - `value`/`onChange`  optional controlled-input wiring; uncontrolled
- *                  otherwise
- *  - `children`    description block
- */
-
-export default function ApiField({
-  name,
-  type,
-  required = false,
-  default: defaultValue,
-  prefix,
-  placeholder,
-  value,
-  onChange,
-  children,
-  className = '',
-  ...rest
-}) {
-  const inputId = useId();
-  const controlled = value !== undefined;
-  return (
-    <div className={`velu-api-field ${className}`.trim()} {...rest}>
-      <div className="velu-api-field__info">
-        <Cluster space="var(--s-1)" align="baseline">
-          <label className="velu-api-field__name" htmlFor={inputId}>
-            {name}
-          </label>
-          {type != null && (
-            <span className="velu-api-field__chip">{type}</span>
-          )}
-          {required && (
-            <span className="velu-api-field__required">required</span>
-          )}
-        </Cluster>
-        {children != null && children !== false && (
-          <div className="velu-api-field__desc">{children}</div>
-        )}
-      </div>
-      <div className="velu-api-field__control">
-        {prefix != null && (
-          <span className="velu-api-field__prefix">{prefix}</span>
-        )}
-        <input
-          id={inputId}
-          className="velu-api-field__input"
-          type="text"
-          placeholder={placeholder ?? `enter ${name}`}
-          {...(controlled
-            ? { value, onChange }
-            : {
-                defaultValue:
-                  defaultValue != null ? String(defaultValue) : undefined,
-              })}
-        />
-      </div>
-    </div>
-  );
-}
+import React, { useId } from 'react';
+import Cluster from '../primitives/Cluster.jsx';
+
+/**
+ * ApiField — an input-bearing field for the ApiClient playground.
+ *
+ * Distinct from <Field> (which is doc-only — it documents a parameter
+ * but has no control). ApiField renders a real <input> the user types
+ * a value into when trying an endpoint.
+ *
+ *   <ApiSection title="Path">
+ *     <ApiField name="projectId" type="string" required>
+ *       Your project ID. Copy it from the API keys page.
+ *     </ApiField>
+ *   </ApiSection>
+ *
+ * Layout — a flex-wrap pair:
+ *   [ name + type + required ]      [ prefix? input ]
+ *   [ description … ]
+ * The info column (label + description) and the control column wrap
+ * onto separate lines on narrow widths; no media queries.
+ *
+ *  - `name`        parameter identifier (mono, accent)
+ *  - `type`        schema type → grey chip ("string", "boolean", …)
+ *  - `required`    boolean → red "required" pill
+ *  - `default`     pre-fills the input's value
+ *  - `prefix`      static text shown inside the input before the field
+ *                  (e.g. "Bearer" for an Authorization header)
+ *  - `placeholder` input placeholder (defaults to `enter <name>`)
+ *  - `value`/`onChange`  optional controlled-input wiring; uncontrolled
+ *                  otherwise
+ *  - `children`    description block
+ */
+
+export default function ApiField({
+  name,
+  type,
+  required = false,
+  default: defaultValue,
+  prefix,
+  placeholder,
+  value,
+  onChange,
+  children,
+  className = '',
+  ...rest
+}) {
+  const inputId = useId();
+  const controlled = value !== undefined;
+  return (
+    <div className={`velu-api-field ${className}`.trim()} {...rest}>
+      <div className="velu-api-field__info">
+        <Cluster space="var(--s-1)" align="baseline">
+          <label className="velu-api-field__name" htmlFor={inputId}>
+            {name}
+          </label>
+          {type != null && (
+            <span className="velu-api-field__chip">{type}</span>
+          )}
+          {required && (
+            <span className="velu-api-field__required">required</span>
+          )}
+        </Cluster>
+        {children != null && children !== false && (
+          <div className="velu-api-field__desc">{children}</div>
+        )}
+      </div>
+      <div className="velu-api-field__control">
+        {prefix != null && (
+          <span className="velu-api-field__prefix">{prefix}</span>
+        )}
+        <input
+          id={inputId}
+          className="velu-api-field__input"
+          type="text"
+          placeholder={placeholder ?? `enter ${name}`}
+          {...(controlled
+            ? { value, onChange }
+            : {
+                defaultValue:
+                  defaultValue != null ? String(defaultValue) : undefined,
+              })}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -1,63 +1,63 @@
-import React from 'react';
-import Cluster from '../primitives/Cluster.jsx';
-
-/**
- * ApiPath — monospace URL path renderer. The path is split into two
- * kinds of segments and laid out via <Cluster>:
- *
- *  - hardcoded segment   the static chunks ("/project/preview/")
- *  - dynamic segment     the {param} placeholders (rendered as
- *                        method-tinted pills)
- *
- *   <ApiPath method="POST" path="/project/preview/{projectId}" />
- *   → [ "/project/preview/" ] [ {projectId} ]
- *
- * Hardcoded chunks stay intact (never break mid-text), so narrow widths
- * wrap between segments rather than mid-word. Dynamic pills wrap to a
- * new line as a unit.
- */
-
-const METHODS = ['get', 'post', 'put', 'patch', 'delete'];
-
-export default function ApiPath({
-  method = 'GET',
-  path = '',
-  className = '',
-  ...rest
-}) {
-  const key = String(method).toLowerCase();
-  const safe = METHODS.includes(key) ? key : 'get';
-
-  // Split only on {param} groups — keep the hardcoded text between
-  // params as single segments so narrow-width wrapping breaks at the
-  // segment boundary, never mid-word.
-  const tokens = String(path).split(/(\{[^}]+\})/).filter(Boolean);
-
-  return (
-    <Cluster
-      as="span"
-      space="var(--s-2)"
-      align="center"
-      className={`velu-api-path ${className}`.trim()}
-      {...rest}
-    >
-      {tokens.map((tok, i) => {
-        if (tok.startsWith('{') && tok.endsWith('}')) {
-          return (
-            <span
-              key={i}
-              className={`velu-api-path__param velu-api-path__param--${safe}`}
-            >
-              {tok}
-            </span>
-          );
-        }
-        return (
-          <span key={i} className="velu-api-path__segment">
-            {tok}
-          </span>
-        );
-      })}
-    </Cluster>
-  );
-}
+import React from 'react';
+import Cluster from '../primitives/Cluster.jsx';
+
+/**
+ * ApiPath — monospace URL path renderer. The path is split into two
+ * kinds of segments and laid out via <Cluster>:
+ *
+ *  - hardcoded segment   the static chunks ("/project/preview/")
+ *  - dynamic segment     the {param} placeholders (rendered as
+ *                        method-tinted pills)
+ *
+ *   <ApiPath method="POST" path="/project/preview/{projectId}" />
+ *   → [ "/project/preview/" ] [ {projectId} ]
+ *
+ * Hardcoded chunks stay intact (never break mid-text), so narrow widths
+ * wrap between segments rather than mid-word. Dynamic pills wrap to a
+ * new line as a unit.
+ */
+
+const METHODS = ['get', 'post', 'put', 'patch', 'delete'];
+
+export default function ApiPath({
+  method = 'GET',
+  path = '',
+  className = '',
+  ...rest
+}) {
+  const key = String(method).toLowerCase();
+  const safe = METHODS.includes(key) ? key : 'get';
+
+  // Split only on {param} groups — keep the hardcoded text between
+  // params as single segments so narrow-width wrapping breaks at the
+  // segment boundary, never mid-word.
+  const tokens = String(path).split(/(\{[^}]+\})/).filter(Boolean);
+
+  return (
+    <Cluster
+      as="span"
+      space="var(--s-2)"
+      align="center"
+      className={`velu-api-path ${className}`.trim()}
+      {...rest}
+    >
+      {tokens.map((tok, i) => {
+        if (tok.startsWith('{') && tok.endsWith('}')) {
+          return (
+            <span
+              key={i}
+              className={`velu-api-path__param velu-api-path__param--${safe}`}
+            >
+              {tok}
+            </span>
+          );
+        }
+        return (
+          <span key={i} className="velu-api-path__segment">
+            {tok}
+          </span>
+        );
+      })}
+    </Cluster>
+  );
+}