@veluai/velu 0.2.25 → 0.2.28

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

@@ -1,36 +1,36 @@
-import React from 'react';
-import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
-
-/**
- * ApiSamples — the right-rail of an API reference page: the request code
- * snippets (curl / JS / Python / Ruby tabs) and the example responses
- * (one tab per status). The runtime renders this in the page's right aside
- * (where the TOC sits for normal pages).
- *
- * @param {{ samples: {key,label,language,code}[], responses: object[] }} props
- */
-export default function ApiSamples({ samples = [], responses = [] }) {
-  const withExample = responses.filter((r) => r.example != null);
-  return (
-    <div className="velu-api-samples">
-      {samples.length > 0 && (
-        <CodeGroup className="velu-api-samples__req">
-          {samples.map((s) => (
-            <CodeBlock key={s.key} title={s.label} language={s.language}>
-              {s.code}
-            </CodeBlock>
-          ))}
-        </CodeGroup>
-      )}
-      {withExample.length > 0 && (
-        <CodeGroup className="velu-api-samples__res">
-          {withExample.map((r) => (
-            <CodeBlock key={r.status} title={r.status} language="json">
-              {JSON.stringify(r.example, null, 2)}
-            </CodeBlock>
-          ))}
-        </CodeGroup>
-      )}
-    </div>
-  );
-}
+import React from 'react';
+import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
+
+/**
+ * ApiSamples — the right-rail of an API reference page: the request code
+ * snippets (curl / JS / Python / Ruby tabs) and the example responses
+ * (one tab per status). The runtime renders this in the page's right aside
+ * (where the TOC sits for normal pages).
+ *
+ * @param {{ samples: {key,label,language,code}[], responses: object[] }} props
+ */
+export default function ApiSamples({ samples = [], responses = [] }) {
+  const withExample = responses.filter((r) => r.example != null);
+  return (
+    <div className="velu-api-samples">
+      {samples.length > 0 && (
+        <CodeGroup className="velu-api-samples__req">
+          {samples.map((s) => (
+            <CodeBlock key={s.key} title={s.label} language={s.language}>
+              {s.code}
+            </CodeBlock>
+          ))}
+        </CodeGroup>
+      )}
+      {withExample.length > 0 && (
+        <CodeGroup className="velu-api-samples__res">
+          {withExample.map((r) => (
+            <CodeBlock key={r.status} title={r.status} language="json">
+              {JSON.stringify(r.example, null, 2)}
+            </CodeBlock>
+          ))}
+        </CodeGroup>
+      )}
+    </div>
+  );
+}

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

