@veluai/velu 0.2.13 → 0.2.15

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