@veluai/velu 0.1.13 → 0.1.15

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