@thewhatmatters/wmds 0.2.0

package/dist/components/organisms/FooterReveal/footerRevealStyles.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Footer reveal shell.
+ *
+ * Scrollbar: `src/theme/grid.css` already sets `scrollbar-gutter: stable` on
+ * `html`. That gutter paints the page background beside a full-bleed field.
+ * This shell does not hide the scrollbar. The root and the cover do not clip:
+ * an `overflow-x: clip` ancestor keeps GridOverlay's column guides inside
+ * `main`, so they never reach the hero. The wordmark's bottom bleed is clipped
+ * on the brand panel and the footer field instead. Do not add `overflow-hidden`
+ * on the root — it breaks `position: sticky`. Do not set `scrollbar-width: none`.
+ */
+/** Isolate root — negative z-index on the footer stays inside this stacking context. */
+export declare const footerRevealRootClasses = "relative isolate w-full max-w-full overflow-visible";
+/** Page cover — opaque page background, at least one viewport tall, above the footer. */
+export declare const footerRevealContentClasses = "relative z-[1] min-h-dvh w-full max-w-full overflow-visible bg-body";
+/**
+ * Sticky under-page footer. Class name is not `footer` — a bare `footer`
+ * class collides with page-level footer rules in consuming apps.
+ */
+export declare const footerRevealStickyClasses = "sticky bottom-0 z-[-1] m-0 w-full max-w-full overflow-x-clip bg-transparent p-0";
+/** Opacity layer. Field color belongs here (see `footerRevealFieldClasses`). */
+export declare const footerRevealFadeClasses = "w-full max-w-full overflow-x-clip";
+/** Scale + blur layer. Transform origin is the bottom center (`50% 100%`). */
+export declare const footerRevealScaleClasses = "w-full max-w-full";
+/**
+ * Brand field for the uncovered footer plane.
+ * `--color-brand` (`#011272`) with `--color-on-brand` (white). White on that navy is 15.8:1.
+ */
+export declare const footerRevealFieldClasses = "bg-brand text-on-brand";
+/**
+ * Links on the brand field. **TextLink** locks `text-fg` for prose on the page
+ * background; inherit so these links use the field ink (`--color-on-brand`).
+ */
+export declare const footerRevealFieldLinkClasses: string;
+/** Centered brand footer. Clips the decorative wordmark so it cannot widen the page. */
+export declare const footerRevealBrandClasses: string;
+/**
+ * Page-grid stripes on the brand field. Shown with `html.grid-on`.
+ * They sit under the field content (`z-0` vs `z-[1]`) and over the navy fill.
+ */
+export declare const footerRevealFieldGuideClasses = "footer-reveal-guides pointer-events-none absolute inset-0 z-0 hidden";
+/** Same max-width, margin, and tracks as `grid-page` / `.grid-guides-cols`. */
+export declare const footerRevealFieldGuideFrameClasses = "pointer-events-none absolute inset-y-0 right-0 left-0 mx-auto w-[min(100%,var(--grid-max))]";
+/** Footer type and controls. Above the field guides. */
+export declare const footerRevealFieldContentClasses = "footer-reveal-field-content relative z-[1]";
+export declare const footerRevealBrandCopyClasses = "relative z-[1] flex w-full max-w-4xl flex-col items-center gap-10";
+export declare const footerRevealBrandHeadlineClasses = "type-display-1 text-balance text-on-brand";
+export declare const footerRevealSocialListClasses = "m-0 flex list-none flex-wrap items-center justify-center gap-x-8 gap-y-3 p-0";
+/** Heading-1 (24px) so the row clears large-text AA on brand, with the field underline. */
+export declare const footerRevealSocialLinkClasses: string;
+/**
+ * Full-bleed wordmark frame. Inline-size container for the wordmark's `cqi`
+ * font-size. Sits on the brand panel's padding edge so the word spans the
+ * footer, not the padded copy column.
+ */
+export declare const footerRevealWordmarkFrameClasses = "@container pointer-events-none absolute inset-x-0 bottom-0 z-0 flex w-full justify-center";
+/**
+ * Advance width in em used before measurement. Large enough that the default
+ * word stays inside the footer until the real font is measured.
+ */
+export declare const footerRevealWordmarkEmFallback = 9;
+/**
+ * Font size that fills the wordmark frame. `100cqi` is the frame's inline
+ * size; dividing by the measured advance width (in em) scales any word to
+ * that width. No breakpoint cap.
+ */
+export declare const footerRevealWordmarkFontSize = "calc(100cqi / var(--footer-wordmark-em, 9))";
+/**
+ * Decorative wordmark. Fills the frame, then shifts down so the letters bleed
+ * off the bottom edge. `--color-brand-soft` is 40% white on the navy so it
+ * stays visible; 20% white sinks into `#011272`.
+ */
+export declare const footerRevealWordmarkClasses: string;
+/** `https` links open in a new tab. Hash placeholders stay in the page. */
+export declare function footerRevealExternalLinkProps(href: string): {
+    target?: "_blank";
+    rel?: "noopener";
+};
+/**
+ * Cream field with brand ink. Page background (`bg-body`) and `--color-brand`
+ * (`#011272`). Dark theme repaints this class to `--color-on-brand` — brand
+ * navy on the dark body is under 3:1. See `theme.css`.
+ */
+/**
+ * Cream field. At least one viewport (`100vh`) so a short stack cannot leave
+ * the page showing above the footer. Taller content grows the field.
+ */
+export declare const footerRevealRuledFieldClasses = "footer-reveal-ruled-field min-h-[100vh] bg-body text-brand";
+/**
+ * Full-bleed shell. At least `100vh`, same floor as the field, so every mount
+ * of **FooterReveal.Ruled** fills the viewport. Taller content grows it.
+ * Centered link stack, then the fitted wordmark, then the quiet meta row.
+ * No max-width and no overflow clip — the nav, wordmark, and meta row stay
+ * visible. The wordmark has to reach the viewport width.
+ *
+ * That stack is one block. `justify-center-safe` places it in the vertical
+ * center of the field when it fits, so the leftover cream is shared above
+ * the links and below the quiet row. `safe` keeps a short viewport on
+ * `flex-start` instead of sliding the links under the pinned nav.
+ *
+ * Top padding clears the pinned site nav on every mount. `--site-nav-height`
+ * is the nav band. `var(--spacing) * 4` is that pill's 1rem pin (`top-4`).
+ * The bottom inset stays `--grid-pad`.
+ */
+export declare const footerRevealRuledRootClasses: string;
+/** Centered link stack. The list hugs its labels; it does not stretch into columns. */
+export declare const footerRevealRuledLinksClasses = "flex w-full min-w-0 justify-center px-[var(--grid-margin)]";
+/**
+ * Parent of the three **TextLink**s. Geist sans is inherited. Below `sm` the
+ * size is `--font-size-4xl` (2.1875rem) so the stack does not fill a phone.
+ * From `sm` it is 4rem. No type token is 4rem. **TextLink** keeps its own
+ * solid underline, medium weight, and focus ring.
+ */
+export declare const footerRevealRuledLinkListClasses: string;
+/**
+ * Brand ink on these three footer links. **TextLink** sets `text-fg` on the
+ * anchor, which wins over a parent `text-brand`. `!` keeps `--color-brand`
+ * (`#011272`) on the words only. The solid underline stays TextLink's.
+ */
+export declare const footerRevealRuledNavLinkClasses = "!text-brand";
+/**
+ * Quiet meta row. One centered stack below `md`. From `md`, seal and copyright
+ * lead, the email is centered, and the credit sits on the end.
+ */
+export declare const footerRevealRuledMetaClasses = "grid w-full min-w-0 grid-cols-1 items-center gap-3 px-[var(--grid-margin)] md:grid-cols-3 md:gap-4";
+export declare const footerRevealRuledIdentityClasses = "flex min-w-0 items-center justify-center gap-2 md:justify-start";
+export declare const footerRevealRuledCopyrightClasses = "type-supporting min-w-0 text-brand";
+/** Small typographic WM beside the copyright. Not a separate logo asset. */
+export declare const footerRevealRuledMarkClasses = "shrink-0 font-sans text-[length:var(--font-size-xl)] font-bold leading-none tracking-[-0.04em] text-brand";
+export declare const footerRevealRuledContactClasses = "flex min-w-0 justify-center";
+export declare const footerRevealRuledEmailClasses: string;
+/**
+ * Wordmark frame. Full footer width so `100cqi` tracks the viewport, not the
+ * page grid. A 12px inset keeps side-bearing ink off the viewport edge. Overflow
+ * stays visible — a hidden frame is what cropped the previous giant word.
+ */
+export declare const footerRevealRuledWordmarkFrameClasses = "@container flex w-full min-w-0 items-center justify-center overflow-visible px-3 py-[var(--grid-baseline)]";
+/** Fully visible. `leading-none` keeps the line box on the caps. No crop shift. */
+export declare const footerRevealRuledWordmarkClasses = "w-max max-w-none shrink-0 whitespace-nowrap text-center font-sans font-bold leading-none tracking-[-0.045em] text-brand";
+export declare const footerRevealRuledCreditClasses = "flex min-w-0 justify-center md:justify-end";
+export declare const footerRevealRuledCreditCopyClasses = "min-w-0 max-w-full text-center font-mono text-[length:var(--font-size-sm)] leading-none text-brand break-words md:text-right";
+//# sourceMappingURL=footerRevealStyles.d.ts.map