@@ -1,125 +1,125 @@
-import React from 'react';
-import Stack from '../primitives/Stack.jsx';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import MethodBadge from './MethodBadge.jsx';
-
-/**
- * ApiSidebar — navigation for API reference pages. Like <Sidebar> but
- * flat (no nested folders): every entry is a single endpoint shown as
- * a method pill + name. Entries are organized into groups, each with
- * an optional icon.
- *
- *   <ApiSidebar
- *     activeHref="/api/trigger"
- *     linkComponent={RouterLink}
- *     sections={[
- *       {
- *         title: 'Admin',
- *         icon: 'rocket',
- *         endpoints: [
- *           { method: 'POST',   label: 'Trigger', href: '/api/trigger' },
- *           { method: 'GET',    label: 'Get deployment-status',
- *             href: '/api/status' },
- *           { method: 'DELETE', label: 'Trigger Preview deployment',
- *             href: '/api/preview' },
- *         ],
- *       },
- *     ]}
- *   />
- *
- * Vertical rhythm = the Stack primitive (DRY, same as <Sidebar>);
- * api.css holds only the rail / active state / row layout / icon size.
- * Selection is route-driven (`endpoint.href === activeHref`, or
- * `endpoint.active: true`). Router-agnostic via `linkComponent`.
- *
- * @typedef {Object} ApiEndpoint
- * @property {string} method   HTTP method — drives the MethodBadge color
- * @property {string} label    endpoint display name
- * @property {string} [href]
- * @property {boolean} [active]
- *
- * @param {{ sections: { title?: string, icon?: string|React.ReactNode,
- *           endpoints: ApiEndpoint[] }[], activeHref?: string,
- *           linkComponent?: React.ElementType, className?: string }} props
- */
-
-const Ctx = React.createContext({ activeHref: undefined, Link: 'a' });
-
-function Icon({ icon }) {
-  const node = resolveIcon(icon);
-  return node ? (
-    <span className="velu-api-sidebar__icon" aria-hidden="true">
-      {node}
-    </span>
-  ) : null;
-}
-
-function Endpoint({ endpoint }) {
-  const { activeHref, Link } = React.useContext(Ctx);
-  const { method, label, href = '#', active, icon } = endpoint;
-  const isActive = Boolean(
-    active || (href != null && href === activeHref),
-  );
-  const cls = `velu-api-sidebar__item${
-    isActive ? ' velu-api-sidebar__item--active' : ''
-  }`;
-  // A plain page sitting in an API tab (e.g. an "Introduction") has no HTTP
-  // method — show its icon (if any) where the method pill would be, never a
-  // stray badge.
-  return (
-    <li>
-      <Link
-        className={cls}
-        href={href}
-        aria-current={isActive ? 'page' : undefined}
-      >
-        {method ? <MethodBadge method={method} /> : <Icon icon={icon} />}
-        <span className="velu-api-sidebar__label">{label}</span>
-      </Link>
-    </li>
-  );
-}
-
-export default function ApiSidebar({
-  sections = [],
-  activeHref,
-  linkComponent = 'a',
-  className = '',
-  ...rest
-}) {
-  const ctx = React.useMemo(
-    () => ({ activeHref, Link: linkComponent }),
-    [activeHref, linkComponent],
-  );
-  return (
-    <Ctx.Provider value={ctx}>
-      <Stack
-        as="nav"
-        space="var(--s1)"
-        className={`velu-api-sidebar ${className}`.trim()}
-        aria-label="API reference"
-        {...rest}
-      >
-        {sections.map((section, i) => (
-          <React.Fragment key={i}>
-            {section.title != null && (
-              <h5 className="velu-api-sidebar__section">
-                <Icon icon={section.icon} />
-                {section.title}
-              </h5>
-            )}
-            <Stack
-              as="ul"
-              space="var(--s0)"
-              className="velu-api-sidebar__list"
-            >
-              {(section.endpoints ?? []).map((ep, j) => (
-                <Endpoint key={j} endpoint={ep} />
-              ))}
-            </Stack>
-          </React.Fragment>
-        ))}
-      </Stack>
-    </Ctx.Provider>
-  );
-}
+import React from 'react';
+import Stack from '../primitives/Stack.jsx';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import MethodBadge from './MethodBadge.jsx';
+
+/**
+ * ApiSidebar — navigation for API reference pages. Like <Sidebar> but
+ * flat (no nested folders): every entry is a single endpoint shown as
+ * a method pill + name. Entries are organized into groups, each with
+ * an optional icon.
+ *
+ *   <ApiSidebar
+ *     activeHref="/api/trigger"
+ *     linkComponent={RouterLink}
+ *     sections={[
+ *       {
+ *         title: 'Admin',
+ *         icon: 'rocket',
+ *         endpoints: [
+ *           { method: 'POST',   label: 'Trigger', href: '/api/trigger' },
+ *           { method: 'GET',    label: 'Get deployment-status',
+ *             href: '/api/status' },
+ *           { method: 'DELETE', label: 'Trigger Preview deployment',
+ *             href: '/api/preview' },
+ *         ],
+ *       },
+ *     ]}
+ *   />
+ *
+ * Vertical rhythm = the Stack primitive (DRY, same as <Sidebar>);
+ * api.css holds only the rail / active state / row layout / icon size.
+ * Selection is route-driven (`endpoint.href === activeHref`, or
+ * `endpoint.active: true`). Router-agnostic via `linkComponent`.
+ *
+ * @typedef {Object} ApiEndpoint
+ * @property {string} method   HTTP method — drives the MethodBadge color
+ * @property {string} label    endpoint display name
+ * @property {string} [href]
+ * @property {boolean} [active]
+ *
+ * @param {{ sections: { title?: string, icon?: string|React.ReactNode,
+ *           endpoints: ApiEndpoint[] }[], activeHref?: string,
+ *           linkComponent?: React.ElementType, className?: string }} props
+ */
+
+const Ctx = React.createContext({ activeHref: undefined, Link: 'a' });
+
+function Icon({ icon }) {
+  const node = resolveIcon(icon);
+  return node ? (
+    <span className="velu-api-sidebar__icon" aria-hidden="true">
+      {node}
+    </span>
+  ) : null;
+}
+
+function Endpoint({ endpoint }) {
+  const { activeHref, Link } = React.useContext(Ctx);
+  const { method, label, href = '#', active, icon } = endpoint;
+  const isActive = Boolean(
+    active || (href != null && href === activeHref),
+  );
+  const cls = `velu-api-sidebar__item${
+    isActive ? ' velu-api-sidebar__item--active' : ''
+  }`;
+  // A plain page sitting in an API tab (e.g. an "Introduction") has no HTTP
+  // method — show its icon (if any) where the method pill would be, never a
+  // stray badge.
+  return (
+    <li>
+      <Link
+        className={cls}
+        href={href}
+        aria-current={isActive ? 'page' : undefined}
+      >
+        {method ? <MethodBadge method={method} /> : <Icon icon={icon} />}
+        <span className="velu-api-sidebar__label">{label}</span>
+      </Link>
+    </li>
+  );
+}
+
+export default function ApiSidebar({
+  sections = [],
+  activeHref,
+  linkComponent = 'a',
+  className = '',
+  ...rest
+}) {
+  const ctx = React.useMemo(
+    () => ({ activeHref, Link: linkComponent }),
+    [activeHref, linkComponent],
+  );
+  return (
+    <Ctx.Provider value={ctx}>
+      <Stack
+        as="nav"
+        space="var(--s1)"
+        className={`velu-api-sidebar ${className}`.trim()}
+        aria-label="API reference"
+        {...rest}
+      >
+        {sections.map((section, i) => (
+          <React.Fragment key={i}>
+            {section.title != null && (
+              <h5 className="velu-api-sidebar__section">
+                <Icon icon={section.icon} />
+                {section.title}
+              </h5>
+            )}
+            <Stack
+              as="ul"
+              space="var(--s0)"
+              className="velu-api-sidebar__list"
+            >
+              {(section.endpoints ?? []).map((ep, j) => (
+                <Endpoint key={j} endpoint={ep} />
+              ))}
+            </Stack>
+          </React.Fragment>
+        ))}
+      </Stack>
+    </Ctx.Provider>
+  );
+}

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

