@veluai/velu 0.2.25 → 0.2.28

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

@@ -1,114 +1,114 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * Callout — admonition box (note/warning/info/tip/check/danger/callout).
- *
- * Fully tokenized: each `type` maps to its Figma bg + stroke token pair
- * (base.css, light + dark), so theming is automatic via [data-theme]. Border
- * + icon use the stroke; surface uses the bg; body uses --text-color.
- * Spacing/radius from the modular scale.
- *
- * Layout: the icon is FLOATED into the text flow (not a fixed column) — it
- * sits on the first line and the text wraps beside it, then subsequent/wrapped
- * lines flow back UNDER the icon (no hanging indent). `display: flow-root`
- * contains the float cleanly (no clipping, no clearfix hack).
- *
- * Content-driven & extensible: `icon` is a **lucide icon id string**
- * (kebab-case), resolved by the shared resolveIcon util (also accepts a
- * node). `stroke` / `bg` override the variant colors for custom callouts.
- *
- * SSR-safe & presentational (no effects/refs).
- *
- * @param {{ type?: 'note'|'warning'|'info'|'tip'|'check'|'danger'|'callout',
- *   icon?: string|React.ReactNode, stroke?: string, bg?: string,
- *   children: React.ReactNode, className?: string }} props
- */
-
-// Variant icon defaults are lucide IDS (not components) → one resolution path.
-const VARIANTS = {
-  note: { bg: '--note-bg-color', stroke: '--note-stroke-color', icon: 'pencil' },
-  warning: {
-    bg: '--warning-bg-color',
-    stroke: '--warning-stroke-color',
-    icon: 'triangle-alert',
-  },
-  info: { bg: '--info-bg-color', stroke: '--info-stroke-color', icon: 'info' },
-  tip: {
-    bg: '--tip-bg-color',
-    stroke: '--tip-stroke-color',
-    icon: 'lightbulb',
-  },
-  check: {
-    bg: '--check-bg-color',
-    stroke: '--check-stroke-color',
-    icon: 'circle-check',
-  },
-  danger: {
-    bg: '--danger-bg-color',
-    stroke: '--danger-stroke-color',
-    icon: 'shield-alert',
-  },
-  callout: {
-    bg: '--callout-bg-color',
-    stroke: '--callout-stroke-color',
-    icon: 'message-circle',
-  },
-};
-
-export default function Callout({
-  type = 'note',
-  icon,
-  stroke,
-  bg,
-  children,
-  className = '',
-  style,
-  ...rest
-}) {
-  const v = VARIANTS[type] || VARIANTS.note;
-  const strokeColor = stroke ?? `var(${v.stroke})`;
-  const bgColor = bg ?? `var(${v.bg})`;
-  // size only; stroke weight comes from the global --icon-stroke token
-  // (.lucide rule in base.css), not set per-icon.
-  const iconNode = resolveIcon(icon ?? v.icon, { size: '1em' });
-
-  return (
-    <div
-      className={className}
-      style={{
-        display: 'flow-root', // contains the floated icon, no clipping
-        padding: 'var(--s0) var(--s3)',
-        background: bgColor,
-        border: `var(--border-width) solid ${strokeColor}`,
-        borderRadius: 'var(--radius-sm)',
-        color: 'var(--text-color)',
-        fontSize: 'var(--f-body)',
-        lineHeight: 'var(--lh-body)',
-        ...style,
-      }}
-      {...rest}
-    >
-      {iconNode && (
-        <span
-          aria-hidden="true"
-          style={{
-            float: 'left',
-            display: 'inline-flex',
-            alignItems: 'center',
-            // one line-box tall (body font-size × body line-height token) so
-            // the icon is centered on the FIRST line; text wraps beside it
-            // then flows back under it (no hanging indent).
-            blockSize: 'calc(var(--f-body) * var(--lh-body))',
-            marginInlineEnd: 'var(--s-1)',
-            color: strokeColor,
-            fontSize: 'var(--f-body)',
-          }}
-        >
-          {iconNode}
-        </span>
-      )}
-      {children}
-    </div>
-  );
-}
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * Callout — admonition box (note/warning/info/tip/check/danger/callout).
+ *
+ * Fully tokenized: each `type` maps to its Figma bg + stroke token pair
+ * (base.css, light + dark), so theming is automatic via [data-theme]. Border
+ * + icon use the stroke; surface uses the bg; body uses --text-color.
+ * Spacing/radius from the modular scale.
+ *
+ * Layout: the icon is FLOATED into the text flow (not a fixed column) — it
+ * sits on the first line and the text wraps beside it, then subsequent/wrapped
+ * lines flow back UNDER the icon (no hanging indent). `display: flow-root`
+ * contains the float cleanly (no clipping, no clearfix hack).
+ *
+ * Content-driven & extensible: `icon` is a **lucide icon id string**
+ * (kebab-case), resolved by the shared resolveIcon util (also accepts a
+ * node). `stroke` / `bg` override the variant colors for custom callouts.
+ *
+ * SSR-safe & presentational (no effects/refs).
+ *
+ * @param {{ type?: 'note'|'warning'|'info'|'tip'|'check'|'danger'|'callout',
+ *   icon?: string|React.ReactNode, stroke?: string, bg?: string,
+ *   children: React.ReactNode, className?: string }} props
+ */
+
+// Variant icon defaults are lucide IDS (not components) → one resolution path.
+const VARIANTS = {
+  note: { bg: '--note-bg-color', stroke: '--note-stroke-color', icon: 'pencil' },
+  warning: {
+    bg: '--warning-bg-color',
+    stroke: '--warning-stroke-color',
+    icon: 'triangle-alert',
+  },
+  info: { bg: '--info-bg-color', stroke: '--info-stroke-color', icon: 'info' },
+  tip: {
+    bg: '--tip-bg-color',
+    stroke: '--tip-stroke-color',
+    icon: 'lightbulb',
+  },
+  check: {
+    bg: '--check-bg-color',
+    stroke: '--check-stroke-color',
+    icon: 'circle-check',
+  },
+  danger: {
+    bg: '--danger-bg-color',
+    stroke: '--danger-stroke-color',
+    icon: 'shield-alert',
+  },
+  callout: {
+    bg: '--callout-bg-color',
+    stroke: '--callout-stroke-color',
+    icon: 'message-circle',
+  },
+};
+
+export default function Callout({
+  type = 'note',
+  icon,
+  stroke,
+  bg,
+  children,
+  className = '',
+  style,
+  ...rest
+}) {
+  const v = VARIANTS[type] || VARIANTS.note;
+  const strokeColor = stroke ?? `var(${v.stroke})`;
+  const bgColor = bg ?? `var(${v.bg})`;
+  // size only; stroke weight comes from the global --icon-stroke token
+  // (.lucide rule in base.css), not set per-icon.
+  const iconNode = resolveIcon(icon ?? v.icon, { size: '1em' });
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: 'flow-root', // contains the floated icon, no clipping
+        padding: 'var(--s0) var(--s3)',
+        background: bgColor,
+        border: `var(--border-width) solid ${strokeColor}`,
+        borderRadius: 'var(--radius-sm)',
+        color: 'var(--text-color)',
+        fontSize: 'var(--f-body)',
+        lineHeight: 'var(--lh-body)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {iconNode && (
+        <span
+          aria-hidden="true"
+          style={{
+            float: 'left',
+            display: 'inline-flex',
+            alignItems: 'center',
+            // one line-box tall (body font-size × body line-height token) so
+            // the icon is centered on the FIRST line; text wraps beside it
+            // then flows back under it (no hanging indent).
+            blockSize: 'calc(var(--f-body) * var(--lh-body))',
+            marginInlineEnd: 'var(--s-1)',
+            color: strokeColor,
+            fontSize: 'var(--f-body)',
+          }}
+        >
+          {iconNode}
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}

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