package/dist/components/organisms/FooterReveal/footerRevealStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footerRevealStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/FooterReveal/footerRevealStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,wFAAwF;AACxF,eAAO,MAAM,uBAAuB,wDAAwD,CAAC;AAE7F,yFAAyF;AACzF,eAAO,MAAM,0BAA0B,wEACgC,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,yBAAyB,oFAC6C,CAAC;AAEpF,gFAAgF;AAChF,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,8EAA8E;AAC9E,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,wBAAwB,2BAA2B,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,4BAA4B,QAIN,CAAC;AAEpC,wFAAwF;AACxF,eAAO,MAAM,wBAAwB,QAEkB,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,yEAC8B,CAAC;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,kCAAkC,gGACgD,CAAC;AAEhG,wDAAwD;AACxD,eAAO,MAAM,+BAA+B,+CAA+C,CAAC;AAE5F,eAAO,MAAM,4BAA4B,sEAC4B,CAAC;AAEtE,eAAO,MAAM,gCAAgC,8CAA8C,CAAC;AAE5F,eAAO,MAAM,6BAA6B,iFACsC,CAAC;AAEjF,2FAA2F;AAC3F,eAAO,MAAM,6BAA6B,QAAmD,CAAC;AAE9F;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,8FACgD,CAAC;AAE9F;;;GAGG;AACH,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,gDACsC,CAAC;AAEhF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,QAGrB,CAAC;AAEpB,2EAA2E;AAC3E,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,MAAM,GACX;IAAE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,UAAU,CAAA;CAAE,CAGzC;AAED;;;;GAIG;AACH;;;GAGG;AACH,eAAO,MAAM,6BAA6B,+DACoB,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,4BAA4B,QAEyD,CAAC;AAEnG,uFAAuF;AACvF,eAAO,MAAM,6BAA6B,+DACoB,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,QAEqB,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,gBAAgB,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,4BAA4B,uGAC6D,CAAC;AAEvG,eAAO,MAAM,gCAAgC,oEACsB,CAAC;AAEpE,eAAO,MAAM,iCAAiC,uCAAuC,CAAC;AAEtF,4EAA4E;AAC5E,eAAO,MAAM,4BAA4B,8GACoE,CAAC;AAE9G,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAE7E,eAAO,MAAM,6BAA6B,QAEO,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,qCAAqC,+GAC4D,CAAC;AAE/G,mFAAmF;AACnF,eAAO,MAAM,gCAAgC,4HAC8E,CAAC;AAE5H,eAAO,MAAM,8BAA8B,+CAA+C,CAAC;AAE3F,eAAO,MAAM,kCAAkC,iIACiF,CAAC"}

