@godxjp/ui 28.6.0 → 28.8.0

package/dist/components/layout/masonry.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { isDevelopment } from "../../lib/dev.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+const BREAKPOINT_QUERY = {
+  sm: "(min-width: 40rem)",
+  md: "(min-width: 48rem)",
+  lg: "(min-width: 64rem)",
+  xl: "(min-width: 80rem)"
+};
+const BREAKPOINT_ORDER = ["xl", "lg", "md", "sm"];
+const COLUMN_STEPS = /* @__PURE__ */ new Set(["base", ...BREAKPOINT_ORDER]);
+const DEFAULT_COLUMNS = 3;
+function gapToken(step, axis) {
+  if (step === "none" || step === 0) return "0px";
+  if (typeof step === "number") return `var(--space-${step})`;
+  return axis === "inline" ? `var(--space-inline-${step})` : `var(--space-stack-${step})`;
+}
+const EMPTY_METRICS = { rowGap: 0, items: [] };
+function sameMetrics(a, b) {
+  if (a.rowGap !== b.rowGap || a.items.length !== b.items.length) return false;
+  return a.items.every((metric, index) => {
+    const other = b.items[index];
+    return metric[0] === other[0] && metric[1] === other[1] && metric[2] === other[2];
+  });
+}
+function packColumns(metrics, columnCount, rowGap) {
+  const columnHeights = new Array(columnCount).fill(0);
+  const positions = /* @__PURE__ */ new Map();
+  for (const [key, height, pinned] of metrics) {
+    const shortest = columnHeights.indexOf(Math.min(...columnHeights));
+    const target = pinned === void 0 ? shortest : Math.min(Math.max(Math.trunc(pinned), 0), columnCount - 1);
+    positions.set(key, { column: target, top: columnHeights[target] });
+    columnHeights[target] += height + rowGap;
+  }
+  return { positions, totalHeight: Math.max(0, Math.max(...columnHeights, 0) - rowGap) };
+}
+const Masonry = React.forwardRef(function Masonry2({
+  items,
+  itemRender,
+  columns = DEFAULT_COLUMNS,
+  gap,
+  gutter,
+  fresh = false,
+  onLayoutChange,
+  id,
+  className,
+  ...rest
+}, ref) {
+  const rootRef = React.useRef(null);
+  const itemRefs = React.useRef(/* @__PURE__ */ new Map());
+  const matched = {
+    sm: useMediaQuery(BREAKPOINT_QUERY.sm),
+    md: useMediaQuery(BREAKPOINT_QUERY.md),
+    lg: useMediaQuery(BREAKPOINT_QUERY.lg),
+    xl: useMediaQuery(BREAKPOINT_QUERY.xl)
+  };
+  if (isDevelopment()) {
+    if (gutter !== void 0) {
+      console.warn(
+        '[@godxjp/ui] Masonry: `gutter` is Ant Design\'s name for this axis; here it is `gap`, and it takes a GapProp token step (`"sm"`, `4`, `["md", "lg"]`) rather than a pixel number. The value was IGNORED.'
+      );
+    }
+    if (columns !== null && typeof columns === "object") {
+      const unknown = Object.keys(columns).filter((step) => !COLUMN_STEPS.has(step));
+      if (unknown.length > 0) {
+        console.warn(
+          `[@godxjp/ui] Masonry: \`columns\` has no step ${unknown.join(", ")} \u2014 the steps here are base | sm | md | lg | xl. Ant Design's \`xs\` is \`base\`, and there is no \`xxl\`. The key(s) were IGNORED.`
+        );
+      }
+    }
+  }
+  const columnCount = React.useMemo(() => {
+    const resolved = (() => {
+      if (typeof columns === "number") return columns;
+      for (const step of BREAKPOINT_ORDER) {
+        if (matched[step] && columns[step] !== void 0) return columns[step];
+      }
+      return columns.base ?? 1;
+    })();
+    return Math.max(1, Math.trunc(resolved) || 1);
+  }, [columns, matched.sm, matched.md, matched.lg, matched.xl]);
+  const [inlineGap, blockGap] = React.useMemo(() => {
+    if (gap === void 0) return [void 0, void 0];
+    return Array.isArray(gap) ? [gap[0], gap[1]] : [gap, gap];
+  }, [gap]);
+  const [metrics, setMetrics] = React.useState(EMPTY_METRICS);
+  const measure = React.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const rowGap = Number.parseFloat(window.getComputedStyle(root).rowGap) || 0;
+    const next = (items ?? []).map((item, index) => {
+      const key = item.key ?? index;
+      if (typeof item.height === "number" && Number.isFinite(item.height)) {
+        return [key, item.height, item.column];
+      }
+      const element = itemRefs.current.get(key);
+      return [key, element ? element.getBoundingClientRect().height : 0, item.column];
+    });
+    setMetrics((previous) => {
+      const candidate = { rowGap, items: next };
+      return sameMetrics(previous, candidate) ? previous : candidate;
+    });
+  }, [items]);
+  const frameRef = React.useRef(null);
+  const scheduleMeasure = React.useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (frameRef.current !== null) window.cancelAnimationFrame(frameRef.current);
+    frameRef.current = window.requestAnimationFrame(() => {
+      frameRef.current = null;
+      measure();
+    });
+  }, [measure]);
+  React.useEffect(
+    () => () => {
+      if (frameRef.current !== null && typeof window !== "undefined") {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+    },
+    []
+  );
+  React.useLayoutEffect(() => {
+    measure();
+  }, [measure, columnCount, inlineGap, blockGap]);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    root.addEventListener("load", scheduleMeasure, true);
+    root.addEventListener("error", scheduleMeasure, true);
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(scheduleMeasure);
+      observer.observe(root);
+      if (fresh) {
+        for (const element of itemRefs.current.values()) {
+          if (element) observer.observe(element);
+        }
+      }
+    }
+    return () => {
+      root.removeEventListener("load", scheduleMeasure, true);
+      root.removeEventListener("error", scheduleMeasure, true);
+      observer?.disconnect();
+    };
+  }, [scheduleMeasure, fresh, items]);
+  const { positions, totalHeight } = React.useMemo(
+    () => packColumns(metrics.items, columnCount, metrics.rowGap),
+    [metrics, columnCount]
+  );
+  const lastLayoutRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!onLayoutChange || !items || items.length === 0) return;
+    if (items.length !== positions.size) return;
+    if (!items.every((item, index) => positions.has(item.key ?? index))) return;
+    const layout = items.map((item, index) => ({
+      ...item,
+      column: positions.get(item.key ?? index).column
+    }));
+    const signature = layout.map((entry) => `${String(entry.key)}:${entry.column}`).join("|");
+    if (signature === lastLayoutRef.current) return;
+    lastLayoutRef.current = signature;
+    onLayoutChange(layout);
+  }, [items, positions, onLayoutChange]);
+  const style = {
+    "--masonry-column-count": columnCount,
+    ...inlineGap === void 0 ? void 0 : { "--masonry-gap-inline": gapToken(inlineGap, "inline") },
+    ...blockGap === void 0 ? void 0 : { "--masonry-gap-block": gapToken(blockGap, "block") },
+    blockSize: totalHeight
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (element) => {
+        rootRef.current = element;
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+      },
+      id,
+      "data-slot": "masonry",
+      className: cn("ui-masonry", className),
+      style,
+      ...rest,
+      children: (items ?? []).map((item, index) => {
+        const key = item.key ?? index;
+        const position = positions.get(key);
+        const itemStyle = {
+          "--masonry-item-column": position?.column ?? 0,
+          insetBlockStart: position?.top ?? 0,
+          ...typeof item.height === "number" && Number.isFinite(item.height) ? { blockSize: item.height } : void 0
+        };
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (element) => {
+              itemRefs.current.set(key, element);
+            },
+            "data-slot": "masonry-item",
+            "data-positioned": position ? "" : void 0,
+            className: "ui-masonry-item",
+            style: itemStyle,
+            children: item.children ?? itemRender?.({ ...item, index, column: position?.column ?? 0 })
+          },
+          key
+        );
+      })
+    }
+  );
+});
+Masonry.displayName = "Masonry";
+export {
+  Masonry
+};

