@veluai/velu 0.1.13 → 0.1.14

package/runtime/velu-ui/lib/prism-loader.js

@@ -1,74 +1,74 @@
-import { Prism } from 'prism-react-renderer';
-import { LANG_DEPS, LANG_ALIASES, PRISM_LOADERS } from './prism-langs.js';
-
-/**
- * Lazy prism language loader — fetches grammars on demand based on the
- * actual `language` props rendered, never bundles all 297 upfront.
- *
- *  - `Prism` is exposed on globalThis so prismjs/components/*.js files
- *    (which look it up globally) find it when they register grammars.
- *  - `ensureLang(id)` walks the LANG_DEPS map to load every prerequisite
- *    in correct order before the target, then resolves once everything is
- *    registered. Subsequent calls for the same id share the cached promise.
- *  - Aliases (e.g. `rb` → `ruby`) are resolved up front via LANG_ALIASES.
- *  - `hasLang(id)` is a sync check used by render to gate highlighting:
- *    true once `Prism.languages[id]` exists OR the bundled fallback covers
- *    it. The CodeBlock kicks off ensureLang in an effect, then re-renders
- *    once `hasLang` flips true.
- */
-
-if (typeof globalThis !== 'undefined' && !globalThis.Prism) {
-  globalThis.Prism = Prism;
-} else if (typeof window !== 'undefined' && !window.Prism) {
-  window.Prism = Prism;
-}
-
-const loadPromises = new Map();
-
-export function resolveLang(idOrAlias) {
-  if (!idOrAlias) return null;
-  if (LANG_ALIASES[idOrAlias]) return LANG_ALIASES[idOrAlias];
-  return idOrAlias;
-}
-
-export function hasLang(id) {
-  if (!id) return true;
-  const canonical = resolveLang(id);
-  return Boolean(Prism.languages[canonical]);
-}
-
-async function loadOne(id) {
-  const loader = PRISM_LOADERS[id];
-  if (!loader) return;
-  try {
-    await loader();
-  } catch (e) {
-    console.warn(`[velu-ui] failed to load prism lang: ${id}`, e?.message ?? e);
-  }
-}
-
-export function ensureLang(idOrAlias) {
-  const id = resolveLang(idOrAlias);
-  if (!id) return Promise.resolve();
-  if (Prism.languages[id]) return Promise.resolve();
-  let p = loadPromises.get(id);
-  if (p) return p;
-
-  p = (async () => {
-    // Load all dependencies first (recursive, sequential at each level).
-    const deps = LANG_DEPS[id] ?? [];
-    for (const dep of deps) {
-      const depId = resolveLang(dep);
-      if (depId && !Prism.languages[depId]) {
-        await ensureLang(depId);
-      }
-    }
-    // Load the target language itself.
-    if (!Prism.languages[id]) {
-      await loadOne(id);
-    }
-  })();
-
-  loadPromises.set(id, p);
-  return p;
-}
+import { Prism } from 'prism-react-renderer';
+import { LANG_DEPS, LANG_ALIASES, PRISM_LOADERS } from './prism-langs.js';
+
+/**
+ * Lazy prism language loader — fetches grammars on demand based on the
+ * actual `language` props rendered, never bundles all 297 upfront.
+ *
+ *  - `Prism` is exposed on globalThis so prismjs/components/*.js files
+ *    (which look it up globally) find it when they register grammars.
+ *  - `ensureLang(id)` walks the LANG_DEPS map to load every prerequisite
+ *    in correct order before the target, then resolves once everything is
+ *    registered. Subsequent calls for the same id share the cached promise.
+ *  - Aliases (e.g. `rb` → `ruby`) are resolved up front via LANG_ALIASES.
+ *  - `hasLang(id)` is a sync check used by render to gate highlighting:
+ *    true once `Prism.languages[id]` exists OR the bundled fallback covers
+ *    it. The CodeBlock kicks off ensureLang in an effect, then re-renders
+ *    once `hasLang` flips true.
+ */
+
+if (typeof globalThis !== 'undefined' && !globalThis.Prism) {
+  globalThis.Prism = Prism;
+} else if (typeof window !== 'undefined' && !window.Prism) {
+  window.Prism = Prism;
+}
+
+const loadPromises = new Map();
+
+export function resolveLang(idOrAlias) {
+  if (!idOrAlias) return null;
+  if (LANG_ALIASES[idOrAlias]) return LANG_ALIASES[idOrAlias];
+  return idOrAlias;
+}
+
+export function hasLang(id) {
+  if (!id) return true;
+  const canonical = resolveLang(id);
+  return Boolean(Prism.languages[canonical]);
+}
+
+async function loadOne(id) {
+  const loader = PRISM_LOADERS[id];
+  if (!loader) return;
+  try {
+    await loader();
+  } catch (e) {
+    console.warn(`[velu-ui] failed to load prism lang: ${id}`, e?.message ?? e);
+  }
+}
+
+export function ensureLang(idOrAlias) {
+  const id = resolveLang(idOrAlias);
+  if (!id) return Promise.resolve();
+  if (Prism.languages[id]) return Promise.resolve();
+  let p = loadPromises.get(id);
+  if (p) return p;
+
+  p = (async () => {
+    // Load all dependencies first (recursive, sequential at each level).
+    const deps = LANG_DEPS[id] ?? [];
+    for (const dep of deps) {
+      const depId = resolveLang(dep);
+      if (depId && !Prism.languages[depId]) {
+        await ensureLang(depId);
+      }
+    }
+    // Load the target language itself.
+    if (!Prism.languages[id]) {
+      await loadOne(id);
+    }
+  })();
+
+  loadPromises.set(id, p);
+  return p;
+}