package/dist/components/organisms/FooterReveal/footerRevealStyles.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/organisms/FooterReveal/footerRevealStyles.ts
+var e = "relative isolate w-full max-w-full overflow-visible", t = "relative z-[1] min-h-dvh w-full max-w-full overflow-visible bg-body", n = "sticky bottom-0 z-[-1] m-0 w-full max-w-full overflow-x-clip bg-transparent p-0", r = "w-full max-w-full overflow-x-clip", i = "w-full max-w-full", a = "bg-brand text-on-brand", o = "text-inherit underline decoration-solid underline-offset-[0.18em] hover:decoration-current focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-on-brand focus-visible:ring-offset-2 focus-visible:ring-offset-brand", s = "relative flex min-h-dvh w-full max-w-full flex-col items-center justify-center overflow-hidden px-[var(--grid-margin)] pb-[18vw] pt-24 text-center", c = "footer-reveal-guides pointer-events-none absolute inset-0 z-0 hidden", l = "pointer-events-none absolute inset-y-0 right-0 left-0 mx-auto w-[min(100%,var(--grid-max))]", u = "footer-reveal-field-content relative z-[1]", d = "relative z-[1] flex w-full max-w-4xl flex-col items-center gap-10", f = "type-display-1 text-balance text-on-brand", p = "m-0 flex list-none flex-wrap items-center justify-center gap-x-8 gap-y-3 p-0", m = "text-inherit underline decoration-solid underline-offset-[0.18em] hover:decoration-current focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-on-brand focus-visible:ring-offset-2 focus-visible:ring-offset-brand type-heading-1", h = "@container pointer-events-none absolute inset-x-0 bottom-0 z-0 flex w-full justify-center", g = "calc(100cqi / var(--footer-wordmark-em, 9))", _ = "pointer-events-none w-max max-w-none shrink-0 translate-y-[16%] select-none whitespace-nowrap text-center font-sans font-bold leading-[0.78] tracking-[-0.045em] text-brand-soft";
+function v(e) {
+	return /^https?:\/\//i.test(e) ? {
+		target: "_blank",
+		rel: "noopener"
+	} : {};
+}
+var y = "footer-reveal-ruled-field min-h-[100vh] bg-body text-brand", b = "flex min-h-[100vh] w-full min-w-0 flex-col items-center justify-center-safe gap-[var(--grid-pad)] pb-[var(--grid-pad)] pt-[calc(var(--site-nav-height)+var(--spacing)*4)] text-center text-brand", x = "flex w-full min-w-0 justify-center px-[var(--grid-margin)]", S = "m-0 flex list-none flex-col items-center gap-3 whitespace-nowrap p-0 font-sans text-[length:var(--font-size-4xl)] leading-none sm:text-[4rem]", C = "!text-brand", w = "grid w-full min-w-0 grid-cols-1 items-center gap-3 px-[var(--grid-margin)] md:grid-cols-3 md:gap-4", T = "flex min-w-0 items-center justify-center gap-2 md:justify-start", E = "type-supporting min-w-0 text-brand", D = "shrink-0 font-sans text-[length:var(--font-size-xl)] font-bold leading-none tracking-[-0.04em] text-brand", O = "flex min-w-0 justify-center", k = "type-label text-brand focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand", A = "@container flex w-full min-w-0 items-center justify-center overflow-visible px-3 py-[var(--grid-baseline)]", j = "w-max max-w-none shrink-0 whitespace-nowrap text-center font-sans font-bold leading-none tracking-[-0.045em] text-brand", M = "flex min-w-0 justify-center md:justify-end", N = "min-w-0 max-w-full text-center font-mono text-[length:var(--font-size-sm)] leading-none text-brand break-words md:text-right";
+//#endregion
+export { s as footerRevealBrandClasses, d as footerRevealBrandCopyClasses, f as footerRevealBrandHeadlineClasses, t as footerRevealContentClasses, v as footerRevealExternalLinkProps, r as footerRevealFadeClasses, a as footerRevealFieldClasses, u as footerRevealFieldContentClasses, c as footerRevealFieldGuideClasses, l as footerRevealFieldGuideFrameClasses, o as footerRevealFieldLinkClasses, e as footerRevealRootClasses, O as footerRevealRuledContactClasses, E as footerRevealRuledCopyrightClasses, M as footerRevealRuledCreditClasses, N as footerRevealRuledCreditCopyClasses, k as footerRevealRuledEmailClasses, y as footerRevealRuledFieldClasses, T as footerRevealRuledIdentityClasses, S as footerRevealRuledLinkListClasses, x as footerRevealRuledLinksClasses, D as footerRevealRuledMarkClasses, w as footerRevealRuledMetaClasses, C as footerRevealRuledNavLinkClasses, b as footerRevealRuledRootClasses, j as footerRevealRuledWordmarkClasses, A as footerRevealRuledWordmarkFrameClasses, i as footerRevealScaleClasses, m as footerRevealSocialLinkClasses, p as footerRevealSocialListClasses, n as footerRevealStickyClasses, _ as footerRevealWordmarkClasses, g as footerRevealWordmarkFontSize, h as footerRevealWordmarkFrameClasses };