package/dist/components/layout/page-container.js

@@ -3,32 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { scrollParent, useInView } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
-function scrollParent(el) {
-  let node = el?.parentElement ?? null;
-  while (node) {
-    const overflowY = getComputedStyle(node).overflowY;
-    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return node;
-    node = node.parentElement;
-  }
-  return null;
-}
 function useFooterReveal(enabled) {
   const headerRef = useRef(null);
-  const [revealed, setRevealed] = useState(false);
+  const [root, setRoot] = useState(null);
   useEffect(() => {
-    if (!enabled) return;
-    const el = headerRef.current;
-    if (!el || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setRevealed(!entry.isIntersecting), {
-      root: scrollParent(el),
-      threshold: 0
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
+    setRoot(scrollParent(headerRef.current));
   }, [enabled]);
-  return { headerRef, revealed: enabled && revealed };
+  const inView = useInView(headerRef, { enabled, root, assumeInView: true });
+  return { headerRef, revealed: enabled && !inView };
 }
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });

package/dist/components/navigation/anchor.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import type { AnchorProp } from "../../props/components/navigation.prop.js";
+export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProp as AnchorProps, } from "../../props/components/navigation.prop.js";
+/**
+ * Anchor — Ant Design `Anchor` (6.6.5): the in-page section navigation, and — the part that makes
+ * it a component rather than a composition — the thing that WORKS OUT which section is current.
+ *
+ * `NavList activeId` takes that answer as a prop. Nothing else in this library computes it.
+ *
+ * ## Why this resolves by measurement and not by `IntersectionObserver`
+ *
+ * The obvious build is an observer over every section with a thin `rootMargin` band, and it is
+ * what Bootstrap's Scrollspy does (`rootMargin: "0px 0px -25%"`, `threshold: [0.1, 0.5, 1]`) and
+ * what this repo's own `LegalDocumentShell` does (`"-10% 0px -75% 0px"`, threshold 0). It has two
+ * failure modes that no choice of margin fixes, because they are properties of the question rather
+ * than of the numbers:
+ *
+ *  1. **A section taller than the band reports nothing.** Scroll into the middle of a long
+ *     section and no element intersects, so the answer is empty and the implementation has to fall
+ *     back to "keep whatever was active" — which is a guess, and is wrong after any jump.
+ *  2. **The answer depends on scroll DIRECTION.** With several short sections inside the band at
+ *     once, "first intersecting" and "last intersecting" disagree, and which is right depends on
+ *     which way the reader is moving. That is where scrollspy flicker comes from, and it is why
+ *     the good implementations end up bolting hysteresis onto the observer.
+ *
+ * Ant Design resolves it the other way and gets neither problem: on each scroll, take every
+ * section whose block-start edge has crossed a single decision line, and pick the LAST one. It is
+ * a pure function of scroll position, so it cannot oscillate at a fixed position, it needs no
+ * hysteresis, and a section a mile tall is still the current one all the way down. That rule is
+ * what is ported here, `bounds` and all.
+ *
+ * ## The three traps, and where each is handled
+ *
+ * **A click must not fight the resolver.** A click scrolls, the scroll fires the resolver, and the
+ * resolver re-picks every section the page passes on the way — so the item you clicked lights up,
+ * goes out, and comes back. `suppressedRef` holds the resolver off from the moment the
+ * programmatic scroll starts until the container stops emitting `scroll` (see
+ * `SCROLL_SETTLE_MS`), and a real `wheel`/`touchstart` releases it early.
+ *
+ * **The hash is state too.** Landing on `/pricing#enterprise` must select that entry, and must do
+ * it without waiting for a scroll event that may never come — the browser's own hash jump does not
+ * fire one when the section is already in view. It is therefore read in the state INITIALISER, so
+ * the very first render is already correct, and the mount-time resolution is skipped when it
+ * matched, rather than immediately overwriting it with a scroll position nobody has reached yet.
+ *
+ * **Reduced motion jumps.** `behavior: "smooth"` becomes `"auto"` under
+ * `prefers-reduced-motion: reduce` (WCAG 2.3.3) — it still lands on the section, instantly. The
+ * ink rail transitions on `--duration-fast` and snaps under the same query; the current item is
+ * never conveyed by motion alone, it is conveyed by `aria-current`.
+ *
+ * ## Accessibility
+ *
+ * A named `<nav>` landmark (a page routinely carries a breadcrumb, a rail and this one), a real
+ * `<ul>`/`<li>` list of real `<a href="#…">` — middle-clickable, deep-linkable, and working before
+ * JavaScript boots — and `aria-current="location"` on the active one. `"location"` and not
+ * `"page"`: the entry points at a FRAGMENT of the page being read, not at a different page, and
+ * `"page"` is what a breadcrumb's or a nav rail's current item uses. A click also moves FOCUS to
+ * the target section, not just the scroll position, so the next Tab continues from where the
+ * reader was sent instead of from the nav.
+ */
+export declare function Anchor({ items, direction, affix, bounds, getContainer, getCurrentAnchor, offsetBlockStart, targetOffsetBlockStart, showInkInFixed, replace, value, defaultValue, onValueChange, onChange, offsetTop, targetOffset, onClick, label, id, className, ...rest }: AnchorProp): React.JSX.Element;
+export declare namespace Anchor {
+    var displayName: string;
+}

