@veluai/velu 0.1.13 → 0.1.14

package/src/lib/issues.js

@@ -1,159 +1,159 @@
-// The shared "issue" model used by BOTH the live `velu dev` error surface and
-// the `velu validate` command — so an author sees the same wording whether a
-// problem shows up live in the browser/terminal or in a batch validation run.
-//
-// An issue is a plain object:
-//   {
-//     category,    // see CATEGORY_LABEL keys below
-//     severity,    // 'error' (default) | 'warning' | 'info'
-//     file,        // project-relative path (posix), or null
-//     line, column,// 1-based numbers, or null
-//     frame,       // a caret-annotated code-frame string, or null
-//     title,       // short, plain-language headline
-//     detail,      // the underlying message (already path-stripped)
-//     hint,        // how to fix it
-//     suggestion,  // a "did you mean <X>" component name, or null
-//   }
-//
-// This module is dependency-free and isomorphic (no Node-only imports), so the
-// browser ErrorBoundary can reuse `levenshtein`/`suggestComponent`.
-
-export const CATEGORY_LABEL = {
-  'mdx-syntax': 'MDX syntax',
-  frontmatter: 'Frontmatter',
-  'unknown-component': 'Unknown component',
-  'invalid-props': 'Invalid options',
-  'render-crash': 'Render error',
-  'config-json': 'velu.json',
-  'config-schema': 'velu.json',
-  'config-nav': 'Navigation',
-  'config-asset': 'Asset',
-};
-
-// Fill in defaults so callers only set what they know.
-export function makeIssue(partial) {
-  return {
-    category: 'render-crash',
-    severity: 'error',
-    file: null,
-    line: null,
-    column: null,
-    frame: null,
-    title: 'Something went wrong',
-    detail: '',
-    hint: '',
-    suggestion: null,
-    ...partial,
-  };
-}
-
-// Classic Levenshtein edit distance (small inputs — component names).
-export function levenshtein(a, b) {
-  a = String(a);
-  b = String(b);
-  if (a === b) return 0;
-  if (!a.length) return b.length;
-  if (!b.length) return a.length;
-  let prev = Array.from({ length: b.length + 1 }, (_, i) => i);
-  let cur = new Array(b.length + 1);
-  for (let i = 1; i <= a.length; i++) {
-    cur[0] = i;
-    for (let j = 1; j <= b.length; j++) {
-      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
-      cur[j] = Math.min(cur[j - 1] + 1, prev[j] + 1, prev[j - 1] + cost);
-    }
-    [prev, cur] = [cur, prev];
-  }
-  return prev[b.length];
-}
-
-// Closest known component to `name` within a small edit distance, else null.
-// Compared case-insensitively (so a capitalization typo still matches) but the
-// correctly-cased known name is returned.
-export function suggestComponent(name, known = []) {
-  if (!name) return null;
-  const lower = String(name).toLowerCase();
-  let best = null;
-  let bestD = Infinity;
-  for (const k of known) {
-    const d = levenshtein(lower, String(k).toLowerCase());
-    if (d < bestD) {
-      bestD = d;
-      best = k;
-    }
-  }
-  // Allow a little more slack for longer names, capped at 3 edits.
-  const threshold = Math.min(3, Math.max(2, Math.floor(lower.length / 4)));
-  return bestD <= threshold ? best : null;
-}
-
-// ── Terminal formatting ─────────────────────────────────────────────────────
-
-const COLORS = {
-  reset: '\x1b[0m',
-  red: '\x1b[31m',
-  yellow: '\x1b[33m',
-  cyan: '\x1b[36m',
-  dim: '\x1b[2m',
-  bold: '\x1b[1m',
-};
-const paint = (on, code, s) => (on ? `${code}${s}${COLORS.reset}` : s);
-
-function severityMark(sev, color) {
-  if (sev === 'warning') return paint(color, COLORS.yellow, '⚠');
-  if (sev === 'info') return paint(color, COLORS.cyan, 'ℹ');
-  return paint(color, COLORS.red, '✖');
-}
-
-// Format a single issue as a multi-line terminal block.
-export function formatIssue(issue, { color = false } = {}) {
-  const label = CATEGORY_LABEL[issue.category] || issue.category;
-  const lineCol = issue.line
-    ? `${issue.line}${issue.column ? `:${issue.column}` : ''}`
-    : '';
-  // Keep the line:col even when grouped output has nulled the file (so the
-  // position still shows under a per-file heading in formatReport).
-  const where = issue.file ? `${issue.file}${lineCol ? `:${lineCol}` : ''}` : lineCol;
-  const lines = [];
-  lines.push(
-    `${severityMark(issue.severity, color)} ${paint(color, COLORS.bold, label)}` +
-      (where ? `  ${paint(color, COLORS.dim, where)}` : ''),
-  );
-  if (issue.title) lines.push(`  ${issue.title}`);
-  if (issue.detail && issue.detail !== issue.title) lines.push(`  ${paint(color, COLORS.dim, issue.detail)}`);
-  if (issue.frame) {
-    for (const f of String(issue.frame).split('\n')) lines.push(`  ${f}`);
-  }
-  if (issue.suggestion) lines.push(`  ${paint(color, COLORS.cyan, `Did you mean <${issue.suggestion}>?`)}`);
-  if (issue.hint) lines.push(`  ${paint(color, COLORS.dim, `→ ${issue.hint}`)}`);
-  return lines.join('\n');
-}
-
-// Format a list of issues as a grouped report (used by `velu validate`).
-export function formatReport(issues, { color = false } = {}) {
-  if (!issues.length) {
-    return paint(color, COLORS.cyan, '✓ No issues found.');
-  }
-  // Group by file (config issues with no file group under "velu.json").
-  const groups = new Map();
-  for (const issue of issues) {
-    const key = issue.file || 'velu.json';
-    if (!groups.has(key)) groups.set(key, []);
-    groups.get(key).push(issue);
-  }
-  const out = [];
-  for (const [file, group] of groups) {
-    out.push(paint(color, COLORS.bold, file));
-    for (const issue of group) {
-      out.push(formatIssue({ ...issue, file: null }, { color }).replace(/^/gm, '  '));
-    }
-    out.push('');
-  }
-  const errors = issues.filter((i) => i.severity !== 'warning' && i.severity !== 'info').length;
-  const warnings = issues.length - errors;
-  const summary =
-    `${errors} error${errors === 1 ? '' : 's'}` +
-    (warnings ? `, ${warnings} warning${warnings === 1 ? '' : 's'}` : '');
-  out.push(paint(color, errors ? COLORS.red : COLORS.yellow, summary));
-  return out.join('\n');
-}
+// The shared "issue" model used by BOTH the live `velu dev` error surface and
+// the `velu validate` command — so an author sees the same wording whether a
+// problem shows up live in the browser/terminal or in a batch validation run.
+//
+// An issue is a plain object:
+//   {
+//     category,    // see CATEGORY_LABEL keys below
+//     severity,    // 'error' (default) | 'warning' | 'info'
+//     file,        // project-relative path (posix), or null
+//     line, column,// 1-based numbers, or null
+//     frame,       // a caret-annotated code-frame string, or null
+//     title,       // short, plain-language headline
+//     detail,      // the underlying message (already path-stripped)
+//     hint,        // how to fix it
+//     suggestion,  // a "did you mean <X>" component name, or null
+//   }
+//
+// This module is dependency-free and isomorphic (no Node-only imports), so the
+// browser ErrorBoundary can reuse `levenshtein`/`suggestComponent`.
+
+export const CATEGORY_LABEL = {
+  'mdx-syntax': 'MDX syntax',
+  frontmatter: 'Frontmatter',
+  'unknown-component': 'Unknown component',
+  'invalid-props': 'Invalid options',
+  'render-crash': 'Render error',
+  'config-json': 'velu.json',
+  'config-schema': 'velu.json',
+  'config-nav': 'Navigation',
+  'config-asset': 'Asset',
+};
+
+// Fill in defaults so callers only set what they know.
+export function makeIssue(partial) {
+  return {
+    category: 'render-crash',
+    severity: 'error',
+    file: null,
+    line: null,
+    column: null,
+    frame: null,
+    title: 'Something went wrong',
+    detail: '',
+    hint: '',
+    suggestion: null,
+    ...partial,
+  };
+}
+
+// Classic Levenshtein edit distance (small inputs — component names).
+export function levenshtein(a, b) {
+  a = String(a);
+  b = String(b);
+  if (a === b) return 0;
+  if (!a.length) return b.length;
+  if (!b.length) return a.length;
+  let prev = Array.from({ length: b.length + 1 }, (_, i) => i);
+  let cur = new Array(b.length + 1);
+  for (let i = 1; i <= a.length; i++) {
+    cur[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      cur[j] = Math.min(cur[j - 1] + 1, prev[j] + 1, prev[j - 1] + cost);
+    }
+    [prev, cur] = [cur, prev];
+  }
+  return prev[b.length];
+}
+
+// Closest known component to `name` within a small edit distance, else null.
+// Compared case-insensitively (so a capitalization typo still matches) but the
+// correctly-cased known name is returned.
+export function suggestComponent(name, known = []) {
+  if (!name) return null;
+  const lower = String(name).toLowerCase();
+  let best = null;
+  let bestD = Infinity;
+  for (const k of known) {
+    const d = levenshtein(lower, String(k).toLowerCase());
+    if (d < bestD) {
+      bestD = d;
+      best = k;
+    }
+  }
+  // Allow a little more slack for longer names, capped at 3 edits.
+  const threshold = Math.min(3, Math.max(2, Math.floor(lower.length / 4)));
+  return bestD <= threshold ? best : null;
+}
+
+// ── Terminal formatting ─────────────────────────────────────────────────────
+
+const COLORS = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+};
+const paint = (on, code, s) => (on ? `${code}${s}${COLORS.reset}` : s);
+
+function severityMark(sev, color) {
+  if (sev === 'warning') return paint(color, COLORS.yellow, '⚠');
+  if (sev === 'info') return paint(color, COLORS.cyan, 'ℹ');
+  return paint(color, COLORS.red, '✖');
+}
+
+// Format a single issue as a multi-line terminal block.
+export function formatIssue(issue, { color = false } = {}) {
+  const label = CATEGORY_LABEL[issue.category] || issue.category;
+  const lineCol = issue.line
+    ? `${issue.line}${issue.column ? `:${issue.column}` : ''}`
+    : '';
+  // Keep the line:col even when grouped output has nulled the file (so the
+  // position still shows under a per-file heading in formatReport).
+  const where = issue.file ? `${issue.file}${lineCol ? `:${lineCol}` : ''}` : lineCol;
+  const lines = [];
+  lines.push(
+    `${severityMark(issue.severity, color)} ${paint(color, COLORS.bold, label)}` +
+      (where ? `  ${paint(color, COLORS.dim, where)}` : ''),
+  );
+  if (issue.title) lines.push(`  ${issue.title}`);
+  if (issue.detail && issue.detail !== issue.title) lines.push(`  ${paint(color, COLORS.dim, issue.detail)}`);
+  if (issue.frame) {
+    for (const f of String(issue.frame).split('\n')) lines.push(`  ${f}`);
+  }
+  if (issue.suggestion) lines.push(`  ${paint(color, COLORS.cyan, `Did you mean <${issue.suggestion}>?`)}`);
+  if (issue.hint) lines.push(`  ${paint(color, COLORS.dim, `→ ${issue.hint}`)}`);
+  return lines.join('\n');
+}
+
+// Format a list of issues as a grouped report (used by `velu validate`).
+export function formatReport(issues, { color = false } = {}) {
+  if (!issues.length) {
+    return paint(color, COLORS.cyan, '✓ No issues found.');
+  }
+  // Group by file (config issues with no file group under "velu.json").
+  const groups = new Map();
+  for (const issue of issues) {
+    const key = issue.file || 'velu.json';
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(issue);
+  }
+  const out = [];
+  for (const [file, group] of groups) {
+    out.push(paint(color, COLORS.bold, file));
+    for (const issue of group) {
+      out.push(formatIssue({ ...issue, file: null }, { color }).replace(/^/gm, '  '));
+    }
+    out.push('');
+  }
+  const errors = issues.filter((i) => i.severity !== 'warning' && i.severity !== 'info').length;
+  const warnings = issues.length - errors;
+  const summary =
+    `${errors} error${errors === 1 ? '' : 's'}` +
+    (warnings ? `, ${warnings} warning${warnings === 1 ? '' : 's'}` : '');
+  out.push(paint(color, errors ? COLORS.red : COLORS.yellow, summary));
+  return out.join('\n');
+}

