@veluai/velu 0.1.11 → 0.1.13

package/runtime/velu-ui/lib/component-schemas.js

@@ -1,100 +1,100 @@
-// Per-component option schemas — the props whose wrong value would otherwise
-// render incorrectly *silently*. Deliberately small and high-signal; extend a
-// component's entry here when it gains a new constrained option.
-//
-// Pure data + a pure validator (no React, no other imports) so BOTH sides can
-// use it: the live MDX registry (velu-ui/mdx-components.jsx) validates at
-// render time, and `velu validate` (velu-cli) imports this same module to
-// statically check literal attributes — one source of truth, no drift.
-
-// Canonical accepted values (must match the components):
-//   Callout  — VARIANTS keys; the component is CASE-SENSITIVE (VARIANTS[type]).
-//   MethodBadge — METHODS; the component lower-cases the input first.
-export const CALLOUT_TYPES = ['note', 'warning', 'info', 'tip', 'check', 'danger', 'callout'];
-export const METHOD_NAMES = ['get', 'post', 'put', 'patch', 'delete'];
-
-// schema: { enums: { prop: { values, caseSensitive } }, required: [prop, …] }
-const SCHEMAS = {
-  Callout: { enums: { type: { values: CALLOUT_TYPES, caseSensitive: true } } },
-  MethodBadge: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
-  ApiPath: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
-  Image: { required: ['src'] },
-};
-
-// Smallest edit distance match within a set (for "did you mean"). Tiny inputs.
-function closest(value, values) {
-  const v = String(value).toLowerCase();
-  let best = null;
-  let bestD = Infinity;
-  for (const cand of values) {
-    const a = v;
-    const b = cand.toLowerCase();
-    // inline Levenshtein
-    const m = a.length;
-    const n = b.length;
-    const d = Array.from({ length: n + 1 }, (_, i) => i);
-    for (let i = 1; i <= m; i++) {
-      let prev = d[0];
-      d[0] = i;
-      for (let j = 1; j <= n; j++) {
-        const tmp = d[j];
-        d[j] = Math.min(d[j] + 1, d[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
-        prev = tmp;
-      }
-    }
-    if (d[n] < bestD) {
-      bestD = d[n];
-      best = cand;
-    }
-  }
-  return bestD <= 3 ? best : null;
-}
-
-/**
- * Validate a component's props against its schema.
- * @param {string} name   component tag name
- * @param {object} props   props passed to it
- * @param {{ checkRequired?: boolean }} [opts]  static callers pass
- *        checkRequired:false because a prop supplied via a {expression}
- *        isn't a literal they can see, so "missing required" would be a
- *        false positive.
- * @returns an issue-shaped object (category 'invalid-props') or null if valid.
- *   { category, title, detail, hint, suggestion }
- */
-export function validateProps(name, props = {}, opts = {}) {
-  const { checkRequired = true } = opts;
-  const schema = SCHEMAS[name];
-  if (!schema) return null;
-
-  for (const req of checkRequired ? schema.required || [] : []) {
-    const v = props[req];
-    if (v == null || v === '') {
-      return {
-        category: 'invalid-props',
-        title: `<${name}> is missing the required "${req}" prop`,
-        hint: `Add ${req}="…" to the component.`,
-      };
-    }
-  }
-
-  for (const [prop, rule] of Object.entries(schema.enums || {})) {
-    if (!(prop in props) || props[prop] == null) continue;
-    const raw = props[prop];
-    const ok = rule.caseSensitive
-      ? rule.values.includes(raw)
-      : rule.values.map((s) => s.toLowerCase()).includes(String(raw).toLowerCase());
-    if (!ok) {
-      const guess = closest(raw, rule.values);
-      return {
-        category: 'invalid-props',
-        title: `Invalid "${prop}" on <${name}>: "${raw}"`,
-        detail: `Expected one of: ${rule.values.join(', ')}.`,
-        hint: guess ? `Did you mean "${guess}"?` : '',
-      };
-    }
-  }
-
-  return null;
-}
-
-export default validateProps;
+// Per-component option schemas — the props whose wrong value would otherwise
+// render incorrectly *silently*. Deliberately small and high-signal; extend a
+// component's entry here when it gains a new constrained option.
+//
+// Pure data + a pure validator (no React, no other imports) so BOTH sides can
+// use it: the live MDX registry (velu-ui/mdx-components.jsx) validates at
+// render time, and `velu validate` (velu-cli) imports this same module to
+// statically check literal attributes — one source of truth, no drift.
+
+// Canonical accepted values (must match the components):
+//   Callout  — VARIANTS keys; the component is CASE-SENSITIVE (VARIANTS[type]).
+//   MethodBadge — METHODS; the component lower-cases the input first.
+export const CALLOUT_TYPES = ['note', 'warning', 'info', 'tip', 'check', 'danger', 'callout'];
+export const METHOD_NAMES = ['get', 'post', 'put', 'patch', 'delete'];
+
+// schema: { enums: { prop: { values, caseSensitive } }, required: [prop, …] }
+const SCHEMAS = {
+  Callout: { enums: { type: { values: CALLOUT_TYPES, caseSensitive: true } } },
+  MethodBadge: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
+  ApiPath: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
+  Image: { required: ['src'] },
+};
+
+// Smallest edit distance match within a set (for "did you mean"). Tiny inputs.
+function closest(value, values) {
+  const v = String(value).toLowerCase();
+  let best = null;
+  let bestD = Infinity;
+  for (const cand of values) {
+    const a = v;
+    const b = cand.toLowerCase();
+    // inline Levenshtein
+    const m = a.length;
+    const n = b.length;
+    const d = Array.from({ length: n + 1 }, (_, i) => i);
+    for (let i = 1; i <= m; i++) {
+      let prev = d[0];
+      d[0] = i;
+      for (let j = 1; j <= n; j++) {
+        const tmp = d[j];
+        d[j] = Math.min(d[j] + 1, d[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+        prev = tmp;
+      }
+    }
+    if (d[n] < bestD) {
+      bestD = d[n];
+      best = cand;
+    }
+  }
+  return bestD <= 3 ? best : null;
+}
+
+/**
+ * Validate a component's props against its schema.
+ * @param {string} name   component tag name
+ * @param {object} props   props passed to it
+ * @param {{ checkRequired?: boolean }} [opts]  static callers pass
+ *        checkRequired:false because a prop supplied via a {expression}
+ *        isn't a literal they can see, so "missing required" would be a
+ *        false positive.
+ * @returns an issue-shaped object (category 'invalid-props') or null if valid.
+ *   { category, title, detail, hint, suggestion }
+ */
+export function validateProps(name, props = {}, opts = {}) {
+  const { checkRequired = true } = opts;
+  const schema = SCHEMAS[name];
+  if (!schema) return null;
+
+  for (const req of checkRequired ? schema.required || [] : []) {
+    const v = props[req];
+    if (v == null || v === '') {
+      return {
+        category: 'invalid-props',
+        title: `<${name}> is missing the required "${req}" prop`,
+        hint: `Add ${req}="…" to the component.`,
+      };
+    }
+  }
+
+  for (const [prop, rule] of Object.entries(schema.enums || {})) {
+    if (!(prop in props) || props[prop] == null) continue;
+    const raw = props[prop];
+    const ok = rule.caseSensitive
+      ? rule.values.includes(raw)
+      : rule.values.map((s) => s.toLowerCase()).includes(String(raw).toLowerCase());
+    if (!ok) {
+      const guess = closest(raw, rule.values);
+      return {
+        category: 'invalid-props',
+        title: `Invalid "${prop}" on <${name}>: "${raw}"`,
+        detail: `Expected one of: ${rule.values.join(', ')}.`,
+        hint: guess ? `Did you mean "${guess}"?` : '',
+      };
+    }
+  }
+
+  return null;
+}
+
+export default validateProps;

package/runtime/velu-ui/lib/copyText.js

@@ -1,64 +1,64 @@
-/**
- * copyText — copy a string to the clipboard, working in BOTH secure and
- * insecure contexts.
- *
- * `navigator.clipboard` only exists in a secure context (HTTPS or
- * localhost). On a plain-HTTP origin — e.g. previewing the dev server
- * over the LAN at http://<ip>:8358 on a phone — it's `undefined`, so a
- * `if (!navigator.clipboard) return` guard makes copy buttons silently
- * no-op. This util falls back to the legacy `execCommand('copy')` via a
- * hidden textarea so copy still works on those origins.
- *
- * Must be called from a user gesture (click) — both paths require it.
- * Returns a Promise: resolves on success, rejects on failure.
- */
-export default function copyText(text) {
-  const str = String(text ?? '');
-
-  // Preferred path — async Clipboard API (secure contexts only).
-  if (
-    typeof navigator !== 'undefined' &&
-    navigator.clipboard &&
-    typeof window !== 'undefined' &&
-    window.isSecureContext
-  ) {
-    return navigator.clipboard.writeText(str);
-  }
-
-  // Fallback — hidden <textarea> + execCommand, for insecure origins.
-  return new Promise((resolve, reject) => {
-    if (typeof document === 'undefined') {
-      reject(new Error('copyText: no document'));
-      return;
-    }
-    const ta = document.createElement('textarea');
-    ta.value = str;
-    ta.setAttribute('readonly', '');
-    // Keep it out of view and inert, but still selectable.
-    ta.style.position = 'fixed';
-    ta.style.top = '0';
-    ta.style.left = '0';
-    ta.style.inlineSize = '1px';
-    ta.style.blockSize = '1px';
-    ta.style.padding = '0';
-    ta.style.border = 'none';
-    ta.style.opacity = '0';
-    document.body.appendChild(ta);
-    ta.focus();
-    ta.select();
-    try {
-      ta.setSelectionRange(0, str.length);
-    } catch {
-      /* some browsers reject setSelectionRange on a readonly field */
-    }
-    let ok = false;
-    try {
-      ok = document.execCommand('copy');
-    } catch {
-      ok = false;
-    }
-    document.body.removeChild(ta);
-    if (ok) resolve();
-    else reject(new Error('copyText: execCommand copy failed'));
-  });
-}
+/**
+ * copyText — copy a string to the clipboard, working in BOTH secure and
+ * insecure contexts.
+ *
+ * `navigator.clipboard` only exists in a secure context (HTTPS or
+ * localhost). On a plain-HTTP origin — e.g. previewing the dev server
+ * over the LAN at http://<ip>:8358 on a phone — it's `undefined`, so a
+ * `if (!navigator.clipboard) return` guard makes copy buttons silently
+ * no-op. This util falls back to the legacy `execCommand('copy')` via a
+ * hidden textarea so copy still works on those origins.
+ *
+ * Must be called from a user gesture (click) — both paths require it.
+ * Returns a Promise: resolves on success, rejects on failure.
+ */
+export default function copyText(text) {
+  const str = String(text ?? '');
+
+  // Preferred path — async Clipboard API (secure contexts only).
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    typeof window !== 'undefined' &&
+    window.isSecureContext
+  ) {
+    return navigator.clipboard.writeText(str);
+  }
+
+  // Fallback — hidden <textarea> + execCommand, for insecure origins.
+  return new Promise((resolve, reject) => {
+    if (typeof document === 'undefined') {
+      reject(new Error('copyText: no document'));
+      return;
+    }
+    const ta = document.createElement('textarea');
+    ta.value = str;
+    ta.setAttribute('readonly', '');
+    // Keep it out of view and inert, but still selectable.
+    ta.style.position = 'fixed';
+    ta.style.top = '0';
+    ta.style.left = '0';
+    ta.style.inlineSize = '1px';
+    ta.style.blockSize = '1px';
+    ta.style.padding = '0';
+    ta.style.border = 'none';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try {
+      ta.setSelectionRange(0, str.length);
+    } catch {
+      /* some browsers reject setSelectionRange on a readonly field */
+    }
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    document.body.removeChild(ta);
+    if (ok) resolve();
+    else reject(new Error('copyText: execCommand copy failed'));
+  });
+}

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

@@ -1,105 +1,105 @@
-import React from 'react';
-import Callout from './components/Callout.jsx';
-import Card, { CardGroup } from './components/Card.jsx';
-import Accordion, { AccordionGroup } from './components/Accordion.jsx';
-import Columns from './components/Columns.jsx';
-import Field from './components/Field.jsx';
-import Prompt from './components/Prompt.jsx';
-import Steps, { Step } from './components/Steps.jsx';
-import Tree, { Folder, File } from './components/Tree.jsx';
-import Image from './components/Image.jsx';
-import CodeBlock, { CodeGroup } from './components/CodeBlock.jsx';
-import MethodBadge from './components/MethodBadge.jsx';
-import ApiPath from './components/ApiPath.jsx';
-import TryItBar from './components/TryItBar.jsx';
-import ApiField from './components/ApiField.jsx';
-import ApiClient from './components/ApiClient.jsx';
-import ApiSidebar from './components/ApiSidebar.jsx';
-import { validateProps } from './lib/component-schemas.js';
-
-/**
- * defaultMdxComponents — the registry the MDXProvider consumes.
- *
- * Two kinds of entries:
- *
- *   1. Lowercase keys ('pre', 'h1', …) override the HTML tags that
- *      Markdown produces. We use these to upgrade plain ``` fenced
- *      code blocks into our CodeBlock component, etc.
- *
- *   2. Capitalised keys ('Callout', 'Card', …) match the exact tag
- *      names authors write in their .mdx, e.g. `<Callout type="warn">`.
- *      MDX looks up the name in this map and renders our component
- *      instead of treating it as an unknown HTML element.
- *
- * Tag-name → component is the only contract here. SSR-safe by
- * construction: identical map on server + client → identical render.
- */
-
-/* `pre > code` is how Markdown renders ``` blocks. We pull the
-   language out of the code-element's className ("language-js" → "js")
-   and forward children verbatim to CodeBlock. */
-function PreOverride({ children }) {
-  const child = React.Children.only(children);
-  const className = child?.props?.className || '';
-  const m = /language-(\S+)/.exec(className);
-  const language = m ? m[1] : undefined;
-  const code =
-    typeof child?.props?.children === 'string'
-      ? child.props.children.replace(/\n$/, '')
-      : child?.props?.children;
-  return (
-    <CodeBlock language={language}>
-      {code}
-    </CodeBlock>
-  );
-}
-
-/* Wrap a component so its constrained options (see component-schemas.js)
-   are validated at render time. An invalid option throws a marked error
-   (`err.veluIssue`) that the dev server turns into a friendly card on the
-   page AND a clean block in the terminal — the same surface as an unknown
-   component. Components without a schema pass straight through. */
-function checked(name, Comp) {
-  function Checked(props) {
-    const issue = validateProps(name, props);
-    if (issue) {
-      const err = new Error(issue.title);
-      err.veluIssue = issue;
-      throw err;
-    }
-    return <Comp {...props} />;
-  }
-  Checked.displayName = `Checked(${name})`;
-  return Checked;
-}
-
-export const defaultMdxComponents = {
-  /* HTML-tag overrides (lowercase keys). */
-  pre: PreOverride,
-
-  /* Authored component tags (capitalised keys). */
-  Callout: checked('Callout', Callout),
-  Card,
-  CardGroup,
-  Accordion,
-  AccordionGroup,
-  Columns,
-  Field,
-  Prompt,
-  Steps,
-  Step,
-  Tree,
-  Folder,
-  File,
-  Image: checked('Image', Image),
-  CodeBlock,
-  CodeGroup,
-  MethodBadge: checked('MethodBadge', MethodBadge),
-  ApiPath: checked('ApiPath', ApiPath),
-  TryItBar,
-  ApiField,
-  ApiClient,
-  ApiSidebar,
-};
-
-export default defaultMdxComponents;
+import React from 'react';
+import Callout from './components/Callout.jsx';
+import Card, { CardGroup } from './components/Card.jsx';
+import Accordion, { AccordionGroup } from './components/Accordion.jsx';
+import Columns from './components/Columns.jsx';
+import Field from './components/Field.jsx';
+import Prompt from './components/Prompt.jsx';
+import Steps, { Step } from './components/Steps.jsx';
+import Tree, { Folder, File } from './components/Tree.jsx';
+import Image from './components/Image.jsx';
+import CodeBlock, { CodeGroup } from './components/CodeBlock.jsx';
+import MethodBadge from './components/MethodBadge.jsx';
+import ApiPath from './components/ApiPath.jsx';
+import TryItBar from './components/TryItBar.jsx';
+import ApiField from './components/ApiField.jsx';
+import ApiClient from './components/ApiClient.jsx';
+import ApiSidebar from './components/ApiSidebar.jsx';
+import { validateProps } from './lib/component-schemas.js';
+
+/**
+ * defaultMdxComponents — the registry the MDXProvider consumes.
+ *
+ * Two kinds of entries:
+ *
+ *   1. Lowercase keys ('pre', 'h1', …) override the HTML tags that
+ *      Markdown produces. We use these to upgrade plain ``` fenced
+ *      code blocks into our CodeBlock component, etc.
+ *
+ *   2. Capitalised keys ('Callout', 'Card', …) match the exact tag
+ *      names authors write in their .mdx, e.g. `<Callout type="warn">`.
+ *      MDX looks up the name in this map and renders our component
+ *      instead of treating it as an unknown HTML element.
+ *
+ * Tag-name → component is the only contract here. SSR-safe by
+ * construction: identical map on server + client → identical render.
+ */
+
+/* `pre > code` is how Markdown renders ``` blocks. We pull the
+   language out of the code-element's className ("language-js" → "js")
+   and forward children verbatim to CodeBlock. */
+function PreOverride({ children }) {
+  const child = React.Children.only(children);
+  const className = child?.props?.className || '';
+  const m = /language-(\S+)/.exec(className);
+  const language = m ? m[1] : undefined;
+  const code =
+    typeof child?.props?.children === 'string'
+      ? child.props.children.replace(/\n$/, '')
+      : child?.props?.children;
+  return (
+    <CodeBlock language={language}>
+      {code}
+    </CodeBlock>
+  );
+}
+
+/* Wrap a component so its constrained options (see component-schemas.js)
+   are validated at render time. An invalid option throws a marked error
+   (`err.veluIssue`) that the dev server turns into a friendly card on the
+   page AND a clean block in the terminal — the same surface as an unknown
+   component. Components without a schema pass straight through. */
+function checked(name, Comp) {
+  function Checked(props) {
+    const issue = validateProps(name, props);
+    if (issue) {
+      const err = new Error(issue.title);
+      err.veluIssue = issue;
+      throw err;
+    }
+    return <Comp {...props} />;
+  }
+  Checked.displayName = `Checked(${name})`;
+  return Checked;
+}
+
+export const defaultMdxComponents = {
+  /* HTML-tag overrides (lowercase keys). */
+  pre: PreOverride,
+
+  /* Authored component tags (capitalised keys). */
+  Callout: checked('Callout', Callout),
+  Card,
+  CardGroup,
+  Accordion,
+  AccordionGroup,
+  Columns,
+  Field,
+  Prompt,
+  Steps,
+  Step,
+  Tree,
+  Folder,
+  File,
+  Image: checked('Image', Image),
+  CodeBlock,
+  CodeGroup,
+  MethodBadge: checked('MethodBadge', MethodBadge),
+  ApiPath: checked('ApiPath', ApiPath),
+  TryItBar,
+  ApiField,
+  ApiClient,
+  ApiSidebar,
+};
+
+export default defaultMdxComponents;