package/dist/components/navigation/anchor.js

@@ -0,0 +1,284 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { isDevelopment } from "../../lib/dev.js";
+import { useControlledLatch } from "../../lib/hooks.js";
+import { cn, prefersReducedMotion } from "../../lib/utils.js";
+import { Affix } from "../layout/affix.js";
+const SHARP_MATCHER = /#([^\t\r\n\f\v]+)$/;
+const DEFAULT_BOUNDS = 5;
+const SCROLL_SETTLE_MS = 120;
+function hashOf(href) {
+  return SHARP_MATCHER.exec(href)?.[1] ?? "";
+}
+function flatten(items, out = []) {
+  for (const item of items ?? []) {
+    out.push(item);
+    if (item.children?.length) flatten(item.children, out);
+  }
+  return out;
+}
+function offsetTopWithin(element, container) {
+  if (!element.getClientRects().length) return 0;
+  const rect = element.getBoundingClientRect();
+  if (rect.width || rect.height) {
+    if (container === window) return rect.top - element.ownerDocument.documentElement.clientTop;
+    return rect.top - container.getBoundingClientRect().top;
+  }
+  return rect.top;
+}
+function scrollTopOf(container) {
+  return container === window ? window.scrollY ?? document.documentElement.scrollTop : container.scrollTop;
+}
+function Anchor({
+  items,
+  direction = "vertical",
+  affix = true,
+  bounds = DEFAULT_BOUNDS,
+  getContainer,
+  getCurrentAnchor,
+  offsetBlockStart,
+  targetOffsetBlockStart,
+  showInkInFixed = false,
+  replace = false,
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  offsetTop,
+  targetOffset,
+  onClick,
+  label,
+  id,
+  className,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const horizontal = direction === "horizontal";
+  if (isDevelopment()) {
+    if (onChange !== void 0) {
+      console.warn(
+        "[@godxjp/ui] Anchor: `onChange` is Ant Design's name for this callback; here the active href is a controlled value, so it is `onValueChange` (beside `value` / `defaultValue`). The handler was IGNORED."
+      );
+    }
+    if (offsetTop !== void 0) {
+      console.warn(
+        "[@godxjp/ui] Anchor: `offsetTop` is Ant Design's name for this axis; here it is `offsetBlockStart` \u2014 the logical axis, per check:rtl. The value was IGNORED."
+      );
+    }
+    if (targetOffset !== void 0) {
+      console.warn(
+        "[@godxjp/ui] Anchor: `targetOffset` is Ant Design's name for this axis; here it is `targetOffsetBlockStart`. The value was IGNORED."
+      );
+    }
+    if (horizontal && items?.some((item) => item.children?.length)) {
+      console.warn(
+        '[@godxjp/ui] Anchor: `items[].children` is not supported when `direction="horizontal"` \u2014 a nested list has nowhere to go on one row. The nested entries were DROPPED. (Ant Design warns about the same combination.)'
+      );
+    }
+  }
+  const links = React.useMemo(
+    () => horizontal ? items ?? [] : flatten(items),
+    [items, horizontal]
+  );
+  const linksKey = links.map((item) => item.href).join("\n");
+  const navRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const suppressedRef = React.useRef(false);
+  const settleTimerRef = React.useRef(null);
+  const hashOnMountRef = React.useRef(null);
+  const [internal, setInternal] = React.useState(() => {
+    if (typeof window === "undefined") return defaultValue ?? "";
+    const hash = window.location.hash;
+    if (!hash) return defaultValue ?? "";
+    const decoded = decodeURIComponent(hash.slice(1));
+    const matched = links.find((item) => hashOf(item.href) === decoded);
+    if (!matched) return defaultValue ?? "";
+    hashOnMountRef.current = matched.href;
+    return matched.href;
+  });
+  const controlled = useControlledLatch(value !== void 0);
+  const resolved = controlled ? value ?? "" : internal;
+  const active = controlled ? resolved : getCurrentAnchor?.(resolved) ?? resolved;
+  const activeRef = React.useRef(active);
+  const controlledRef = React.useRef(controlled);
+  const onValueChangeRef = React.useRef(onValueChange);
+  const getCurrentAnchorRef = React.useRef(getCurrentAnchor);
+  React.useEffect(() => {
+    activeRef.current = active;
+    controlledRef.current = controlled;
+    onValueChangeRef.current = onValueChange;
+    getCurrentAnchorRef.current = getCurrentAnchor;
+  });
+  const commit = React.useCallback((href, force = false) => {
+    const mapped = getCurrentAnchorRef.current?.(href) ?? href;
+    if (!force && mapped === activeRef.current) return;
+    if (!controlledRef.current) setInternal(href);
+    onValueChangeRef.current?.(href);
+  }, []);
+  const container = React.useCallback(
+    () => getContainer?.() ?? window,
+    [getContainer]
+  );
+  const line = targetOffsetBlockStart ?? offsetBlockStart ?? 0;
+  const resolveFromScroll = React.useCallback(() => {
+    if (typeof document === "undefined") return "";
+    const box = container();
+    let best = "";
+    let bestTop = Number.NEGATIVE_INFINITY;
+    for (const item of links) {
+      const hash = hashOf(item.href);
+      if (!hash) continue;
+      const element = document.getElementById(hash);
+      if (!element) continue;
+      const top = offsetTopWithin(element, box);
+      const itemLine = item.targetOffsetBlockStart ?? line;
+      if (top <= itemLine + bounds && top > bestTop) {
+        best = item.href;
+        bestTop = top;
+      }
+    }
+    return best;
+  }, [container, links, line, bounds]);
+  const release = React.useCallback(() => {
+    if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+    settleTimerRef.current = null;
+    suppressedRef.current = false;
+  }, []);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    const box = container();
+    const handleScroll = () => {
+      if (suppressedRef.current) {
+        if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+        settleTimerRef.current = setTimeout(release, SCROLL_SETTLE_MS);
+        return;
+      }
+      commit(resolveFromScroll());
+    };
+    const handleGesture = () => {
+      if (suppressedRef.current) release();
+    };
+    if (hashOnMountRef.current === null) commit(resolveFromScroll());
+    hashOnMountRef.current = null;
+    box.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleScroll);
+    window.addEventListener("wheel", handleGesture, { passive: true });
+    window.addEventListener("touchstart", handleGesture, { passive: true });
+    return () => {
+      box.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+      window.removeEventListener("wheel", handleGesture);
+      window.removeEventListener("touchstart", handleGesture);
+      if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+    };
+  }, [container, resolveFromScroll, commit, release, linksKey]);
+  const [ink, setInk] = React.useState(null);
+  React.useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const current = list.querySelector('[data-slot="anchor-link"][data-active]');
+    if (!current) {
+      setInk(null);
+      return;
+    }
+    const listRect = list.getBoundingClientRect();
+    const rect = current.getBoundingClientRect();
+    if (!horizontal) {
+      setInk({ offset: rect.top - listRect.top, size: rect.height });
+      return;
+    }
+    const rtl = getComputedStyle(list).direction === "rtl";
+    setInk({
+      offset: rtl ? listRect.right - rect.right : rect.left - listRect.left,
+      size: rect.width
+    });
+  }, [active, horizontal, linksKey]);
+  const handleLinkClick = (event, item) => {
+    onClick?.(event, item);
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    const hash = hashOf(item.href);
+    const targetElement = hash && typeof document !== "undefined" ? document.getElementById(hash) : null;
+    if (!targetElement) return;
+    event.preventDefault();
+    commit(item.href, true);
+    const useReplace = item.replace ?? replace;
+    window.history[useReplace ? "replaceState" : "pushState"](null, "", item.href);
+    const box = container();
+    const landing = item.targetOffsetBlockStart ?? targetOffsetBlockStart ?? offsetBlockStart ?? 0;
+    const top = scrollTopOf(box) + offsetTopWithin(targetElement, box) - landing;
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
+    suppressedRef.current = true;
+    if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+    settleTimerRef.current = setTimeout(release, SCROLL_SETTLE_MS);
+    if (box === window) window.scrollTo({ top, behavior });
+    else box.scrollTo({ top, behavior });
+    if (!targetElement.hasAttribute("tabindex") && targetElement.tabIndex < 0) {
+      targetElement.setAttribute("tabindex", "-1");
+    }
+    targetElement.focus({ preventScroll: true });
+  };
+  const renderItems = (list, nested) => list.map((item) => /* @__PURE__ */ jsxs("li", { "data-slot": "anchor-item", "data-nested": nested ? "" : void 0, children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        target: item.target,
+        "data-slot": "anchor-link",
+        "data-active": item.href === active ? "" : void 0,
+        "aria-current": item.href === active ? "location" : void 0,
+        onClick: (event) => {
+          handleLinkClick(event, item);
+        },
+        children: item.title
+      }
+    ),
+    !horizontal && item.children?.length ? /* @__PURE__ */ jsx("ul", { "data-slot": "anchor-list", "data-nested": "", children: renderItems(item.children, true) }) : null
+  ] }, item.key));
+  const content = /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: navRef,
+      id,
+      "data-slot": "anchor",
+      "data-direction": direction,
+      "data-ink": affix === false && !showInkInFixed ? "hidden" : void 0,
+      "aria-label": label ?? t("navigation.anchor.ariaLabel"),
+      className: cn("ui-anchor", className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "ui-anchor-track", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "anchor-ink",
+            "data-visible": ink ? "" : void 0,
+            "aria-hidden": "true",
+            className: "ui-anchor-ink",
+            style: ink ? {
+              "--anchor-ink-offset": `${ink.offset}px`,
+              "--anchor-ink-extent": `${ink.size}px`
+            } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { ref: listRef, "data-slot": "anchor-list", className: "ui-anchor-list", children: renderItems(items ?? [], false) })
+      ] })
+    }
+  );
+  if (!affix) return content;
+  return /* @__PURE__ */ jsx(
+    Affix,
+    {
+      offsetBlockStart,
+      target: container,
+      ...typeof affix === "object" ? affix : void 0,
+      children: content
+    }
+  );
+}
+Anchor.displayName = "Anchor";
+export {
+  Anchor
+};