package/dist/components/organisms/FooterReveal/footerRevealWordmark.d.ts

@@ -0,0 +1,37 @@
+/** Advance width of the word in em. Null when the probe did not lay out. */
+export declare function footerRevealWordmarkEm(textWidthPx: number, fontSizePx: number): number | null;
+/**
+ * Em count that makes a word of `measuredEm` fill `frameWidthPx`.
+ * `textWidthPx` is that word's layout width at `measuredEm`.
+ */
+export declare function footerRevealWordmarkFittedEm(measuredEm: number, textWidthPx: number, frameWidthPx: number): number | null;
+/** Unitless CSS value. Rounded so resize passes do not churn the attribute. */
+export declare function footerRevealWordmarkEmCss(em: number): string;
+/**
+ * Content-box inline size. `100cqi` resolves against this box, not `clientWidth`
+ * when the frame has padding.
+ */
+export declare function footerRevealWordmarkFrameWidth(frame: HTMLElement): number;
+/**
+ * Largest em whose width still fits. Smaller em is a larger font.
+ * `widthAt` is called with the rounded em that `100cqi / em` will use.
+ */
+export declare function footerRevealWordmarkFitEm(frameWidthPx: number, measuredEm: number, widthAt: (em: number) => number): number | null;
+/** True when the word covers at least `minRatio` of the frame's content box. */
+export declare function footerRevealWordmarkFillsFrame(text: HTMLElement, frame: HTMLElement, minRatio?: number): boolean;
+/**
+ * Advance width in em at a fixed px size. `scrollWidth` ignores the footer's
+ * reveal scale (`transform`); a bounding rect would not. Measured on a probe
+ * so the live word's font-size does not transition.
+ */
+export declare function readFooterRevealWordmarkEm(node: HTMLElement): number | null;
+/**
+ * Writes `--footer-wordmark-em` so `100cqi / em` fills the frame.
+ * Hinting is not linear, so a single scale can jump past the frame and clip
+ * the terminal letters. Search for the largest size that still fits.
+ * The search reads a hidden probe, not the live word: under reduced motion the
+ * global `transition-duration` would otherwise keep `scrollWidth` on the size
+ * from before each write.
+ */
+export declare function syncFooterRevealWordmark(node: HTMLElement, frame: HTMLElement): number | null;
+//# sourceMappingURL=footerRevealWordmark.d.ts.map

