@veluai/velu 0.1.13 → 0.1.14

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

@@ -1,56 +1,56 @@
-import React from 'react';
-import Switcher from '../primitives/Switcher.jsx';
-
-/**
- * Columns — generic column layout for heterogeneous content (Card,
- * Callout, CodeBlock, Image, plain JSX — anything). Thin wrapper over
- * the Switcher primitive, mirroring CardGroup's responsive pattern but
- * without coupling to any specific child component.
- *
- *  <Columns cols={2}>
- *    <Card title="A" />
- *    <CodeBlock language="js">{snippet}</CodeBlock>
- *  </Columns>
- *
- * Behavior:
- *  - `cols` (default 2) — max number of items in a row. Acts as
- *    Switcher's `limit`: passing more children than `cols` collapses
- *    the layout to a full vertical stack (matches CardGroup).
- *  - `min` — per-item minimum width (default --columns-min token, 18ch).
- *    The instant any one column would fall below `min`, all columns
- *    stack vertically. Driven by Switcher's count-aware threshold
- *    math; no media queries.
- *  - `space` — gap between items (default --s1).
- *
- * Want multiple items in a single column? Wrap them in a Stack:
- *
- *  <Columns cols={3}>
- *    <Card title="left" />
- *    <Stack>
- *      <Card title="middle top" />
- *      <Card title="middle bottom" />
- *    </Stack>
- *    <Callout>right</Callout>
- *  </Columns>
- */
-
-export default function Columns({
-  cols = 2,
-  space = 'var(--s1)',
-  min = 'var(--columns-min, 18ch)',
-  children,
-  className = '',
-  ...rest
-}) {
-  return (
-    <Switcher
-      className={`velu-columns ${className}`.trim()}
-      space={space}
-      min={min}
-      limit={cols}
-      {...rest}
-    >
-      {children}
-    </Switcher>
-  );
-}
+import React from 'react';
+import Switcher from '../primitives/Switcher.jsx';
+
+/**
+ * Columns — generic column layout for heterogeneous content (Card,
+ * Callout, CodeBlock, Image, plain JSX — anything). Thin wrapper over
+ * the Switcher primitive, mirroring CardGroup's responsive pattern but
+ * without coupling to any specific child component.
+ *
+ *  <Columns cols={2}>
+ *    <Card title="A" />
+ *    <CodeBlock language="js">{snippet}</CodeBlock>
+ *  </Columns>
+ *
+ * Behavior:
+ *  - `cols` (default 2) — max number of items in a row. Acts as
+ *    Switcher's `limit`: passing more children than `cols` collapses
+ *    the layout to a full vertical stack (matches CardGroup).
+ *  - `min` — per-item minimum width (default --columns-min token, 18ch).
+ *    The instant any one column would fall below `min`, all columns
+ *    stack vertically. Driven by Switcher's count-aware threshold
+ *    math; no media queries.
+ *  - `space` — gap between items (default --s1).
+ *
+ * Want multiple items in a single column? Wrap them in a Stack:
+ *
+ *  <Columns cols={3}>
+ *    <Card title="left" />
+ *    <Stack>
+ *      <Card title="middle top" />
+ *      <Card title="middle bottom" />
+ *    </Stack>
+ *    <Callout>right</Callout>
+ *  </Columns>
+ */
+
+export default function Columns({
+  cols = 2,
+  space = 'var(--s1)',
+  min = 'var(--columns-min, 18ch)',
+  children,
+  className = '',
+  ...rest
+}) {
+  return (
+    <Switcher
+      className={`velu-columns ${className}`.trim()}
+      space={space}
+      min={min}
+      limit={cols}
+      {...rest}
+    >
+      {children}
+    </Switcher>
+  );
+}

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

