@veluai/velu 0.2.13 → 0.2.15

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