@vamos-ui/react 0.2.0 → 0.4.0

package/dist/blocks/site/process.js

@@ -4,6 +4,8 @@ import { Container, Section } from "../section.js";
 import { SectionHeader } from "../section-header.js";
 import { BlockImage } from "../block-image.js";
 import { CtaList, indexLabel, useBlockIds } from "./_kit-1.js";
+import { Reveal } from "../../motion/reveal.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /**
  * "How we work" — discovery → design → launch; a first spa visit; SaaS setup. An ordered list
  * (the order is announced; the numbers are visual). Server component.
@@ -24,7 +26,7 @@ export function Steps({ variant = "vertical", eyebrow, title, lead, steps, actio
         return (_jsx(Tag, { className: cn("text-body text-fg-muted text-pretty", Tag === "p" ? "max-w-[52ch]" : "flex min-w-0 flex-col gap-3"), ...f(i, "text"), children: s.text }));
     };
     const duration = (s, i) => s.duration ? (_jsx("span", { className: "inline-flex w-fit items-center rounded-full border border-line px-2.5 py-0.5 font-mono text-[0.6875rem] tabular tracking-[0.04em] text-fg-muted", ...f(i, "duration"), children: s.duration })) : null;
-    const media = (s) => (s.media ? _jsx(BlockImage, { ...s.media, aspect: "3:2", sizes: "(min-width: 56rem) 30vw, 100vw", className: "mt-2 max-w-md rounded-ui", components: components, labels: labels }) : null);
+    const media = (s) => (s.media ? _jsx(BlockImage, { ...s.media, aspect: "3:2", sizes: columnSizes(4 / 12, { narrow: "min(100vw, 28rem)" }), className: "mt-2 max-w-md rounded-ui", components: components, labels: labels }) : null);
     const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, align: variant === "horizontal" && lead ? "split" : "start", headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) : null;
     const actionsEl = actions?.length ? _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode }) : null;
     let content;
@@ -37,5 +39,5 @@ export function Steps({ variant = "vertical", eyebrow, title, lead, steps, actio
     else {
         content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-5", children: [header, actionsEl] }), _jsx("ol", { className: "vb-steps-v flex flex-col @4xl:col-span-6 @4xl:col-start-7", children: steps.map((s, i) => (_jsxs("li", { className: "vb-step relative flex flex-col gap-3 ps-12 pb-10 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: cn("vb-step-badge absolute start-0 top-0 inline-flex size-8 items-center justify-center rounded-full border border-line bg-scene font-mono text-[0.6875rem] tabular text-fg-muted", i === 0 && "vb-step-badge-first"), children: indexLabel(i) }), _jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 pt-1", children: [stepTitle(s, i), duration(s, i)] }), stepText(s, i), media(s)] }, i))) })] }));
     }
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "steps", editMode: editMode, className: cn("vb-steps", className), "data-variant": variant, children: _jsx("div", { className: "vb-reveal", children: content }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "steps", editMode: editMode, className: cn("vb-steps", className), "data-variant": variant, children: _jsx(Reveal, { disabled: editMode, children: content }) }));
 }

package/dist/blocks/site/registry-1.d.ts

@@ -535,7 +535,7 @@ export declare const mediaTextBlock: import("../schema/index.js").BlockDefinitio
         "4:5": "4:5";
         "3:2": "3:2";
     }>>;
-}, z.core.$strip>, "side" | "overlap" | "bleed">;
+}, z.core.$strip>, "side" | "bleed" | "overlap">;
 export declare const ctaBlock: import("../schema/index.js").BlockDefinition<z.ZodObject<{
     eyebrow: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodRecord<z.ZodString, z.ZodString>]>>;
     title: z.ZodUnion<readonly [z.ZodString, z.ZodRecord<z.ZodString, z.ZodString>]>;

package/dist/blocks/site/registry-2.d.ts

@@ -589,9 +589,14 @@ export declare const menuBlock: import("../schema/index.js").BlockDefinition<z.Z
                 vegetarian: "vegetarian";
                 vegan: "vegan";
                 "gluten-free": "gluten-free";
+                "dairy-free": "dairy-free";
+                "nut-free": "nut-free";
+                halal: "halal";
                 spicy: "spicy";
                 new: "new";
                 "chef-pick": "chef-pick";
