@godxjp/ui 28.7.0 → 28.9.0

package/dist/components/data-display/index.d.ts

@@ -10,6 +10,8 @@ export { Thumbnail } from "./thumbnail.js";
 export type { ThumbnailProp, ThumbnailProps, ThumbnailSizeProp } from "./thumbnail.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
+export { Marquee } from "./marquee.js";
+export type { MarqueeDirectionProp, MarqueeProp, MarqueeProps, MarqueeSpeedProp } from "./marquee.js";
 export { CredentialReveal } from "./credential-reveal.js";
 export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
 export { QrCode } from "./qr-code.js";

package/dist/components/data-display/index.js

@@ -4,6 +4,7 @@ import { Swatch } from "./swatch.js";
 import { FeatureList } from "./feature-list.js";
 import { Thumbnail } from "./thumbnail.js";
 import { ListRow } from "./list-row.js";
+import { Marquee } from "./marquee.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
@@ -101,6 +102,7 @@ export {
   HoverCardTrigger,
   Legend,
   ListRow,
+  Marquee,
   PermissionMatrix,
   Popover,
   PopoverAnchor,

package/dist/components/data-display/marquee.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { GapProp } from "../../props/vocabulary/index.js";
+export type { MarqueeDirectionProp, MarqueeSpeedProp, MarqueeProp, MarqueeProp as MarqueeProps, } from "../../props/components/data-display.prop.js";
+export declare const Marquee: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onPause" | "onPlay"> & {
+    children?: import("../../props/index.js").ChildrenProp;
+    play?: boolean;
+    defaultPlay?: boolean;
+    onPlayChange?: (play: boolean) => void;
+    direction?: import("./marquee.js").MarqueeDirectionProp;
+    speed?: import("./marquee.js").MarqueeSpeedProp;
+    gap?: GapProp;
+    pauseOnHover?: boolean;
+    fade?: boolean;
+    label?: import("../../props/index.js").LabelProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/marquee.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Pause, Play } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+import { ScrollArea } from "./scroll-area.js";
+function gapToken(step) {
+  if (step === "none" || step === 0) return "0px";
+  if (typeof step === "number") return `var(--space-${step})`;
+  return `var(--space-inline-${step})`;
+}
+const MAX_COPIES = 20;
+const Marquee = React.forwardRef(function Marquee2({
+  children,
+  play,
+  defaultPlay = true,
+  onPlayChange,
+  direction = "start",
+  speed = "base",
+  gap,
+  pauseOnHover = false,
+  fade = false,
+  label,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const trackId = React.useId();
+  const viewportRef = React.useRef(null);
+  const copyRef = React.useRef(null);
+  const [uncontrolledPlay, setUncontrolledPlay] = React.useState(defaultPlay);
+  const playing = play ?? uncontrolledPlay;
+  const [measurement, setMeasurement] = React.useState({ copies: 2, cycleScale: 1 });
+  React.useEffect(() => {
+    if (reducedMotion) return void 0;
+    const viewport = viewportRef.current;
+    const copy = copyRef.current;
+    if (!viewport || !copy || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => {
+      const copyWidth = copy.offsetWidth;
+      const viewportWidth = viewport.offsetWidth;
+      if (copyWidth <= 0 || viewportWidth <= 0) return;
+      const copies = Math.min(MAX_COPIES, Math.ceil(viewportWidth / copyWidth) + 1);
+      const cycleScale = Math.round(copyWidth / viewportWidth * 1e3) / 1e3;
+      setMeasurement(
+        (current) => current.copies === copies && current.cycleScale === cycleScale ? current : { copies, cycleScale }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(viewport);
+    observer.observe(copy);
+    return () => {
+      observer.disconnect();
+    };
+  }, [reducedMotion, children]);
+  const setPlaying = (next) => {
+    if (play === void 0) setUncontrolledPlay(next);
+    onPlayChange?.(next);
+  };
+  const rootStyle = {
+    ...style,
+    ...gap === void 0 ? null : { "--marquee-gap-inline": gapToken(gap) }
+  };
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "marquee",
+        "data-reduced-motion": "true",
+        "data-direction": direction,
+        className: cn("ui-marquee", className),
+        style: rootStyle,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            orientation: "horizontal",
+            className: "ui-marquee-scroller",
+            label: typeof label === "string" ? label : void 0,
+            children: /* @__PURE__ */ jsx("div", { id: trackId, "data-slot": "marquee-track", className: "ui-marquee-track", children: /* @__PURE__ */ jsx("div", { ref: copyRef, "data-slot": "marquee-copy", className: "ui-marquee-copy", children }) })
+          }
+        )
+      }
+    );
+  }
+  const animatedStyle = {
+    ...rootStyle,
+    "--marquee-copies": measurement.copies,
+    "--marquee-cycle-scale": measurement.cycleScale
+  };
+  const named = typeof label === "string" && label.trim() !== "";
+  const controlLabel = playing ? named ? t("dataDisplay.marquee.pauseNamed", { label }) : t("dataDisplay.marquee.pause") : named ? t("dataDisplay.marquee.playNamed", { label }) : t("dataDisplay.marquee.play");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "marquee",
+      "data-direction": direction,
+      "data-speed": speed,
+      "data-playing": playing ? "true" : "false",
+      "data-pause-on-hover": pauseOnHover ? "true" : "false",
+      "data-fade": fade ? "true" : "false",
+      className: cn("ui-marquee", className),
+      style: animatedStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: viewportRef, "data-slot": "marquee-viewport", className: "ui-marquee-viewport", children: /* @__PURE__ */ jsxs("div", { id: trackId, "data-slot": "marquee-track", className: "ui-marquee-track", children: [
+          /* @__PURE__ */ jsx("div", { ref: copyRef, "data-slot": "marquee-copy", className: "ui-marquee-copy", children }),
+          Array.from({ length: measurement.copies - 1 }, (_, index) => (
+            // Decorative by construction: `aria-hidden` keeps the duplicate out of the
+            // accessibility tree and `inert` keeps it out of the tab order. The prior art has
+            // neither, which is why its content is announced once per screenful of width.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "marquee-clone",
+                className: "ui-marquee-copy",
+                "aria-hidden": "true",
+                inert: true,
+                children
+              },
+              index
+            )
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "data-slot": "marquee-control",
+            className: "ui-marquee-control",
+            "aria-label": controlLabel,
+            "aria-controls": trackId,
+            onClick: () => {
+              setPlaying(!playing);
+            },
+            children: playing ? /* @__PURE__ */ jsx(Pause, { className: "ui-marquee-control-glyph", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "ui-marquee-control-glyph", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Marquee
+};

package/dist/components/general/reveal.d.ts

@@ -1,8 +1,29 @@
-import type { RevealProp } from "../../props/components/general.prop.js";
+import * as React from "react";
 export type { RevealProp, RevealProp as RevealProps } from "../../props/components/general.prop.js";
 /**
  * Reveal — the official entrance-motion primitive (staggered fade-up). `delay` is a stagger
  * ordinal (`0..6`) — an index into the `--reveal-stagger-step` ladder, never a raw ms — so a
  * column of rows cascades in.
+ *
+ * `on="view"` moves the TRIGGER to the viewport (gh#829). It is one prop rather than a second
+ * component because everything else is identical: the same keyframes, the same tokens, the same
+ * reduced-motion contract.
+ *
+ * ## The observer gates the ANIMATION, never the VISIBILITY
+ *
+ * `.ui-reveal`'s resting state in `styles/motion.css` is the finished, fully visible one. The
+ * hidden state is written here, as `data-reveal-state="out"`, and ONLY once this component is
+ * mounted in a browser that has an `IntersectionObserver` and has measured the element as still
+ * outside the viewport. Everything else — the server render, jsdom, a browser without the API,
+ * and `prefers-reduced-motion: reduce`, under which no observer is attached at all — renders the
+ * content exactly as it will finally look.
  */
-export declare function Reveal({ children, delay, asChild, className, ...props }: RevealProp): import("react").JSX.Element;
+export declare const Reveal: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    children?: import("../../props/index.js").ChildrenProp;
+    delay?: import("../../props/index.js").RevealDelayProp;
+    on?: import("../../props/index.js").RevealTriggerProp;
+    once?: boolean;
+    amount?: import("../../props/index.js").InViewAmountProp;
+    asChild?: import("../../props/index.js").AsChildProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/general/reveal.js

@@ -1,21 +1,51 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement } from "react";
+import { mergeRefs } from "@react-aria/utils";
+import * as React from "react";
+import { useInView, useMediaQuery } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
-function Reveal({ children, delay = 0, asChild = false, className, ...props }) {
+const Reveal = React.forwardRef(function Reveal2({
+  children,
+  delay = 0,
+  on = "mount",
+  once = true,
+  amount = "some",
+  asChild = false,
+  className,
+  ...props
+}, ref) {
+  const localRef = React.useRef(null);
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const observing = on === "view" && !reduceMotion;
+  const inView = useInView(localRef, { enabled: observing, once, amount });
   const shared = {
     "data-slot": "reveal",
-    "data-reveal-delay": delay > 0 ? String(delay) : void 0
+    "data-reveal-delay": delay > 0 ? String(delay) : void 0,
+    "data-reveal-on": on === "view" ? "view" : void 0,
+    "data-reveal-state": observing ? inView ? "in" : "out" : void 0
   };
-  if (asChild && isValidElement(children)) {
+  if (asChild && React.isValidElement(children)) {
     const child = children;
-    return cloneElement(child, {
+    return React.cloneElement(child, {
       ...shared,
       ...props,
+      // React 19 passes `ref` through `cloneElement` like any other prop, which is what `asChild`
+      // promises — the observer measures the child's own box, not a wrapper's.
+      ref: mergeRefs(ref, localRef, child.props.ref),
       className: cn("ui-reveal", child.props.className, className)
     });
   }
-  return /* @__PURE__ */ jsx("div", { ...shared, ...props, className: cn("ui-reveal", className), children });
-}
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...shared,
+      ...props,
+      ref: mergeRefs(ref, localRef),
+      className: cn("ui-reveal", className),
+      children
+    }
+  );
+});
 export {
   Reveal
 };

package/dist/components/general/typography.d.ts

@@ -59,13 +59,16 @@ export declare const Link: React.ForwardRefExoticComponent<Omit<TextProp, "as" |
 } & React.RefAttributes<HTMLElement>>;
 /**
  * Heading — h1..h4 sized from the `--heading-h*` tokens. `level` sets both the size token and the
- * semantic element; override the rendered element with `as` (e.g. a visual h2 that is a real <h1>).
+ * semantic element; override the rendered element with `as` (e.g. a visual h2 that is a real <h1>),
+ * and override the SIZE alone with `size` — the same ten-step ladder `Text` reads, whose top three
+ * steps are the display ramp a marketing hero needs (gh#826).
  *
  * UNCHANGED by the antd port. antd's heading is `Title`, which is the sibling below; `Heading` is
  * this library's own and keeps its four levels, its props and its markup exactly as they shipped.
  */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     level?: import("../../props/index.js").HeadingLevelProp;
+    size?: import("../../props/index.js").TextSizeProp;
     as?: "h1" | "h2" | "h3" | "h4" | "div";
     tone?: import("../../props/index.js").TextToneProp;
     align?: import("../../props/index.js").TextAlignProp;

package/dist/components/general/typography.js

@@ -527,10 +527,23 @@ const Link = React.forwardRef(
 );
 Link.displayName = "Link";
 const Heading = React.forwardRef(
-  ({ level = 2, as, tone = "default", align, truncate, weight = "medium", className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
+  ({
+    level = 2,
+    size,
+    as,
+    tone = "default",
+    align,
+    truncate,
+    weight = "medium",
+    className,
+    ...props
+  }, ref) => React.createElement(as ?? `h${level}`, {
     ref,
     "data-slot": "heading",
     "data-level": level,
+    // Emitted only when asked for. The absent attribute is what `[data-level]:not([data-size])`
+    // keys on, so a Heading with no `size` paints from its level exactly as it always has.
+    "data-size": size,
     "data-tone": tone,
     "data-align": align,
     "data-weight": weight,

package/dist/components/layout/affix.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+import type { AffixProp } from "../../props/components/layout.prop.js";
+export type { AffixProp, AffixProp as AffixProps, AffixTargetProp, } from "../../props/components/layout.prop.js";
+/**
+ * Affix — Ant Design `Affix` (6.6.5): pin an element to its scrollport once the page scrolls past
+ * it, and REPORT that it is pinned.
+ *
+ * ## Why this is not `position: sticky`
+ *
+ * `position: sticky` pins, and then says nothing. There is no state, no attribute and no callback,
+ * so a sticky header cannot shrink on pin, cannot swap a wordmark for a monogram, cannot raise its
+ * shadow, and cannot tell the page that the filters are now floating over the table. Both website
+ * showcases in `docs/showcase/` wrote `position: sticky` and got exactly nothing out of it. This
+ * component's product is the boolean: `data-affixed` for CSS, `onChange` for JavaScript.
+ *
+ * It also pins against a scroll box that need not be the nearest scrolling ancestor — antd's
+ * `target`, which `FloatButton.BackTop` already spells the same way here — where `sticky` is
+ * captive to whichever ancestor happens to scroll.
+ *
+ * ## The placeholder is as much the component as the pin is
+ *
+ * Taking an element out of flow removes its height from the page, so everything below jumps UP by
+ * exactly that height at the instant of pinning and drops back on release. Every hand-rolled
+ * sticky header has this bug and it is invisible until someone measures it. So the outer box stays
+ * in flow and, the moment its content goes `position: fixed`, is given the content's MEASURED
+ * block size. Measured, not declared: a bar re-wraps between widths, and a number written once in
+ * CSS is wrong at every other width.
+ *
+ * ## One `IntersectionObserver`, and it is not this file's
+ *
+ * The pin is a threshold crossing — the one question `IntersectionObserver` exists to answer — and
+ * this component asks it through `useInView` (`src/lib/hooks.ts`), the library's single observer
+ * wrapper, which gained `rootMargin` and `assumeInView` for exactly these two needs. Nothing here
+ * polls, and nothing here listens to `scroll` at all when the scroll box is the viewport: antd's
+ * `Affix` re-measures on seven event types on every animation frame of every scroll, and all of
+ * that is replaced by one observer entry per transition.
+ *
+ * The observed element is a zero-ish **sentinel** at the pinning edge, not the box itself. This is
+ * the published `position: sticky` sentinel technique ("An event for position: sticky",
+ * developers.google.com), and the separate node is arithmetic, not decoration: the box's own
+ * intersection flips when its TRAILING edge crosses the line, a full bar-height after the moment
+ * it should pin. A hairline node at the LEADING edge flips on the leading edge. It is
+ * `aria-hidden`, out of flow, and contributes nothing to the measured height.
+ *
+ * Both directions reduce to the same expression — `affixed = !inView` — because the sentinel sits
+ * at the block-start edge with the clipping box grown downwards, and at the block-end edge with it
+ * grown upwards.
+ *
+ * ## The offset is a TOKEN that the prop overrides, and it is never a number in JavaScript
+ *
+ * `--affix-inset-block-start` / `--affix-inset-block-end` place the pin line, and they place it
+ * ONCE: the sentinel is offset by `calc(-1 * …)`, which moves the crossing, and the pinned bar is
+ * inset by the same `var()`, which moves the paint. One declaration drives both, so they cannot
+ * drift. A service sets the resting offset once (a product whose app header is 64px tall writes
+ * `--affix-inset-block-start: 64px` in its theme and every affixed bar clears it); `offsetBlockStart`
+ * / `offsetBlockEnd` override it per instance by writing the same custom property inline. That is
+ * cardinal rules #44/#45 in their literal form.
+ *
+ * It also means the offset is never parsed back out of `getComputedStyle` — a custom property
+ * hands back its AUTHORED text, so a theme written in `rem` would have come back as `"4rem"` and
+ * `parseFloat` would have read it as 4px. CSS resolves the unit; JavaScript never sees it.
+ *
+ * ## What a pinned bar owes the keyboard (C6)
+ *
+ * A bar pinned over the block-start edge covers whatever the browser scrolls to — the next focused
+ * field, the `#section` a skip link jumps to — and the browser has no idea it is there. While
+ * pinned there, this sets `scroll-padding-block-start` on the scroll box to the bar's measured
+ * bottom edge, and puts back whatever was there on release. That is WCAG 2.4.11 (Focus Not
+ * Obscured) bought with one declaration, and it is why C6 passes rather than being asserted.
+ *
+ * ## Motion
+ *
+ * `Affix` animates nothing, so it has no transition to suppress and satisfies
+ * `prefers-reduced-motion: reduce` by construction — the pin is instantaneous in every mode. The
+ * SHRINK is a composition: read `[data-affixed]` off `data-slot="affix-content"` and transition
+ * whatever the brand condenses, on `--duration-fast` / `--ease-standard`, snapping under reduced
+ * motion. It must condense; it must never fade or disappear.
+ *
+ * ## One inherited limitation, stated rather than hidden
+ *
+ * A `transform`, `filter` or `backdrop-filter` on an ancestor makes that ancestor the containing
+ * block for `position: fixed`, so a pinned bar inside one is positioned against it instead of the
+ * viewport. `position: sticky` and antd's `Affix` are both subject to it; there is no workaround
+ * inside a component, only a call site that does not do that.
+ */
+export declare const Affix: React.ForwardRefExoticComponent<AffixProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/affix.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { isDevelopment } from "../../lib/dev.js";
+import { useInView } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+const OVERSHOOT_MARGIN = "1000000px";
+const ROOT_MARGIN_BLOCK_START = `0px 0px ${OVERSHOOT_MARGIN} 0px`;
+const ROOT_MARGIN_BLOCK_END = `${OVERSHOOT_MARGIN} 0px 0px 0px`;
+function resolveTarget(target) {
+  if (!target) return null;
+  const node = target();
+  if (!node || typeof window === "undefined" || node === window) return null;
+  return node;
+}
+const Affix = React.forwardRef(function Affix2({
+  children,
+  offsetBlockStart,
+  offsetBlockEnd,
+  offsetTop,
+  offsetBottom,
+  target,
+  onChange,
+  id,
+  className,
+  ...rest
+}, ref) {
+  const rootRef = React.useRef(null);
+  const sentinelRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  if (isDevelopment()) {
+    if (offsetTop !== void 0) {
+      console.warn(
+        "[@godxjp/ui] Affix: `offsetTop` is Ant Design's name for this axis; here it is `offsetBlockStart` \u2014 the logical axis, per check:rtl and docs/DESIGN-AUTHORITY.md. The value was IGNORED."
+      );
+    }
+    if (offsetBottom !== void 0) {
+      console.warn(
+        "[@godxjp/ui] Affix: `offsetBottom` is Ant Design's name for this axis; here it is `offsetBlockEnd` \u2014 the logical axis, per check:rtl and docs/DESIGN-AUTHORITY.md. The value was IGNORED."
+      );
+    }
+  }
+  const pinToEnd = offsetBlockStart === void 0 && offsetBlockEnd !== void 0;
+  const [targetElement, setTargetElement] = React.useState(null);
+  React.useEffect(() => {
+    setTargetElement(resolveTarget(target));
+  }, [target]);
+  const inView = useInView(sentinelRef, {
+    root: targetElement,
+    rootMargin: pinToEnd ? ROOT_MARGIN_BLOCK_END : ROOT_MARGIN_BLOCK_START,
+    assumeInView: true
+  });
+  const affixed = !inView;
+  const [box, setBox] = React.useState(null);
+  const [targetInset, setTargetInset] = React.useState(0);
+  const measure = React.useCallback(() => {
+    const root = rootRef.current;
+    const content = contentRef.current;
+    if (!root || !content) return;
+    const rootRect = root.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    setBox(
+      (previous) => previous && previous.inline === rootRect.width && previous.block === contentRect.height ? previous : { inline: rootRect.width, block: contentRect.height }
+    );
+    const rect = targetElement?.getBoundingClientRect();
+    const next = rect ? pinToEnd ? window.innerHeight - rect.bottom : rect.top : 0;
+    setTargetInset((previous) => previous === next ? previous : next);
+  }, [pinToEnd, targetElement]);
+  React.useLayoutEffect(() => {
+    measure();
+  }, [measure, affixed, children]);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    const content = contentRef.current;
+    if (!root || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+    observer.observe(root);
+    if (content) observer.observe(content);
+    if (targetElement) observer.observe(targetElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [measure, targetElement]);
+  React.useEffect(() => {
+    if (!affixed || !targetElement || typeof window === "undefined") return void 0;
+    let frame = null;
+    const onScroll = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        measure();
+      });
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+      if (frame !== null) window.cancelAnimationFrame(frame);
+    };
+  }, [affixed, targetElement, measure]);
+  React.useEffect(() => {
+    const content = contentRef.current;
+    if (pinToEnd || !affixed || !content || typeof document === "undefined") return void 0;
+    const scrollBox = targetElement ?? document.documentElement;
+    const boxTop = targetElement ? targetElement.getBoundingClientRect().top : 0;
+    const padding = content.getBoundingClientRect().bottom - boxTop;
+    if (padding <= 0) return void 0;
+    const previous = scrollBox.style.scrollPaddingBlockStart;
+    scrollBox.style.scrollPaddingBlockStart = `${padding}px`;
+    return () => {
+      scrollBox.style.scrollPaddingBlockStart = previous;
+    };
+  }, [affixed, pinToEnd, targetInset, box?.block, targetElement]);
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const mountedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    onChangeRef.current?.(affixed);
+  }, [affixed]);
+  const style = {
+    ...offsetBlockStart === void 0 ? void 0 : { "--affix-inset-block-start": `${offsetBlockStart}px` },
+    ...offsetBlockEnd === void 0 ? void 0 : { "--affix-inset-block-end": `${offsetBlockEnd}px` },
+    ...targetInset === 0 ? void 0 : { "--affix-target-inset": `${targetInset}px` },
+    ...affixed && box ? { "--affix-content-inline-size": `${box.inline}px` } : void 0
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      id,
+      "data-slot": "affix",
+      "data-affixed": affixed ? "" : void 0,
+      className: cn("ui-affix", className),
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: sentinelRef,
+            "data-slot": "affix-sentinel",
+            "data-edge": pinToEnd ? "block-end" : "block-start",
+            "aria-hidden": "true",
+            className: "ui-affix-sentinel"
+          }
+        ),
+        affixed && box ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "affix-placeholder",
+            "aria-hidden": "true",
+            className: "ui-affix-placeholder",
+            style: { blockSize: box.block }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            "data-slot": "affix-content",
+            "data-edge": pinToEnd ? "block-end" : "block-start",
+            "data-affixed": affixed ? "" : void 0,
+            className: "ui-affix-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+Affix.displayName = "Affix";
+export {
+  Affix
+};

package/dist/components/layout/index.d.ts

@@ -59,3 +59,7 @@ export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShe
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
 export { useAppShellNavigationMode } from "./app-shell.js";
+export { Masonry } from "./masonry.js";
+export type { MasonryColumnsProp, MasonryGapProp, MasonryItemProp, MasonryLayoutEntryProp, MasonryProp, MasonryProps, } from "./masonry.js";
+export { Affix } from "./affix.js";
+export type { AffixProp, AffixProps, AffixTargetProp } from "./affix.js";

package/dist/components/layout/index.js

@@ -28,8 +28,11 @@ import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
 import { useAppShellNavigationMode } from "./app-shell.js";
+import { Masonry } from "./masonry.js";
+import { Affix } from "./affix.js";
 export {
   AccountChip,
+  Affix,
   AppLauncher,
   AppShell,
   AspectRatio,
@@ -45,6 +48,7 @@ export {
   ErrorSurface,
   Flex,
   LegalDocumentShell,
+  Masonry,
   MasterDetail,
   MobileShell,
   NavList,

package/dist/components/layout/legal-document-shell.js

@@ -6,6 +6,7 @@ import { useControlledLatch } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { Heading } from "../general/typography.js";
 const SPY_ROOT_MARGIN = "-10% 0px -75% 0px";
+const SECTION_ID_SEPARATOR = "\0";
 const ISO_CALENDAR_DATE = /^\d{4}-\d{2}-\d{2}$/;
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -75,18 +76,18 @@ const LegalDocumentShell = React.forwardRef(
       activeRef.current = active;
       emitRef.current = emit;
     });
-    const sectionIdsKey = sections.map((section) => section.id).join("\0");
+    const sectionIdsKey = sections.map((section) => section.id).join(SECTION_ID_SEPARATOR);
     const hashHandledRef = React.useRef(false);
     React.useEffect(() => {
       if (hashHandledRef.current || typeof window === "undefined") return;
       hashHandledRef.current = true;
       const hash = decodeURIComponent(window.location.hash.replace(/^#/, ""));
-      if (hash && sectionIdsKey.split("\0").includes(hash)) emitRef.current(hash);
+      if (hash && sectionIdsKey.split(SECTION_ID_SEPARATOR).includes(hash)) emitRef.current(hash);
     }, [sectionIdsKey]);
     React.useEffect(() => {
       const root = rootRef.current;
       if (!root || typeof IntersectionObserver === "undefined") return;
-      const ids = sectionIdsKey ? sectionIdsKey.split("\0") : [];
+      const ids = sectionIdsKey ? sectionIdsKey.split(SECTION_ID_SEPARATOR) : [];
       const intersecting = /* @__PURE__ */ new Map();
       const observer = new IntersectionObserver(
         (entries) => {