@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/schema/types.d.ts

@@ -0,0 +1,182 @@
+/**
+ * What every field shares.
+ *
+ * `default` is a value that, written explicitly, gives exactly what leaving
+ * the option out gives (tested): the form shows it, and a config never stores
+ * it. Without `default` the option is **auto**: the piece decides when it is
+ * left out (a count that depends on the screen, a seed whose absence means
+ * something else), the form shows `auto` (and `autoNote`), and only a change
+ * is stored.
+ */
+interface FieldBase<V> {
+    readonly label: string;
+    /** One line under the control. */
+    readonly help?: string;
+    /** Folded away under "Advanced" in the form. */
+    readonly advanced?: boolean;
+    readonly default?: V;
+    /** Shown while an auto option is unset: what the piece does then (`"90, at most 150 on touch screens"`). */
+    readonly autoNote?: string;
+    /** Where the control sits while an auto option is unset (a slider needs a position). */
+    readonly autoValue?: V;
+    /** The piece can't be made without it (an image's `src`). It has no default. */
+    readonly required?: boolean;
+}
+export interface NumberField extends FieldBase<number> {
+    readonly kind: "number";
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    /** `px`, `s`, `°`, `%` … shown after the number. */
+    readonly unit?: string;
+}
+export interface IntegerField extends FieldBase<number> {
+    readonly kind: "integer";
+    readonly min: number;
+    readonly max: number;
+    readonly unit?: string;
+}
+/** A random seed: an integer the form can shuffle. */
+export interface SeedField extends FieldBase<number> {
+    readonly kind: "seed";
+}
+export interface BooleanField extends FieldBase<boolean> {
+    readonly kind: "boolean";
+}
+/** One of a few values: words (`"x" | "y"`), or numbers where a number union is the option's type (`1 | -1`). */
+export interface ChoiceField<V extends string | number = string> extends FieldBase<V> {
+    readonly kind: "choice";
+    readonly values: readonly V[];
+    /** Display names, keyed by the value as text; the value itself is shown when missing. */
+    readonly labels?: Readonly<Record<string, string>>;
+}
+/** One CSS colour: a theme token (`var(--color-sx-accent)`), `color-mix(…)`, or any CSS colour. */
+export interface ColorField extends FieldBase<string> {
+    readonly kind: "color";
+}
+/** A list of CSS colours. */
+export interface ColorsField extends FieldBase<readonly string[]> {
+    readonly kind: "colors";
+    readonly min: number;
+    readonly max: number;
+}
+/** A list of texts or addresses (an image sequence's frames). */
+export interface TextsField extends FieldBase<readonly string[]> {
+    readonly kind: "texts";
+    readonly min: number;
+    readonly max: number;
+    readonly url?: boolean;
+}
+/** A `[min, max]` pair. */
+export interface RangeField extends FieldBase<readonly [number, number]> {
+    readonly kind: "range";
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly unit?: string;
+}
+export interface TextField extends FieldBase<string> {
+    readonly kind: "text";
+    /** An address (an image, a video): the form checks it looks like one. */
+    readonly url?: boolean;
+    readonly placeholder?: string;
+}
+/**
+ * A spot in a box: one of `keywords` (`"pointer"`, `"center"`), or `[x, y]`
+ * as fractions of the box (`[0, 0]` = top start corner).
+ */
+export interface PointField extends FieldBase<string | readonly [number, number]> {
+    readonly kind: "point";
+    readonly keywords: readonly string[];
+    readonly labels?: Readonly<Record<string, string>>;
+}
+/**
+ * A fixed-length list of numbers (`[x, y, z]`), one control per entry. With
+ * `percent`, an entry may also be a percentage string (`"-20%"`).
+ */
+export interface VectorField extends FieldBase<readonly (number | string)[]> {
+    readonly kind: "vector";
+    /** One per entry: `["x", "y", "z"]`. */
+    readonly labels: readonly string[];
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly unit?: string;
+    readonly percent?: boolean;
+}
+/**
+ * Another configurable piece, chosen by id from a family and configured with
+ * its own schema (a shader's CSS `fallback`, a section reveal's `effect`).
+ * Stored as `{ id, options }`; an export writes it as a call (`wipe({ … })`).
+ */
+export interface EffectField extends FieldBase<EffectValue> {
+    readonly kind: "effect";
+    readonly family: SchemaFamily;
+    /** Only pieces whose `meta.modes` include this one (`"reveal"`, `"carousel"`). */
+    readonly mode?: string;
+    /** Only pieces whose `meta.family` (the technology) is one of these (`["css"]` for a shader's fallback). */
+    readonly kinds?: readonly string[];
+}
+/** A nested object of fields (`creative({ prev, next })`). */
+export interface GroupField extends FieldBase<Readonly<Record<string, unknown>>> {
+    readonly kind: "group";
+    readonly fields: Readonly<Record<string, Field>>;
+    /**
+     * The option also takes `false` (the carousel's `morph`): the label of the
+     * switch that turns the whole group off. Stored as `false`.
+     */
+    readonly off?: string;
+}
+export type Field = NumberField | IntegerField | SeedField | BooleanField | ChoiceField<string | number> | ColorField | ColorsField | TextsField | RangeField | TextField | PointField | VectorField | EffectField | GroupField;
+export type FieldKind = Field["kind"];
+/** A configured piece: which one, and the options that differ from its defaults. */
+export interface EffectValue {
+    readonly id: string;
+    readonly options: Readonly<Record<string, unknown>>;
+}
+/** The groups of configurable pieces. */
+export declare const SCHEMA_FAMILIES: readonly ["background", "transition", "reveal", "carousel-layout", "carousel-modifier", "carousel-presence", "carousel-open", "carousel-physics", "carousel", "ticker", "grid", "grid-open", "scroll", "button", "text", "word-cycle", "typewriter", "number-roll"];
+export type SchemaFamily = (typeof SCHEMA_FAMILIES)[number];
+/** Where a factory is imported from. */
+export type SchemaEntry = "@sharedex/ui" | "@sharedex/ui/three";
+/** What a builder shows about a piece (from its registry: BACKGROUND_EFFECTS, TRANSITION_EFFECTS …). */
+export interface SchemaMeta {
+    readonly label: string;
+    readonly category?: string;
+    /** The technology (css, svg, canvas, webgl, three, media …). */
+    readonly family?: string;
+    /** The weakest device it runs smoothly on: all, mid, high. */
+    readonly tier?: string;
+    /** Where it can play (transitions: `carousel`, `reveal`). */
+    readonly modes?: readonly string[];
+}
+/** One configurable piece. */
+export interface Schema {
+    /** The piece's id in its registry (`"water-ripple"`, `"noiseBurn"`, `"barrel"`). */
+    readonly id: string;
+    readonly family: SchemaFamily;
+    /**
+     * The exported function that takes the options (`"waterRipple"`), or a
+     * member of an exported object (`"presence.contract"`: the import is `presence`).
+     */
+    readonly factory: string;
+    readonly entry: SchemaEntry;
+    /**
+     * The factory takes these options as positional arguments, in this order,
+     * instead of one options object: `pagedBy(n, maxPages)`.
+     */
+    readonly args?: readonly string[];
+    /** The option fields, in the order the form shows them. */
+    readonly fields: Readonly<Record<string, Field>>;
+    /**
+     * Options that can't be a form field (functions, MotionValues, React nodes):
+     * named here so the form can list them as "set in code".
+     */
+    readonly code: readonly string[];
+    /** Label, category, tier: set by the family registry. */
+    readonly meta?: SchemaMeta;
+}
+type IsTuple2<V> = V extends readonly [number, number] ? (number extends V["length"] ? false : true) : false;
+/** The field kinds that can describe an option of type `V`. */
+export type FieldFor<V> = [V] extends [boolean] ? BooleanField : [V] extends [number] ? NumberField | IntegerField | SeedField | (number extends V ? never : ChoiceField<V>) : IsTuple2<V> extends true ? RangeField | VectorField : [V] extends [readonly string[]] ? ColorsField | TextsField : [V] extends [string] ? (string extends V ? never : ChoiceField<V>) | ChoiceField | ColorField | TextField : [V] extends [EffectValue] ? EffectField : (string extends V ? TextField | ColorField : never) | ([V] extends [string | readonly [number, number]] ? PointField : never) | EffectField | GroupField;
+export {};