@@ -1,131 +1,131 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Switcher from '../primitives/Switcher.jsx';
-
-/**
- * Card + CardGroup — content / horizontal / image / CTA cards.
- *
- * The card itself is NEVER a link and has NO hover state. The only
- * interactive element is the CTA: pass `cta={{ label, href }}` to render a
- * single "Click Here ›" link. Everything else is static presentation.
- *
- * Fully tokenized (border-width, border-color, radius scale, spacing, type,
- * line-height, accent, icon-stroke) → light/dark automatic via [data-theme].
- * SSR-safe & presentational.
- *
- * Variants (combinable):
- *  - basic: icon (accent, --f-h2) + title (--f-h4) + body
- *  - `horizontal`: icon vertically centered on the left, title+body right
- *  - `img`: image fills the top, clipped to the radius
- *  - `cta`: { label, href } → the single clickable "Click Here ›" link
- *
- * `icon` is a lucide id string (shared resolveIcon).
- *
- * @param {{ title?: React.ReactNode, icon?: string, horizontal?: boolean,
- *   img?: string, imgAlt?: string,
- *   cta?: {label: React.ReactNode, href: string},
- *   children?: React.ReactNode, className?: string }} props
- */
-
-export function Card({
-  title,
-  icon,
-  horizontal = false,
-  img,
-  imgAlt = '',
-  cta,
-  children,
-  className = '',
-  ...rest
-}) {
-  const cls = [
-    'velu-card',
-    horizontal && 'velu-card--horizontal',
-    img && 'velu-card--image',
-    cta && 'velu-card--cta',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const iconEl = icon ? (
-    <span className="velu-card__icon" aria-hidden="true">
-      {resolveIcon(icon, { size: '1em' })}
-    </span>
-  ) : null;
-
-  const ctaEl = cta ? (
-    <a className="velu-card__cta" href={cta.href}>
-      {cta.label}
-      <span className="velu-card__cta-icon" aria-hidden="true">
-        {resolveIcon('chevron-right', { size: '1em' })}
-      </span>
-    </a>
-  ) : null;
-
-  const titleEl = title ? (
-    <div className="velu-card__title">{title}</div>
-  ) : null;
-  const textEl = children ? (
-    <div className="velu-card__text">{children}</div>
-  ) : null;
-
-  return (
-    <div className={cls} {...rest}>
-      {img && (
-        <div className="velu-card__media">
-          <img src={img} alt={imgAlt} loading="lazy" />
-        </div>
-      )}
-
-      <div className="velu-card__body">
-        {horizontal ? (
-          <>
-            {iconEl}
-            <div className="velu-card__content">
-              {titleEl}
-              {textEl}
-              {ctaEl}
-            </div>
-          </>
-        ) : (
-          <>
-            {!img ? iconEl : null}
-            {titleEl}
-            {textEl}
-            {ctaEl}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * CardGroup — a row of Cards that switches to a FULL vertical stack the
- * moment any one card would fall below the per-card minimum. Thin wrapper
- * over the Switcher primitive: just supplies `min` (Switcher does the
- * count-aware threshold math). `limit` hard-caps items per row.
- */
-export function CardGroup({
-  space = 'var(--s0)',
-  min = 'var(--card-min, 18ch)',
-  limit = 3,
-  children,
-  className = '',
-  ...rest
-}) {
-  return (
-    <Switcher
-      className={`velu-card-group ${className}`.trim()}
-      space={space}
-      min={min}
-      limit={limit}
-      {...rest}
-    >
-      {children}
-    </Switcher>
-  );
-}
-
-export default Card;
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Switcher from '../primitives/Switcher.jsx';
+
+/**
+ * Card + CardGroup — content / horizontal / image / CTA cards.
+ *
+ * The card itself is NEVER a link and has NO hover state. The only
+ * interactive element is the CTA: pass `cta={{ label, href }}` to render a
+ * single "Click Here ›" link. Everything else is static presentation.
+ *
+ * Fully tokenized (border-width, border-color, radius scale, spacing, type,
+ * line-height, accent, icon-stroke) → light/dark automatic via [data-theme].
+ * SSR-safe & presentational.
+ *
+ * Variants (combinable):
+ *  - basic: icon (accent, --f-h2) + title (--f-h4) + body
+ *  - `horizontal`: icon vertically centered on the left, title+body right
+ *  - `img`: image fills the top, clipped to the radius
+ *  - `cta`: { label, href } → the single clickable "Click Here ›" link
+ *
+ * `icon` is a lucide id string (shared resolveIcon).
+ *
+ * @param {{ title?: React.ReactNode, icon?: string, horizontal?: boolean,
+ *   img?: string, imgAlt?: string,
+ *   cta?: {label: React.ReactNode, href: string},
+ *   children?: React.ReactNode, className?: string }} props
+ */
+
+export function Card({
+  title,
+  icon,
+  horizontal = false,
+  img,
+  imgAlt = '',
+  cta,
+  children,
+  className = '',
+  ...rest
+}) {
+  const cls = [
+    'velu-card',
+    horizontal && 'velu-card--horizontal',
+    img && 'velu-card--image',
+    cta && 'velu-card--cta',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const iconEl = icon ? (
+    <span className="velu-card__icon" aria-hidden="true">
+      {resolveIcon(icon, { size: '1em' })}
+    </span>
+  ) : null;
+
+  const ctaEl = cta ? (
+    <a className="velu-card__cta" href={cta.href}>
+      {cta.label}
+      <span className="velu-card__cta-icon" aria-hidden="true">
+        {resolveIcon('chevron-right', { size: '1em' })}
+      </span>
+    </a>
+  ) : null;
+
+  const titleEl = title ? (
+    <div className="velu-card__title">{title}</div>
+  ) : null;
+  const textEl = children ? (
+    <div className="velu-card__text">{children}</div>
+  ) : null;
+
+  return (
+    <div className={cls} {...rest}>
+      {img && (
+        <div className="velu-card__media">
+          <img src={img} alt={imgAlt} loading="lazy" />
+        </div>
+      )}
+
+      <div className="velu-card__body">
+        {horizontal ? (
+          <>
+            {iconEl}
+            <div className="velu-card__content">
+              {titleEl}
+              {textEl}
+              {ctaEl}
+            </div>
+          </>
+        ) : (
+          <>
+            {!img ? iconEl : null}
+            {titleEl}
+            {textEl}
+            {ctaEl}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * CardGroup — a row of Cards that switches to a FULL vertical stack the
+ * moment any one card would fall below the per-card minimum. Thin wrapper
+ * over the Switcher primitive: just supplies `min` (Switcher does the
+ * count-aware threshold math). `limit` hard-caps items per row.
+ */
+export function CardGroup({
+  space = 'var(--s0)',
+  min = 'var(--card-min, 18ch)',
+  limit = 3,
+  children,
+  className = '',
+  ...rest
+}) {
+  return (
+    <Switcher
+      className={`velu-card-group ${className}`.trim()}
+      space={space}
+      min={min}
+      limit={limit}
+      {...rest}
+    >
+      {children}
+    </Switcher>
+  );
+}
+
+export default Card;

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

@@ -1,75 +1,75 @@
-import React, { useEffect, useState } from 'react';
-
-/**
- * ChangelogFilters — replaces the table of contents on a changelog page with a
- * tag filter. The tag set is passed in (collected at build time from each
- * <Update tags=...>); toggling a tag shows/hides the matching entries purely
- * from the DOM via the `data-update-tags` attribute each <Update> emits.
- *
- * An entry is shown when no tag is selected, or when it carries any selected
- * tag (OR semantics).
- *
- * @param {{ tags?: string[] }} props
- */
-export default function ChangelogFilters({ tags = [] }) {
-  const [selected, setSelected] = useState([]);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return undefined;
-    const sel = selected.map((s) => s.toLowerCase());
-    const nodes = document.querySelectorAll('.velu-update');
-    nodes.forEach((el) => {
-      const own = (el.getAttribute('data-update-tags') || '')
-        .split('|')
-        .map((t) => t.trim().toLowerCase())
-        .filter(Boolean);
-      const visible = sel.length === 0 || sel.some((s) => own.includes(s));
-      el.hidden = !visible;
-    });
-    return () => {
-      document.querySelectorAll('.velu-update').forEach((el) => {
-        el.hidden = false;
-      });
-    };
-  }, [selected]);
-
-  if (!tags.length) return null;
-
-  const toggle = (tag) => {
-    const lower = tag.toLowerCase();
-    setSelected((prev) =>
-      prev.some((s) => s.toLowerCase() === lower)
-        ? prev.filter((s) => s.toLowerCase() !== lower)
-        : [...prev, tag],
-    );
-  };
-
-  return (
-    <div className="velu-changelog-filters">
-      <div className="velu-changelog-filters__heading">Filters</div>
-      <div
-        className="velu-changelog-filters__list"
-        role="group"
-        aria-label="Filter updates by tag"
-      >
-        {tags.map((tag) => {
-          const active = selected.some((s) => s.toLowerCase() === tag.toLowerCase());
-          return (
-            <button
-              key={tag}
-              type="button"
-              className={
-                'velu-changelog-filter' +
-                (active ? ' velu-changelog-filter--active' : '')
-              }
-              aria-pressed={active}
-              onClick={() => toggle(tag)}
-            >
-              {tag}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+import React, { useEffect, useState } from 'react';
+
+/**
+ * ChangelogFilters — replaces the table of contents on a changelog page with a
+ * tag filter. The tag set is passed in (collected at build time from each
+ * <Update tags=...>); toggling a tag shows/hides the matching entries purely
+ * from the DOM via the `data-update-tags` attribute each <Update> emits.
+ *
+ * An entry is shown when no tag is selected, or when it carries any selected
+ * tag (OR semantics).
+ *
+ * @param {{ tags?: string[] }} props
+ */
+export default function ChangelogFilters({ tags = [] }) {
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return undefined;
+    const sel = selected.map((s) => s.toLowerCase());
+    const nodes = document.querySelectorAll('.velu-update');
+    nodes.forEach((el) => {
+      const own = (el.getAttribute('data-update-tags') || '')
+        .split('|')
+        .map((t) => t.trim().toLowerCase())
+        .filter(Boolean);
+      const visible = sel.length === 0 || sel.some((s) => own.includes(s));
+      el.hidden = !visible;
+    });
+    return () => {
+      document.querySelectorAll('.velu-update').forEach((el) => {
+        el.hidden = false;
+      });
+    };
+  }, [selected]);
+
+  if (!tags.length) return null;
+
+  const toggle = (tag) => {
+    const lower = tag.toLowerCase();
+    setSelected((prev) =>
+      prev.some((s) => s.toLowerCase() === lower)
+        ? prev.filter((s) => s.toLowerCase() !== lower)
+        : [...prev, tag],
+    );
+  };
+
+  return (
+    <div className="velu-changelog-filters">
+      <div className="velu-changelog-filters__heading">Filters</div>
+      <div
+        className="velu-changelog-filters__list"
+        role="group"
+        aria-label="Filter updates by tag"
+      >
+        {tags.map((tag) => {
+          const active = selected.some((s) => s.toLowerCase() === tag.toLowerCase());
+          return (
+            <button
+              key={tag}
+              type="button"
+              className={
+                'velu-changelog-filter' +
+                (active ? ' velu-changelog-filter--active' : '')
+              }
+              aria-pressed={active}
+              onClick={() => toggle(tag)}
+            >
+              {tag}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}