@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/sections/hero/index.d.ts

@@ -0,0 +1,20 @@
+import { Root, Text, Eyebrow, Title, Description, Actions, Media } from "./Hero.js";
+export { HERO_LAYOUTS } from "./layouts.js";
+export type { HeroLayout } from "./layouts.js";
+/**
+ * The opening section of a page: a headline (the page's `<h1>`), supporting
+ * text, calls to action and one piece of media.
+ *
+ * ```tsx
+ * <Hero.Root layout="split" content={{ title: "Fresh bread daily", actions: [{ label: "Order", href: "/order" }] }} />
+ * ```
+ */
+export declare const Hero: {
+    Root: typeof Root;
+    Text: typeof Text;
+    Eyebrow: typeof Eyebrow;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Media: typeof Media;
+};

package/dist/sections/hero/index.js

@@ -0,0 +1,14 @@
+// A plain module (no "use client"), like grid/index.ts and the carousel's parts/index.ts. The compound object is
+// built here so a Server Component can render <Hero.Root>: built inside the client module, it reaches the server
+// as an opaque client reference, and Hero.Root is undefined there (found by the Next.js end-to-end check).
+import { Root, Text, Eyebrow, Title, Description, Actions, Media } from "./Hero.js";
+export { HERO_LAYOUTS } from "./layouts.js";
+/**
+ * The opening section of a page: a headline (the page's `<h1>`), supporting
+ * text, calls to action and one piece of media.
+ *
+ * ```tsx
+ * <Hero.Root layout="split" content={{ title: "Fresh bread daily", actions: [{ label: "Order", href: "/order" }] }} />
+ * ```
+ */
+export const Hero = { Root, Text, Eyebrow, Title, Description, Actions, Media };

package/dist/sections/hero/layouts.d.ts

@@ -0,0 +1,3 @@
+/** Layout presets, in the order the builder and the docs list them. */
+export declare const HERO_LAYOUTS: readonly ["split", "centered", "media-background"];
+export type HeroLayout = (typeof HERO_LAYOUTS)[number];

package/dist/sections/hero/layouts.js

@@ -0,0 +1,3 @@
+// A plain module (no "use client"): the layout ids are data that Server Components, the builder and tests read.
+/** Layout presets, in the order the builder and the docs list them. */
+export const HERO_LAYOUTS = ["split", "centered", "media-background"];