+                "to-share": "to-share";
+                seasonal: "seasonal";
             }>>>;
             allergens: z.ZodOptional<z.ZodArray<z.ZodEnum<{
                 sesame: "sesame";

package/dist/blocks/site/registry-2.js

@@ -10,7 +10,7 @@ import { BlogList } from "./blog-list.js";
 import { ArticleLayout } from "./article-layout.js";
 import { ContactForm } from "./contact-form.js";
 import { MapHours, localBusinessJsonLd } from "./map-hours.js";
-import { MenuList, menuJsonLd, ALLERGENS } from "./menu-list.js";
+import { MenuList, menuJsonLd, ALLERGENS, MENU_TAGS } from "./menu-list.js";
 import { GallerySection } from "./gallery-section.js";
 import { ConsentBanner } from "./consent-banner.js";
 import { ContactDock } from "./contact-dock.js";
@@ -367,7 +367,7 @@ const MenuItemSchema = f.group({
     description: f.text({ max: 160 }).optional(),
     prices: f.list(f.group({ label: f.text({ max: 20 }).optional(), amount: f.money().optional() }), { min: 1, max: 4 }),
     duration: f.text({ max: 12 }).optional(),
-    tags: z.array(z.enum(["vegetarian", "vegan", "gluten-free", "spicy", "new", "chef-pick"])).optional(),
+    tags: z.array(z.enum(MENU_TAGS)).optional(),
     allergens: z.array(z.enum(ALLERGENS)).optional(),
     image: f.image({ aspect: "1:1" }).optional(),
     unavailable: f.toggle().optional(),

package/dist/blocks/site/rich-text-section.js

@@ -4,6 +4,7 @@ import { Container, Section } from "../section.js";
 import { BlockHeading } from "../block-heading.js";
 import { RichText } from "../rich-text.js";
 import { field, useBlockIds } from "./_kit-1.js";
+import { headingLines } from "./shared/heading-lines.js";
 /**
  * Long text — an about page, a privacy notice, a service description. Pure server rendering of
  * the RichDoc format; no editor code reaches the site.
@@ -15,7 +16,7 @@ import { field, useBlockIds } from "./_kit-1.js";
 export function RichTextSection({ variant = "column", eyebrow, title, body, dropCap, note, size = "md", id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode }) {
     const { base, headingId } = useBlockIds(id, "text");
     const offset = (title ? 1 : 0);
-    const heading = title ? _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-m", text: title, editMode: editMode, field: "props.title", labels: labels, locale: locale }) : null;
+    const heading = title ? _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-m", text: headingLines(title), editMode: editMode, field: "props.title", labels: labels, locale: locale }) : null;
     const eyebrowEl = eyebrow ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "eyebrow"), children: eyebrow })) : null;
     const text = (cls) => (_jsx(RichText, { doc: body, size: size, headingOffset: offset, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.body", className: cls }));
     let content;

package/dist/blocks/site/shared/heading-lines.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * A heading string with hand-set line breaks: `"Ateşte közde,\nmuhabbet sofrada."`. Each line is
+ * a block `<span>` and the lines are joined by a real space, so `textContent` (search engines,
+ * screen readers, reader mode, copy-paste) reads "közde, muhabbet", never "közde,muhabbet".
+ * `*emphasis*` works across and within lines. Strings without `\n` and ReactNodes pass through
+ * unchanged (BlockHeading renders their emphasis). Server-safe.
+ */
+export declare function headingLines(text: React.ReactNode): React.ReactNode;

package/dist/blocks/site/shared/heading-lines.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { parseEmphasis } from "../../schema/emphasis.js";
+/**
+ * A heading string with hand-set line breaks: `"Ateşte közde,\nmuhabbet sofrada."`. Each line is
+ * a block `<span>` and the lines are joined by a real space, so `textContent` (search engines,
+ * screen readers, reader mode, copy-paste) reads "közde, muhabbet", never "közde,muhabbet".
+ * `*emphasis*` works across and within lines. Strings without `\n` and ReactNodes pass through
+ * unchanged (BlockHeading renders their emphasis). Server-safe.
+ */
+export function headingLines(text) {
+    if (typeof text !== "string" || !text.includes("\n"))
+        return text;
+    const lines = [[]];
+    for (const part of parseEmphasis(text)) {
+        part.text.split("\n").forEach((chunk, i) => {
+            if (i > 0)
+                lines.push([]);
+            if (chunk)
+                lines[lines.length - 1].push({ text: chunk, em: part.em });
+        });
+    }
+    const filled = lines
+        .map((parts) => parts.map((p, i, all) => {
+        let t = i === 0 ? p.text.trimStart() : p.text;
+        if (i === all.length - 1)
+            t = t.trimEnd();
+        return { ...p, text: t };
+    }).filter((p) => p.text))
+        .filter((parts) => parts.length);
+    return filled.map((parts, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " " : null, _jsx("span", { className: "vb-heading-line block", children: parts.map((p, j) => (p.em ? _jsx("em", { children: p.text }, j) : _jsx(React.Fragment, { children: p.text }, j))) })] }, i)));
+}

package/dist/blocks/site/shared/image-sizes.d.ts