package/runtime/velu-ui/lib/resolveIcon.jsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { icons as lucideIcons } from 'lucide-react';
-
-/**
- * Resolve an icon prop to a renderable node — shared by Callout, Sidebar, etc.
- *
- * lucide convention: an icon's id is kebab-case; its component / `icons`-map
- * key is the PascalCase form. So "triangle-alert" → "TriangleAlert" →
- * lucideIcons.TriangleAlert.
- *
- * - string  → resolved as a lucide id (content-driven; serializable)
- * - node    → returned as-is (power users / custom elements)
- * - nullish or unknown id → null
- *
- * `iconProps` is spread onto the resolved lucide component (e.g. size,
- * strokeWidth). Callers that style the icon via a CSS wrapper (Sidebar) can
- * omit it; callers that size inline (Callout) pass it.
- */
-export default function resolveIcon(icon, iconProps = {}) {
-  if (icon == null) return null;
-  if (typeof icon !== 'string') return icon;
-  const key = icon
-    .split(/[-_\s]+/)
-    .filter(Boolean)
-    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-    .join('');
-  const Cmp = lucideIcons[key];
-  return Cmp ? <Cmp {...iconProps} /> : null;
-}
+import React from 'react';
+import { icons as lucideIcons } from 'lucide-react';
+
+/**
+ * Resolve an icon prop to a renderable node — shared by Callout, Sidebar, etc.
+ *
+ * lucide convention: an icon's id is kebab-case; its component / `icons`-map
+ * key is the PascalCase form. So "triangle-alert" → "TriangleAlert" →
+ * lucideIcons.TriangleAlert.
+ *
+ * - string  → resolved as a lucide id (content-driven; serializable)
+ * - node    → returned as-is (power users / custom elements)
+ * - nullish or unknown id → null
+ *
+ * `iconProps` is spread onto the resolved lucide component (e.g. size,
+ * strokeWidth). Callers that style the icon via a CSS wrapper (Sidebar) can
+ * omit it; callers that size inline (Callout) pass it.
+ */
+export default function resolveIcon(icon, iconProps = {}) {
+  if (icon == null) return null;
+  if (typeof icon !== 'string') return icon;
+  const key = icon
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+  const Cmp = lucideIcons[key];
+  return Cmp ? <Cmp {...iconProps} /> : null;
+}

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