package/dist/sections/services/Services.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { type SectionRevealOption } from "../shared/reveal.js";
+import type { SectionMedia, SectionPartProps, SectionTextEffect } from "../shared/types.js";
+import type { ServicesLayout } from "./layouts.js";
+export interface ServiceItem {
+    readonly title: string;
+    readonly description: string;
+    /** Turns the item title into a link. */
+    readonly href?: string;
+    /** Decorative: rendered `aria-hidden`. */
+    readonly icon?: ReactNode;
+    /** Used by the `alternating` layout; optional elsewhere. */
+    readonly media?: SectionMedia;
+}
+export interface ServicesContent {
+    readonly eyebrow?: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly items: readonly ServiceItem[];
+}
+export interface ServicesRootProps {
+    readonly content: ServicesContent;
+    readonly layout?: ServicesLayout;
+    readonly unstyled?: boolean;
+    /** A decorative layer behind the content, usually `<Background.Root effect={…} />`. */
+    readonly background?: ReactNode;
+    /**
+     * Reveal the main parts one after another when the section scrolls into view:
+     * `true` (`fadeUp()`), a CSS transition (`blurFade()` …), or
+     * `{ effect, stagger, delay, duration, once, threshold }`.
+     */
+    readonly reveal?: SectionRevealOption;
+    /**
+     * Text effects for the title (`enterRise()`, or a list that stacks): set, it renders as `Text` wearing them; left
+     * out, a plain heading.
+     */
+    readonly titleEffect?: SectionTextEffect;
+    /** Text effects for the eyebrow, the same way. */
+    readonly eyebrowEffect?: SectionTextEffect;
+    readonly className?: string;
+    /** Replaces the default composition (`<Services.Header />` + `<Services.Items />`). */
+    readonly children?: ReactNode;
+}
+export interface ServicesItemsProps {
+    readonly className?: string;
+    /** Render one item yourself; the list and its layout stay. */
+    readonly children?: (item: ServiceItem, index: number) => ReactNode;
+}
+declare function Root({ content, layout, unstyled, className, background, reveal, titleEffect, eyebrowEffect, children, }: ServicesRootProps): import("react").JSX.Element;
+declare function Header({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Eyebrow({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Title({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Description({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Items({ className, children }: ServicesItemsProps): import("react").JSX.Element;
+export { Root, Header, Eyebrow, Title, Description, Items };

package/dist/sections/services/Services.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { partAttrs } from "../shared/attrs.js";
+import { Heading } from "../shared/Heading.js";
+import { createSectionContext, SectionShell } from "../shared/context.js";
+import { revealAttrs } from "../shared/reveal.js";
+import { MediaView } from "../shared/MediaView.js";
+const { Provider, useSection } = createSectionContext("Services");
+function Root({ content, layout = "cards-grid", unstyled = false, className, background, reveal, titleEffect, eyebrowEffect, children, }) {
+    return (_jsx(Provider, { layout: layout, content: content, reveal: reveal, titleEffect: titleEffect, eyebrowEffect: eyebrowEffect, children: (titleId, shellReveal) => (_jsx(SectionShell, { section: "services", layout: layout, unstyled: unstyled, titleId: titleId, className: className, background: background, reveal: shellReveal, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Header, {}), _jsx(Items, {})] })) })) }));
+}
+function Header({ className, children }) {
+    const { reveal } = useSection("Header");
+    return (_jsx("div", { ...partAttrs("services", "header"), ...revealAttrs(reveal, 0), className: className, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Eyebrow, {}), _jsx(Title, {}), _jsx(Description, {})] })) }));
+}
+function Eyebrow({ className, children }) {
+    const { content, eyebrowEffect } = useSection("Eyebrow");
+    const text = children ?? content.eyebrow;
+    return text ? _jsx(Heading, { as: "p", attrs: partAttrs("services", "eyebrow"), className: className, effect: eyebrowEffect, children: text }) : null;
+}
+function Title({ className, children }) {
+    const { content, titleId, titleEffect } = useSection("Title");
+    return (_jsx(Heading, { as: "h2", attrs: partAttrs("services", "title"), id: titleId, className: className, effect: titleEffect, children: children ?? content.title }));
+}
+function Description({ className, children }) {
+    const { content } = useSection("Description");
+    const text = children ?? content.description;
+    return text ? _jsx("p", { ...partAttrs("services", "description"), className: className, children: text }) : null;
+}
+function DefaultItem({ item }) {
+    return (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { ...partAttrs("services", "item-icon"), "aria-hidden": "true", children: item.icon }) : null, item.media ? (_jsx("div", { ...partAttrs("services", "item-media"), children: _jsx(MediaView, { media: item.media }) })) : null, _jsxs("div", { ...partAttrs("services", "item-text"), children: [_jsx("h3", { ...partAttrs("services", "item-title"), children: item.href ? _jsx("a", { href: item.href, children: item.title }) : item.title }), _jsx("p", { ...partAttrs("services", "item-description"), children: item.description })] })] }));
+}
+function Items({ className, children }) {
+    const { content, reveal } = useSection("Items");
+    return (_jsx("ul", { ...partAttrs("services", "items"), className: className, children: content.items.map((item, i) => (_jsx("li", { ...partAttrs("services", "item"), ...revealAttrs(reveal, 1 + i), children: children ? children(item, i) : _jsx(DefaultItem, { item: item }) }, item.title))) }));
+}
+// The parts. Services, the compound object, is assembled in ./index.ts, outside this client module.
+export { Root, Header, Eyebrow, Title, Description, Items };

package/dist/sections/services/index.d.ts

