@vamos-ui/react 0.2.0 → 0.4.0

package/dist/blocks/site/stats-band.js

@@ -3,6 +3,8 @@ import { cn } from "../../lib/cn.js";
 import { Container, Section } from "../section.js";
 import { SectionHeader } from "../section-header.js";
 import { RichText } from "../rich-text.js";
+import { CountUp } from "../../motion/count-up.js";
+import { Reveal, Stagger } from "../../motion/reveal.js";
 import { siteText, useBlockIds } from "./_kit-1.js";
 function formatValue(v, locale) {
     if (typeof v !== "number")
@@ -12,7 +14,9 @@ function formatValue(v, locale) {
 }
 /**
  * Concrete, sourced numbers ("4.8 on Google · 1,240 reviews"). Semantic `dl`, Intl formatting,
- * units spelled out for screen readers, no count-up animation. Server component.
+ * units spelled out for screen readers. Numeric figures count up once when they scroll into view
+ * (motion kit CountUp: width reserved, final value for screen readers, still under reduced
+ * motion / `motion="off"`); the items reveal in sequence. Server component.
  *
  * ```tsx
  * <StatsBand items={[{ value: 4.8, label: "Google rating", source: "1,240 reviews, Nov 2026" }]} />
@@ -23,19 +27,19 @@ export function StatsBand({ variant = "inline", eyebrow, title, lead, body, item
     const { base, headingId } = useBlockIds(id, "stats");
     const figure = (s, size) => {
         const spoken = s.unitLabel ?? (s.unit === "%" ? t("percent") : s.unit);
-        return (_jsxs("span", { className: cn("font-display tabular text-fg", size), children: [formatValue(s.value, locale), s.unit ? (_jsxs(_Fragment, { children: [_jsx("sup", { "aria-hidden": true, className: "vb-stat-unit ms-[0.08em] align-super font-sans text-[0.38em] font-medium tracking-normal text-fg-muted", children: s.unit }), _jsxs("span", { className: "sr-only", children: [" ", spoken] })] })) : null] }));
+        return (_jsxs("span", { className: cn("font-display tabular text-fg", size), children: [typeof s.value === "number" && !editMode ? _jsx(CountUp, { value: s.value, locale: locale }) : formatValue(s.value, locale), s.unit ? (_jsxs(_Fragment, { children: [_jsx("sup", { "aria-hidden": true, className: "vb-stat-unit ms-[0.08em] align-super font-sans text-[0.38em] font-medium tracking-normal text-fg-muted", children: s.unit }), _jsxs("span", { className: "sr-only", children: [" ", spoken] })] })) : null] }));
     };
     const source = (s, cls) => s.source ? (_jsxs("dd", { className: cn("font-mono text-[0.6875rem] leading-snug tracking-[0.02em] text-fg-subtle", cls), children: [_jsx("span", { className: "sr-only", children: t("source", { source: "" }) }), s.source] })) : null;
-    const header = title || eyebrow || (lead && variant !== "with-text") ? (_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: variant === "with-text" ? undefined : lead, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale })) : null;
+    const header = title || eyebrow || (lead && variant !== "with-text") ? (_jsx(Reveal, { disabled: editMode, children: _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: variant === "with-text" ? undefined : lead, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) })) : null;
     let content;
     if (variant === "ledger") {
-        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [header ? _jsx("div", { className: "@4xl:col-span-4", children: header }) : null, _jsx("dl", { className: cn("flex flex-col border-t border-line", header ? "@4xl:col-span-7 @4xl:col-start-6" : "@4xl:col-span-12"), children: items.map((s, i) => (_jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-baseline gap-x-4 gap-y-1 border-b border-line py-5", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "text-body text-fg", children: s.label }), _jsx("span", { "aria-hidden": true, className: "vb-leader self-end" }), _jsx("dd", { className: "text-end", children: figure(s, "text-display-m") }), source(s, "col-span-3")] }, i))) })] }));
+        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [header ? _jsx("div", { className: "@4xl:col-span-4", children: header }) : null, _jsx(Stagger, { asChild: true, effect: "fade", disabled: editMode, children: _jsx("dl", { className: cn("flex flex-col border-t border-line", header ? "@4xl:col-span-7 @4xl:col-start-6" : "@4xl:col-span-12"), children: items.map((s, i) => (_jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-baseline gap-x-4 gap-y-1 border-b border-line py-5", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "text-body text-fg", children: s.label }), _jsx("span", { "aria-hidden": true, className: "vb-leader self-end" }), _jsx("dd", { className: "text-end", children: figure(s, "text-display-m") }), source(s, "col-span-3")] }, i))) }) })] }));
     }
     else if (variant === "with-text") {
-        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-5", children: [header, lead ? _jsx("p", { className: "vb-lead text-lead text-fg-muted", children: lead }) : null, body ? _jsx(RichText, { doc: body, components: components, labels: labels, locale: locale, headingOffset: 1, editMode: editMode, field: "props.body" }) : null] }), _jsx("dl", { className: "grid grid-cols-2 border-s border-t border-line @4xl:col-span-6 @4xl:col-start-7", children: items.slice(0, 4).map((s, i) => (_jsxs("div", { className: "flex flex-col gap-2 border-e border-b border-line p-[clamp(1rem,3cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3 mt-auto pt-3")] }, i))) })] }));
+        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-5", children: [header, lead ? _jsx("p", { className: "vb-lead text-lead text-fg-muted", children: lead }) : null, body ? _jsx(RichText, { doc: body, components: components, labels: labels, locale: locale, headingOffset: 1, editMode: editMode, field: "props.body" }) : null] }), _jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("dl", { className: "grid grid-cols-2 border-s border-t border-line @4xl:col-span-6 @4xl:col-start-7", children: items.slice(0, 4).map((s, i) => (_jsxs("div", { className: "flex flex-col gap-2 border-e border-b border-line p-[clamp(1rem,3cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3 mt-auto pt-3")] }, i))) }) })] }));
     }
     else {
-        content = (_jsxs("div", { className: "flex flex-col gap-12", children: [header, _jsx("dl", { className: cn("grid grid-cols-2 gap-y-10", items.length >= 3 && "@4xl:grid-cols-3", items.length >= 4 && "@4xl:grid-cols-4", items.length >= 5 && "@6xl:grid-cols-5"), children: items.map((s, i) => (_jsxs("div", { className: "vb-stat-inline flex flex-col gap-2 border-line ps-[clamp(0.75rem,2.5cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 max-w-[24ch] text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3")] }, i))) })] }));
+        content = (_jsxs("div", { className: "flex flex-col gap-12", children: [header, _jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("dl", { className: cn("grid grid-cols-2 gap-y-10", items.length >= 3 && "@4xl:grid-cols-3", items.length >= 4 && "@4xl:grid-cols-4", items.length >= 5 && "@6xl:grid-cols-5"), children: items.map((s, i) => (_jsxs("div", { className: "vb-stat-inline flex flex-col gap-2 border-line ps-[clamp(0.75rem,2.5cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 max-w-[24ch] text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3")] }, i))) }) })] }));
     }
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "stats", editMode: editMode, className: cn("vb-stats", className), "data-variant": variant, children: _jsx(Container, { className: "vb-reveal", children: content }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "stats", editMode: editMode, className: cn("vb-stats", className), "data-variant": variant, children: _jsx(Container, { children: content }) }));
 }

package/dist/blocks/site/team.d.ts

@@ -11,7 +11,7 @@ export interface TeamMember {
     role: React.ReactNode;
     /** Specialty line in `list` ("Deep tissue · Sports massage"). */
     specialty?: React.ReactNode;
-    /** 4:5 portrait. No photo = an empty inset area, never initials. */
+    /** 4:5 portrait. No photo = an empty inset area, never initials. `sizes`: grid `min(25vw, 19rem)` / 50vw · rows 56px · feature `min(42vw, 32rem)` / 100vw · compact 160px. */
     photo?: SiteImage2;
     bio?: React.ReactNode;
     /** Up to 3 profile links, rendered as short text links ("LinkedIn"). */

package/dist/blocks/site/team.js

@@ -7,6 +7,7 @@ import { BlockLink } from "../block-link.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, textOf, useBlockIds2 } from "./shared/kit-2.js";
 import { BRAND_NAMES } from "./shared/brand-icons.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /**
  * Team and specialist introduction — spa therapists, clinic doctors, an agency team. Card-less
  * by default (D6-1). Server component; the hover portrait in `list` is CSS only.
@@ -30,7 +31,7 @@ function ProfileLinks({ member, ctx, className }) {
     if (!member.links?.length)
         return null;
     const name = textOf(member.name);
-    return (_jsx("span", { className: cn("flex flex-wrap gap-x-3 gap-y-1", className), children: member.links.slice(0, 3).map((l, i) => (_jsx(BlockLink, { href: l.href, newTab: true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("profileOf", { name, network: BRAND_NAMES[l.network] }) : undefined, className: "relative z-10 text-small text-fg-muted underline decoration-line underline-offset-[0.25em] transition-colors hover:text-fg hover:decoration-current focus-ring rounded-[2px]", children: BRAND_NAMES[l.network] }, i))) }));
+    return (_jsx("span", { className: cn("flex flex-wrap gap-x-3 gap-y-1 pointer-coarse:gap-y-0", className), children: member.links.slice(0, 3).map((l, i) => (_jsx(BlockLink, { href: l.href, newTab: true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("profileOf", { name, network: BRAND_NAMES[l.network] }) : undefined, className: "relative z-10 inline-flex min-h-6 items-center pointer-coarse:min-h-11 text-small text-fg-muted underline decoration-line underline-offset-[0.25em] transition-colors hover:text-fg hover:decoration-current focus-ring rounded-[2px]", children: BRAND_NAMES[l.network] }, i))) }));
 }
 function Portrait({ photo, ctx, className, sizes }) {
     if (!photo?.src)
@@ -38,11 +39,11 @@ function Portrait({ photo, ctx, className, sizes }) {
     return _jsx(BlockImage, { ...photo, alt: photo.alt ?? "", decorative: !photo.alt, aspect: "4:5", sizes: sizes, className: cn("rounded-ui", className), components: ctx.components });
 }
 function PortraitMember({ member, index, ctx }) {
-    return (_jsxs("li", { className: "flex flex-col gap-4", children: [_jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 25vw, 50vw" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), member.bio ? _jsx("p", { className: "mt-2 text-small text-fg-muted text-pretty", children: member.bio }) : null] })] }));
+    return (_jsxs("li", { className: "flex flex-col gap-4", children: [_jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: columnSizes(1 / 4, { narrow: "50vw" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), member.bio ? _jsx("p", { className: "mt-2 text-small text-fg-muted text-pretty", children: member.bio }) : null] })] }));
 }
 function ListMember({ member, index, ctx }) {
     return (_jsxs("li", { className: "vb-team-row group/row relative grid grid-cols-[3.5rem_1fr] items-center gap-x-4 gap-y-1 border-t border-line py-6 @2xl:grid-cols-12 @2xl:gap-x-(--gutter)", children: [_jsx("span", { className: "row-span-2 @2xl:hidden", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, className: "w-14 rounded-ui-sm", sizes: "56px" }) }), _jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg @2xl:col-span-4", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted @2xl:col-span-3", children: member.role }), _jsxs("div", { className: "col-start-2 flex flex-wrap items-baseline gap-x-6 gap-y-1 @2xl:col-span-5 @2xl:col-start-auto @2xl:justify-between", children: [member.specialty ? _jsx("p", { className: "text-small text-fg-muted", children: member.specialty }) : _jsx("span", {}), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), member.photo?.src ? (_jsx("span", { "aria-hidden": true, className: "vb-team-hover pointer-events-none absolute end-[22%] top-1/2 z-10 hidden w-40 -translate-y-1/2 @4xl:block", children: _jsx(BlockImage, { ...member.photo, decorative: true, aspect: "4:5", sizes: "160px", className: "rounded-ui", components: ctx.components }) })) : null] }));
 }
 function FeatureMember({ member, header, ctx }) {
-    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: "@4xl:col-span-5", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 40vw, 100vw" }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-6 @4xl:col-start-7 @4xl:pt-6", children: [header, member.bio ? _jsx("div", { className: "text-lead text-fg-muted text-pretty [&_p+p]:mt-4", children: typeof member.bio === "string" ? member.bio.split(/\n{2,}/).map((p, i) => _jsx("p", { children: p }, i)) : member.bio }) : null, _jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-6", children: [_jsx("p", { className: "vb-signature font-display text-display-m italic text-fg", ...fieldAttr(ctx.editMode, "members.0.name"), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), _jsx(ProfileLinks, { member: member, ctx: ctx, className: "mt-2" })] })] })] }));
+    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: "@4xl:col-span-5", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: columnSizes(5 / 12) }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-6 @4xl:col-start-7 @4xl:pt-6", children: [header, member.bio ? _jsx("div", { className: "text-lead text-fg-muted text-pretty [&_p+p]:mt-4", children: typeof member.bio === "string" ? member.bio.split(/\n{2,}/).map((p, i) => _jsx("p", { children: p }, i)) : member.bio }) : null, _jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-6", children: [_jsx("p", { className: "vb-signature font-display text-display-m italic text-fg", ...fieldAttr(ctx.editMode, "members.0.name"), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), _jsx(ProfileLinks, { member: member, ctx: ctx, className: "mt-2" })] })] })] }));
 }