package/dist/components/navigation/app-setting-picker.js

@@ -186,10 +186,27 @@ const AppSettingPicker = React.forwardRef(
                   )
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
-                  // A form field that wants a full-width control passes
-                  // `className="w-full"`, which wins over `w-auto`.
                   // `compact` drops the per-kind width entirely so the trigger hugs its value.
-                  cn("w-auto max-w-full", !isCompact && "ui-app-setting-picker-trigger")
+                  //
+                  // The width is a UTILITY READING A TOKEN, for the third time in this file's
+                  // history and for the same reason (gh#366 icon, gh#375 Select, gh#819 here):
+                  // @layer utilities is ordered after @layer components, so the `w-auto` that
+                  // stood here outranked `.ui-app-setting-picker-trigger[data-kind]`'s
+                  // `inline-size` and every one of the eight per-kind tokens was inert — a
+                  // consumer who retuned --app-setting-picker-density-width saw nothing move.
+                  // `--app-setting-picker-trigger-width` is what `data-kind` resolves in
+                  // navigation-layout.css (a custom property, which no utility competes with);
+                  // it defaults to `auto`, so below the breakpoint and under `compact` this is
+                  // byte-for-byte the old `w-auto` behaviour.
+                  //
+                  // It stays a SINGLE unprefixed `w-*` (not `sm:w-[…]` per kind): `cn` is
+                  // tailwind-merge, so a form field that wants a full-width control still passes
+                  // `className="w-full"` and REPLACES this one. A `sm:`-variant utility would
+                  // survive that merge and quietly ignore the consumer above 40rem.
+                  cn(
+                    "w-[length:var(--app-setting-picker-trigger-width)] max-w-full",
+                    !isCompact && "ui-app-setting-picker-trigger"
+                  )
                 ),
                 // Compact re-tiers the box through tokens (--app-setting-picker-compact-*); the height
                 // still comes from the official --control-height-sm tier, never a literal. The gap is a

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

