@vamos-ui/react 0.3.0 → 0.4.0

package/dist/blocks/site/shared/image-sizes.js

@@ -0,0 +1,37 @@
+// Responsive `sizes` for site-block photos. Every photo in a site block passes one of these to
+// BlockImage → the kit Image / `components.Image` (e.g. next/image), so a CDN loader picks a
+// 400–800 px file on a phone instead of the 3840 px top step. Fractions follow the block's 12-col
+// grid and are capped at the content container (`--container`, 76rem): a 2560 px monitor does
+// not fetch a 1500 px file for a 33% column that is never wider than 25rem.
+// Server-safe, no React.
+/** `--container` (76rem) — the content column every Container caps at. */
+export const CONTAINER_REM = 76;
+/**
+ * A column that spans `fraction` of the container from `from` up, and `narrow` below.
+ * `columnSizes(5 / 12)` → `"(min-width: 56rem) min(42vw, 32rem), 100vw"`.
+ */
+export function columnSizes(fraction, opts = {}) {
+    const { from = "56rem", narrow = "100vw", bleed = false } = opts;
+    const vw = Math.ceil(fraction * 100);
+    // A column bleeding to the section edge grows past the container on very wide screens.
+    const wide = bleed ? `${vw}vw` : `min(${vw}vw, ${Math.ceil(fraction * CONTAINER_REM)}rem)`;
+    return `(min-width: ${from}) ${wide}, ${narrow}`;
+}
+/** Common presets. */
+export const SITE_SIZES = {
+    /** Edge-to-edge photo (full-bleed hero, editorial strip). */
+    bleed: "100vw",
+    /** A photo as wide as the content container. */
+    container: `min(100vw, ${CONTAINER_REM}rem)`,
+    /** A photo only shown on narrow containers (< 56rem), full width there. */
+    narrowOnly: "min(100vw, 56rem)",
+};
+/**
+ * Filmstrip cell: fixed height `clamp(15rem, 38cqi, 30rem)`, width = height × ratio.
+ * `filmstripSizes(4 / 5)` → `"max(12rem, min(31vw, 24rem))"`.
+ */
+export function filmstripSizes(ratio) {
+    const r = ratio > 0 ? ratio : 0.8;
+    const n = (x) => Math.round(x * 10) / 10;
+    return `max(${n(15 * r)}rem, min(${Math.ceil(38 * r)}vw, ${n(30 * r)}rem))`;
+}

package/dist/blocks/site/shared/island-keys.d.ts

@@ -1,6 +1,6 @@
 export declare const carouselLabelKeys: readonly ["previous", "next", "slideCounter", "slideLabel", "carousel", "slide"];
 export type CarouselLabels = Record<(typeof carouselLabelKeys)[number], string>;
-export declare const openNowLabelKeys: readonly ["openNow", "closesAt", "closingSoon", "closed", "closedToday", "opensAt", "opensTodayAt", "open24h", "today"];
+export declare const openNowLabelKeys: readonly ["openNow", "openUntil", "closingSoon", "closingSoonUntil", "openAllDay", "closed", "closedToday", "opensAt", "opensTodayAt", "opensTomorrowAt"];
 export type OpenNowLabels = Record<(typeof openNowLabelKeys)[number], string>;
 export declare const contactIslandLabelKeys: readonly ["send", "sending", "sent", "optional", "errorSummary", "errorServer", "errorServerCall", "privacyRead", "privacyLink", "privacyRequired", "marketingConsent", "honeypot", "choose", "errorRequired", "errorEmail", "errorPhone", "errorTooLong"];
 export type ContactIslandLabels = Record<(typeof contactIslandLabelKeys)[number], string>;

package/dist/blocks/site/shared/island-keys.js

@@ -1,7 +1,7 @@
 // Label keys each client island needs. Kept out of the "use client" files: a server component
 // importing a plain value from a client module would receive a client reference, not the array.
 export const carouselLabelKeys = ["previous", "next", "slideCounter", "slideLabel", "carousel", "slide"];