package/dist/blocks/site/testimonials.d.ts

@@ -10,9 +10,9 @@ export interface TestimonialItem {
     author: React.ReactNode;
     role?: React.ReactNode;
     company?: React.ReactNode;
-    /** Small square portrait. No avatar = name only (never an initials circle). */
+    /** Small round portrait, 40px (`sizes="40px"`). No avatar = name only (never an initials circle). */
     avatar?: SiteImage2;
-    /** Company logo (feature variant). */
+    /** Company logo (feature variant), 6rem wide (`sizes="6rem"`). */
     logo?: SiteImage2;
     /** 1–5. Rendered only with a `source` (D6-8). */
     rating?: number;

package/dist/blocks/site/testimonials.js

@@ -11,6 +11,7 @@ import { labelTemplates, site2Text } from "./shared/labels-2.js";
 import { fieldAttr, formatDate2, isoDay, useBlockIds2 } from "./shared/kit-2.js";
 import { TestimonialsCarousel } from "./shared/testimonials-carousel.js";
 import { carouselLabelKeys } from "./shared/island-keys.js";
+import { Reveal, Stagger } from "../../motion/reveal.js";
 export const REVIEW_SOURCE_NAMES = { google: "Google", yandex: "Yandex", tripadvisor: "Tripadvisor", trustpilot: "Trustpilot", direct: "" };
 /**
  * Customer voices: agency references, Google reviews for a spa or restaurant, SaaS quotes.
@@ -27,7 +28,7 @@ export function Testimonials({ variant: variantProp = "feature", eyebrow, title,
     const variant = variantProp === "carousel" && items.length < 2 ? "feature" : variantProp;
     const ctx = { t, locale, components, labels, editMode };
     const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null;
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "testimonials", editMode: editMode, className: cn("vb-testimonials", className), "data-variant": variant, children: _jsx(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: variant === "carousel" ? (_jsx(TestimonialsCarousel, { header: header, count: items.length, labels: labelTemplates(labels, carouselLabelKeys), locale: locale, children: items.map((item, i) => (_jsx(QuoteFigure, { item: item, index: i, ctx: ctx, size: "m" }, i))) })) : (_jsxs(_Fragment, { children: [variant !== "reviews" ? header : null, variant === "feature" ? (_jsx(FeatureQuote, { item: items[0], ctx: ctx })) : variant === "wall" ? (_jsx("ul", { className: "vb-quote-wall gap-x-(--gutter) @2xl:columns-2 @4xl:columns-3", children: items.map((item, i) => (_jsx("li", { className: "mb-12 break-inside-avoid border-t border-line pt-6", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })) : (_jsx(ReviewsLayout, { header: header, items: items, summary: summary, ctx: ctx }))] })) }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "testimonials", editMode: editMode, className: cn("vb-testimonials", className), "data-variant": variant, children: _jsx(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: variant === "carousel" ? (_jsx(TestimonialsCarousel, { header: header, count: items.length, labels: labelTemplates(labels, carouselLabelKeys), locale: locale, children: items.map((item, i) => (_jsx(QuoteFigure, { item: item, index: i, ctx: ctx, size: "m" }, i))) })) : (_jsxs(_Fragment, { children: [variant !== "reviews" ? header : null, variant === "feature" ? (_jsx(Reveal, { disabled: editMode, children: _jsx(FeatureQuote, { item: items[0], ctx: ctx }) })) : variant === "wall" ? (_jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("ul", { className: "vb-quote-wall gap-x-(--gutter) @2xl:columns-2 @4xl:columns-3", children: items.map((item, i) => (_jsx("li", { className: "mb-12 break-inside-avoid border-t border-line pt-6", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) }) })) : (_jsx(Reveal, { disabled: editMode, children: _jsx(ReviewsLayout, { header: header, items: items, summary: summary, ctx: ctx }) }))] })) }) }));
 }
 /** Monochrome stars with a text alternative ("4.8 out of 5"). */
 const RATING_STAR_SIZE = { sm: "size-3", md: "size-3.5", lg: "size-5" };
@@ -41,14 +42,14 @@ export function RatingStars({ rating, label, size = "md", className }) {
 }
 function Attribution({ item, ctx, align = "start", as: Comp = "figcaption" }) {
     const meta = [item.role, item.company].filter(Boolean);
-    return (_jsxs(Comp, { className: cn("flex items-center gap-3", align === "between" && "justify-between"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [item.avatar ? (_jsx(BlockImage, { ...item.avatar, alt: item.avatar.alt ?? "", decorative: !item.avatar.alt, aspect: "1:1", sizes: "40px", className: "size-10 shrink-0 rounded-full", components: ctx.components })) : null, _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: item.author }), meta.length ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: meta.map((m, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " · " : null, m] }, i))) })) : null] })] }), align === "between" && item.logo ? (_jsx(BlockImage, { ...item.logo, alt: item.logo.alt ?? "", decorative: !item.logo.alt, fit: "contain", className: "h-7 w-24 bg-transparent opacity-80", imgClassName: "vb-logo-mono", components: ctx.components })) : null] }));
+    return (_jsxs(Comp, { className: cn("flex items-center gap-3", align === "between" && "justify-between"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [item.avatar ? (_jsx(BlockImage, { ...item.avatar, alt: item.avatar.alt ?? "", decorative: !item.avatar.alt, aspect: "1:1", sizes: "40px", className: "size-10 shrink-0 rounded-full", components: ctx.components })) : null, _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: item.author }), meta.length ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: meta.map((m, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " · " : null, m] }, i))) })) : null] })] }), align === "between" && item.logo ? (_jsx(BlockImage, { ...item.logo, alt: item.logo.alt ?? "", decorative: !item.logo.alt, fit: "contain", sizes: "6rem", className: "h-7 w-24 bg-transparent opacity-80", imgClassName: "vb-logo-mono", components: ctx.components })) : null] }));
 }
 function SourceLine({ item, ctx }) {
     const showRating = item.rating !== undefined && item.source;
     const name = item.source ? REVIEW_SOURCE_NAMES[item.source] : "";
     if (!showRating && !item.date && !name)
         return null;
-    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [showRating ? _jsx(RatingStars, { rating: item.rating, label: ctx.t("ratingOutOf", { rating: item.rating }) }) : null, name ? (item.link ? (_jsx(BlockLink, { href: item.link.href, newTab: item.link.newTab ?? true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: name })) : (_jsx("span", { children: name }))) : null, item.date ? _jsx("time", { dateTime: isoDay(item.date), children: formatDate2(isoDay(item.date), ctx.locale, "medium") }) : null] }));
+    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [showRating ? _jsx(RatingStars, { rating: item.rating, label: ctx.t("ratingOutOf", { rating: item.rating }) }) : null, name ? (item.link ? (_jsx(BlockLink, { href: item.link.href, newTab: item.link.newTab ?? true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "inline-flex min-h-6 items-center underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: name })) : (_jsx("span", { children: name }))) : null, item.date ? _jsx("time", { dateTime: isoDay(item.date), children: formatDate2(isoDay(item.date), ctx.locale, "medium") }) : null] }));
 }
 function QuoteFigure({ item, index, ctx, size = "s" }) {
     return (_jsxs("figure", { className: "flex flex-col gap-5", children: [_jsx(SourceLine, { item: item, ctx: ctx }), _jsx("blockquote", { className: cn("text-fg text-pretty", size === "m" ? "text-lead" : "text-body"), ...fieldAttr(ctx.editMode, `items.${index}.quote`), children: _jsxs("p", { children: [_jsx("span", { "aria-hidden": true, children: ctx.t("quoteOpen") }), item.quote, _jsx("span", { "aria-hidden": true, children: ctx.t("quoteClose") })] }) }), _jsx(Attribution, { item: item, ctx: ctx })] }));
@@ -61,5 +62,5 @@ function ReviewsLayout({ header, items, summary, ctx }) {
     const sourceName = summary ? REVIEW_SOURCE_NAMES[summary.source] : "";
     return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)] @4xl:col-span-4 @4xl:self-start", children: [header, summary ? (_jsxs("div", { className: "flex flex-col gap-3 border-t border-line pt-6", children: [_jsxs("p", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-display text-display-l tabular text-fg", children: nf.number(summary.rating, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }), _jsx(RatingStars, { rating: summary.rating, label: ctx.t("ratingOutOf", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }) })] }), _jsxs("p", { className: "text-small text-fg-muted", children: [sourceName
                                         ? ctx.t("ratingSummary", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }), source: sourceName })