package/dist/components/organisms/FooterReveal/footerRevealWordmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footerRevealWordmark.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/FooterReveal/footerRevealWordmark.ts"],"names":[],"mappings":"AAIA,4EAA4E;AAC5E,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI7F;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,MAAM,GAAG,IAAI,CAKf;AAED,+EAA+E;AAC/E,wBAAgB,yBAAyB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAMzE;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAC9B,MAAM,GAAG,IAAI,CAoBf;AAED,gFAAgF;AAChF,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,EAClB,QAAQ,SAAM,GACb,OAAO,CAKT;AAoCD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAQ3E;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAwB7F"}

package/dist/components/organisms/FooterReveal/footerRevealWordmark.js

@@ -0,0 +1,51 @@
+"use client";
+function e(e, t) {
+	return !Number.isFinite(e) || !Number.isFinite(t) || e <= 0 || t <= 0 ? null : e / t;
+}
+function t(e) {
+	return !Number.isFinite(e) || e <= 0 ? "9" : (Math.round(e * 1e6) / 1e6).toString();
+}
+function n(e) {
+	let t = getComputedStyle(e), n = Number.parseFloat(t.paddingLeft) + Number.parseFloat(t.paddingRight), r = Number.isFinite(n) ? n : 0;
+	return e.clientWidth - r;
+}
+function r(e, n, r) {
+	if (!Number.isFinite(e) || e <= 0 || !Number.isFinite(n) || n <= 0) return null;
+	let i = (e) => Number(t(e)), a = n * .5, o = n * 1.5;
+	r(i(o)) > e && (o = n * 3);
+	let s = i(o);
+	for (let t = 0; t < 16; t += 1) {
+		let t = i((a + o) / 2);
+		r(t) <= e ? (s = t, o = t) : a = t;
+	}
+	return s;
+}
+function i(e) {
+	let t = e.cloneNode(!0);
+	return t.removeAttribute("data-footer-ruled"), t.removeAttribute("data-footer-reveal"), t.setAttribute("data-footer-wordmark-probe", ""), t.setAttribute("aria-hidden", "true"), t.style.setProperty("position", "fixed", "important"), t.style.setProperty("left", "0", "important"), t.style.setProperty("top", "0", "important"), t.style.setProperty("visibility", "hidden", "important"), t.style.setProperty("pointer-events", "none", "important"), t.style.setProperty("margin", "0", "important"), t.style.setProperty("width", "max-content", "important"), t.style.setProperty("max-width", "none", "important"), t.style.setProperty("white-space", "nowrap", "important"), t.style.setProperty("transition-property", "none", "important"), t.style.setProperty("transition-duration", "0s", "important"), t.style.setProperty("animation", "none", "important"), (e.ownerDocument.body ?? e.ownerDocument.documentElement).appendChild(t), t;
+}
+function a(e, n, r) {
+	let i = n / Number(t(r));
+	return e.style.setProperty("font-size", `${i}px`, "important"), e.scrollWidth;
+}
+function o(o, s) {
+	let c = i(o);
+	try {
+		c.style.setProperty("font-size", "100px", "important");
+		let i = e(c.scrollWidth, 100);
+		if (i == null) return null;
+		let o = n(s);
+		if (o <= 0) {
+			let e = t(i);
+			return s.style.setProperty("--footer-wordmark-em", e), Number(e);
+		}
+		let l = r(o, i, (e) => a(c, o, e));
+		if (l == null) return null;
+		let u = t(l);
+		return s.style.setProperty("--footer-wordmark-em", u), Number(u);
+	} finally {
+		c.remove();
+	}
+}
+//#endregion
+export { e as footerRevealWordmarkEm, t as footerRevealWordmarkEmCss, r as footerRevealWordmarkFitEm, n as footerRevealWordmarkFrameWidth, o as syncFooterRevealWordmark };

package/dist/components/organisms/HeroTileStack/HeroTileStack.d.ts