-export const openNowLabelKeys = ["openNow", "closesAt", "closingSoon", "closed", "closedToday", "opensAt", "opensTodayAt", "open24h", "today"];
+export const openNowLabelKeys = ["openNow", "openUntil", "closingSoon", "closingSoonUntil", "openAllDay", "closed", "closedToday", "opensAt", "opensTodayAt", "opensTomorrowAt"];
 export const contactIslandLabelKeys = [
     "send",
     "sending",

package/dist/blocks/site/shared/labels-2.d.ts

@@ -86,12 +86,15 @@ export declare const site2Labels: {
     email: string;
     hours: string;
     openNow: string;
-    closesAt: string;
+    openUntil: string;
     closingSoon: string;
+    closingSoonUntil: string;
+    openAllDay: string;
     closed: string;
     closedToday: string;
     opensAt: string;
     opensTodayAt: string;
+    opensTomorrowAt: string;
     open24h: string;
     openingHours: string;
     openingHoursOf: string;
@@ -119,6 +122,11 @@ export declare const site2Labels: {
     tagSpicy: string;
     tagNew: string;
     tagChefPick: string;
+    tagDairyFree: string;
+    tagNutFree: string;
+    tagHalal: string;
+    tagToShare: string;
+    tagSeasonal: string;
     allergen_gluten: string;
     allergen_crustaceans: string;
     allergen_eggs: string;

package/dist/blocks/site/shared/labels-2.js

@@ -95,13 +95,17 @@ export const site2Labels = {
     email: "Email",
     hours: "Hours",
     // Map & hours
-    openNow: "Open now",
-    closesAt: "closes at {time}",
+    // Status line "head · tail" (OpenNow). Each part says it once: "Open · until 1 AM".
+    openNow: "Open",
+    openUntil: "until {time}",
     closingSoon: "Closing soon",
+    closingSoonUntil: "open until {time}",
+    openAllDay: "24 hours",
     closed: "Closed",
     closedToday: "Closed today",
     opensAt: "opens {day} at {time}",
     opensTodayAt: "opens at {time}",
+    opensTomorrowAt: "opens tomorrow at {time}",
     open24h: "Open 24 hours",
     openingHours: "Opening hours",
     openingHoursOf: "Opening hours, {name}",
@@ -130,6 +134,11 @@ export const site2Labels = {
     tagSpicy: "Spicy",
     tagNew: "New",
     tagChefPick: "Chef’s pick",
+    tagDairyFree: "Dairy-free",
+    tagNutFree: "Nut-free",
+    tagHalal: "Halal",
+    tagToShare: "To share",
+    tagSeasonal: "Seasonal",
     allergen_gluten: "Gluten",
     allergen_crustaceans: "Crustaceans",
     allergen_eggs: "Eggs",
@@ -295,13 +304,17 @@ export const site2LabelsTr = {
     phone: "Telefon",
     email: "E-posta",
     hours: "Çalışma saatleri",
-    openNow: "Şu an açık",
-    closesAt: "{time}’de kapanıyor",
+    // {timeTo} = "01:00’e", {timeAt} = "12:00’de" — the suffix follows the spoken time.
+    openNow: "Açık",
+    openUntil: "{timeTo} kadar",
     closingSoon: "Birazdan kapanıyor",
+    closingSoonUntil: "{timeTo} kadar açık",
+    openAllDay: "24 saat",
     closed: "Kapalı",
     closedToday: "Bugün kapalı",
-    opensAt: "{day} {time}’de açılıyor",
-    opensTodayAt: "{time}’de açılıyor",
+    opensAt: "{day} {timeAt} açılıyor",
+    opensTodayAt: "bugün {timeAt} açılıyor",
+    opensTomorrowAt: "yarın {timeAt} açılıyor",
     open24h: "24 saat açık",
     openingHours: "Çalışma saatleri",
     openingHoursOf: "Çalışma saatleri, {name}",
@@ -329,6 +342,11 @@ export const site2LabelsTr = {
     tagSpicy: "Acılı",
     tagNew: "Yeni",
     tagChefPick: "Şefin seçimi",
+    tagDairyFree: "Sütsüz",
+    tagNutFree: "Kuruyemişsiz",
+    tagHalal: "Helal",
+    tagToShare: "Paylaşımlık",
+    tagSeasonal: "Mevsimlik",
     allergen_gluten: "Gluten",
     allergen_crustaceans: "Kabuklular",
     allergen_eggs: "Yumurta",

package/dist/blocks/site/shared/open-now.d.ts

@@ -15,7 +15,7 @@ export interface OpenNowProps {
     className?: string;
 }
 /**
- * "Open now · closes at 22:00" — computed in the business's time zone on the client, refreshed
+ * "Open · until 10 PM" / "Closed · opens tomorrow at 12 PM" — computed in the business's time zone on the client, refreshed
  * every minute. Renders nothing on the server and without JS: a cached page never shows a stale
  * status. ~1 KB.
  */

package/dist/blocks/site/shared/open-now.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn2 as cn } from "./kit-2.js";
 import { describeStatus, hoursStatus } from "./opening-hours.js";
 /**
- * "Open now · closes at 22:00" — computed in the business's time zone on the client, refreshed
+ * "Open · until 10 PM" / "Closed · opens tomorrow at 12 PM" — computed in the business's time zone on the client, refreshed
  * every minute. Renders nothing on the server and without JS: a cached page never shows a stale
  * status. ~1 KB.
  */

package/dist/blocks/site/shared/opening-hours.d.ts

@@ -110,8 +110,24 @@ export declare function summarizeHours(hours: OpeningHours, locale?: string): {
 }[];
 /** schema.org `OpeningHoursSpecification[]` for JSON-LD (weekly + special days). */
 export declare function openingHoursJsonLd(hours: OpeningHours): Record<string, unknown>[];
-/** The status sentence: "Open now · closes at 22:00", "Closed · opens Thu at 12:00". */
-export declare function describeStatus(s: OpenStatus, labels: Record<"openNow" | "closesAt" | "closingSoon" | "closed" | "closedToday" | "opensAt" | "opensTodayAt" | "open24h", string>, locale?: string): {
+/** Label keys `describeStatus` reads. */
+export type StatusLabelKey = "openNow" | "openUntil" | "closingSoon" | "closingSoonUntil" | "openAllDay" | "closed" | "closedToday" | "opensAt" | "opensTodayAt" | "opensTomorrowAt";
+/**
+ * Variables for a time in a status template: `{time}` ("01:00", "1 AM"), plus `{timeTo}` /
+ * `{timeAt}` — the time with the Turkish dative / locative suffix ("01:00’e", "12:00’de") so the
+ * TR strings read naturally; other locales get the plain time.
+ */
+export declare function timeVars(hhmm: string, locale?: string): {
+    time: string;
+    timeTo: string;
+    timeAt: string;
+};
+/**
+ * The status as `{ head, tail }`, each said once: "Open · until 1 AM", "Closing soon · open until
+ * 1 AM", "Open · 24 hours", "Closed · opens tomorrow at 12 PM", "Closed today · Staff day · opens
+ * Thu at 12 PM". TR: "Açık · 01:00’e kadar", "Kapalı · yarın 12:00’de açılıyor".
+ */
+export declare function describeStatus(s: OpenStatus, labels: Record<StatusLabelKey, string>, locale?: string): {
     head: string;
     tail?: string;
 };

package/dist/blocks/site/shared/opening-hours.js

@@ -227,19 +227,48 @@ export function openingHoursJsonLd(hours) {
     }
     return out;
 }
-/** The status sentence: "Open now · closes at 22:00", "Closed · opens Thu at 12:00". */
+// Turkish case suffixes on a clock time follow the last spoken word: "01:00" is read "bir" →
+// "01:00’e" (dative) / "01:00’de" (locative); "22:30" ends in "otuz" → "22:30’a" / "22:30’da".
+const TR_UNITS_DAT = ["", "e", "ye", "e", "e", "e", "ya", "ye", "e", "a"];
+const TR_UNITS_LOC = ["", "de", "de", "te", "te", "te", "da", "de", "de", "da"];
+const TR_TENS_DAT = ["a", "a", "ye", "a", "a", "ye"]; // sıfır, on, yirmi, otuz, kırk, elli
+const TR_TENS_LOC = ["da", "da", "de", "da", "ta", "de"];
+function trSuffix(hhmm, kind) {
+    const [h = 0, m = 0] = hhmm.split(":").map(Number);
+    const n = m === 0 ? h % 24 : m; // the last word read aloud
+    const unit = n % 10;
+    if (unit)
+        return (kind === "dat" ? TR_UNITS_DAT : TR_UNITS_LOC)[unit];
+    return (kind === "dat" ? TR_TENS_DAT : TR_TENS_LOC)[Math.floor(n / 10)];
+}
+/**
+ * Variables for a time in a status template: `{time}` ("01:00", "1 AM"), plus `{timeTo}` /
+ * `{timeAt}` — the time with the Turkish dative / locative suffix ("01:00’e", "12:00’de") so the
+ * TR strings read naturally; other locales get the plain time.
+ */
+export function timeVars(hhmm, locale = "en-US") {
+    const time = formatTime(hhmm, locale);
+    if (!/^tr\b/i.test(locale))
+        return { time, timeTo: time, timeAt: time };
+    return { time, timeTo: `${time}’${trSuffix(hhmm, "dat")}`, timeAt: `${time}’${trSuffix(hhmm, "loc")}` };
+}
+/**
+ * The status as `{ head, tail }`, each said once: "Open · until 1 AM", "Closing soon · open until
+ * 1 AM", "Open · 24 hours", "Closed · opens tomorrow at 12 PM", "Closed today · Staff day · opens
+ * Thu at 12 PM". TR: "Açık · 01:00’e kadar", "Kapalı · yarın 12:00’de açılıyor".
+ */
 export function describeStatus(s, labels, locale = "en-US") {
     const f = (tpl, vars) => formatMessage(tpl, vars, locale);
     if (s.state !== "closed") {
         if (s.allDay)
-            return { head: f(labels.openNow), tail: f(labels.open24h) };
-        const tail = f(labels.closesAt, { time: formatTime(s.closesAt, locale) });
-        return { head: f(s.state === "closing-soon" ? labels.closingSoon : labels.openNow), tail };
+            return { head: f(labels.openNow), tail: f(labels.openAllDay) };
+        const vars = timeVars(s.closesAt, locale);
+        return s.state === "closing-soon" ? { head: f(labels.closingSoon), tail: f(labels.closingSoonUntil, vars) } : { head: f(labels.openNow), tail: f(labels.openUntil, vars) };
     }
     const head = s.special?.closed ? (s.special.note ? `${f(labels.closedToday)} · ${s.special.note}` : f(labels.closedToday)) : f(labels.closed);
     if (!s.opensAt)
         return { head };
-    const time = formatTime(s.opensAt.time, locale);
-    const tail = s.opensAt.dayOffset === 0 ? f(labels.opensTodayAt, { time }) : f(labels.opensAt, { day: weekdayName(s.opensAt.weekday, locale, "short"), time });
-    return { head, tail };
+    const vars = { ...timeVars(s.opensAt.time, locale), day: weekdayName(s.opensAt.weekday, locale, "short") };
+    const tpl = s.opensAt.dayOffset === 0 ? labels.opensTodayAt : s.opensAt.dayOffset === 1 ? labels.opensTomorrowAt : labels.opensAt;
+    return { head, tail: f(tpl, vars) };
 }

package/dist/blocks/site/shared/tap.d.ts

@@ -0,0 +1,9 @@
+/** ≥ 24×24 CSS px everywhere (WCAG 2.5.8), ≥ 44px tall on touch. For text links in lists. */
+export declare const TAP = "inline-flex min-h-6 items-center pointer-coarse:min-h-11";
+/** A square icon control: ≥ 24px everywhere, 44×44 on touch. Combine with the control's own size. */
+export declare const TAP_ICON = "min-h-6 min-w-6 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+/**
+ * WCAG 2.5.3 Label in Name: an `aria-label` must contain the visible label. Returns `name` when
+ * it already does (case-insensitive), else `"<visible>, <name>"`.
+ */
+export declare function nameWithLabel(visible: string | undefined, name: string): string;

package/dist/blocks/site/shared/tap.js

@@ -0,0 +1,16 @@
+// Tap-target sizing for site blocks (WCAG 2.5.8 + touch comfort). Padding/min-size only — the
+// visual stays the same on a mouse; on touch (`pointer: coarse`) primary controls grow to 44px.
+/** ≥ 24×24 CSS px everywhere (WCAG 2.5.8), ≥ 44px tall on touch. For text links in lists. */
+export const TAP = "inline-flex min-h-6 items-center pointer-coarse:min-h-11";
+/** A square icon control: ≥ 24px everywhere, 44×44 on touch. Combine with the control's own size. */
+export const TAP_ICON = "min-h-6 min-w-6 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+/**
+ * WCAG 2.5.3 Label in Name: an `aria-label` must contain the visible label. Returns `name` when
+ * it already does (case-insensitive), else `"<visible>, <name>"`.
+ */
+export function nameWithLabel(visible, name) {
+    const v = visible?.trim();
+    if (!v)
+        return name;
+    return name.toLocaleLowerCase().includes(v.toLocaleLowerCase()) ? name : `${v}, ${name}`;
+}

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

@@ -42,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 })] }));
@@ -62,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/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();

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, 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: 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;