-                                        : ctx.t("ratingSummaryDirect", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }), " ", "\u2014 ", ctx.t("reviewCount", { count: summary.count })] }), summary.link ? (_jsx(BlockLink, { href: summary.link.href, newTab: summary.link.newTab ?? true, appearance: "link", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "self-start text-small", children: summary.link.label ?? ctx.t("readAllReviews") })) : null] })) : null] }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: items.map((item, i) => (_jsx("li", { className: "border-t border-line py-7 first:border-t-0 first:pt-0 @4xl:first:border-t @4xl:first:pt-7", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })] }));
+                                        : ctx.t("ratingSummaryDirect", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }), " ", "\u2014 ", ctx.t("reviewCount", { count: summary.count })] }), summary.link ? (_jsx(BlockLink, { href: summary.link.href, newTab: summary.link.newTab ?? true, appearance: "link", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "inline-flex min-h-6 items-center self-start text-small", children: summary.link.label ?? ctx.t("readAllReviews") })) : null] })) : null] }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: items.map((item, i) => (_jsx("li", { className: "border-t border-line py-7 first:border-t-0 first:pt-0 @4xl:first:border-t @4xl:first:pt-7", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })] }));
 }

package/dist/business/index.d.ts

@@ -9,3 +9,4 @@ export { exportToBlob, toExportMatrix, exportFilename, downloadBlob, maskValue,
 export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, type SetupChecklistProps, type SetupChecklistLauncherProps, type SetupChecklistLabels, type SetupItem, type SetupItemStatus, } from "./setup-checklist.js";
 export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, type PermissionMatrixProps, type PermissionMatrixCellProps, type PermissionDiffProps, type PermissionCompareProps, type PermissionMatrixLabels, type PermissionResource, type PermissionAction, } from "./permission-matrix.js";
 export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, type PermissionScope, type PermissionLevel, type PermissionValue, type PermissionDependency, type PermissionChange, } from "./permission-core.js";