@@ -1,66 +1,66 @@
-/**
- * scrollIntoNearestView — programmatic "scroll so this element is visible"
- * that reliably honours `scroll-padding-top` / `scroll-padding-bottom` on
- * the nearest scrollable ancestor.
- *
- * Why not `el.scrollIntoView({ block: 'nearest' })`?
- *   Both Chrome and Firefox implement that opt sporadically with respect
- *   to scroll-padding-* — sometimes treating the full scrollport as the
- *   target instead of the scroll-padded inset. That matters here because
- *   docs sidebars + TOC live behind a footer that visually eclipses their
- *   bottoms; we use `scroll-padding-bottom` to mark that band as off-limits.
- *   Computing the delta manually guarantees we always pull the element
- *   above the footer's eclipsed band, on every engine.
- *
- * The optional `padBottom` (and `padTop`) override the values read from
- * the parent's computed style. This is needed when the visible region's
- * bottom is driven by a *live* DOM measurement (e.g. a fixed/sticky
- * footer's getBoundingClientRect) — that value tracks the user's actual
- * scroll position synchronously, whereas CSS scroll-padding-* driven by
- * React state lags behind committed renders and can leave the active
- * item flush against the footer on fast scrolls.
- *
- * Behaviour:
- *   - finds the nearest ancestor with `overflow-y: auto | scroll`
- *   - does nothing if `el` is already inside that ancestor's
- *     (effective) scroll-padded visible region — no jitter when the
- *     active item is already on-screen
- *   - otherwise scrolls the ancestor by the minimum delta (matching the
- *     `block: 'nearest'` contract)
- *
- * @param {HTMLElement} el target element
- * @param {{ padTop?: number, padBottom?: number }} [opts]
- */
-export default function scrollIntoNearestView(el, opts = {}) {
-  if (!el) return;
-  let parent = el.parentElement;
-  while (parent && parent !== document.body) {
-    const overflowY = getComputedStyle(parent).overflowY;
-    if (overflowY === 'auto' || overflowY === 'scroll') break;
-    parent = parent.parentElement;
-  }
-  if (!parent || parent === document.body) return;
-
-  const elRect = el.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-  const cs = getComputedStyle(parent);
-  const padTop = opts.padTop ?? (parseFloat(cs.scrollPaddingTop) || 0);
-  const padBottom =
-    opts.padBottom ?? (parseFloat(cs.scrollPaddingBottom) || 0);
-
-  const visibleTop = parentRect.top + padTop;
-  const visibleBottom = parentRect.bottom - padBottom;
-
-  let delta = 0;
-  if (elRect.top < visibleTop) delta = elRect.top - visibleTop;
-  else if (elRect.bottom > visibleBottom) delta = elRect.bottom - visibleBottom;
-  if (delta === 0) return;
-
-  // Direct `scrollTop` assignment (not scrollBy/scrollTo with options):
-  //   - universally supported (no behavior:'instant' compat concerns),
-  //   - synchronous,
-  //   - can't be cancelled by a subsequent scroll event,
-  // which matters because we're often called many times in quick
-  // succession from scroll-spy updates while the user is mid-scroll.
-  parent.scrollTop = parent.scrollTop + delta;
-}
+/**
+ * scrollIntoNearestView — programmatic "scroll so this element is visible"
+ * that reliably honours `scroll-padding-top` / `scroll-padding-bottom` on
+ * the nearest scrollable ancestor.
+ *
+ * Why not `el.scrollIntoView({ block: 'nearest' })`?
+ *   Both Chrome and Firefox implement that opt sporadically with respect
+ *   to scroll-padding-* — sometimes treating the full scrollport as the
+ *   target instead of the scroll-padded inset. That matters here because
+ *   docs sidebars + TOC live behind a footer that visually eclipses their
+ *   bottoms; we use `scroll-padding-bottom` to mark that band as off-limits.
+ *   Computing the delta manually guarantees we always pull the element
+ *   above the footer's eclipsed band, on every engine.
+ *
+ * The optional `padBottom` (and `padTop`) override the values read from
+ * the parent's computed style. This is needed when the visible region's
+ * bottom is driven by a *live* DOM measurement (e.g. a fixed/sticky
+ * footer's getBoundingClientRect) — that value tracks the user's actual
+ * scroll position synchronously, whereas CSS scroll-padding-* driven by
+ * React state lags behind committed renders and can leave the active
+ * item flush against the footer on fast scrolls.
+ *
+ * Behaviour:
+ *   - finds the nearest ancestor with `overflow-y: auto | scroll`
+ *   - does nothing if `el` is already inside that ancestor's
+ *     (effective) scroll-padded visible region — no jitter when the
+ *     active item is already on-screen
+ *   - otherwise scrolls the ancestor by the minimum delta (matching the
+ *     `block: 'nearest'` contract)
+ *
+ * @param {HTMLElement} el target element
+ * @param {{ padTop?: number, padBottom?: number }} [opts]
+ */
+export default function scrollIntoNearestView(el, opts = {}) {
+  if (!el) return;
+  let parent = el.parentElement;
+  while (parent && parent !== document.body) {
+    const overflowY = getComputedStyle(parent).overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') break;
+    parent = parent.parentElement;
+  }
+  if (!parent || parent === document.body) return;
+
+  const elRect = el.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+  const cs = getComputedStyle(parent);
+  const padTop = opts.padTop ?? (parseFloat(cs.scrollPaddingTop) || 0);
+  const padBottom =
+    opts.padBottom ?? (parseFloat(cs.scrollPaddingBottom) || 0);
+
+  const visibleTop = parentRect.top + padTop;
+  const visibleBottom = parentRect.bottom - padBottom;
+
+  let delta = 0;
+  if (elRect.top < visibleTop) delta = elRect.top - visibleTop;
+  else if (elRect.bottom > visibleBottom) delta = elRect.bottom - visibleBottom;
+  if (delta === 0) return;
+
+  // Direct `scrollTop` assignment (not scrollBy/scrollTo with options):
+  //   - universally supported (no behavior:'instant' compat concerns),
+  //   - synchronous,
+  //   - can't be cancelled by a subsequent scroll event,
+  // which matters because we're often called many times in quick
+  // succession from scroll-spy updates while the user is mid-scroll.
+  parent.scrollTop = parent.scrollTop + delta;
+}

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;