@@ -1,71 +1,71 @@
-import React, { useState } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * AskBar — an "ask a question" input card.
- *
- *   <AskBar onSubmit={(q) => …} />
- *
- * The component owns only the card visuals (border, glow-on-focus,
- * multi-line input, circular send button). PLACEMENT is the consumer's
- * job — the docs page pins it `position: absolute` to the bottom of
- * the article column so content scrolls behind its opaque surface.
- *
- *  - `placeholder` input placeholder (default "Ask a question…")
- *  - `onSubmit(value)` fired on the send button or Enter (Shift+Enter
- *    inserts a newline). Dummy-friendly — omit it and the bar is inert.
- *
- * The send affordance is a circular accent button with an up-arrow;
- * the card border glows in the accent color while the input is focused.
- */
-
-export default function AskBar({
-  placeholder = 'Ask a question…',
-  onSubmit,
-  className = '',
-  ...rest
-}) {
-  const [value, setValue] = useState('');
-
-  function submit() {
-    const q = value.trim();
-    if (!q) return;
-    onSubmit?.(q);
-    setValue('');
-  }
-
-  function onKeyDown(e) {
-    // Enter sends; Shift+Enter inserts a newline.
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      submit();
-    }
-  }
-
-  // Disable the send button until there's non-whitespace input. The
-  // CSS reads :disabled to render it muted + un-hoverable; React reads
-  // the attribute to short-circuit clicks too.
-  const isEmpty = value.trim().length === 0;
-
-  return (
-    <div className={`velu-ask-bar ${className}`.trim()} {...rest}>
-      <textarea
-        className="velu-ask-bar__input"
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={onKeyDown}
-        rows={2}
-      />
-      <button
-        type="button"
-        className="velu-ask-bar__send"
-        onClick={submit}
-        disabled={isEmpty}
-        aria-label="Ask"
-      >
-        {resolveIcon('arrow-up', { size: '1em' })}
-      </button>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * AskBar — an "ask a question" input card.
+ *
+ *   <AskBar onSubmit={(q) => …} />
+ *
+ * The component owns only the card visuals (border, glow-on-focus,
+ * multi-line input, circular send button). PLACEMENT is the consumer's
+ * job — the docs page pins it `position: absolute` to the bottom of
+ * the article column so content scrolls behind its opaque surface.
+ *
+ *  - `placeholder` input placeholder (default "Ask a question…")
+ *  - `onSubmit(value)` fired on the send button or Enter (Shift+Enter
+ *    inserts a newline). Dummy-friendly — omit it and the bar is inert.
+ *
+ * The send affordance is a circular accent button with an up-arrow;
+ * the card border glows in the accent color while the input is focused.
+ */
+
+export default function AskBar({
+  placeholder = 'Ask a question…',
+  onSubmit,
+  className = '',
+  ...rest
+}) {
+  const [value, setValue] = useState('');
+
+  function submit() {
+    const q = value.trim();
+    if (!q) return;
+    onSubmit?.(q);
+    setValue('');
+  }
+
+  function onKeyDown(e) {
+    // Enter sends; Shift+Enter inserts a newline.
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  // Disable the send button until there's non-whitespace input. The
+  // CSS reads :disabled to render it muted + un-hoverable; React reads
+  // the attribute to short-circuit clicks too.
+  const isEmpty = value.trim().length === 0;
+
+  return (
+    <div className={`velu-ask-bar ${className}`.trim()} {...rest}>
+      <textarea
+        className="velu-ask-bar__input"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={onKeyDown}
+        rows={2}
+      />
+      <button
+        type="button"
+        className="velu-ask-bar__send"
+        onClick={submit}
+        disabled={isEmpty}
+        aria-label="Ask"
+      >
+        {resolveIcon('arrow-up', { size: '1em' })}
+      </button>
+    </div>
+  );
+}