@@ -9,5 +9,9 @@ export { AppSettingToggle } from "./app-setting-toggle.js";
 export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+export { MegaMenu } from "./mega-menu.js";
+export type { MegaMenuProp, MegaMenuProps, MegaMenuItemProp, MegaMenuItemProps, MegaMenuPanelProp, MegaMenuPanelProps, MegaMenuGroupProp, MegaMenuGroupProps, MegaMenuLinkProp, MegaMenuLinkProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProps, } from "./mega-menu.js";
 export { Conversations } from "./conversations.js";
 export type { ConversationsProp, ConversationsProps, ConversationsItemProp, ConversationsDividerProp, ConversationsEntryProp, ConversationsMenuProp, ConversationsMenuItemProp, ConversationsGroupableProp, ConversationsCreationProp, } from "./conversations.js";
+export { Anchor } from "./anchor.js";
+export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProps, } from "./anchor.js";

package/dist/components/navigation/index.js

@@ -29,8 +29,11 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
+import { MegaMenu } from "./mega-menu.js";
 import { Conversations } from "./conversations.js";
+import { Anchor } from "./anchor.js";
 export {
+  Anchor,
   AppSettingPicker,
   AppSettingToggle,
   Conversations,
@@ -51,6 +54,7 @@ export {
   DropdownMenuTrigger,
   FilterBar,
   FilterBarGroup,
+  MegaMenu,
   Pagination,
   PaginationContent,
   PaginationEllipsis,