+export { SignerStatus, signerStatusLabels, type SignerStatusProps, type SignerStatusLabels, type Signer, type SignerState, } from "./signer-status.js";

package/dist/business/index.js

@@ -18,3 +18,5 @@ export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, } from ".
 // Permission matrix
 export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, } from "./permission-matrix.js";
 export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, } from "./permission-core.js";
+// Signer status (e-signature progress)
+export { SignerStatus, signerStatusLabels, } from "./signer-status.js";

package/dist/business/signer-status.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type SignerState = "waiting" | "sent" | "viewed" | "signed" | "declined";
+export interface Signer {
+    id: string;
+    name: string;
+    email?: string;
+    /** "Client", "Account manager", "Witness". */
+    role?: string;
+    status: SignerState;
+    /** When the current status happened (ISO date-time). */
+    at?: string;
+    /** Decline reason or a note. */
+    note?: React.ReactNode;
+    /** Avatar image. */
+    avatarSrc?: string;
+}
+export declare const signerStatusLabels: {
+    title: string;
+    summary: string;
+    declinedSummary: string;
+    complete: string;
+    waiting: string;
+    sent: string;
+    viewed: string;
+    signed: string;
+    declined: string;
+    remind: string;
+    remindName: string;
+    reminded: string;
+    order: string;
+};
+export type SignerStatusLabels = typeof signerStatusLabels;
+export interface SignerStatusProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    signers: Signer[];
+    /** Signers sign in list order — numbers the rows and draws the chain. */
+    sequential?: boolean;
+    /** Heading. Default "Signatures"; `null` hides the header row. */
+    title?: React.ReactNode;
+    /** Shows "Remind" on sent / viewed rows. Resolve to show "Reminder sent". */
+    onRemind?: (signer: Signer) => void | Promise<void>;
+    /** Fixed reference time for relative dates (epoch ms) — tests, screenshots. */
+    now?: number;
+    labels?: Partial<SignerStatusLabels>;
+}
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export declare const SignerStatus: React.ForwardRefExoticComponent<SignerStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/business/signer-status.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BellRing, Check, Clock3, Eye, Send, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Avatar } from "../components/avatar.js";
+import { Button } from "../components/button.js";
+export const signerStatusLabels = {
+    title: "Signatures",
+    summary: "{signed} of {total} signed",
+    declinedSummary: "Declined by {name}",
+    complete: "Fully signed",
+    waiting: "Waiting",
+    sent: "Sent",
+    viewed: "Viewed",
+    signed: "Signed",
+    declined: "Declined",
+    remind: "Remind",
+    remindName: "Send a reminder to {name}",
+    reminded: "Reminder sent",
+    order: "Signs {position}",
+};
+const stateIcon = {
+    waiting: Clock3,
+    sent: Send,
+    viewed: Eye,
+    signed: Check,
+    declined: X,
+};
+const stateTone = {
+    waiting: "text-fg-subtle",
+    sent: "tone-info tone-soft",
+    viewed: "tone-warning tone-soft",
+    signed: "tone-success tone-soft",
+    declined: "tone-danger tone-soft",
+};
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export const SignerStatus = React.forwardRef(function SignerStatus({ signers, sequential, title, onRemind, now, labels, className, ...props }, ref) {
+    const t = useLabels("signerStatus", signerStatusLabels, labels);
+    const f = useFormat();
+    const titleId = React.useId();
+    const [reminded, setReminded] = React.useState({});
+    const signed = signers.filter((s) => s.status === "signed").length;
+    const declined = signers.find((s) => s.status === "declined");
+    const total = signers.length;
+    const heading = title === undefined ? t("title") : title;
+    const summary = declined ? t("declinedSummary", { name: declined.name }) : signed === total && total > 0 ? t("complete") : t("summary", { signed: f.number(signed), total: f.number(total) });
+    const remind = async (s) => {
+        if (!onRemind)
+            return;
+        setReminded((r) => ({ ...r, [s.id]: "busy" }));
+        try {
+            await onRemind(s);
+            setReminded((r) => ({ ...r, [s.id]: "done" }));
+        }
+        catch {
+            setReminded(({ [s.id]: _drop, ...rest }) => rest);
+        }
+    };
+    return (_jsxs("section", { ref: ref, "data-slot": "signer-status", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("header", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: cn("text-xs tabular", declined ? "text-danger" : signed === total ? "text-success" : "text-fg-muted"), children: summary })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1", children: signers.map((s) => (_jsx("span", { className: cn("h-1 flex-1 rounded-full", s.status === "signed" ? "bg-success" : s.status === "declined" ? "bg-danger" : s.status === "viewed" ? "bg-warning" : s.status === "sent" ? "bg-info" : "bg-track") }, s.id))) })] })) : null, _jsx("ol", { className: "grid", children: signers.map((s, i) => {
+                    const Icon = stateIcon[s.status];
+                    const canRemind = onRemind && (s.status === "sent" || s.status === "viewed");
+                    const r = reminded[s.id];
+                    const when = s.at ? f.relative(s.at, now != null ? { now } : undefined) : null;
+                    return (_jsxs("li", { "data-state": s.status, className: "relative flex items-start gap-3 py-2.5 not-last:border-b not-last:border-line", children: [_jsxs("span", { className: "relative shrink-0", children: [_jsx(Avatar, { name: s.name, src: s.avatarSrc, size: "sm" }), sequential ? (_jsx("span", { "aria-hidden": "true", className: "absolute -end-1 -bottom-1 grid size-4 place-items-center rounded-full bg-surface text-[10px] font-semibold text-fg-muted ring-1 ring-line tabular", children: i + 1 })) : null] }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsxs("p", { className: "flex min-w-0 items-baseline gap-2 text-[13px]", children: [_jsx("span", { className: "truncate font-medium text-fg", children: s.name }), s.role ? _jsx("span", { className: "truncate text-xs text-fg-subtle", children: s.role }) : null, sequential ? _jsx("span", { className: "sr-only", children: t("order", { position: i + 1 }) }) : null] }), s.email ? _jsx("p", { className: "truncate text-xs text-fg-muted", children: s.email }) : null, s.note ? _jsx("div", { className: "mt-1 text-xs text-fg-muted", children: s.note }) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [_jsxs("span", { className: cn("inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[11px] font-medium [&_svg]:size-3", stateTone[s.status]), children: [_jsx(Icon, { "aria-hidden": "true" }), t(s.status)] }), when ? (_jsx("time", { dateTime: s.at, title: f.dateTime(s.at), className: "text-[11px] text-fg-subtle tabular", suppressHydrationWarning: true, children: when })) : null, canRemind ? (r === "done" ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1 text-[11px] text-fg-muted", children: [_jsx(Check, { "aria-hidden": "true", className: "size-3" }), t("reminded")] })) : (_jsxs(Button, { size: "xs", variant: "ghost", className: "-me-1.5", loading: r === "busy", "aria-label": t("remindName", { name: s.name }), onClick: () => remind(s), children: [_jsx(BellRing, { "aria-hidden": "true" }), t("remind")] }))) : null] })] }, s.id));
+                }) })] }));
+});

package/dist/charts/bar-chart.js

@@ -14,7 +14,7 @@ import { estimateAxisWidth, extent, formatValue, seriesColor } from "./utils.js"
  * ```
  */
 export function BarChart({ series, layout = "vertical", stack = "none", radius = 4, highlight, valueLabels, barSize = "auto", reference, ...props }) {
-    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
+    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", barKeys: series ?? Object.keys(props.config), ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
 }
 function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabels, barSize, reference }) {
     const chart = useChart();
@@ -26,7 +26,11 @@ function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabe
     const [min] = extent(chart.data, visible.map((s) => s.key), stacked);
     const valueWidth = useValueAxisWidth(visible.map((s) => s.key), { stacked, percent });
     const categoryWidth = React.useMemo(() => (horizontal && chart.x ? Math.min(160, estimateAxisWidth(chart.data.map((r) => chart.formatX(r[chart.x])), 12)) : 0), [horizontal, chart]);
-    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal) {
+    // A time series (dates on x) legitimately has many bars; the hint is for long category lists.
+    const timeAxis = (typeof chart.xFormat === "object" && chart.xFormat !== null && ("date" in chart.xFormat || "relative" in chart.xFormat)) ||
+        (chart.x != null && typeof chart.data[0]?.[chart.x] === "string" && /^\d{4}-\d{2}-\d{2}/.test(chart.data[0][chart.x])) ||
+        (chart.x != null && (chart.data[0]?.[chart.x] instanceof Date || typeof chart.data[0]?.[chart.x] === "number" && chart.data[0][chart.x] > 1e11));
+    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal && !timeAxis) {
         console.warn("[vamos-ui] BarChart: more than 20 categories — use layout=\"horizontal\" or group the tail into \"Other\".");
     }
     const lastKey = visible[visible.length - 1]?.key;

package/dist/charts/chart-shell.d.ts

@@ -59,6 +59,8 @@ export interface ChartContextValue {
     onPointClick?: (row: Row, seriesKey: string) => void;
     height: number | undefined;
     idPrefix: string;
+    /** Series drawn as bars: no stroke pattern, so their legend and tooltip swatch is a solid square. */
+    isBar: (key: string) => boolean;
 }
 /** Chart context: config, formatters and hidden series. Use inside `<Chart>`. */
 export declare function useChart(): ChartContextValue;
@@ -100,6 +102,11 @@ export interface ChartProps<T extends object = Row> extends Omit<React.HTMLAttri
     labels?: Partial<ChartLabels>;
     /** Replace the generated data table. */
     table?: ChartTableSpec;
+    /**
+     * Series drawn as bars. Bars carry no stroke pattern, so their legend and tooltip swatch is a
+     * solid square even when the other series get dashed/dotted lines. Bar and Combo charts set it.
+     */
+    barKeys?: string[];
     /** Content beside (or under) the plot — e.g. the Donut legend list. */
     aside?: React.ReactNode;
     asidePosition?: "side" | "bottom";
@@ -127,8 +134,8 @@ export interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivEle
     keys?: string[];
     /** Click toggles visibility. Default `true`. */
     interactive?: boolean;
-    /** Swatch shape. Default: a line for line/area patterns, a dot otherwise. */
-    swatch?: "dot" | "line";
+    /** Swatch shape. Default: a solid square for bar series, a line for line/area patterns, a dot otherwise. */
+    swatch?: "dot" | "line" | "square";
 }
 /** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
 export declare function ChartLegendContent({ keys, interactive, swatch, className, ...props }: ChartLegendContentProps): React.JSX.Element;

package/dist/charts/chart-shell.js

@@ -52,7 +52,7 @@ const capitalise = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
  * ```
  */
 export function Chart(props) {
-    const { data: dataProp, config, x, xLabel, xFormat, yFormat, height, aspect, state: stateProp, title, summary, tableToggle, legend, tooltipIndicator = "dot", animate = true, onPointClick, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, labels, table, aside, asidePosition = "side", skeleton = "area", toolbar, className, style, children, ...rest } = props;
+    const { data: dataProp, config, x, xLabel, xFormat, yFormat, height, aspect, state: stateProp, title, summary, tableToggle, legend, tooltipIndicator = "dot", animate = true, onPointClick, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, labels, table, aside, asidePosition = "side", skeleton = "area", toolbar, barKeys, className, style, children, ...rest } = props;
     const data = dataProp;
     const f = useFormat();
     const t = useLabels("chart", chartLabels, labels);
@@ -79,6 +79,9 @@ export function Chart(props) {
     const status = stateProp ?? (data.length === 0 ? { status: "empty" } : { status: "ready" });
     const [showTable, setShowTable] = React.useState(false);
     const seriesFormat = React.useCallback((key) => config[key]?.format, [config]);
+    const barKeySet = barKeys?.join("\u0000") ?? "";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const isBar = React.useCallback((key) => (barKeys ?? []).includes(key), [barKeySet]);
     const ctx = React.useMemo(() => ({
         config,
         series,
@@ -99,7 +102,8 @@ export function Chart(props) {
         onPointClick: onPointClick,
         height: height === "auto" ? undefined : typeof height === "string" ? CHART_HEIGHTS[height] : height,
         idPrefix,
-    }), [config, series, visibleSeries, hiddenSet, toggleSeries, data, x, xFormat, yFormat, f, t, animate, reduced, tooltipIndicator, onPointClick, height, idPrefix, seriesFormat]);
+        isBar,
+    }), [config, series, visibleSeries, hiddenSet, toggleSeries, data, x, xFormat, yFormat, f, t, animate, reduced, tooltipIndicator, onPointClick, height, idPrefix, seriesFormat, isBar]);
     const vars = React.useMemo(() => {
         const out = {};
         for (const s of series)
@@ -149,19 +153,21 @@ export function Chart(props) {
 }
 /** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
 export function ChartLegendContent({ keys, interactive = true, swatch, className, ...props }) {
-    const { series, isHidden, toggleSeries, visibleSeries, t } = useChart();
+    const { series, isHidden, toggleSeries, visibleSeries, t, isBar } = useChart();
     const items = keys ? series.filter((s) => keys.includes(s.key)) : series;
     return (_jsx("div", { role: "group", "aria-label": t("legend"), "data-slot": "chart-legend", className: cn("flex flex-wrap items-center gap-x-1 gap-y-1", className), ...props, children: items.map((s) => {
             const hidden = isHidden(s.key);
             const locked = !hidden && visibleSeries.length <= 1;
             const Icon = s.icon;
-            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx(LegendSwatch, { color: seriesColor(s.key), pattern: s.pattern, shape: swatch ?? (s.pattern !== "solid" ? "line" : "dot") }), _jsx("span", { className: cn(hidden && "line-through decoration-fg-subtle"), children: s.label })] }));
+            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx(LegendSwatch, { color: seriesColor(s.key), pattern: s.pattern, shape: swatch ?? (isBar(s.key) ? "square" : s.pattern !== "solid" ? "line" : "dot") }), _jsx("span", { className: cn(hidden && "line-through decoration-fg-subtle"), children: s.label })] }));
             if (!interactive)
                 return (_jsx("span", { className: "inline-flex items-center gap-1.5 px-1.5 text-[12.5px] text-fg-muted", children: content }, s.key));
             return (_jsx("button", { type: "button", "aria-pressed": !hidden, "aria-disabled": locked || undefined, onClick: () => toggleSeries(s.key), className: cn("inline-flex h-7 items-center gap-1.5 rounded-ui-sm px-2 text-[12.5px] text-fg-muted transition-[color,background-color,opacity] focus-ring hover:bg-hover hover:text-fg", hidden && "opacity-55", locked && "cursor-default hover:bg-transparent"), children: content }, s.key));
         }) }));
 }
 function LegendSwatch({ color, pattern, shape }) {
+    if (shape === "square")
+        return _jsx("span", { "aria-hidden": true, "data-swatch": "square", className: "size-2.5 shrink-0 rounded-[2px]", style: { background: color } });
     if (shape === "line")
         return (_jsx("svg", { width: "14", height: "8", viewBox: "0 0 14 8", "aria-hidden": true, className: "shrink-0", children: _jsx("line", { x1: "1", y1: "4", x2: "13", y2: "4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeDasharray: pattern === "dashed" ? "4 3" : pattern === "dotted" ? "0.5 3" : undefined }) }));
     return _jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[3px]", style: { background: color } });

package/dist/charts/chart.js

@@ -35,7 +35,7 @@ export function ChartTooltipContent({ active, payload, label, indicator, showTot
     return (_jsxs("div", { "data-slot": "chart-tooltip", className: cn("vui-chart-tooltip min-w-36 rounded-ui-sm px-2.5 py-2 text-[12px]", className), children: [header ? _jsx("div", { className: "mb-1.5 font-medium text-fg", children: header }) : null, _jsxs("div", { className: "grid gap-1", children: [rows.map((p) => {
                         const key = String(p.dataKey);
                         const s = chart.series.find((x) => x.key === key);
-                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChartIndicator, { color: seriesColor(key), variant: ind, pattern: s?.pattern }), _jsx("span", { className: "me-auto text-fg-muted", children: s?.label ?? String(p.name ?? key) }), _jsx("span", { className: "font-mono text-fg tabular", children: chart.formatSeries(key, raw[key] ?? p.value) }), showShare && total ? _jsx("span", { className: "w-11 text-end font-mono text-fg-subtle tabular", children: chart.f.percent(numeric(key) / total) }) : null] }, key));
+                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChartIndicator, { color: seriesColor(key), variant: chart.isBar(key) ? "dot" : ind, pattern: chart.isBar(key) ? undefined : s?.pattern }), _jsx("span", { className: "me-auto text-fg-muted", children: s?.label ?? String(p.name ?? key) }), _jsx("span", { className: "font-mono text-fg tabular", children: chart.formatSeries(key, raw[key] ?? p.value) }), showShare && total ? _jsx("span", { className: "w-11 text-end font-mono text-fg-subtle tabular", children: chart.f.percent(numeric(key) / total) }) : null] }, key));
                     }), showTotal && rows.length > 1 ? (_jsxs("div", { className: "mt-0.5 flex items-center gap-2 border-t border-line pt-1.5", children: [_jsx("span", { className: "me-auto text-fg-muted", children: chart.t("total") }), _jsx("span", { className: "font-mono font-medium text-fg tabular", children: chart.formatSeries(String(rows[0]?.dataKey), total) })] })) : null] })] }));
 }
 /** Recharts Tooltip wired to `ChartTooltipContent` and the themed cursor. */

package/dist/charts/combo-chart.js

@@ -5,7 +5,7 @@ import { Area, Bar, ComposedChart, Line } from "recharts";
 import { useLocale } from "../lib/locale.js";
 import { Chart, useChart } from "./chart-shell.js";
 import { ChartFrame, ChartGrid, ChartTooltip, ChartXAxis, ChartYAxis, useValueAxisWidth } from "./chart.js";
-import { alignZeroDomains, extent, patternDash, seriesColor } from "./utils.js";
+import { alignedAxes, extent, patternDash, seriesColor } from "./utils.js";
 /**
  * Volume and rate on two axes — bars on the start axis, a line on the end axis, zero lines aligned
  * so neither scale exaggerates. Axis sides are logical and swap in RTL.
@@ -15,7 +15,7 @@ import { alignZeroDomains, extent, patternDash, seriesColor } from "./utils.js";
  * ```
  */
 export function ComboChart({ bars, lines, areas = [], endAxisFormat, endAxis = true, stackBars, startAxisLabel, endAxisLabel, ...props }) {
-    return (_jsx(Chart, { skeleton: "bar", ...props, children: _jsx(ComboPlot, { bars: bars, lines: lines, areas: areas, endAxisFormat: endAxisFormat, endAxis: endAxis, stackBars: stackBars, startAxisLabel: startAxisLabel, endAxisLabel: endAxisLabel }) }));
+    return (_jsx(Chart, { skeleton: "bar", barKeys: bars, ...props, children: _jsx(ComboPlot, { bars: bars, lines: lines, areas: areas, endAxisFormat: endAxisFormat, endAxis: endAxis, stackBars: stackBars, startAxisLabel: startAxisLabel, endAxisLabel: endAxisLabel }) }));
 }
 function ComboPlot({ bars, lines, areas = [], endAxisFormat, endAxis, stackBars, startAxisLabel, endAxisLabel }) {
     const chart = useChart();
@@ -27,20 +27,18 @@ function ComboPlot({ bars, lines, areas = [], endAxisFormat, endAxis, stackBars,
     const startStacked = Boolean(stackBars);
     const endFormat = endAxisFormat ?? chart.config[endKeys[0] ?? ""]?.format;
     const startFormat = chart.config[startKeys[0] ?? ""]?.format ?? chart.yFormat;
-    const [startDomain, endDomain] = React.useMemo(() => {
+    const { domains: [startDomain, endDomain], ticks: [startTicks, endTicks] } = React.useMemo(() => {
         const a = extent(chart.data, startKeys, startStacked);
         const b = extent(chart.data, endKeys);
-        return alignZeroDomains(a, b);
+        return alignedAxes(a, b);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [chart.data, startKeys.join(), endKeys.join(), startStacked]);
-    // Non-negative data: four equal steps on both axes, so the grid lines serve both scales.
-    const ticksOf = (d) => (d[0] === 0 ? [0, 1, 2, 3, 4].map((i) => Number(((d[1] * i) / 4).toPrecision(12))) : undefined);
     const startWidth = useValueAxisWidth(startKeys, { stacked: startStacked, format: startFormat });
     const endWidth = useValueAxisWidth(endKeys, { format: endFormat });
     const left = rtl ? "end" : "start";
     const yId = (key, fallback) => axisOf(key, fallback);
     const titleProps = (value, side) => value ? { value, angle: -90, position: side === "left" ? "insideLeft" : "insideRight", className: "vui-chart-axis-title", offset: 0, style: { textAnchor: "middle" } } : undefined;
-    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: ticksOf(startDomain), width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: ticksOf(endDomain), hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
+    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, stackOffset: startStacked && startDomain[0] < 0 ? "sign" : undefined, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: startTicks, width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: endTicks, hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
                     const s = chart.series.find((x) => x.key === key);
                     return (_jsx(Line, { yAxisId: yId(key, "end"), dataKey: key, name: s?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 2, strokeDasharray: patternDash(s?.pattern), dot: { r: 2.5, fill: seriesColor(key), stroke: "var(--chart-tooltip)", strokeWidth: 1.5 }, activeDot: { r: 4, strokeWidth: 2, stroke: "var(--chart-tooltip)", fill: seriesColor(key) }, isAnimationActive: chart.animate }, key));
                 })] }) }));

package/dist/charts/utils.d.ts

@@ -100,6 +100,16 @@ export declare function niceStep(v: number): number;
  * Returns domains with the same negative share, so neither axis exaggerates.
  */
 export declare function alignZeroDomains(a: [number, number], b: [number, number]): [[number, number], [number, number]];
+/**
+ * Two value axes (Combo) with nice, evenly spaced ticks whose zero lines meet: both axes get the
+ * same number of steps below and above zero, each with its own nice step (1, 2, 2.5, 5… × 10ⁿ), so
+ * one set of grid lines serves both scales. An axis whose data never goes below zero keeps only its
+ * non-negative ticks (its domain still reaches below zero to line up with the other axis).
+ */
+export declare function alignedAxes(a: [number, number], b: [number, number]): {
+    domains: [[number, number], [number, number]];
+    ticks: [number[], number[]];
+};
 export interface SeriesStats {
     key: string;
     min: number;

package/dist/charts/utils.js

@@ -188,6 +188,52 @@ export function alignZeroDomains(a, b) {
     };
     return [fit(aLo, aHi), fit(bLo, bHi)];
 }
+/**
+ * Two value axes (Combo) with nice, evenly spaced ticks whose zero lines meet: both axes get the
+ * same number of steps below and above zero, each with its own nice step (1, 2, 2.5, 5… × 10ⁿ), so
+ * one set of grid lines serves both scales. An axis whose data never goes below zero keeps only its
+ * non-negative ticks (its domain still reaches below zero to line up with the other axis).
+ */
+export function alignedAxes(a, b) {
+    const norm = ([lo, hi]) => [Math.min(0, Number.isFinite(lo) ? lo : 0), Math.max(0, Number.isFinite(hi) ? hi : 0)];
+    const axes = [norm(a), norm(b)];
+    const round = (v) => Number(v.toPrecision(12));
+    const build = (neg, pos, steps) => axes.map(([lo], i) => {
+        const step = steps[i];
+        const all = Array.from({ length: neg + pos + 1 }, (_, k) => round((k - neg) * step));
+        return { domain: [round(-neg * step), round(pos * step)], ticks: lo < 0 ? all : all.filter((v) => v >= 0) };
+    });
+    const anyNeg = axes.some(([lo]) => lo < 0);
+    const anyPos = axes.some(([, hi]) => hi > 0);
+    if (!anyNeg) {
+        // Non-negative data: four equal steps on both axes.
+        const steps = axes.map(([, hi]) => niceStep(hi / 4) || 0.25);
+        const [x, y] = build(0, 4, steps);
+        return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+    }
+    let best = null;
+    for (const total of [4, 5, 6]) {
+        for (let neg = 1; neg <= total; neg++) {
+            const pos = total - neg;
+            if (anyPos && pos === 0)
+                continue;
+            const steps = axes.map(([lo, hi]) => {
+                const need = Math.max(neg ? -lo / neg : 0, pos ? hi / pos : hi > 0 ? Infinity : 0);
+                return Number.isFinite(need) ? niceStep(need) || 1 : Infinity;
+            });
+            if (!steps.every(Number.isFinite))
+                continue;
+            // Share of each axis left empty, plus a small cost per extra step.
+            const waste = axes.reduce((sum, [lo, hi], i) => sum + 1 - (hi - lo) / (steps[i] * total || 1), 0);
+            const score = waste + (total - 4) * 0.06;
+            if (!best || score < best.score - 1e-9)
+                best = { score, neg, pos, steps };
+        }
+    }
+    const { neg, pos, steps } = best;
+    const [x, y] = build(neg, pos, steps);
+    return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+}
 /** Min / max / average of one series (nulls skipped). `null` when the series has no numbers. */
 export function seriesStats(rows, key) {
     let min = Infinity;

package/dist/components/_qr-core.d.ts

@@ -0,0 +1,26 @@
+export type QrErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QrMatrix {
+    /** Modules per side (version × 4 + 17). */
+    size: number;
+    version: number;
+    mask: number;
+    errorCorrection: QrErrorCorrection;
+    /** `modules[y][x]` — true = dark. */
+    modules: boolean[][];
+}
+/**
+ * Encode text (UTF-8, byte mode) as a QR matrix.
+ * Throws when the text does not fit version 40 at the chosen level.
+ *
+ * ```ts
+ * const qr = encodeQr("otpauth://totp/Northpoint:ada@example.com?secret=…", { errorCorrection: "M" });
+ * qr.size; // 41 (version 6)
+ * ```
+ */
+export declare function encodeQr(text: string, options?: {
+    errorCorrection?: QrErrorCorrection;
+    minVersion?: number;
+    mask?: number;
+}): QrMatrix;
+/** One SVG path (`d`) drawing every dark module, offset by `margin` modules. */
+export declare function qrPath(qr: Pick<QrMatrix, "size" | "modules">, margin?: number): string;