package/runtime/velu-ui/primitives/Cluster.jsx

@@ -1,49 +1,49 @@
-import React from 'react';
-
-/**
- * Cluster — Every Layout primitive. Inline group that wraps onto
- * multiple lines when it runs out of horizontal room. Use for chips,
- * tags, action button rows, nav links, badge groups — any horizontal
- * row of inline-ish items that should break gracefully.
- *
- * Like Stack, this is pure inline styles (no CSS file needed since
- * there's no `> *` selector) — React-native, SSR-safe, tokenized.
- * Mirrors the Every Layout custom element but as React with the same
- * three knobs.
- *
- *  - `space`   gap between items (default --s1)
- *  - `justify` justify-content (default flex-start)
- *  - `align`   align-items (default flex-start)
- *  - `as`      element tag (default 'div')
- *
- * @param {object} props
- * @param {React.ElementType} [props.as='div']
- * @param {string} [props.space='var(--s1)']
- * @param {string} [props.justify='flex-start']
- * @param {string} [props.align='flex-start']
- */
-export default function Cluster({
-  as: Tag = 'div',
-  space = 'var(--s1)',
-  justify = 'flex-start',
-  align = 'flex-start',
-  style,
-  children,
-  ...rest
-}) {
-  return (
-    <Tag
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: justify,
-        alignItems: align,
-        gap: space,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-    </Tag>
-  );
-}
+import React from 'react';
+
+/**
+ * Cluster — Every Layout primitive. Inline group that wraps onto
+ * multiple lines when it runs out of horizontal room. Use for chips,
+ * tags, action button rows, nav links, badge groups — any horizontal
+ * row of inline-ish items that should break gracefully.
+ *
+ * Like Stack, this is pure inline styles (no CSS file needed since
+ * there's no `> *` selector) — React-native, SSR-safe, tokenized.
+ * Mirrors the Every Layout custom element but as React with the same
+ * three knobs.
+ *
+ *  - `space`   gap between items (default --s1)
+ *  - `justify` justify-content (default flex-start)
+ *  - `align`   align-items (default flex-start)
+ *  - `as`      element tag (default 'div')
+ *
+ * @param {object} props
+ * @param {React.ElementType} [props.as='div']
+ * @param {string} [props.space='var(--s1)']
+ * @param {string} [props.justify='flex-start']
+ * @param {string} [props.align='flex-start']
+ */
+export default function Cluster({
+  as: Tag = 'div',
+  space = 'var(--s1)',
+  justify = 'flex-start',
+  align = 'flex-start',
+  style,
+  children,
+  ...rest
+}) {
+  return (
+    <Tag
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: justify,
+        alignItems: align,
+        gap: space,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}