@@ -1,138 +1,138 @@
-import React from 'react';
-
-/**
- * ErrorCard — a branded, self-contained card that renders ONE Velu "issue"
- * (an MDX or velu.json problem). Used by the dev server's per-page error
- * boundary. Deliberately presentational and dependency-free (no other Velu
- * components, no effects) so it can never fail while reporting a failure.
- *
- * Styled with inline styles + design tokens (with hard fallbacks), so it looks
- * right even when the page's own CSS hasn't loaded.
- */
-const DANGER = 'var(--danger-stroke-color, #ef4444)';
-const DANGER_BG =
-  'var(--danger-bg-color, color-mix(in srgb, #ef4444 7%, transparent))';
-const MUTED = 'var(--muted-color, #6b7280)';
-const TEXT = 'var(--text-color, #111827)';
-
-export default function ErrorCard({
-  label,
-  title,
-  file,
-  line,
-  column,
-  frame,
-  detail,
-  hint,
-  suggestion,
-}) {
-  const loc = file
-    ? `${file}${line ? `:${line}${column ? `:${column}` : ''}` : ''}`
-    : null;
-
-  return (
-    <div
-      role="alert"
-      style={{
-        border: `1px solid ${DANGER}`,
-        borderRadius: 'var(--radius-md, 10px)',
-        background: DANGER_BG,
-        padding: 'var(--s2, 1rem)',
-        margin: 'var(--s2, 1rem) 0',
-        fontFamily: 'var(--font-sans, system-ui, sans-serif)',
-        color: TEXT,
-        lineHeight: 1.5,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          gap: '0.6rem',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-        }}
-      >
-        <span
-          style={{
-            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-            fontSize: 11,
-            textTransform: 'uppercase',
-            letterSpacing: '0.06em',
-            fontWeight: 600,
-            color: DANGER,
-            border: `1px solid ${DANGER}`,
-            borderRadius: 999,
-            padding: '2px 9px',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {label}
-        </span>
-      </div>
-
-      {title && (
-        <div style={{ marginTop: '0.6rem', fontWeight: 600, fontSize: '1.05rem' }}>
-          {title}
-        </div>
-      )}
-
-      {loc && (
-        <div
-          style={{
-            display: 'inline-block',
-            marginTop: '0.7rem',
-            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-            fontSize: 15,
-            fontWeight: 600,
-            letterSpacing: '0.01em',
-            color: DANGER,
-            background: 'var(--danger-bg-color, rgba(239,68,68,0.12))',
-            border: `1px solid ${DANGER}`,
-            borderRadius: 7,
-            padding: '7px 11px',
-          }}
-        >
-          {loc}
-        </div>
-      )}
-      {detail && (
-        <div style={{ marginTop: '0.25rem', color: MUTED }}>{detail}</div>
-      )}
-
-      {frame && (
-        <pre
-          style={{
-            marginTop: '0.75rem',
-            marginBottom: 0,
-            padding: '0.75rem 0.9rem',
-            overflow: 'auto',
-            background: 'var(--code-bg-color, rgba(0,0,0,0.05))',
-            borderRadius: 'var(--radius-sm, 6px)',
-            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-            fontSize: 12.5,
-            lineHeight: 1.5,
-            color: TEXT,
-          }}
-        >
-          {frame}
-        </pre>
-      )}
-
-      {suggestion && (
-        <div style={{ marginTop: '0.75rem' }}>
-          Did you mean{' '}
-          <code style={{ fontWeight: 600, color: DANGER }}>
-            {`<${suggestion}>`}
-          </code>
-          ?
-        </div>
-      )}
-
-      {hint && (
-        <div style={{ marginTop: '0.6rem', color: MUTED, fontSize: '0.92rem' }}>
-          {hint}
-        </div>
-      )}
-    </div>
-  );
-}
+import React from 'react';
+
+/**
+ * ErrorCard — a branded, self-contained card that renders ONE Velu "issue"
+ * (an MDX or velu.json problem). Used by the dev server's per-page error
+ * boundary. Deliberately presentational and dependency-free (no other Velu
+ * components, no effects) so it can never fail while reporting a failure.
+ *
+ * Styled with inline styles + design tokens (with hard fallbacks), so it looks
+ * right even when the page's own CSS hasn't loaded.
+ */
+const DANGER = 'var(--danger-stroke-color, #ef4444)';
+const DANGER_BG =
+  'var(--danger-bg-color, color-mix(in srgb, #ef4444 7%, transparent))';
+const MUTED = 'var(--muted-color, #6b7280)';
+const TEXT = 'var(--text-color, #111827)';
+
+export default function ErrorCard({
+  label,
+  title,
+  file,
+  line,
+  column,
+  frame,
+  detail,
+  hint,
+  suggestion,
+}) {
+  const loc = file
+    ? `${file}${line ? `:${line}${column ? `:${column}` : ''}` : ''}`
+    : null;
+
+  return (
+    <div
+      role="alert"
+      style={{
+        border: `1px solid ${DANGER}`,
+        borderRadius: 'var(--radius-md, 10px)',
+        background: DANGER_BG,
+        padding: 'var(--s2, 1rem)',
+        margin: 'var(--s2, 1rem) 0',
+        fontFamily: 'var(--font-sans, system-ui, sans-serif)',
+        color: TEXT,
+        lineHeight: 1.5,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: '0.6rem',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}
+      >
+        <span
+          style={{
+            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            fontSize: 11,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            fontWeight: 600,
+            color: DANGER,
+            border: `1px solid ${DANGER}`,
+            borderRadius: 999,
+            padding: '2px 9px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {label}
+        </span>
+      </div>
+
+      {title && (
+        <div style={{ marginTop: '0.6rem', fontWeight: 600, fontSize: '1.05rem' }}>
+          {title}
+        </div>
+      )}
+
+      {loc && (
+        <div
+          style={{
+            display: 'inline-block',
+            marginTop: '0.7rem',
+            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            fontSize: 15,
+            fontWeight: 600,
+            letterSpacing: '0.01em',
+            color: DANGER,
+            background: 'var(--danger-bg-color, rgba(239,68,68,0.12))',
+            border: `1px solid ${DANGER}`,
+            borderRadius: 7,
+            padding: '7px 11px',
+          }}
+        >
+          {loc}
+        </div>
+      )}
+      {detail && (
+        <div style={{ marginTop: '0.25rem', color: MUTED }}>{detail}</div>
+      )}
+
+      {frame && (
+        <pre
+          style={{
+            marginTop: '0.75rem',
+            marginBottom: 0,
+            padding: '0.75rem 0.9rem',
+            overflow: 'auto',
+            background: 'var(--code-bg-color, rgba(0,0,0,0.05))',
+            borderRadius: 'var(--radius-sm, 6px)',
+            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            fontSize: 12.5,
+            lineHeight: 1.5,
+            color: TEXT,
+          }}
+        >
+          {frame}
+        </pre>
+      )}
+
+      {suggestion && (
+        <div style={{ marginTop: '0.75rem' }}>
+          Did you mean{' '}
+          <code style={{ fontWeight: 600, color: DANGER }}>
+            {`<${suggestion}>`}
+          </code>
+          ?
+        </div>
+      )}
+
+      {hint && (
+        <div style={{ marginTop: '0.6rem', color: MUTED, fontSize: '0.92rem' }}>
+          {hint}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,81 +1,81 @@
-import React from 'react';
-import Cluster from '../primitives/Cluster.jsx';
-
-/**
- * Field — a documentation row for an API parameter / config option.
- *
- *   <Field name="depth" pre="GET" type="number" required default={3}
- *          post="optional"
- *   >
- *     An example of a parameter field. Description text wraps below
- *     the chip row.
- *   </Field>
- *
- * Layout (left → right, all in a single flex-wrap row):
- *   [pre chip] [name] [type chip] [required pill]
- *   [default: VALUE] [post chip]      followed by the description
- *
- * - `name`     — required-ish; the parameter identifier (accent, bold, mono)
- * - `pre`      — small monospace chip rendered before `name` (e.g. method
- *                or namespace). React-node or string.
- * - `type`     — small monospace chip after `name` (e.g. "string", "number")
- * - `required` — boolean → renders the red "required" pill
- * - `default`  — value rendered as `default: <value>` in italic monospace
- *                (renamed locally because `default` is a reserved word)
- * - `post`     — trailing chip after default
- * - `children` — description block beneath the chip row
- *
- * Sibling Field elements get a hairline divider via CSS — drop them next
- * to each other and the separators appear; no wrapper required.
- *
- * Fully tokenized: chips use --surface-color, required pill mixes with
- * --accent-color, default is --muted-color italic. Light/dark
- * automatic via [data-theme] like the rest of velu-ui.
- */
-
-export default function Field({
-  name,
-  pre,
-  type,
-  required = false,
-  default: defaultValue,
-  post,
-  children,
-  className = '',
-  ...rest
-}) {
-  const hasDefault = defaultValue !== undefined && defaultValue !== null;
-  return (
-    <div className={`velu-field ${className}`.trim()} {...rest}>
-      {/* Cluster handles the wrap-friendly inline row layout — chips +
-          name + type + required + default + post — with a 16px gap and
-          baseline alignment so the bold name doesn't shift vertically
-          relative to its sibling chips. */}
-      <Cluster space="var(--s0)" align="baseline">
-        {pre != null && (
-          <span className="velu-field__chip">{pre}</span>
-        )}
-        {name != null && (
-          <span className="velu-field__name">{name}</span>
-        )}
-        {type != null && (
-          <span className="velu-field__chip">{type}</span>
-        )}
-        {required && (
-          <span className="velu-field__required">required</span>
-        )}
-        {hasDefault && (
-          <span className="velu-field__default">
-            default: {String(defaultValue)}
-          </span>
-        )}
-        {post != null && (
-          <span className="velu-field__chip">{post}</span>
-        )}
-      </Cluster>
-      {children != null && children !== false && (
-        <div className="velu-field__body">{children}</div>
-      )}
-    </div>
-  );
-}
+import React from 'react';
+import Cluster from '../primitives/Cluster.jsx';
+
+/**
+ * Field — a documentation row for an API parameter / config option.
+ *
+ *   <Field name="depth" pre="GET" type="number" required default={3}
+ *          post="optional"
+ *   >
+ *     An example of a parameter field. Description text wraps below
+ *     the chip row.
+ *   </Field>
+ *
+ * Layout (left → right, all in a single flex-wrap row):
+ *   [pre chip] [name] [type chip] [required pill]
+ *   [default: VALUE] [post chip]      followed by the description
+ *
+ * - `name`     — required-ish; the parameter identifier (accent, bold, mono)
+ * - `pre`      — small monospace chip rendered before `name` (e.g. method
+ *                or namespace). React-node or string.
+ * - `type`     — small monospace chip after `name` (e.g. "string", "number")
+ * - `required` — boolean → renders the red "required" pill
+ * - `default`  — value rendered as `default: <value>` in italic monospace
+ *                (renamed locally because `default` is a reserved word)
+ * - `post`     — trailing chip after default
+ * - `children` — description block beneath the chip row
+ *
+ * Sibling Field elements get a hairline divider via CSS — drop them next
+ * to each other and the separators appear; no wrapper required.
+ *
+ * Fully tokenized: chips use --surface-color, required pill mixes with
+ * --accent-color, default is --muted-color italic. Light/dark
+ * automatic via [data-theme] like the rest of velu-ui.
+ */
+
+export default function Field({
+  name,
+  pre,
+  type,
+  required = false,
+  default: defaultValue,
+  post,
+  children,
+  className = '',
+  ...rest
+}) {
+  const hasDefault = defaultValue !== undefined && defaultValue !== null;
+  return (
+    <div className={`velu-field ${className}`.trim()} {...rest}>
+      {/* Cluster handles the wrap-friendly inline row layout — chips +
+          name + type + required + default + post — with a 16px gap and
+          baseline alignment so the bold name doesn't shift vertically
+          relative to its sibling chips. */}
+      <Cluster space="var(--s0)" align="baseline">
+        {pre != null && (
+          <span className="velu-field__chip">{pre}</span>
+        )}
+        {name != null && (
+          <span className="velu-field__name">{name}</span>
+        )}
+        {type != null && (
+          <span className="velu-field__chip">{type}</span>
+        )}
+        {required && (
+          <span className="velu-field__required">required</span>
+        )}
+        {hasDefault && (
+          <span className="velu-field__default">
+            default: {String(defaultValue)}
+          </span>
+        )}
+        {post != null && (
+          <span className="velu-field__chip">{post}</span>
+        )}
+      </Cluster>
+      {children != null && children !== false && (
+        <div className="velu-field__body">{children}</div>
+      )}
+    </div>
+  );
+}