package/src/lib/known-components.js

@@ -1,34 +1,34 @@
-// The capitalized component tags an author may use in `.mdx` content.
-//
-// Kept in sync with velu-ui's `defaultMdxComponents`
-// (packages/velu-ui/src/mdx-components.jsx). Used for "did you mean"
-// suggestions and unknown-component detection on the Node side (dev server +
-// `velu validate`). The browser ErrorBoundary derives the same set directly
-// from `defaultMdxComponents`, so this list only needs to stay roughly in
-// step (a missing entry just costs a suggestion, never correctness).
-export const KNOWN_COMPONENTS = [
-  'Callout',
-  'Card',
-  'CardGroup',
-  'Accordion',
-  'AccordionGroup',
-  'Columns',
-  'Field',
-  'Prompt',
-  'Steps',
-  'Step',
-  'Tree',
-  'Folder',
-  'File',
-  'Image',
-  'CodeBlock',
-  'CodeGroup',
-  'MethodBadge',
-  'ApiPath',
-  'TryItBar',
-  'ApiField',
-  'ApiClient',
-  'ApiSidebar',
-];
-
-export default KNOWN_COMPONENTS;
+// The capitalized component tags an author may use in `.mdx` content.
+//
+// Kept in sync with velu-ui's `defaultMdxComponents`
+// (packages/velu-ui/src/mdx-components.jsx). Used for "did you mean"
+// suggestions and unknown-component detection on the Node side (dev server +
+// `velu validate`). The browser ErrorBoundary derives the same set directly
+// from `defaultMdxComponents`, so this list only needs to stay roughly in
+// step (a missing entry just costs a suggestion, never correctness).
+export const KNOWN_COMPONENTS = [
+  'Callout',
+  'Card',
+  'CardGroup',
+  'Accordion',
+  'AccordionGroup',
+  'Columns',
+  'Field',
+  'Prompt',
+  'Steps',
+  'Step',
+  'Tree',
+  'Folder',
+  'File',
+  'Image',
+  'CodeBlock',
+  'CodeGroup',
+  'MethodBadge',
+  'ApiPath',
+  'TryItBar',
+  'ApiField',
+  'ApiClient',
+  'ApiSidebar',
+];
+
+export default KNOWN_COMPONENTS;