@@ -0,0 +1,62 @@
+export { heroTileRepel, heroTileRestingLayout, heroTileStackDefaultFalloff, heroTileStackDefaultMaxVertical, heroTileStackDefaultSpring, heroTileStackDefaultStrength, heroTileStackDefaultTileSize, heroTileStackDefaultVelocityFactor, heroTileStackReferenceSize, heroTileStackSizeScale, heroTileStackTapHoldMs, heroTileStackVelocityXShare, heroTileVelocityY, } from "./heroTileScatter";
+export type { HeroTileRepel, HeroTileRepelInput, HeroTileRestingLayout, HeroTileVelocityInput, } from "./heroTileScatter";
+/** Layout-only — width and margin. Do not restyle the tile surface here. */
+export type HeroTileStackLayoutClassName = string;
+export interface HeroTileStackTile {
+    src: string;
+    /** Spoken name for the image. The scatter itself is decorative. */
+    alt: string;
+    /** Resting horizontal nudge in px. Default 0. */
+    offsetX?: number;
+    /** Resting vertical nudge. A number is px; a string is any CSS length (`5%`). */
+    offsetY?: number | string;
+    /** Resting tilt in degrees. */
+    rotate?: number;
+    /** Paint order. Higher sits on top. Defaults to the fan (later tiles in front). */
+    zIndex?: number;
+}
+export interface HeroTileStackSpring {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export interface HeroTileStackProps {
+    /** Image tiles, left to right. Resting tilt and overlap default to a four-tile fan. */
+    tiles: HeroTileStackTile[];
+    /**
+     * How hard cards push left and right away from the pointer. The default is
+     * a gentle shift — tiles stay near the stack. Raise it for a wider scatter.
+     * `0` keeps the resting stack.
+     */
+    strength?: number;
+    /**
+     * Px of vertical nudge per px/s of vertical pointer velocity. Horizontal
+     * velocity contributes a smaller share. `0` disables the nudge.
+     */
+    velocityFactor?: number;
+    /** Clamp for the velocity nudge, in px. Scales with the painted tile. */
+    maxVertical?: number;
+    /**
+     * Max square edge in px. The painted size is `min(tileSize, a fraction of
+     * the stack)` via `--hero-tile-size`, and never wider than the stack.
+     * Default `400`. Below `md` the overlap tightens into a pile.
+     */
+    tileSize?: number;
+    /** Spring used for x, y, and rotate. Defaults to a soft, slightly underdamped spring. */
+    spring?: HeroTileStackSpring;
+    className?: HeroTileStackLayoutClassName;
+}
+/**
+ * Overlapping image tiles for a marketing hero. While a fine pointer is over
+ * the stack, every card springs left or right away from the pointer's x —
+ * closer cards travel farther, and the push adds a little tilt. A quick
+ * pointer move adds a small vertical nudge from pointer velocity; that nudge
+ * springs back to 0 when the pointer slows. Leaving the stack springs the
+ * fan back to rest. No scale, dim, or reorder.
+ *
+ * Reduced motion renders the resting fan and ignores the pointer.
+ * A coarse pointer or touch tap scatters once from the tap, holds, then springs back.
+ * The root clips inline overflow so the page does not gain a horizontal scrollbar.
+ */
+export declare function HeroTileStack({ tiles, strength, velocityFactor, maxVertical, tileSize, spring: springProp, className, }: HeroTileStackProps): import("react").JSX.Element;
+//# sourceMappingURL=HeroTileStack.d.ts.map

package/dist/components/organisms/HeroTileStack/HeroTileStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroTileStack.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/HeroTileStack/HeroTileStack.tsx"],"names":[],"mappings":"AAkDA,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,2BAA2B,EAC3B,+BAA+B,EAC/B,0BAA0B,EAC1B,4BAA4B,EAC5B,4BAA4B,EAC5B,kCAAkC,EAClC,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,2BAA2B,EAC3B,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,4EAA4E;AAC5E,MAAM,MAAM,4BAA4B,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,uFAAuF;IACvF,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yFAAyF;IACzF,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,4BAA4B,CAAC;CAC1C;AAsJD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAuC,EACvC,cAAmD,EACnD,WAA6C,EAC7C,QAAuC,EACvC,MAAM,EAAE,UAAU,EAClB,SAAS,GACV,EAAE,kBAAkB,+BAuQpB"}

package/dist/components/organisms/HeroTileStack/HeroTileStack.js

@@ -0,0 +1,257 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { heroTileRepel as t, heroTileRestingLayout as n, heroTileStackDefaultFalloff as r, heroTileStackDefaultMaxVertical as i, heroTileStackDefaultSpring as a, heroTileStackDefaultStrength as o, heroTileStackDefaultTileSize as s, heroTileStackDefaultVelocityFactor as c, heroTileStackIsOneShot as l, heroTileStackReferenceSize as u, heroTileStackSizeScale as d, heroTileStackTapHoldMs as f, heroTileStackVelocityXShare as p, heroTileVelocityY as m } from "./heroTileScatter.js";
+import { heroTileStackImageClasses as h, heroTileStackRootClasses as g, heroTileStackRowClasses as _, heroTileStackSlotClasses as v, heroTileStackSurfaceClasses as y, heroTileStackTileOverlap as b, heroTileStackTileSize as x } from "./heroTileStackStyles.js";
+import { createContext as S, useCallback as C, useContext as w, useEffect as T, useLayoutEffect as E, useRef as D } from "react";
+import { jsx as O } from "react/jsx-runtime";
+import { MotionConfigContext as ee, motion as k, useMotionValue as A, useMotionValueEvent as j, useReducedMotion as te, useSpring as M, useTransform as ne, useVelocity as N } from "motion/react";
+//#region src/components/organisms/HeroTileStack/HeroTileStack.tsx
+var P = S(null);
+function F() {
+	let e = w(P);
+	if (!e) throw Error("HeroTileStack tiles must be rendered inside HeroTileStack.");
+	return e;
+}
+function I() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(pointer: coarse)").matches;
+}
+function L(e, t) {
+	return {
+		width: x,
+		zIndex: e.zIndex,
+		transform: `translate(${e.offsetX}px, ${e.offsetY})`,
+		marginInlineEnd: t ? b : void 0
+	};
+}
+function re({ tile: e, index: t, count: n, layout: r }) {
+	return /* @__PURE__ */ O("div", {
+		className: v,
+		style: L(r, t < n - 1),
+		"data-hero-tile-slot": "",
+		"data-hero-tile-index": t,
+		children: /* @__PURE__ */ O("div", {
+			className: y,
+			style: { transform: `rotate(${r.rotate}deg)` },
+			"data-hero-tile": "",
+			"data-hero-tile-index": t,
+			"data-scatter-x": "0",
+			"data-scatter-y": "0",
+			"data-scatter-rotate": r.rotate,
+			children: /* @__PURE__ */ O("img", {
+				className: h,
+				src: e.src,
+				alt: e.alt,
+				draggable: !1
+			})
+		})
+	});
+}
+function R({ tile: e, index: t, count: n, layout: r }) {
+	let { spring: i, register: a, unregister: o } = F(), s = D(null), c = D(null), l = A(0), u = A(0), d = A(0), f = A(0), p = A(r.rotate), m = M(d, {
+		...i,
+		skipInitialAnimation: !0
+	}), g = M(f, {
+		...i,
+		skipInitialAnimation: !0
+	}), _ = M(p, {
+		...i,
+		skipInitialAnimation: !0
+	}), b = D(r.rotate);
+	return b.current = r.rotate, j(m, "change", (e) => {
+		c.current?.setAttribute("data-scatter-x", e.toFixed(2));
+	}), j(g, "change", (e) => {
+		c.current?.setAttribute("data-scatter-y", e.toFixed(2));
+	}), j(_, "change", (e) => {
+		c.current?.setAttribute("data-scatter-rotate", e.toFixed(2));
+	}), E(() => {
+		let e = s.current;
+		if (e) return a(t, {
+			slot: e,
+			centerX: l,
+			centerY: u,
+			targetX: d,
+			targetY: f,
+			targetRotate: p,
+			getRotate: () => b.current
+		}), () => o(t);
+	}, [
+		l,
+		u,
+		t,
+		a,
+		p,
+		d,
+		f,
+		o
+	]), /* @__PURE__ */ O("div", {
+		ref: s,
+		className: v,
+		style: L(r, t < n - 1),
+		"data-hero-tile-slot": "",
+		"data-hero-tile-index": t,
+		children: /* @__PURE__ */ O(k.div, {
+			ref: c,
+			className: y,
+			style: {
+				x: m,
+				y: g,
+				rotate: _
+			},
+			"data-hero-tile": "",
+			"data-hero-tile-index": t,
+			"data-scatter-x": "0",
+			"data-scatter-y": "0",
+			"data-scatter-rotate": r.rotate,
+			children: /* @__PURE__ */ O("img", {
+				className: h,
+				src: e.src,
+				alt: e.alt,
+				draggable: !1
+			})
+		})
+	});
+}
+function z({ tiles: r, strength: i = 120, velocityFactor: o = c, maxVertical: s = 24, tileSize: u = 400, spring: f, className: p }) {
+	let h = D(null), v = D([]), y = D(null), b = D(!1), x = D(!1), S = D(0), k = D(void 0), M = D(i), F = D(o), L = D(s), z = D(1), B = D(!1);
+	M.current = i, F.current = o, L.current = s;
+	let V = A(0), H = A(0), ie = N(V), ae = N(H), U = ne([ie, ae], ([e, t]) => {
+		let n = z.current;
+		return m({
+			velocityX: e,
+			velocityY: t,
+			velocityFactor: F.current * n,
+			maxVertical: L.current * n
+		});
+	}), { reducedMotion: oe } = w(ee), W = te() === !0 || oe === "always";
+	B.current = W;
+	let se = {
+		stiffness: f?.stiffness ?? a.stiffness,
+		damping: f?.damping ?? a.damping,
+		mass: f?.mass ?? a.mass
+	}, ce = (e, t) => {
+		v.current[e] = t;
+	}, le = (e) => {
+		v.current[e] = void 0;
+	}, G = () => {
+		let e = h.current;
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = 0;
+		for (let e of v.current) {
+			if (!e) continue;
+			let r = e.slot.getBoundingClientRect();
+			n === 0 && (n = r.width), e.centerX.set(r.left + r.width / 2 - t.left), e.centerY.set(r.top + r.height / 2 - t.top);
+		}
+		z.current = d(n);
+	}, K = (e, n, r, i) => {
+		B.current && (r = !1), G();
+		let a = r ? i ?? U.get() : 0;
+		for (let i of v.current) {
+			if (!i) continue;
+			let o = i.getRotate();
+			if (!r) {
+				i.targetX.set(0), i.targetY.set(0), i.targetRotate.set(o);
+				continue;
+			}
+			let s = z.current, c = t({
+				pointerX: e,
+				pointerY: n,
+				centerX: i.centerX.get(),
+				centerY: i.centerY.get(),
+				strength: M.current * s,
+				falloff: 150 * s
+			});
+			i.targetX.set(c.x), i.targetY.set(c.y + a), i.targetRotate.set(o + c.rotate);
+		}
+	}, q = D(K);
+	q.current = K;
+	let J = D(G);
+	J.current = G;
+	let ue = C(() => {
+		if (!x.current || B.current || !y.current) return;
+		let e = U.get();
+		for (let t of v.current) t && t.targetY.set(e);
+	}, [U]);
+	j(U, "change", ue), E(() => {
+		J.current();
+		let e = h.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => J.current());
+		return t.observe(e), () => t.disconnect();
+	}, [r, W]), T(() => {
+		let e = y.current;
+		!e || B.current || q.current(e.x, e.y, !0);
+	}, [
+		i,
+		o,
+		s
+	]), T(() => {
+		W && (y.current = null, b.current = !1, x.current = !1, S.current = 0, k.current !== void 0 && (window.clearTimeout(k.current), k.current = void 0), q.current(0, 0, !1));
+	}, [W]), T(() => () => {
+		k.current !== void 0 && window.clearTimeout(k.current);
+	}, []);
+	let Y = (e) => {
+		let t = h.current;
+		if (!t) return null;
+		let n = t.getBoundingClientRect();
+		return {
+			x: e.clientX - n.left,
+			y: e.clientY - n.top
+		};
+	}, X = (e) => {
+		if (B.current || l(e.pointerType, I())) return;
+		let t = Y(e);
+		if (!t) return;
+		let n = !b.current;
+		b.current = !0, x.current = !0, n ? (V.jump(t.x), H.jump(t.y)) : (V.set(t.x), H.set(t.y)), y.current = t, q.current(t.x, t.y, !0);
+	}, de = (e) => {
+		if (B.current || !l(e.pointerType, I())) return;
+		let t = Y(e);
+		t && (y.current = null, x.current = !1, q.current(t.x, t.y, !0, 0), S.current = performance.now() + 520, k.current !== void 0 && window.clearTimeout(k.current), k.current = window.setTimeout(() => {
+			S.current = 0, k.current = void 0, q.current(0, 0, !1);
+		}, 520));
+	}, Z = () => {
+		performance.now() < S.current || (y.current = null, b.current = !1, x.current = !1, V.jump(V.get()), H.jump(H.get()), q.current(0, 0, !1));
+	}, fe = {
+		reduceMotion: W,
+		spring: se,
+		register: ce,
+		unregister: le
+	}, Q = null, $ = r.length;
+	Q = W ? r.map((e, t) => /* @__PURE__ */ O(re, {
+		tile: e,
+		index: t,
+		count: $,
+		layout: n(t, e)
+	}, `${e.src}-${t}`)) : r.map((e, t) => /* @__PURE__ */ O(R, {
+		tile: e,
+		index: t,
+		count: $,
+		layout: n(t, e)
+	}, `${e.src}-${t}`));
+	let pe = Number.isFinite(u) && u > 0 ? u : 400;
+	return /* @__PURE__ */ O(P.Provider, {
+		value: fe,
+		children: /* @__PURE__ */ O("div", {
+			className: e(g, p),
+			style: {
+				containerType: "inline-size",
+				"--hero-tile-max": `${pe}px`
+			},
+			"data-hero-tile-stack": "",
+			children: /* @__PURE__ */ O("div", {
+				ref: h,
+				className: _,
+				"data-hero-tile-row": "",
+				onPointerEnter: X,
+				onPointerMove: X,
+				onPointerDown: de,
+				onPointerLeave: Z,
+				onPointerCancel: Z,
+				children: Q
+			})
+		})
+	});
+}
+//#endregion
+export { z as HeroTileStack, t as heroTileRepel, n as heroTileRestingLayout, r as heroTileStackDefaultFalloff, i as heroTileStackDefaultMaxVertical, a as heroTileStackDefaultSpring, o as heroTileStackDefaultStrength, s as heroTileStackDefaultTileSize, c as heroTileStackDefaultVelocityFactor, u as heroTileStackReferenceSize, d as heroTileStackSizeScale, f as heroTileStackTapHoldMs, p as heroTileStackVelocityXShare, m as heroTileVelocityY };