package/dist/schema/types.js

@@ -0,0 +1,27 @@
+// ---------------------------------------------------------------------------
+// Option schemas: every configurable piece of @sharedex/ui described as data,
+// so a form (the Design System Builder) can edit any option and a generator
+// can write the same values back as a factory call. Pure data: no React, no
+// DOM, no effect code.
+// ---------------------------------------------------------------------------
+/** The groups of configurable pieces. */
+export const SCHEMA_FAMILIES = [
+    "background",
+    "transition",
+    "reveal",
+    "carousel-layout",
+    "carousel-modifier",
+    "carousel-presence",
+    "carousel-open",
+    "carousel-physics",
+    "carousel",
+    "ticker",
+    "grid",
+    "grid-open",
+    "scroll",
+    "button",
+    "text",
+    "word-cycle",
+    "typewriter",
+    "number-roll",
+];

package/dist/sections/about/About.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { type SectionRevealOption } from "../shared/reveal.js";
+import type { SectionMedia, SectionPartProps, SectionStatRoll, SectionTextEffect } from "../shared/types.js";
+import type { AboutLayout } from "./layouts.js";
+export interface AboutStat {
+    /** The figure itself: "1998", "40+", "4.9/5". */
+    readonly value: string;
+    readonly label: string;
+}
+export interface AboutContent {
+    readonly eyebrow?: string;
+    readonly title: string;
+    /** One string per paragraph. */
+    readonly body: string | readonly string[];
+    readonly stats?: readonly AboutStat[];
+    readonly media?: SectionMedia;
+}
+export interface AboutRootProps {
+    readonly content: AboutContent;
+    readonly layout?: AboutLayout;
+    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;
+    /**
+     * Roll each figure to its value as it comes into view (a `NumberRoll`): `true`, or its settings
+     * (`{ look: "spin", duration: 2 }`). `"40+"` rolls to 40 and keeps its `+`; a figure that isn't one plain number
+     * (`"1 000"`) stays as written. Left out, the figures are plain text.
+     */
+    readonly statRoll?: boolean | SectionStatRoll;
+    readonly className?: string;
+    /** Replaces the default composition (`<About.Text />`, `<About.Stats />`, `<About.Media />`). */
+    readonly children?: ReactNode;
+}
+declare function Root({ content, layout, unstyled, className, background, reveal, titleEffect, eyebrowEffect, statRoll, children, }: AboutRootProps): import("react").JSX.Element;
+declare function Text({ 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 Body({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Stats({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Media({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+export { Root, Text, Eyebrow, Title, Body, Stats, Media };

package/dist/sections/about/About.js

@@ -0,0 +1,56 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { partAttrs } from "../shared/attrs.js";
+import { NumberRoll } from "../../text/number/NumberRoll.js";
+import { Heading } from "../shared/Heading.js";
+import { parseStat } from "../shared/stat.js";
+import { createSectionContext, SectionShell } from "../shared/context.js";
+import { revealAttrs } from "../shared/reveal.js";
+import { MediaView } from "../shared/MediaView.js";
+const { Provider, useSection } = createSectionContext("About");
+/** `statRoll={true}`: every setting at its default (one object, so the context doesn't change every render). */
+const NO_SETTINGS = {};
+/** A figure that rolls to its value, with what's written around the number kept as it is. */
+function Figure({ value, roll }) {
+    const stat = parseStat(value);
+    if (!stat)
+        return _jsx(_Fragment, { children: value });
+    return (_jsxs(_Fragment, { children: [stat.prefix, _jsx(NumberRoll, { ...roll, value: stat.value, locale: stat.locale, format: stat.format }), stat.suffix] }));
+}
+function Root({ content, layout = "story", unstyled = false, className, background, reveal, titleEffect, eyebrowEffect, statRoll, children, }) {
+    return (_jsx(Provider, { layout: layout, content: content, reveal: reveal, titleEffect: titleEffect, eyebrowEffect: eyebrowEffect, statRoll: statRoll === true ? NO_SETTINGS : statRoll === false ? undefined : statRoll, children: (titleId, shellReveal) => (_jsx(SectionShell, { section: "about", layout: layout, unstyled: unstyled, titleId: titleId, className: className, background: background, reveal: shellReveal, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Text, {}), _jsx(Stats, {}), _jsx(Media, {})] })) })) }));
+}
+function Text({ className, children }) {
+    const { reveal } = useSection("Text");
+    return (_jsx("div", { ...partAttrs("about", "text"), ...revealAttrs(reveal, 0), className: className, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Eyebrow, {}), _jsx(Title, {}), _jsx(Body, {})] })) }));
+}
+function Eyebrow({ className, children }) {
+    const { content, eyebrowEffect } = useSection("Eyebrow");
+    const text = children ?? content.eyebrow;
+    return text ? _jsx(Heading, { as: "p", attrs: partAttrs("about", "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("about", "title"), id: titleId, className: className, effect: titleEffect, children: children ?? content.title }));
+}
+function Body({ className, children }) {
+    const { content } = useSection("Body");
+    const paragraphs = typeof content.body === "string" ? [content.body] : content.body;
+    return (_jsx("div", { ...partAttrs("about", "body"), className: className, children: children ?? paragraphs.map((p, i) => _jsx("p", { children: p }, i)) }));
+}
+function Stats({ className, children }) {
+    const { content, reveal, statRoll } = useSection("Stats");
+    const stats = content.stats ?? [];
+    if (!children && stats.length === 0)
+        return null;
+    return (_jsx("dl", { ...partAttrs("about", "stats"), ...revealAttrs(reveal, 1), className: className, children: children ??
+            stats.map((s) => (_jsxs("div", { ...partAttrs("about", "stat"), children: [_jsx("dt", { ...partAttrs("about", "stat-label"), children: s.label }), _jsx("dd", { ...partAttrs("about", "stat-value"), children: statRoll ? _jsx(Figure, { value: s.value, roll: statRoll }) : s.value })] }, s.label))) }));
+}
+function Media({ className, children }) {
+    const { content, reveal } = useSection("Media");
+    if (!children && !content.media)
+        return null;
+    return (_jsx("div", { ...partAttrs("about", "media"), ...revealAttrs(reveal, 2), className: className, children: children ?? (content.media ? _jsx(MediaView, { media: content.media }) : null) }));
+}
+// The parts. About, the compound object, is assembled in ./index.ts, outside this client module.
+export { Root, Text, Eyebrow, Title, Body, Stats, Media };

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

@@ -0,0 +1,16 @@
+import { Root, Text, Eyebrow, Title, Body, Stats, Media } from "./About.js";
+export { ABOUT_LAYOUTS } from "./layouts.js";
+export type { AboutLayout } from "./layouts.js";
+/**
+ * Who you are, in a few paragraphs, with optional key figures and an image.
+ * Figures render as a `<dl>`: the label is the term, the value its definition.
+ */
+export declare const About: {
+    Root: typeof Root;
+    Text: typeof Text;
+    Eyebrow: typeof Eyebrow;
+    Title: typeof Title;
+    Body: typeof Body;
+    Stats: typeof Stats;
+    Media: typeof Media;
+};

package/dist/sections/about/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 <About.Root>: built inside the client module, it reaches the server
+// as an opaque client reference, and About.Root is undefined there (found by the Next.js end-to-end check).
+import { Root, Text, Eyebrow, Title, Body, Stats, Media } from "./About.js";
+export { ABOUT_LAYOUTS } from "./layouts.js";
+/**
+ * Who you are, in a few paragraphs, with optional key figures and an image.
+ * Figures render as a `<dl>`: the label is the term, the value its definition.
+ */
+export const About = { Root, Text, Eyebrow, Title, Body, Stats, Media };

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

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

package/dist/sections/about/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 ABOUT_LAYOUTS = ["story", "split-stats", "centered"];

package/dist/sections/contact/Contact.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { type SectionRevealOption } from "../shared/reveal.js";
+import type { SectionPartProps, SectionTextEffect } from "../shared/types.js";
+import type { ContactLayout } from "./layouts.js";
+export interface ContactDetail {
+    /** "Email", "Phone", "Address", "Opening hours" … */
+    readonly label: string;
+    readonly value: string;
+    /** `mailto:`, `tel:` or a maps link. */
+    readonly href?: string;
+}
+export interface ContactContent {
+    readonly eyebrow?: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly details?: readonly ContactDetail[];
+    /** An embeddable map URL (Google Maps / OpenStreetMap embed). */
+    readonly map?: {
+        readonly src: string;
+        readonly title: string;
+    };
+}
+export interface ContactRootProps {
+    readonly content: ContactContent;
+    readonly layout?: ContactLayout;
+    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;
+    /**
+     * Your composition. The default is `<Contact.Info />` + `<Contact.Map />`;
+     * add `<Contact.Form>` with your own form inside, since the form, its
+     * validation and its sending belong to the project.
+     */
+    readonly children?: ReactNode;
+}
+declare function Root({ content, layout, unstyled, className, background, reveal, titleEffect, eyebrowEffect, children, }: ContactRootProps): import("react").JSX.Element;
+declare function Info({ 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 Details({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+/** A slot for the project's own form. It has no default content. */
+declare function Form({ className, children }: SectionPartProps): import("react").JSX.Element;
+/** Named MapPart internally so it doesn't shadow the global `Map`. */
+declare function MapPart({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+export { Root, Info, Eyebrow, Title, Description, Details, Form, MapPart };

package/dist/sections/contact/Contact.js

@@ -0,0 +1,51 @@
+"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";
+const { Provider, useSection } = createSectionContext("Contact");
+function Root({ content, layout = "split-info", 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: "contact", layout: layout, unstyled: unstyled, titleId: titleId, className: className, background: background, reveal: shellReveal, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Info, {}), _jsx(MapPart, {})] })) })) }));
+}
+function Info({ className, children }) {
+    const { reveal } = useSection("Info");
+    return (_jsx("div", { ...partAttrs("contact", "info"), ...revealAttrs(reveal, 0), className: className, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Eyebrow, {}), _jsx(Title, {}), _jsx(Description, {}), _jsx(Details, {})] })) }));
+}
+function Eyebrow({ className, children }) {
+    const { content, eyebrowEffect } = useSection("Eyebrow");
+    const text = children ?? content.eyebrow;
+    return text ? _jsx(Heading, { as: "p", attrs: partAttrs("contact", "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("contact", "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("contact", "description"), className: className, children: text }) : null;
+}
+function Details({ className, children }) {
+    const { content } = useSection("Details");
+    const details = content.details ?? [];
+    if (!children && details.length === 0)
+        return null;
+    return (_jsx("dl", { ...partAttrs("contact", "details"), className: className, children: children ??
+            details.map((d) => (_jsxs("div", { ...partAttrs("contact", "detail"), children: [_jsx("dt", { ...partAttrs("contact", "detail-label"), children: d.label }), _jsx("dd", { ...partAttrs("contact", "detail-value"), children: d.href ? _jsx("a", { href: d.href, children: d.value }) : d.value })] }, d.label))) }));
+}
+/** A slot for the project's own form. It has no default content. */
+function Form({ className, children }) {
+    const { reveal } = useSection("Form");
+    return (_jsx("div", { ...partAttrs("contact", "form"), ...revealAttrs(reveal, 1), className: className, children: children }));
+}
+/** Named MapPart internally so it doesn't shadow the global `Map`. */
+function MapPart({ className, children }) {
+    const { content, reveal } = useSection("Map");
+    if (!children && !content.map)
+        return null;
+    return (_jsx("div", { ...partAttrs("contact", "map"), ...revealAttrs(reveal, 2), className: className, children: children ??
+            (content.map ? _jsx("iframe", { src: content.map.src, title: content.map.title, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" }) : null) }));
+}
+// The parts. Contact, the compound object, is assembled in ./index.ts, outside this client module.
+export { Root, Info, Eyebrow, Title, Description, Details, Form, MapPart };

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

@@ -0,0 +1,17 @@
+import { Root, Info, Eyebrow, Title, Description, Details, Form, MapPart } from "./Contact.js";
+export { CONTACT_LAYOUTS } from "./layouts.js";
+export type { ContactLayout } from "./layouts.js";
+/**
+ * How to reach you: a title, contact details (as a `<dl>`), a slot for the
+ * project's form and an optional map.
+ */
+export declare const Contact: {
+    Root: typeof Root;
+    Info: typeof Info;
+    Eyebrow: typeof Eyebrow;
+    Title: typeof Title;
+    Description: typeof Description;
+    Details: typeof Details;
+    Form: typeof Form;
+    Map: typeof MapPart;
+};

package/dist/sections/contact/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 <Contact.Root>: built inside the client module, it reaches the server
+// as an opaque client reference, and Contact.Root is undefined there (found by the Next.js end-to-end check).
+import { Root, Info, Eyebrow, Title, Description, Details, Form, MapPart } from "./Contact.js";
+export { CONTACT_LAYOUTS } from "./layouts.js";
+/**
+ * How to reach you: a title, contact details (as a `<dl>`), a slot for the
+ * project's form and an optional map.
+ */
+export const Contact = { Root, Info, Eyebrow, Title, Description, Details, Form, Map: MapPart };

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

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

package/dist/sections/contact/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 CONTACT_LAYOUTS = ["split-info", "centered", "map"];

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import { type SectionRevealOption } from "../shared/reveal.js";
+import type { SectionAction, SectionActionEffect, SectionMedia, SectionPartProps, SectionTextEffect, SectionTitleCycle } from "../shared/types.js";
+import type { HeroLayout } from "./layouts.js";
+export interface HeroContent {
+    readonly eyebrow?: string;
+    /** Rendered as the page's `<h1>`. */
+    readonly title: string;
+    /**
+     * Words that take turns after the title: `title: "We build"`, `titleWords: ["websites", "apps", "brands"]` reads
+     * "We build websites", then "apps" … (a `WordCycle`; `titleCycle` on `Hero.Root` sets how they change). Every word
+     * is in the HTML; screen readers read them once.
+     */
+    readonly titleWords?: readonly string[];
+    readonly description?: string;
+    /** The first action is the primary one. */
+    readonly actions?: readonly SectionAction[];
+    readonly media?: SectionMedia;
+}
+export interface HeroRootProps {
+    readonly content: HeroContent;
+    readonly layout?: HeroLayout;
+    /** Drop the default look; the layout stays. */
+    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;
+    /** How the title's cycling word (`content.titleWords`) changes: `{ look: "flip", interval: 3 }`. Default a slide. */
+    readonly titleCycle?: SectionTitleCycle;
+    /**
+     * Button effects for the primary action (`glowShine()`, or a list that stacks). Set, every action renders as a
+     * `Button` (the others as `variant="outline"`, with no effects); left out, they stay plain links.
+     */
+    readonly actionEffect?: SectionActionEffect;
+    readonly className?: string;
+    /** Replaces the default composition (`<Hero.Text />` + `<Hero.Media />`). */
+    readonly children?: ReactNode;
+}
+declare function Root({ content, layout, unstyled, className, background, reveal, actionEffect, titleEffect, eyebrowEffect, titleCycle, children, }: HeroRootProps): import("react").JSX.Element;
+declare function Text({ 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 Actions({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Media({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+export { Root, Text, Eyebrow, Title, Description, Actions, Media };

package/dist/sections/hero/Hero.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../buttons/Button.js";
+import { WordCycle } from "../../text/cycle/WordCycle.js";
+import { Text as TextFx } from "../../text/Text.js";
+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("Hero");
+function Root({ content, layout = "split", unstyled = false, className, background, reveal, actionEffect, titleEffect, eyebrowEffect, titleCycle, children, }) {
+    return (_jsx(Provider, { layout: layout, content: content, reveal: reveal, unstyled: unstyled, actionEffect: actionEffect, titleEffect: titleEffect, eyebrowEffect: eyebrowEffect, titleCycle: titleCycle, children: (titleId, shellReveal) => (_jsx(SectionShell, { section: "hero", layout: layout, unstyled: unstyled, titleId: titleId, className: className, background: background, reveal: shellReveal, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Text, {}), _jsx(Media, {})] })) })) }));
+}
+function Text({ className, children }) {
+    const { reveal } = useSection("Text");
+    return (_jsx("div", { ...partAttrs("hero", "text"), ...revealAttrs(reveal, 0), className: className, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Eyebrow, {}), _jsx(Title, {}), _jsx(Description, {}), _jsx(Actions, {})] })) }));
+}
+function Eyebrow({ className, children }) {
+    const { content, eyebrowEffect } = useSection("Eyebrow");
+    const text = children ?? content.eyebrow;
+    return text ? _jsx(Heading, { as: "p", attrs: partAttrs("hero", "eyebrow"), className: className, effect: eyebrowEffect, children: text }) : null;
+}
+function Title({ className, children }) {
+    const { content, titleId, titleEffect, titleCycle } = useSection("Title");
+    const words = content.titleWords ?? [];
+    if (children !== undefined || words.length === 0) {
+        return (_jsx(Heading, { as: "h1", attrs: partAttrs("hero", "title"), id: titleId, className: className, effect: titleEffect, children: children ?? content.title }));
+    }
+    // the title's effects go on the fixed words; the cycling word follows them, in the same heading
+    return (_jsxs("h1", { ...partAttrs("hero", "title"), id: titleId, className: className, children: [titleEffect === undefined ? content.title : _jsx(TextFx, { as: "span", effect: titleEffect, children: content.title }), " ", _jsx(WordCycle, { ...titleCycle, words: words })] }));
+}
+function Description({ className, children }) {
+    const { content } = useSection("Description");
+    const text = children ?? content.description;
+    return text ? _jsx("p", { ...partAttrs("hero", "description"), className: className, children: text }) : null;
+}
+function Actions({ className, children }) {
+    const { content, unstyled, actionEffect } = useSection("Actions");
+    const actions = content.actions ?? [];
+    if (!children && actions.length === 0)
+        return null;
+    return (_jsx("div", { ...partAttrs("hero", "actions"), className: className, children: children ??
+            actions.map((a, i) => actionEffect === undefined ? (_jsx("a", { href: a.href, ...partAttrs("hero", "action"), "data-sx-variant": i === 0 ? "primary" : "secondary", children: a.label }, `${a.href}-${a.label}`)) : (_jsx(Button, { as: "a", href: a.href, ...partAttrs("hero", "action"), variant: i === 0 ? "solid" : "outline", unstyled: unstyled, effect: i === 0 ? actionEffect : undefined, children: a.label }, `${a.href}-${a.label}`))) }));
+}
+function Media({ className, children }) {
+    const { content, layout, reveal } = useSection("Media");
+    if (!children && !content.media)
+        return null;
+    // behind the text in media-background (positioned absolutely): there for the text to appear over
+    const plays = layout === "media-background" ? null : reveal;
+    return (_jsx("div", { ...partAttrs("hero", "media"), ...revealAttrs(plays, 1), className: className, children: children ?? (content.media ? _jsx(MediaView, { media: content.media, priority: true }) : null) }));
+}
+// The parts. Hero, the compound object, is assembled in ./index.ts, outside this client module.
+export { Root, Text, Eyebrow, Title, Description, Actions, Media };