@@ -0,0 +1,25 @@
+/** `--container` (76rem) — the content column every Container caps at. */
+export declare 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 declare function columnSizes(fraction: number, opts?: {
+    from?: "42rem" | "56rem";
+    narrow?: string;
+    bleed?: boolean;
+}): string;
+/** Common presets. */
+export declare const SITE_SIZES: {
+    /** Edge-to-edge photo (full-bleed hero, editorial strip). */
+    readonly bleed: "100vw";
+    /** A photo as wide as the content container. */
+    readonly container: "min(100vw, 76rem)";
+    /** A photo only shown on narrow containers (< 56rem), full width there. */
+    readonly narrowOnly: "min(100vw, 56rem)";
+};
+/**
+ * Filmstrip cell: fixed height `clamp(15rem, 38cqi, 30rem)`, width = height × ratio.
+ * `filmstripSizes(4 / 5)` → `"max(12rem, min(31vw, 24rem))"`.
+ */
+export declare function filmstripSizes(ratio: number): string;

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/site-shell.d.ts

@@ -36,6 +36,13 @@ export interface SiteShellProps extends Omit<React.HTMLAttributes<HTMLDivElement
     pageParam?: string;
     /** Query key for the locale. Default `"lang"`. */
     localeParam?: string;
+    /**
+     * Motion level for the whole site → `data-motion`. subtle (default): short fades and small
+     * rises, count-ups, the logo ticker. full: longer, wider, a wiping hero title, magnetic
+     * calls-to-action. off: final state everywhere. Reduced motion always wins. Page and
+     * language switches cross-fade (View Transitions where available, a fade otherwise).
+     */
+    motion?: "full" | "subtle" | "off";
 }
 export interface SiteShellContextValue {
     page: string;
@@ -46,6 +53,10 @@ export interface SiteShellContextValue {
     navigate: (to: SiteLocation) => void;
     /** The href for a page (respects `routing` and `pageParam`). */
     hrefFor: (page: string, anchor?: string) => string;
+    /** The shell's motion level. */
+    motion: "full" | "subtle" | "off";
+    /** True after a switch that should fade the new page in (no View Transitions available). */
+    pageEnter: boolean;
 }
 /** Page, locale and navigation of the closest Site shell. Throws outside one. */
 export declare function useSiteShell(): SiteShellContextValue;

package/dist/blocks/site/site-shell.js

@@ -5,6 +5,8 @@ import { cn } from "../../lib/cn.js";
 import { ThemeScope } from "../../lib/theme-scope.js";
 import { useControllableState } from "../../lib/use-controllable-state.js";
 import { isBuiltInAccent, siteAccent, siteAccentCss, siteAccentKey } from "./shared/site-accent.js";
+import { motionAllowed } from "../../motion/core.js";
+import { startPageTransition, viewTransitionsSupported } from "../../motion/page-transition.js";
 import { parseSiteHref, readSiteLocation, sitePageHref, writeSiteLocation } from "./shared/site-routing.js";
 const SiteShellContext = React.createContext(null);
 /** Page, locale and navigation of the closest Site shell. Throws outside one. */
@@ -32,7 +34,7 @@ export function useSiteShell() {
  * </SiteShell>
  * ```
  */
-export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", className, onClick, children, ...props }, ref) {
+export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", motion = "subtle", className, onClick, children, ...props }, ref) {
     const homeLocale = defaultLocale ?? locales[0] ?? "en";
     const homePage = defaultPage ?? pages[0] ?? "home";
     const [locale, setLocale] = useControllableState({ value: localeProp, defaultValue: homeLocale, onChange: onLocaleChange, name: "SiteShell" });
@@ -47,6 +49,19 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
     }, [ref]);
     /** What to do after the next render: focus the h1, scroll to the top or to an anchor. */
     const pending = React.useRef(null);
+    const [pageEnter, setPageEnter] = React.useState(false);
+    /** Swap page/locale as a page transition: a View Transition, or a fade on the new page. */
+    const transition = React.useCallback((commit) => {
+        const root = rootRef.current;
+        const animate = motion !== "off" && motionAllowed(root);
+        setPageEnter(animate && !viewTransitionsSupported());
+        if (animate)
+            startPageTransition(commit, { scope: root });
+        else
+            commit();
+    }, [motion]);
+    const transitionRef = React.useRef(transition);
+    transitionRef.current = transition;
     const pageKey = pages.join("|");
     const localeKey = locales.join("|");
     const params = React.useMemo(() => ({ pageParam, localeParam }), [pageParam, localeParam]);
@@ -63,10 +78,14 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         }
         if (pageChanged)
             pending.current = { focus: !to.anchor, scroll: true, anchor: to.anchor };
-        if (nextLocale !== locale)
-            setLocale(nextLocale);
-        if (pageChanged)
-            setPage(nextPage);
+        if (pageChanged || nextLocale !== locale) {
+            transition(() => {
+                if (nextLocale !== locale)
+                    setLocale(nextLocale);
+                if (pageChanged)
+                    setPage(nextPage);
+            });
+        }
         else if (to.anchor)
             scrollToAnchor(rootRef.current, to.anchor, false);
         // The Navbar's mobile menu is a native popover: close it after any switch.
@@ -80,7 +99,7 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         });
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage]);
+    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage, transition]);
     // URL → state on mount and on back/forward.
     React.useEffect(() => {
         if (routing === "memory")
@@ -90,12 +109,18 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
             const nextPage = loc.page && pages.includes(loc.page) ? loc.page : homePage;
             const nextLocale = loc.locale && locales.includes(loc.locale) ? loc.locale : homeLocale;
             const anchor = routing === "search" && window.location.hash.length > 1 ? decodeURIComponent(window.location.hash.slice(1)) : undefined;
-            setLocale(nextLocale);
-            setPage((prev) => {
-                if (prev !== nextPage)
-                    pending.current = { focus: !initial && !anchor, scroll: !initial, anchor: initial ? anchor : undefined };
-                return nextPage;
-            });
+            const commit = () => {
+                setLocale(nextLocale);
+                setPage((prev) => {
+                    if (prev !== nextPage)
+                        pending.current = { focus: !initial && !anchor, scroll: !initial, anchor: initial ? anchor : undefined };
+                    return nextPage;
+                });
+            };
+            if (initial)
+                commit();
+            else
+                transitionRef.current(commit);
         };
         // A deep link (`?page=order`) is server-rendered as home and switched here. As a transition,
         // React finishes hydrating the home tree (and any Suspense boundary still dehydrated) before
@@ -167,9 +192,11 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         locales,
         navigate: (to) => apply(to, "push"),
         hrefFor: (p, anchor) => sitePageHref(p, anchor, { routing, pageParam }),
+        motion,
+        pageEnter,
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [page, locale, pageKey, localeKey, apply, routing, pageParam]);
+    [page, locale, pageKey, localeKey, apply, routing, pageParam, motion, pageEnter]);
     // A colour → scoped variables. A name (built-in preset or your own, like "brand") goes
     // straight to data-accent.
     const custom = accent && !isBuiltInAccent(accent) && looksLikeColour(accent) ? accent : undefined;
@@ -186,7 +213,7 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
             return null;
         }
     }, [custom, accentDark]);
-    return (_jsx(SiteShellContext.Provider, { value: ctx, children: _jsxs(ThemeScope, { ref: setRoot, theme: theme, material: material, density: density, font: font, dir: dir, accent: accentStyle ? "site" : custom ? undefined : accent, "data-site-accent": accentStyle?.key, "data-site-shell": "", "data-page": page, lang: locale, className: cn("vb-scope font-sans text-fg", className), onClick: handleClick, ...props, children: [accentStyle ? _jsx("style", { children: accentStyle.css }) : null, children] }) }));
+    return (_jsx(SiteShellContext.Provider, { value: ctx, children: _jsxs(ThemeScope, { ref: setRoot, theme: theme, material: material, density: density, font: font, dir: dir, accent: accentStyle ? "site" : custom ? undefined : accent, "data-site-accent": accentStyle?.key, "data-site-shell": "", "data-motion": motion, "data-page": page, lang: locale, className: cn("vb-scope font-sans text-fg", className), onClick: handleClick, ...props, children: [accentStyle ? _jsx("style", { children: accentStyle.css }) : null, children] }) }));
 });
 const looksLikeColour = (v) => v.trim().startsWith("#") || v.includes("(");
 const cssString = (s) => s.replace(/["\\]/g, "\\$&");
@@ -198,7 +225,7 @@ function scrollToAnchor(root, anchor, instant) {
 }
 /** One inner page: rendered only while it is the shell's current page. */
 export function SiteShellPage({ id, title, children }) {
-    const { page } = useSiteShell();
+    const { page, pageEnter } = useSiteShell();
     const active = page === id;
     const first = React.useRef(true);
     React.useEffect(() => {
@@ -208,7 +235,7 @@ export function SiteShellPage({ id, title, children }) {
     }, [active, title]);
     if (!active)
         return null;
-    return (_jsx("div", { "data-site-page": id, className: "contents", children: children }));
+    return (_jsx("div", { "data-site-page": id, "data-page-enter": pageEnter ? "" : undefined, className: "contents", children: children }));
 }
 /** One language version: rendered only while it is the shell's current locale (with `lang`). */
 export function SiteShellLocale({ code, children }) {

package/dist/blocks/site/stats-band.d.ts

@@ -31,7 +31,9 @@ export interface StatsBandProps extends Omit<BlockBaseProps, "variant" | "labels
 }
 /**
  * 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" }]} />