@@ -0,0 +1,15 @@
+import { Root, Header, Eyebrow, Title, Description, Items } from "./Services.js";
+export { SERVICES_LAYOUTS } from "./layouts.js";
+export type { ServicesLayout } from "./layouts.js";
+/**
+ * What you offer, as a list of items. Each item is a title, a sentence, and
+ * optionally an icon, a link and an image.
+ */
+export declare const Services: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Eyebrow: typeof Eyebrow;
+    Title: typeof Title;
+    Description: typeof Description;
+    Items: typeof Items;
+};

package/dist/sections/services/index.js

@@ -0,0 +1,10 @@
+// A plain module (no "use client"), like grid/index.ts and the carousel's parts/index.ts. The compound object is
+// built here so a Server Component can render <Services.Root>: built inside the client module, it reaches the server
+// as an opaque client reference, and Services.Root is undefined there (found by the Next.js end-to-end check).
+import { Root, Header, Eyebrow, Title, Description, Items } from "./Services.js";
+export { SERVICES_LAYOUTS } from "./layouts.js";
+/**
+ * What you offer, as a list of items. Each item is a title, a sentence, and
+ * optionally an icon, a link and an image.
+ */
+export const Services = { Root, Header, Eyebrow, Title, Description, Items };

package/dist/sections/services/layouts.d.ts

@@ -0,0 +1,3 @@
+/** Layout presets, in the order the builder and the docs list them. */
+export declare const SERVICES_LAYOUTS: readonly ["cards-grid", "list", "alternating"];
+export type ServicesLayout = (typeof SERVICES_LAYOUTS)[number];

package/dist/sections/services/layouts.js

@@ -0,0 +1,3 @@
+// A plain module (no "use client"): the layout ids are data that Server Components, the builder and tests read.
+/** Layout presets, in the order the builder and the docs list them. */
+export const SERVICES_LAYOUTS = ["cards-grid", "list", "alternating"];

