@veluai/velu 0.1.13 → 0.1.14

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/lib/lang-icons.jsx

@@ -1,147 +1,147 @@
-import React, { useState, useEffect } from 'react';
-import { resolveLang } from './prism-loader.js';
-
-/**
- * Language → icon mapping.
- *
- * Brand icons (JS / Python / Ruby / etc.) come from
- * @icons-pack/react-simple-icons. We load each one with an explicit
- * dynamic `import()` (static specifier, so Vite code-splits one chunk per
- * icon) — the browser then fetches ONLY the languages a page actually
- * renders, never the full set and never the package's ~3000-icon barrel
- * (importing that barrel makes Vite transform all 3000 modules on the
- * first dev load, which dominated cold start).
- *
- * Because the import is dynamic, a brand icon isn't available during SSR;
- * `BrandIcon` renders a sized placeholder until the module resolves on the
- * client. The placeholder is identical on the server and the first client
- * render, so hydration never mismatches. Langs without a brand icon fall
- * back to a semantic lucide id (string) handled by `resolveIcon`.
- */
-
-// canonical lang → loader (() => import of that icon's module).
-const BRAND_LOADERS = {
-  javascript: () => import('@icons-pack/react-simple-icons/icons/SiJavascript.mjs'),
-  typescript: () => import('@icons-pack/react-simple-icons/icons/SiTypescript.mjs'),
-  jsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
-  tsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
-  python: () => import('@icons-pack/react-simple-icons/icons/SiPython.mjs'),
-  ruby: () => import('@icons-pack/react-simple-icons/icons/SiRuby.mjs'),
-  go: () => import('@icons-pack/react-simple-icons/icons/SiGo.mjs'),
-  rust: () => import('@icons-pack/react-simple-icons/icons/SiRust.mjs'),
-  java: () => import('@icons-pack/react-simple-icons/icons/SiOpenjdk.mjs'),
-  csharp: () => import('@icons-pack/react-simple-icons/icons/SiSharp.mjs'),
-  c: () => import('@icons-pack/react-simple-icons/icons/SiC.mjs'),
-  cpp: () => import('@icons-pack/react-simple-icons/icons/SiCplusplus.mjs'),
-  php: () => import('@icons-pack/react-simple-icons/icons/SiPhp.mjs'),
-  swift: () => import('@icons-pack/react-simple-icons/icons/SiSwift.mjs'),
-  kotlin: () => import('@icons-pack/react-simple-icons/icons/SiKotlin.mjs'),
-  scala: () => import('@icons-pack/react-simple-icons/icons/SiScala.mjs'),
-  dart: () => import('@icons-pack/react-simple-icons/icons/SiDart.mjs'),
-  r: () => import('@icons-pack/react-simple-icons/icons/SiR.mjs'),
-  haskell: () => import('@icons-pack/react-simple-icons/icons/SiHaskell.mjs'),
-  elixir: () => import('@icons-pack/react-simple-icons/icons/SiElixir.mjs'),
-  erlang: () => import('@icons-pack/react-simple-icons/icons/SiErlang.mjs'),
-  lua: () => import('@icons-pack/react-simple-icons/icons/SiLua.mjs'),
-  perl: () => import('@icons-pack/react-simple-icons/icons/SiPerl.mjs'),
-  julia: () => import('@icons-pack/react-simple-icons/icons/SiJulia.mjs'),
-  ocaml: () => import('@icons-pack/react-simple-icons/icons/SiOcaml.mjs'),
-  fsharp: () => import('@icons-pack/react-simple-icons/icons/SiFsharp.mjs'),
-  nim: () => import('@icons-pack/react-simple-icons/icons/SiNim.mjs'),
-  zig: () => import('@icons-pack/react-simple-icons/icons/SiZig.mjs'),
-  clojure: () => import('@icons-pack/react-simple-icons/icons/SiClojure.mjs'),
-  coffeescript: () => import('@icons-pack/react-simple-icons/icons/SiCoffeescript.mjs'),
-  html: () => import('@icons-pack/react-simple-icons/icons/SiHtml5.mjs'),
-  css: () => import('@icons-pack/react-simple-icons/icons/SiCss.mjs'),
-  vue: () => import('@icons-pack/react-simple-icons/icons/SiVuedotjs.mjs'),
-  svelte: () => import('@icons-pack/react-simple-icons/icons/SiSvelte.mjs'),
-  solid: () => import('@icons-pack/react-simple-icons/icons/SiSolid.mjs'),
-  json: () => import('@icons-pack/react-simple-icons/icons/SiJson.mjs'),
-  yaml: () => import('@icons-pack/react-simple-icons/icons/SiYaml.mjs'),
-  toml: () => import('@icons-pack/react-simple-icons/icons/SiToml.mjs'),
-  graphql: () => import('@icons-pack/react-simple-icons/icons/SiGraphql.mjs'),
-  markdown: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
-  mdx: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
-  latex: () => import('@icons-pack/react-simple-icons/icons/SiLatex.mjs'),
-  asciidoc: () => import('@icons-pack/react-simple-icons/icons/SiAsciidoctor.mjs'),
-  bash: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
-  shell: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
-  sh: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
-  fish: () => import('@icons-pack/react-simple-icons/icons/SiFishshell.mjs'),
-  nodejs: () => import('@icons-pack/react-simple-icons/icons/SiNodedotjs.mjs'),
-  mysql: () => import('@icons-pack/react-simple-icons/icons/SiMysql.mjs'),
-  postgresql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
-  plsql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
-  sqlite: () => import('@icons-pack/react-simple-icons/icons/SiSqlite.mjs'),
-  mongodb: () => import('@icons-pack/react-simple-icons/icons/SiMongodb.mjs'),
-  redis: () => import('@icons-pack/react-simple-icons/icons/SiRedis.mjs'),
-  docker: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
-  dockerfile: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
-  kubernetes: () => import('@icons-pack/react-simple-icons/icons/SiKubernetes.mjs'),
-  nginx: () => import('@icons-pack/react-simple-icons/icons/SiNginx.mjs'),
-  apacheconf: () => import('@icons-pack/react-simple-icons/icons/SiApache.mjs'),
-};
-
-// Generic lucide fallback for langs without a brand icon. Returns a
-// lucide id string — `resolveIcon` turns it into the icon component.
-const LUCIDE = {
-  sql: 'database',
-  xml: 'code-xml',
-  diff: 'git-compare-arrows',
-  ini: 'braces',
-  properties: 'braces',
-  powershell: 'terminal',
-  batch: 'terminal',
-  zsh: 'terminal',
-  text: 'file-code',
-  plaintext: 'file-code',
-};
-
-// Module-level cache so an icon that's been loaded once renders
-// synchronously everywhere after (no repeat import, no flash).
-const iconCache = new Map();
-
-/**
- * Renders a brand icon loaded lazily by `key`. SSR + the first client
- * render emit a sized placeholder (identical → hydration-safe); after
- * mount the icon's module is imported and swapped in.
- */
-function BrandIcon({ iconKey, ...props }) {
-  const [Icon, setIcon] = useState(() => iconCache.get(iconKey) || null);
-
-  useEffect(() => {
-    if (iconCache.has(iconKey)) {
-      setIcon(() => iconCache.get(iconKey));
-      return;
-    }
-    const load = BRAND_LOADERS[iconKey];
-    if (!load) return;
-    let alive = true;
-    load().then((mod) => {
-      iconCache.set(iconKey, mod.default);
-      if (alive) setIcon(() => mod.default);
-    });
-    return () => {
-      alive = false;
-    };
-  }, [iconKey]);
-
-  if (!Icon) {
-    // Reserve the icon's box so swapping it in causes no layout shift.
-    return (
-      <span
-        aria-hidden="true"
-        style={{ display: 'inline-block', width: '1em', height: '1em' }}
-      />
-    );
-  }
-  return <Icon {...props} />;
-}
-
-export function iconForLang(lang) {
-  if (!lang) return 'file-code';
-  const id = resolveLang(lang) || lang;
-  const key = BRAND_LOADERS[id] ? id : BRAND_LOADERS[lang] ? lang : null;
-  if (key) return <BrandIcon iconKey={key} size="1em" />;
-  return LUCIDE[id] || LUCIDE[lang] || 'file-code';
-}
+import React, { useState, useEffect } from 'react';
+import { resolveLang } from './prism-loader.js';
+
+/**
+ * Language → icon mapping.
+ *
+ * Brand icons (JS / Python / Ruby / etc.) come from
+ * @icons-pack/react-simple-icons. We load each one with an explicit
+ * dynamic `import()` (static specifier, so Vite code-splits one chunk per
+ * icon) — the browser then fetches ONLY the languages a page actually
+ * renders, never the full set and never the package's ~3000-icon barrel
+ * (importing that barrel makes Vite transform all 3000 modules on the
+ * first dev load, which dominated cold start).
+ *
+ * Because the import is dynamic, a brand icon isn't available during SSR;
+ * `BrandIcon` renders a sized placeholder until the module resolves on the
+ * client. The placeholder is identical on the server and the first client
+ * render, so hydration never mismatches. Langs without a brand icon fall
+ * back to a semantic lucide id (string) handled by `resolveIcon`.
+ */
+
+// canonical lang → loader (() => import of that icon's module).
+const BRAND_LOADERS = {
+  javascript: () => import('@icons-pack/react-simple-icons/icons/SiJavascript.mjs'),
+  typescript: () => import('@icons-pack/react-simple-icons/icons/SiTypescript.mjs'),
+  jsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
+  tsx: () => import('@icons-pack/react-simple-icons/icons/SiReact.mjs'),
+  python: () => import('@icons-pack/react-simple-icons/icons/SiPython.mjs'),
+  ruby: () => import('@icons-pack/react-simple-icons/icons/SiRuby.mjs'),
+  go: () => import('@icons-pack/react-simple-icons/icons/SiGo.mjs'),
+  rust: () => import('@icons-pack/react-simple-icons/icons/SiRust.mjs'),
+  java: () => import('@icons-pack/react-simple-icons/icons/SiOpenjdk.mjs'),
+  csharp: () => import('@icons-pack/react-simple-icons/icons/SiSharp.mjs'),
+  c: () => import('@icons-pack/react-simple-icons/icons/SiC.mjs'),
+  cpp: () => import('@icons-pack/react-simple-icons/icons/SiCplusplus.mjs'),
+  php: () => import('@icons-pack/react-simple-icons/icons/SiPhp.mjs'),
+  swift: () => import('@icons-pack/react-simple-icons/icons/SiSwift.mjs'),
+  kotlin: () => import('@icons-pack/react-simple-icons/icons/SiKotlin.mjs'),
+  scala: () => import('@icons-pack/react-simple-icons/icons/SiScala.mjs'),
+  dart: () => import('@icons-pack/react-simple-icons/icons/SiDart.mjs'),
+  r: () => import('@icons-pack/react-simple-icons/icons/SiR.mjs'),
+  haskell: () => import('@icons-pack/react-simple-icons/icons/SiHaskell.mjs'),
+  elixir: () => import('@icons-pack/react-simple-icons/icons/SiElixir.mjs'),
+  erlang: () => import('@icons-pack/react-simple-icons/icons/SiErlang.mjs'),
+  lua: () => import('@icons-pack/react-simple-icons/icons/SiLua.mjs'),
+  perl: () => import('@icons-pack/react-simple-icons/icons/SiPerl.mjs'),
+  julia: () => import('@icons-pack/react-simple-icons/icons/SiJulia.mjs'),
+  ocaml: () => import('@icons-pack/react-simple-icons/icons/SiOcaml.mjs'),
+  fsharp: () => import('@icons-pack/react-simple-icons/icons/SiFsharp.mjs'),
+  nim: () => import('@icons-pack/react-simple-icons/icons/SiNim.mjs'),
+  zig: () => import('@icons-pack/react-simple-icons/icons/SiZig.mjs'),
+  clojure: () => import('@icons-pack/react-simple-icons/icons/SiClojure.mjs'),
+  coffeescript: () => import('@icons-pack/react-simple-icons/icons/SiCoffeescript.mjs'),
+  html: () => import('@icons-pack/react-simple-icons/icons/SiHtml5.mjs'),
+  css: () => import('@icons-pack/react-simple-icons/icons/SiCss.mjs'),
+  vue: () => import('@icons-pack/react-simple-icons/icons/SiVuedotjs.mjs'),
+  svelte: () => import('@icons-pack/react-simple-icons/icons/SiSvelte.mjs'),
+  solid: () => import('@icons-pack/react-simple-icons/icons/SiSolid.mjs'),
+  json: () => import('@icons-pack/react-simple-icons/icons/SiJson.mjs'),
+  yaml: () => import('@icons-pack/react-simple-icons/icons/SiYaml.mjs'),
+  toml: () => import('@icons-pack/react-simple-icons/icons/SiToml.mjs'),
+  graphql: () => import('@icons-pack/react-simple-icons/icons/SiGraphql.mjs'),
+  markdown: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
+  mdx: () => import('@icons-pack/react-simple-icons/icons/SiMarkdown.mjs'),
+  latex: () => import('@icons-pack/react-simple-icons/icons/SiLatex.mjs'),
+  asciidoc: () => import('@icons-pack/react-simple-icons/icons/SiAsciidoctor.mjs'),
+  bash: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
+  shell: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
+  sh: () => import('@icons-pack/react-simple-icons/icons/SiGnubash.mjs'),
+  fish: () => import('@icons-pack/react-simple-icons/icons/SiFishshell.mjs'),
+  nodejs: () => import('@icons-pack/react-simple-icons/icons/SiNodedotjs.mjs'),
+  mysql: () => import('@icons-pack/react-simple-icons/icons/SiMysql.mjs'),
+  postgresql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
+  plsql: () => import('@icons-pack/react-simple-icons/icons/SiPostgresql.mjs'),
+  sqlite: () => import('@icons-pack/react-simple-icons/icons/SiSqlite.mjs'),
+  mongodb: () => import('@icons-pack/react-simple-icons/icons/SiMongodb.mjs'),
+  redis: () => import('@icons-pack/react-simple-icons/icons/SiRedis.mjs'),
+  docker: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
+  dockerfile: () => import('@icons-pack/react-simple-icons/icons/SiDocker.mjs'),
+  kubernetes: () => import('@icons-pack/react-simple-icons/icons/SiKubernetes.mjs'),
+  nginx: () => import('@icons-pack/react-simple-icons/icons/SiNginx.mjs'),
+  apacheconf: () => import('@icons-pack/react-simple-icons/icons/SiApache.mjs'),
+};
+
+// Generic lucide fallback for langs without a brand icon. Returns a
+// lucide id string — `resolveIcon` turns it into the icon component.
+const LUCIDE = {
+  sql: 'database',
+  xml: 'code-xml',
+  diff: 'git-compare-arrows',
+  ini: 'braces',
+  properties: 'braces',
+  powershell: 'terminal',
+  batch: 'terminal',
+  zsh: 'terminal',
+  text: 'file-code',
+  plaintext: 'file-code',
+};
+
+// Module-level cache so an icon that's been loaded once renders
+// synchronously everywhere after (no repeat import, no flash).
+const iconCache = new Map();
+
+/**
+ * Renders a brand icon loaded lazily by `key`. SSR + the first client
+ * render emit a sized placeholder (identical → hydration-safe); after
+ * mount the icon's module is imported and swapped in.
+ */
+function BrandIcon({ iconKey, ...props }) {
+  const [Icon, setIcon] = useState(() => iconCache.get(iconKey) || null);
+
+  useEffect(() => {
+    if (iconCache.has(iconKey)) {
+      setIcon(() => iconCache.get(iconKey));
+      return;
+    }
+    const load = BRAND_LOADERS[iconKey];
+    if (!load) return;
+    let alive = true;
+    load().then((mod) => {
+      iconCache.set(iconKey, mod.default);
+      if (alive) setIcon(() => mod.default);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [iconKey]);
+
+  if (!Icon) {
+    // Reserve the icon's box so swapping it in causes no layout shift.
+    return (
+      <span
+        aria-hidden="true"
+        style={{ display: 'inline-block', width: '1em', height: '1em' }}
+      />
+    );
+  }
+  return <Icon {...props} />;
+}
+
+export function iconForLang(lang) {
+  if (!lang) return 'file-code';
+  const id = resolveLang(lang) || lang;
+  const key = BRAND_LOADERS[id] ? id : BRAND_LOADERS[lang] ? lang : null;
+  if (key) return <BrandIcon iconKey={key} size="1em" />;
+  return LUCIDE[id] || LUCIDE[lang] || 'file-code';
+}