@veluai/velu 0.2.24 → 0.2.27

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

@@ -1,375 +1,375 @@
-import React, {
-  Children,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Highlight } from 'prism-react-renderer';
-import { ensureLang, hasLang, resolveLang } from '../lib/prism-loader.js';
-import { iconForLang } from '../lib/lang-icons.jsx';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import copyText from '../lib/copyText.js';
-
-/**
- * CodeBlock + CodeGroup — syntax-highlighted code with optional filename
- * label or tabbed group of language alternatives.
- *
- * Standalone (with filename):
- *   <CodeBlock filename="index.js" language="javascript" lineNumbers
- *              icon="file-code">
- *     {`let greeting = function (name) {
- *   console.log(\`Hello, \${name}!\`);
- * };`}
- *   </CodeBlock>
- *
- * Grouped (tabbed):
- *   <CodeGroup>
- *     <CodeBlock title="Javascript" language="javascript">{js}</CodeBlock>
- *     <CodeBlock title="Ruby"       language="ruby">{rb}</CodeBlock>
- *     <CodeBlock title="Python"     language="python">{py}</CodeBlock>
- *   </CodeGroup>
- *
- * Highlighting uses prism-react-renderer with an empty theme — token CSS
- * classes (`.token.<type>`) are styled in code-block.css using
- * `--syntax-*` tokens that switch per [data-theme]. Languages outside the
- * prism-react-renderer default bundle are LAZY-LOADED from prismjs on
- * first use via the loader in lib/prism-loader.js — SSR (and the first
- * client render) shows plain code for unloaded langs, then upgrades to
- * highlighted once the lang's prism file has fetched. No 1.4 MB bundle
- * tax for languages the page doesn't actually use.
- */
-
-// Empty theme so prism-react-renderer emits class names but no inline
-// colors — all styling lives in code-block.css.
-const NO_THEME = { plain: {}, styles: [] };
-
-function normalize(code) {
-  if (typeof code !== 'string') return '';
-  return code.replace(/^\n+/, '').replace(/\n+$/, '');
-}
-
-// Parse a highlight spec into a Set of 1-based line numbers.
-//   "1-3,5,7-9"  → {1,2,3,5,7,8,9}
-//   [1, 2, 5]    → {1,2,5}
-//   null / ''    → null (nothing highlighted)
-function parseHighlight(spec) {
-  if (spec == null || spec === '') return null;
-  if (Array.isArray(spec)) {
-    const s = new Set();
-    for (const n of spec) {
-      const v = Number(n);
-      if (Number.isFinite(v)) s.add(v);
-    }
-    return s.size ? s : null;
-  }
-  if (typeof spec !== 'string') return null;
-  const s = new Set();
-  for (const part of spec.split(',')) {
-    const t = part.trim();
-    if (!t) continue;
-    const dash = t.indexOf('-');
-    if (dash > 0) {
-      const a = parseInt(t.slice(0, dash), 10);
-      const b = parseInt(t.slice(dash + 1), 10);
-      if (Number.isFinite(a) && Number.isFinite(b)) {
-        const lo = Math.min(a, b);
-        const hi = Math.max(a, b);
-        for (let i = lo; i <= hi; i++) s.add(i);
-      }
-    } else {
-      const n = parseInt(t, 10);
-      if (Number.isFinite(n)) s.add(n);
-    }
-  }
-  return s.size ? s : null;
-}
-
-function TabLabel({ icon, label }) {
-  return (
-    <>
-      {icon != null && (
-        <span className="velu-code-block__tab-icon" aria-hidden="true">
-          {typeof icon === 'string' ? resolveIcon(icon, { size: '1em' }) : icon}
-        </span>
-      )}
-      <span className="velu-code-block__tab-label">{label}</span>
-    </>
-  );
-}
-
-function Tab({ active, onClick, icon, label }) {
-  const cls = `velu-code-block__tab${
-    active ? ' velu-code-block__tab--active' : ''
-  }`;
-  if (onClick) {
-    return (
-      <button
-        type="button"
-        role="tab"
-        aria-selected={active}
-        className={cls}
-        onClick={onClick}
-      >
-        <TabLabel icon={icon} label={label} />
-      </button>
-    );
-  }
-  return (
-    <div className={cls}>
-      <TabLabel icon={icon} label={label} />
-    </div>
-  );
-}
-
-function CopyButton({ code }) {
-  const [copied, setCopied] = useState(false);
-
-  function copy() {
-    copyText(code).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1400);
-      },
-      () => {
-        /* clipboard write rejected (permissions / no focus) — silently noop */
-      },
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={copy}
-      className="velu-code-block__copy"
-      aria-label={copied ? 'Copied' : 'Copy code'}
-      title={copied ? 'Copied' : 'Copy'}
-    >
-      {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
-    </button>
-  );
-}
-
-function CodeBody({ code, language, lineNumbers, highlight }) {
-  const canonical = resolveLang(language) || 'text';
-  const highlightSet = parseHighlight(highlight);
-
-  // Initial render uses 'text' (no highlighting) — this guarantees SSR
-  // and the first client render produce identical HTML regardless of
-  // what's in Prism.languages on each side (which may diverge in dev
-  // mode due to HMR leaving cached grammar mutations behind). After
-  // hydration, useEffect kicks ensureLang and bumps to the real lang —
-  // highlighting then upgrades in a normal state-update render.
-  const [renderLang, setRenderLang] = useState('text');
-
-  useEffect(() => {
-    let cancelled = false;
-    ensureLang(canonical).then(() => {
-      if (!cancelled && hasLang(canonical)) setRenderLang(canonical);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [canonical]);
-
-  return (
-    <div className="velu-code-block__body">
-      <CopyButton code={normalize(code)} />
-      <Highlight
-        code={normalize(code)}
-        language={renderLang}
-        theme={NO_THEME}
-      >
-        {({ tokens, getLineProps, getTokenProps }) => (
-          <pre className="velu-code-block__pre">
-            {tokens.map((line, i) => {
-              const lineProps = getLineProps({ line });
-              const isHi = highlightSet?.has(i + 1);
-              return (
-                <div
-                  key={i}
-                  {...lineProps}
-                  className={`velu-code-block__line ${
-                    lineProps.className || ''
-                  } ${isHi ? 'velu-code-block__line--highlight' : ''}`.trim()}
-                >
-                  {lineNumbers && (
-                    <span
-                      className="velu-code-block__line-number"
-                      aria-hidden="true"
-                    >
-                      {i + 1}
-                    </span>
-                  )}
-                  <span className="velu-code-block__line-code">
-                    {line.map((token, j) => (
-                      <span key={j} {...getTokenProps({ token })} />
-                    ))}
-                  </span>
-                </div>
-              );
-            })}
-          </pre>
-        )}
-      </Highlight>
-    </div>
-  );
-}
-
-// Explicit `icon` always wins. `withIcon` defaults to true, so an icon
-// is auto-rendered from `lib/lang-icons.jsx` based on the language;
-// pass `withIcon={false}` to suppress.
-function pickIcon({ icon, withIcon, language }) {
-  if (icon != null) return icon;
-  if (withIcon === false) return null;
-  return iconForLang(language);
-}
-
-export function CodeBlock({
-  filename,
-  title,
-  language = 'text',
-  icon,
-  withIcon = true,
-  lineNumbers = false,
-  highlight,
-  children,
-  className = '',
-  ...rest
-}) {
-  const cls = `velu-code-block ${className}`.trim();
-  const label = filename || title;
-  const tabIcon = pickIcon({ icon, withIcon, language });
-  return (
-    <div className={cls} {...rest}>
-      {label && (
-        <div className="velu-code-block__header">
-          <Tab active icon={tabIcon} label={label} />
-        </div>
-      )}
-      <CodeBody
-        code={children}
-        language={language}
-        lineNumbers={lineNumbers}
-        highlight={highlight}
-      />
-    </div>
-  );
-}
-CodeBlock.displayName = 'CodeBlock';
-
-// Hook that tracks whether a scrollable element can scroll further left
-// or right. Resolves layout-driven overflow without media queries.
-function useScrollEdges(ref) {
-  const [canLeft, setCanLeft] = useState(false);
-  const [canRight, setCanRight] = useState(false);
-
-  const update = useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    setCanLeft(el.scrollLeft > 1);
-    setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-  }, [ref]);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    update();
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    // Also observe each child so adding/removing tabs retriggers update.
-    for (const c of el.children) ro.observe(c);
-    el.addEventListener('scroll', update, { passive: true });
-    return () => {
-      ro.disconnect();
-      el.removeEventListener('scroll', update);
-    };
-  }, [ref, update]);
-
-  return { canLeft, canRight, update };
-}
-
-export function CodeGroup({
-  children,
-  className = '',
-  defaultIndex = 0,
-  ...rest
-}) {
-  const blocks = Children.toArray(children).filter(
-    (c) =>
-      isValidElement(c) &&
-      (c.type === CodeBlock || c.type?.displayName === 'CodeBlock'),
-  );
-  const [active, setActive] = useState(defaultIndex);
-  const tabsRef = useRef(null);
-  const { canLeft, canRight } = useScrollEdges(tabsRef);
-  const block = blocks[active] || blocks[0];
-  if (!block) return null;
-
-  const {
-    language = 'text',
-    lineNumbers = false,
-    highlight,
-    children: code,
-  } = block.props;
-  const cls = `velu-code-block velu-code-block--group ${className}`.trim();
-
-  function scrollDir(dir) {
-    tabsRef.current?.scrollBy({ left: dir * 160, behavior: 'smooth' });
-  }
-
-  return (
-    <div className={cls} {...rest}>
-      <div className="velu-code-block__header">
-        {canLeft && (
-          <button
-            type="button"
-            className="velu-code-block__nav"
-            onClick={() => scrollDir(-1)}
-            aria-label="Scroll tabs left"
-          >
-            {resolveIcon('chevron-left', { size: '1em' })}
-          </button>
-        )}
-        <div
-          ref={tabsRef}
-          className="velu-code-block__tabs"
-          role="tablist"
-        >
-          {blocks.map((b, i) => {
-            const { title, icon, withIcon, language } = b.props;
-            const tabIcon = pickIcon({ icon, withIcon, language });
-            return (
-              <Tab
-                key={i}
-                active={i === active}
-                onClick={() => setActive(i)}
-                icon={tabIcon}
-                label={title || `Tab ${i + 1}`}
-              />
-            );
-          })}
-        </div>
-        {canRight && (
-          <button
-            type="button"
-            className="velu-code-block__nav"
-            onClick={() => scrollDir(1)}
-            aria-label="Scroll tabs right"
-          >
-            {resolveIcon('chevron-right', { size: '1em' })}
-          </button>
-        )}
-      </div>
-      <CodeBody
-        code={code}
-        language={language}
-        lineNumbers={lineNumbers}
-        highlight={highlight}
-      />
-    </div>
-  );
-}
-
-export default CodeBlock;
+import React, {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Highlight } from 'prism-react-renderer';
+import { ensureLang, hasLang, resolveLang } from '../lib/prism-loader.js';
+import { iconForLang } from '../lib/lang-icons.jsx';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import copyText from '../lib/copyText.js';
+
+/**
+ * CodeBlock + CodeGroup — syntax-highlighted code with optional filename
+ * label or tabbed group of language alternatives.
+ *
+ * Standalone (with filename):
+ *   <CodeBlock filename="index.js" language="javascript" lineNumbers
+ *              icon="file-code">
+ *     {`let greeting = function (name) {
+ *   console.log(\`Hello, \${name}!\`);
+ * };`}
+ *   </CodeBlock>
+ *
+ * Grouped (tabbed):
+ *   <CodeGroup>
+ *     <CodeBlock title="Javascript" language="javascript">{js}</CodeBlock>
+ *     <CodeBlock title="Ruby"       language="ruby">{rb}</CodeBlock>
+ *     <CodeBlock title="Python"     language="python">{py}</CodeBlock>
+ *   </CodeGroup>
+ *
+ * Highlighting uses prism-react-renderer with an empty theme — token CSS
+ * classes (`.token.<type>`) are styled in code-block.css using
+ * `--syntax-*` tokens that switch per [data-theme]. Languages outside the
+ * prism-react-renderer default bundle are LAZY-LOADED from prismjs on
+ * first use via the loader in lib/prism-loader.js — SSR (and the first
+ * client render) shows plain code for unloaded langs, then upgrades to
+ * highlighted once the lang's prism file has fetched. No 1.4 MB bundle
+ * tax for languages the page doesn't actually use.
+ */
+
+// Empty theme so prism-react-renderer emits class names but no inline
+// colors — all styling lives in code-block.css.
+const NO_THEME = { plain: {}, styles: [] };
+
+function normalize(code) {
+  if (typeof code !== 'string') return '';
+  return code.replace(/^\n+/, '').replace(/\n+$/, '');
+}
+
+// Parse a highlight spec into a Set of 1-based line numbers.
+//   "1-3,5,7-9"  → {1,2,3,5,7,8,9}
+//   [1, 2, 5]    → {1,2,5}
+//   null / ''    → null (nothing highlighted)
+function parseHighlight(spec) {
+  if (spec == null || spec === '') return null;
+  if (Array.isArray(spec)) {
+    const s = new Set();
+    for (const n of spec) {
+      const v = Number(n);
+      if (Number.isFinite(v)) s.add(v);
+    }
+    return s.size ? s : null;
+  }
+  if (typeof spec !== 'string') return null;
+  const s = new Set();
+  for (const part of spec.split(',')) {
+    const t = part.trim();
+    if (!t) continue;
+    const dash = t.indexOf('-');
+    if (dash > 0) {
+      const a = parseInt(t.slice(0, dash), 10);
+      const b = parseInt(t.slice(dash + 1), 10);
+      if (Number.isFinite(a) && Number.isFinite(b)) {
+        const lo = Math.min(a, b);
+        const hi = Math.max(a, b);
+        for (let i = lo; i <= hi; i++) s.add(i);
+      }
+    } else {
+      const n = parseInt(t, 10);
+      if (Number.isFinite(n)) s.add(n);
+    }
+  }
+  return s.size ? s : null;
+}
+
+function TabLabel({ icon, label }) {
+  return (
+    <>
+      {icon != null && (
+        <span className="velu-code-block__tab-icon" aria-hidden="true">
+          {typeof icon === 'string' ? resolveIcon(icon, { size: '1em' }) : icon}
+        </span>
+      )}
+      <span className="velu-code-block__tab-label">{label}</span>
+    </>
+  );
+}
+
+function Tab({ active, onClick, icon, label }) {
+  const cls = `velu-code-block__tab${
+    active ? ' velu-code-block__tab--active' : ''
+  }`;
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        role="tab"
+        aria-selected={active}
+        className={cls}
+        onClick={onClick}
+      >
+        <TabLabel icon={icon} label={label} />
+      </button>
+    );
+  }
+  return (
+    <div className={cls}>
+      <TabLabel icon={icon} label={label} />
+    </div>
+  );
+}
+
+function CopyButton({ code }) {
+  const [copied, setCopied] = useState(false);
+
+  function copy() {
+    copyText(code).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+        /* clipboard write rejected (permissions / no focus) — silently noop */
+      },
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="velu-code-block__copy"
+      aria-label={copied ? 'Copied' : 'Copy code'}
+      title={copied ? 'Copied' : 'Copy'}
+    >
+      {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
+    </button>
+  );
+}
+
+function CodeBody({ code, language, lineNumbers, highlight }) {
+  const canonical = resolveLang(language) || 'text';
+  const highlightSet = parseHighlight(highlight);
+
+  // Initial render uses 'text' (no highlighting) — this guarantees SSR
+  // and the first client render produce identical HTML regardless of
+  // what's in Prism.languages on each side (which may diverge in dev
+  // mode due to HMR leaving cached grammar mutations behind). After
+  // hydration, useEffect kicks ensureLang and bumps to the real lang —
+  // highlighting then upgrades in a normal state-update render.
+  const [renderLang, setRenderLang] = useState('text');
+
+  useEffect(() => {
+    let cancelled = false;
+    ensureLang(canonical).then(() => {
+      if (!cancelled && hasLang(canonical)) setRenderLang(canonical);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [canonical]);
+
+  return (
+    <div className="velu-code-block__body">
+      <CopyButton code={normalize(code)} />
+      <Highlight
+        code={normalize(code)}
+        language={renderLang}
+        theme={NO_THEME}
+      >
+        {({ tokens, getLineProps, getTokenProps }) => (
+          <pre className="velu-code-block__pre">
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({ line });
+              const isHi = highlightSet?.has(i + 1);
+              return (
+                <div
+                  key={i}
+                  {...lineProps}
+                  className={`velu-code-block__line ${
+                    lineProps.className || ''
+                  } ${isHi ? 'velu-code-block__line--highlight' : ''}`.trim()}
+                >
+                  {lineNumbers && (
+                    <span
+                      className="velu-code-block__line-number"
+                      aria-hidden="true"
+                    >
+                      {i + 1}
+                    </span>
+                  )}
+                  <span className="velu-code-block__line-code">
+                    {line.map((token, j) => (
+                      <span key={j} {...getTokenProps({ token })} />
+                    ))}
+                  </span>
+                </div>
+              );
+            })}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+}
+
+// Explicit `icon` always wins. `withIcon` defaults to true, so an icon
+// is auto-rendered from `lib/lang-icons.jsx` based on the language;
+// pass `withIcon={false}` to suppress.
+function pickIcon({ icon, withIcon, language }) {
+  if (icon != null) return icon;
+  if (withIcon === false) return null;
+  return iconForLang(language);
+}
+
+export function CodeBlock({
+  filename,
+  title,
+  language = 'text',
+  icon,
+  withIcon = true,
+  lineNumbers = false,
+  highlight,
+  children,
+  className = '',
+  ...rest
+}) {
+  const cls = `velu-code-block ${className}`.trim();
+  const label = filename || title;
+  const tabIcon = pickIcon({ icon, withIcon, language });
+  return (
+    <div className={cls} {...rest}>
+      {label && (
+        <div className="velu-code-block__header">
+          <Tab active icon={tabIcon} label={label} />
+        </div>
+      )}
+      <CodeBody
+        code={children}
+        language={language}
+        lineNumbers={lineNumbers}
+        highlight={highlight}
+      />
+    </div>
+  );
+}
+CodeBlock.displayName = 'CodeBlock';
+
+// Hook that tracks whether a scrollable element can scroll further left
+// or right. Resolves layout-driven overflow without media queries.
+function useScrollEdges(ref) {
+  const [canLeft, setCanLeft] = useState(false);
+  const [canRight, setCanRight] = useState(false);
+
+  const update = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    setCanLeft(el.scrollLeft > 1);
+    setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, [ref]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Also observe each child so adding/removing tabs retriggers update.
+    for (const c of el.children) ro.observe(c);
+    el.addEventListener('scroll', update, { passive: true });
+    return () => {
+      ro.disconnect();
+      el.removeEventListener('scroll', update);
+    };
+  }, [ref, update]);
+
+  return { canLeft, canRight, update };
+}
+
+export function CodeGroup({
+  children,
+  className = '',
+  defaultIndex = 0,
+  ...rest
+}) {
+  const blocks = Children.toArray(children).filter(
+    (c) =>
+      isValidElement(c) &&
+      (c.type === CodeBlock || c.type?.displayName === 'CodeBlock'),
+  );
+  const [active, setActive] = useState(defaultIndex);
+  const tabsRef = useRef(null);
+  const { canLeft, canRight } = useScrollEdges(tabsRef);
+  const block = blocks[active] || blocks[0];
+  if (!block) return null;
+
+  const {
+    language = 'text',
+    lineNumbers = false,
+    highlight,
+    children: code,
+  } = block.props;
+  const cls = `velu-code-block velu-code-block--group ${className}`.trim();
+
+  function scrollDir(dir) {
+    tabsRef.current?.scrollBy({ left: dir * 160, behavior: 'smooth' });
+  }
+
+  return (
+    <div className={cls} {...rest}>
+      <div className="velu-code-block__header">
+        {canLeft && (
+          <button
+            type="button"
+            className="velu-code-block__nav"
+            onClick={() => scrollDir(-1)}
+            aria-label="Scroll tabs left"
+          >
+            {resolveIcon('chevron-left', { size: '1em' })}
+          </button>
+        )}
+        <div
+          ref={tabsRef}
+          className="velu-code-block__tabs"
+          role="tablist"
+        >
+          {blocks.map((b, i) => {
+            const { title, icon, withIcon, language } = b.props;
+            const tabIcon = pickIcon({ icon, withIcon, language });
+            return (
+              <Tab
+                key={i}
+                active={i === active}
+                onClick={() => setActive(i)}
+                icon={tabIcon}
+                label={title || `Tab ${i + 1}`}
+              />
+            );
+          })}
+        </div>
+        {canRight && (
+          <button
+            type="button"
+            className="velu-code-block__nav"
+            onClick={() => scrollDir(1)}
+            aria-label="Scroll tabs right"
+          >
+            {resolveIcon('chevron-right', { size: '1em' })}
+          </button>
+        )}
+      </div>
+      <CodeBody
+        code={code}
+        language={language}
+        lineNumbers={lineNumbers}
+        highlight={highlight}
+      />
+    </div>
+  );
+}
+
+export default CodeBlock;