package/dist/sections/shared/Heading.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { SectionAttrs } from "./attrs.js";
+import type { SectionTextEffect } from "./types.js";
+/**
+ * A section's title or eyebrow: its plain element, or, given text effects, `Text` rendering the same element with the
+ * same attributes and wearing them. Unset, the markup is exactly the plain element's (tested).
+ */
+export declare function Heading({ as: Tag, attrs, id, className, effect, children, }: {
+    readonly as: "h1" | "h2" | "p" | "span";
+    readonly attrs: SectionAttrs;
+    readonly id?: string | undefined;
+    readonly className: string | undefined;
+    readonly effect: SectionTextEffect | undefined;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/sections/shared/Heading.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../../text/Text.js";
+/**
+ * A section's title or eyebrow: its plain element, or, given text effects, `Text` rendering the same element with the
+ * same attributes and wearing them. Unset, the markup is exactly the plain element's (tested).
+ */
+export function Heading({ as: Tag, attrs, id, className, effect, children, }) {
+    if (effect === undefined) {
+        return (_jsx(Tag, { ...attrs, id: id, className: className, children: children }));
+    }
+    return (_jsx(Text, { as: Tag, ...attrs, id: id, className: className, effect: effect, children: children }));
+}

package/dist/sections/shared/MediaView.d.ts

@@ -0,0 +1,6 @@
+import type { SectionMedia } from "./types.js";
+/** Renders a section's media slot. `priority` for above-the-fold media (a hero). */
+export declare function MediaView({ media, priority }: {
+    readonly media: SectionMedia;
+    readonly priority?: boolean;
+}): import("react").JSX.Element;

package/dist/sections/shared/MediaView.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/** Renders a section's media slot. `priority` for above-the-fold media (a hero). */
+export function MediaView({ media, priority = false }) {
+    switch (media.kind) {
+        case "image":
+            return (_jsx("img", { src: media.src, alt: media.alt, loading: priority ? "eager" : "lazy", decoding: "async", fetchPriority: priority ? "high" : undefined }));
+        case "video":
+            return media.autoPlay ? (_jsx("video", { src: media.src, poster: media.poster, "aria-label": media.label, autoPlay: true, muted: true, loop: true, playsInline: true })) : (_jsx("video", { src: media.src, poster: media.poster, "aria-label": media.label, controls: true, playsInline: true, preload: "metadata" }));
+        case "node":
+            return _jsx(_Fragment, { children: media.node });
+    }
+}

package/dist/sections/shared/attrs.d.ts

@@ -0,0 +1,7 @@
+export type SectionAttrs = Readonly<Record<string, string>>;
+export declare function sectionRootAttrs(options: {
+    readonly section: string;
+    readonly layout: string;
+    readonly unstyled?: boolean;
+}): SectionAttrs;
+export declare function partAttrs(section: string, part: string): SectionAttrs;

package/dist/sections/shared/attrs.js

@@ -0,0 +1,21 @@
+// ---------------------------------------------------------------------------
+// The data attributes section defaults hang on. Pure: no React, testable.
+//
+//   data-sx-section="hero"   which section        (layout + visual rules)
+//   data-sx-layout="split"   which layout preset  (layout rules)
+//   data-sx-styled           present unless `unstyled` (visual rules only)
+//   data-sx-part="hero-title" which part          (both)
+//
+// packages/ui/styles/<section>.css keys every rule on these, so restyling never
+// needs a class the consumer can't see.
+// ---------------------------------------------------------------------------
+export function sectionRootAttrs(options) {
+    return {
+        "data-sx-section": options.section,
+        "data-sx-layout": options.layout,
+        ...(options.unstyled ? {} : { "data-sx-styled": "" }),
+    };
+}
+export function partAttrs(section, part) {
+    return { "data-sx-part": `${section}-${part}` };
+}

package/dist/sections/shared/context.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from "react";
+import { type PartReveal, type SectionRevealOption } from "./reveal.js";
+import type { SectionActionEffect, SectionStatRoll, SectionTextEffect, SectionTitleCycle } from "./types.js";
+export interface SectionState<TContent, TLayout extends string> {
+    readonly layout: TLayout;
+    readonly content: TContent;
+    /** The title part's id; the section is `aria-labelledby` it. */
+    readonly titleId: string;
+    /** The `reveal` prop, resolved: what the main parts play (`revealAttrs`). Null = no reveal. */
+    readonly reveal: PartReveal | null;
+    /** `Root`'s `unstyled`, for a part that renders a component with a look of its own (a `Button`). */
+    readonly unstyled: boolean;
+    /** `Root`'s `actionEffect`: set, the actions render as `Button`s and the first one wears it. */
+    readonly actionEffect: SectionActionEffect | undefined;
+    /** `Root`'s `titleEffect`: set, the title renders as `Text` wearing it. */
+    readonly titleEffect: SectionTextEffect | undefined;
+    /** `Root`'s `eyebrowEffect`: set, the eyebrow renders as `Text` wearing it. */
+    readonly eyebrowEffect: SectionTextEffect | undefined;
+    /** The Hero's `titleCycle`: how its cycling word (`content.titleWords`) changes. */
+    readonly titleCycle: SectionTitleCycle | undefined;
+    /** About's `statRoll`: set, the figures roll to their values. */
+    readonly statRoll: SectionStatRoll | undefined;
+}
+/** What `SectionShell` needs to run a section's reveal. */
+export interface ShellReveal extends PartReveal {
+    readonly once: boolean;
+    readonly threshold: number;
+}
+/**
+ * One context per section type, so `<About.Title>` can never read a Hero's
+ * content. `name` only feeds the error message.
+ */
+export declare function createSectionContext<TContent, TLayout extends string>(name: string): {
+    Provider: ({ layout, content, reveal: revealOption, unstyled, actionEffect, titleEffect, eyebrowEffect, titleCycle, statRoll, children, }: {
+        readonly layout: TLayout;
+        readonly content: TContent;
+        readonly reveal?: SectionRevealOption | undefined;
+        readonly unstyled?: boolean;
+        readonly actionEffect?: SectionActionEffect | undefined;
+        readonly titleEffect?: SectionTextEffect | undefined;
+        readonly eyebrowEffect?: SectionTextEffect | undefined;
+        readonly titleCycle?: SectionTitleCycle | undefined;
+        readonly statRoll?: SectionStatRoll | undefined;
+        readonly children: (titleId: string, reveal: ShellReveal | null) => ReactNode;
+    }) => import("react").JSX.Element;
+    useSection: (part: string) => SectionState<TContent, TLayout>;
+};
+/**
+ * The `<section>` every section renders, plus the inner box that holds its
+ * layout grid. Container queries measure the `<section>`, so layouts respond
+ * to the space they get, not to the viewport. `background` (usually a
+ * `<Background.Root>`) is rendered first; the section is its stacking context
+ * (`isolation: isolate`), so it paints above the section colour and below
+ * the content, with no z-index on the content.
+ */
+export declare function SectionShell({ section, layout, unstyled, titleId, className, background, reveal, children, }: {
+    readonly section: string;
+    readonly layout: string;
+    readonly unstyled: boolean;
+    readonly titleId: string;
+    readonly className: string | undefined;
+    readonly background?: ReactNode;
+    /** From the Provider: the inner box is observed and its parts reveal once it is in view. */
+    readonly reveal?: ShellReveal | null;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/sections/shared/context.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo, useRef } from "react";
+import { partAttrs, sectionRootAttrs } from "./attrs.js";
+import { resolveReveal, SECTION_REVEAL_CSS } from "./reveal.js";
+import { fadeUp } from "../../transitions/effects/css/reveals.js";
+import { TransitionStyle, useTransition } from "../../transitions/hosts/shared.js";
+import { useInView } from "../../transitions/reveal/Reveal.js";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+const DEFAULT_REVEAL = fadeUp();
+/**
+ * One context per section type, so `<About.Title>` can never read a Hero's
+ * content. `name` only feeds the error message.
+ */
+export function createSectionContext(name) {
+    const Context = createContext(null);
+    function useSection(part) {
+        const value = useContext(Context);
+        if (!value) {
+            throw new Error(`[@sharedex/ui] <${name}.${part}> must be rendered inside <${name}.Root>.`);
+        }
+        return value;
+    }
+    function Provider({ layout, content, reveal: revealOption, unstyled = false, actionEffect, titleEffect, eyebrowEffect, titleCycle, statRoll, children, }) {
+        const titleId = useId();
+        const reveal = useShellReveal(revealOption);
+        const value = useMemo(() => ({ layout, content, titleId, reveal, unstyled, actionEffect, titleEffect, eyebrowEffect, titleCycle, statRoll }), [layout, content, titleId, reveal, unstyled, actionEffect, titleEffect, eyebrowEffect, titleCycle, statRoll]);
+        return _jsx(Context.Provider, { value: value, children: children(titleId, reveal) });
+    }
+    return { Provider, useSection };
+}
+/** The `reveal` prop as the shell and the parts use it, with the device's pick of the transition. */
+function useShellReveal(option) {
+    const resolved = resolveReveal(option);
+    const transition = useTransition(resolved ? (resolved.effect ?? DEFAULT_REVEAL) : undefined);
+    const key = resolved && JSON.stringify([resolved.stagger, resolved.delay, resolved.duration, resolved.once, resolved.threshold]);
+    return useMemo(() => {
+        if (!resolved || !transition)
+            return null;
+        const { stagger, delay, duration, once, threshold } = resolved;
+        return { transition, stagger, delay, duration, once, threshold };
+        // the resolved timing by value: an inline `reveal={{ stagger: 0.2 }}` is a new object every render
+    }, [transition, key]);
+}
+/**
+ * The `<section>` every section renders, plus the inner box that holds its
+ * layout grid. Container queries measure the `<section>`, so layouts respond
+ * to the space they get, not to the viewport. `background` (usually a
+ * `<Background.Root>`) is rendered first; the section is its stacking context
+ * (`isolation: isolate`), so it paints above the section colour and below
+ * the content, with no z-index on the content.
+ */
+export function SectionShell({ section, layout, unstyled, titleId, className, background, reveal = null, children, }) {
+    const inner = useRef(null);
+    useInView(inner, "data-sx-in", reveal?.once ?? true, reveal?.threshold ?? 0, reveal !== null);
+    return (_jsxs("section", { ...sectionRootAttrs({ section, layout, unstyled }), "aria-labelledby": titleId, className: className, children: [background, _jsxs("div", { ref: inner, ...partAttrs(section, "inner"), children: [reveal ? (_jsxs(_Fragment, { children: [_jsx(TransitionStyle, { transition: reveal.transition }), _jsx("style", { href: styleHref("section-reveal", SECTION_REVEAL_CSS), precedence: "sx", children: SECTION_REVEAL_CSS })] })) : null, children] })] }));
+}

package/dist/sections/shared/reveal.d.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "react";
+import type { CssTransition } from "../../transitions/types.js";
+export interface SectionReveal {
+    /** The transition each part plays. Default `fadeUp()`. Generated nodes (pixelGrid, slicer …) are not rendered. */
+    readonly effect?: CssTransition;
+    /** Seconds between one part and the next. Default `0.12`. */
+    readonly stagger?: number;
+    /** Seconds before the first part starts. Default `0`. */
+    readonly delay?: number;
+    /** Seconds each part takes. Default: the transition's own (`0.9`). */
+    readonly duration?: number;
+    /** Play once (default) or every time the section comes back into view. */
+    readonly once?: boolean;
+    /** How much of the section must be on screen before it plays, 0–1. Default `0.15`. */
+    readonly threshold?: number;
+}
+/** `true` = `fadeUp()` with the defaults; a transition = that one with the defaults. */
+export type SectionRevealOption = boolean | CssTransition | SectionReveal;
+export interface ResolvedReveal {
+    readonly effect: CssTransition | undefined;
+    readonly stagger: number;
+    readonly delay: number;
+    readonly duration: number | undefined;
+    readonly once: boolean;
+    readonly threshold: number;
+}
+/** Null when the section does not reveal. `effect` undefined = the default (`fadeUp()`, filled in by the host). */
+export declare function resolveReveal(option: SectionRevealOption | undefined): ResolvedReveal | null;
+/** What a section hands its parts: the tier-picked transition and the timing. */
+export interface PartReveal {
+    readonly transition: CssTransition;
+    readonly stagger: number;
+    readonly delay: number;
+    readonly duration: number | undefined;
+}
+export interface RevealAttrs {
+    readonly "data-sx-tr"?: string;
+    readonly "data-sx-tr-mode"?: "reveal";
+    readonly "data-sx-sr"?: "";
+    readonly style?: CSSProperties;
+}
+/**
+ * The attributes a part spreads to play the reveal as the `order`-th part
+ * (0 = first). Nothing when the section does not reveal.
+ */
+export declare function revealAttrs(reveal: PartReveal | null, order: number): RevealAttrs;
+/**
+ * The reveals that fade their content, not their element (a carousel slot owns
+ * its element's opacity). A section part is often a box of its own (a Services
+ * card's border and background), which would sit there empty while its content
+ * faded in: for these the part fades as a whole.
+ */
+export declare const FADING_REVEALS: readonly ["fadeUp", "blurFade", "zoomOut"];
+/** Shows every revealing part once its section is in view (see the note at the top). */
+export declare const SECTION_REVEAL_CSS: string;

package/dist/sections/shared/reveal.js

@@ -0,0 +1,59 @@
+// A section's `reveal` prop: its main parts play a CSS transition one after
+// another when the section scrolls into view. Pure: no React, testable.
+//
+// The parts themselves play it (they are the layout's grid items, so a wrapper
+// would break the layout). The section's inner box is observed and gets
+// `data-sx-in`; every part that plays carries `data-sx-sr`, and the rule below
+// shows it once any ancestor is in. A descendant rule, not the base sheet's
+// child rule, so the Services cards (inside their list) play too.
+import { LAYER_ORDER } from "../../backgrounds/runtime/rootCss.js";
+const isTransition = (v) => typeof v === "object" && "kind" in v;
+/** Null when the section does not reveal. `effect` undefined = the default (`fadeUp()`, filled in by the host). */
+export function resolveReveal(option) {
+    if (!option)
+        return null;
+    const o = option === true ? {} : isTransition(option) ? { effect: option } : option;
+    return {
+        effect: o.effect,
+        stagger: o.stagger ?? 0.12,
+        delay: o.delay ?? 0,
+        duration: o.duration,
+        once: o.once ?? true,
+        threshold: o.threshold ?? 0.15,
+    };
+}
+const seconds = (n) => `${Number(n.toFixed(3))}s`;
+/**
+ * The attributes a part spreads to play the reveal as the `order`-th part
+ * (0 = first). Nothing when the section does not reveal.
+ */
+export function revealAttrs(reveal, order) {
+    if (!reveal)
+        return {};
+    const { transition, stagger, delay, duration } = reveal;
+    const style = { ...transition.vars, "--sx-tr-delay": seconds(delay + order * stagger) };
+    if (duration !== undefined)
+        style["--sx-tr-duration"] = seconds(duration);
+    return { "data-sx-tr": transition.id, "data-sx-tr-mode": "reveal", "data-sx-sr": "", style: style };
+}
+/**
+ * The reveals that fade their content, not their element (a carousel slot owns
+ * its element's opacity). A section part is often a box of its own (a Services
+ * card's border and background), which would sit there empty while its content
+ * faded in: for these the part fades as a whole.
+ */
+export const FADING_REVEALS = ["fadeUp", "blurFade", "zoomOut"];
+const fading = `[data-sx-sr]:is(${FADING_REVEALS.map((id) => `[data-sx-tr="${id}"]`).join(", ")})`;
+/** Shows every revealing part once its section is in view (see the note at the top). */
+export const SECTION_REVEAL_CSS = `${LAYER_ORDER}
+@layer components {
+  [data-sx-in] [data-sx-sr] {
+    --sx-p: 1;
+  }
+  ${fading} {
+    opacity: var(--sx-p);
+  }
+  ${fading} > * {
+    opacity: 1;
+  }
+}`;

package/dist/sections/shared/stat.d.ts

@@ -0,0 +1,18 @@
+export interface ParsedStat {
+    /** What sits before the number ("€", "~"). */
+    readonly prefix: string;
+    readonly value: number;
+    /** What follows it ("+", "%", "k+", "/5"). */
+    readonly suffix: string;
+    /** Picked so the number formats back to exactly how it was written. */
+    readonly locale: string;
+    readonly format: Intl.NumberFormatOptions;
+}
+/**
+ * `text` as a prefix, one number and a suffix, with the locale and format that write the number back exactly as it
+ * stands (`1,250` keeps its comma, `4,9` its decimal comma); `null` when it isn't one.
+ *
+ * A separator followed by exactly three digits groups thousands (`10,000`, `1.500`); otherwise it is the decimal point
+ * (`4.9`, `4,9`). When both kinds appear, the last one is the decimal point.
+ */
+export declare function parseStat(text: string): ParsedStat | null;

package/dist/sections/shared/stat.js

@@ -0,0 +1,47 @@
+// About's figures as numbers NumberRoll can roll to: "40+" is 40 with a "+" after it, "€1.2M" is 1.2 between "€" and
+// "M". Pure; tested. A figure that isn't one number written plainly ("24/7" is fine, "1 000" is not) stays text.
+import { formatNumber } from "../../text/number/format.js";
+// the number ends where the text stops being part of it: "1 000" and "1’000" group with a space or a quote, and stay text
+const FIGURE = /^(\D*?)(\d(?:[\d.,]*\d)?)(?![\s  '’]\d)(\D.*)?$/s;
+/**
+ * `text` as a prefix, one number and a suffix, with the locale and format that write the number back exactly as it
+ * stands (`1,250` keeps its comma, `4,9` its decimal comma); `null` when it isn't one.
+ *
+ * A separator followed by exactly three digits groups thousands (`10,000`, `1.500`); otherwise it is the decimal point
+ * (`4.9`, `4,9`). When both kinds appear, the last one is the decimal point.
+ */
+export function parseStat(text) {
+    const m = FIGURE.exec(text.trim());
+    if (!m)
+        return null;
+    const [, prefix = "", number = "", suffix = ""] = m;
+    const seps = [...number.matchAll(/[.,]/g)].map((s) => ({ char: s[0], at: s.index }));
+    let decimal;
+    let group;
+    if (seps.length > 0) {
+        const kinds = new Set(seps.map((s) => s.char));
+        const last = seps[seps.length - 1];
+        if (kinds.size > 1) {
+            decimal = last.char;
+            group = decimal === "." ? "," : ".";
+        }
+        else if (seps.length === 1 && number.length - last.at - 1 !== 3) {
+            decimal = last.char;
+        }
+        else {
+            group = last.char;
+        }
+    }
+    const plain = number.split(group ?? "\u0000").join("").replace(decimal ?? "\u0000", ".");
+    const value = Number(plain);
+    if (!Number.isFinite(value))
+        return null;
+    const decimals = decimal ? number.length - number.lastIndexOf(decimal) - 1 : 0;
+    // a decimal comma or a grouping point reads as German; everything else as US English
+    const locale = decimal === "," || group === "." ? "de-DE" : "en-US";
+    const format = { useGrouping: group !== undefined, minimumFractionDigits: decimals, maximumFractionDigits: decimals };
+    // only when it writes back exactly as it stands (a misplaced separator, "1,50,000", doesn't)
+    if (formatNumber(value, locale, format) !== number)
+        return null;
+    return { prefix, value, suffix, locale, format };
+}

package/dist/sections/shared/types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import type { ButtonEffect } from "../../buttons/types.js";
+import type { WordCycleProps } from "../../text/cycle/WordCycle.js";
+import type { NumberRollProps } from "../../text/number/NumberRoll.js";
+import type { TextEffect } from "../../text/types.js";
+/** A link rendered as a call to action. The first one in a list is the primary. */
+export interface SectionAction {
+    readonly label: string;
+    readonly href: string;
+}
+/** The button effects a section's primary action wears (`actionEffect`): one, or a list that stacks. */
+export type SectionActionEffect = ButtonEffect | readonly ButtonEffect[];
+/** The text effects a section's title or eyebrow wears (`titleEffect`, `eyebrowEffect`): one, or a list that stacks. */
+export type SectionTextEffect = TextEffect | readonly TextEffect[];
+/** How the Hero's cycling word changes (`titleCycle`): `WordCycle`'s props, without the words (they are content). */
+export type SectionTitleCycle = Omit<WordCycleProps, "words" | "as" | "className" | "style">;
+/**
+ * How About's figures roll (`statRoll`): `NumberRoll`'s props, without the value and its format (both are read from
+ * each stat's text: `"40+"` rolls to 40 and keeps its `+`).
+ */
+export type SectionStatRoll = Omit<NumberRollProps, "value" | "to" | "clock" | "format" | "locale" | "units" | "timeZone" | "as" | "className" | "style">;
+/**
+ * What fills a section's media slot. `node` is the escape hatch: any element,
+ * including a `<Carousel.Root>`.
+ */
+export type SectionMedia = {
+    readonly kind: "image";
+    readonly src: string;
+    readonly alt: string;
+} | {
+    readonly kind: "video";
+    readonly src: string;
+    /** Read out instead of the video. Required: a video has no alt text. */
+    readonly label: string;
+    readonly poster?: string;
+    /** Muted, looping, no controls. Off by default; only for decorative footage. */
+    readonly autoPlay?: boolean;
+} | {
+    readonly kind: "node";
+    readonly node: ReactNode;
+};
+/** Props every section part takes. `children` replaces the part's default content. */
+export interface SectionPartProps {
+    readonly className?: string;
+    readonly children?: ReactNode;
+}

package/dist/sections/shared/types.js

@@ -0,0 +1 @@
+export {};