@vamos-ui/react 0.2.0 → 0.3.0

package/dist/motion/reveal.d.ts

@@ -0,0 +1,72 @@
+import * as React from "react";
+export type RevealEffect = "fade" | "rise" | "blur" | "scale" | "clip";
+export declare const useIsoLayoutEffect: typeof React.useLayoutEffect;
+/**
+ * `true` when the component mounted on the client after hydration (a page switch, a tab, a
+ * replay); `false` when it was server-rendered and is being hydrated. Server-rendered content
+ * is already on screen, so it is never hidden again; fresh content may start hidden.
+ */
+export declare function useFreshMount(): boolean;
+export interface UseRevealOptions {
+    /** Reveal once and stop observing. Default true. With false it hides again when scrolled back above it. */
+    once?: boolean;
+    /** IntersectionObserver rootMargin. Default `"0px 0px -8% 0px"` (a little before the bottom edge). */
+    rootMargin?: string;
+    /** IntersectionObserver threshold. Default 0. */
+    threshold?: number;
+    /** The children animate (Stagger): wait for the last child before settling. */
+    stagger?: boolean;
+    /** Skip the animation; the element just shows. */
+    disabled?: boolean;
+    /** Called once the element starts revealing. */
+    onReveal?: () => void;
+}
+/**
+ * Scroll-reveal state machine on any element: `data-reveal-state` goes
+ * `pending → in → done`. CSS (motion.css) draws the states, so the hook only flips an attribute.
+ *
+ * - Server-rendered content that is already in view stays as it is (no flash, CLS 0).
+ * - Server-rendered content below the fold is hidden just before paint and revealed on scroll.
+ * - Freshly mounted content starts hidden and reveals when it enters the viewport.
+ * - Reduced motion, `data-motion="off"` or no IntersectionObserver → shown at once.
+ *
+ * Returns the props for the first render (spread them on the element).
+ */
+export declare function useReveal<T extends HTMLElement>(ref: React.RefObject<T | null>, { once, rootMargin, threshold, stagger, disabled, onReveal }?: UseRevealOptions): {
+    readonly "data-reveal-state": "pending" | undefined;
+};
+interface RevealBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseRevealOptions, "stagger"> {
+    /** fade · rise (default) · blur · scale · clip (wipes up from the bottom edge). */
+    effect?: RevealEffect;
+    /** Delay before it starts, in ms. */
+    delay?: number;
+    /** Override the duration, in ms. Default: the motion token for the level (`--motion-reveal`). */
+    duration?: number;
+    /** Render the single child instead of a `div` (keeps your `ul`, `section`, `Container`…). */
+    asChild?: boolean;
+}
+export type RevealProps = RevealBaseProps;
+/**
+ * Shows its content when it scrolls into view — opacity and transform only, so nothing moves
+ * (CLS 0). Server-rendered content is never hidden before hydration; reduced motion and
+ * `data-motion="off"` show it at once.
+ *
+ * ```tsx
+ * <Reveal effect="rise" delay={80}><Card>…</Card></Reveal>
+ * ```
+ */
+export declare const Reveal: React.ForwardRefExoticComponent<RevealBaseProps & React.RefAttributes<HTMLDivElement>>;
+export interface StaggerProps extends RevealBaseProps {
+    /** Time between two children, in ms. Default: the level's `--motion-stagger` (60 ms subtle, 90 ms full). */
+    step?: number;
+}
+/**
+ * Reveals its direct children one after another (the 13th and later share the last slot, so a
+ * long list never keeps people waiting). Use `asChild` on a list to keep its semantics.
+ *
+ * ```tsx
+ * <Stagger asChild step={70}><ul className="grid grid-cols-3">{plans.map(…)}</ul></Stagger>
+ * ```
+ */
+export declare const Stagger: React.ForwardRefExoticComponent<StaggerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/motion/reveal.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { inViewport, ioSupported, motionAllowed, observe, transitionEnd } from "./core.js";
+const noopSubscribe = () => () => { };
+export const useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+ * `true` when the component mounted on the client after hydration (a page switch, a tab, a
+ * replay); `false` when it was server-rendered and is being hydrated. Server-rendered content
+ * is already on screen, so it is never hidden again; fresh content may start hidden.
+ */
+export function useFreshMount() {
+    const hydrating = React.useSyncExternalStore(noopSubscribe, () => false, () => true);
+    const [fresh] = React.useState(!hydrating);
+    return fresh;
+}
+/**
+ * Scroll-reveal state machine on any element: `data-reveal-state` goes
+ * `pending → in → done`. CSS (motion.css) draws the states, so the hook only flips an attribute.
+ *
+ * - Server-rendered content that is already in view stays as it is (no flash, CLS 0).
+ * - Server-rendered content below the fold is hidden just before paint and revealed on scroll.
+ * - Freshly mounted content starts hidden and reveals when it enters the viewport.
+ * - Reduced motion, `data-motion="off"` or no IntersectionObserver → shown at once.
+ *
+ * Returns the props for the first render (spread them on the element).
+ */
+export function useReveal(ref, { once = true, rootMargin, threshold, stagger, disabled, onReveal } = {}) {
+    const fresh = useFreshMount();
+    const onRevealRef = React.useRef(onReveal);
+    onRevealRef.current = onReveal;
+    useIsoLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        let timer;
+        let frame = 0;
+        const set = (s) => el.setAttribute("data-reveal-state", s);
+        const show = () => {
+            if (el.getAttribute("data-reveal-state") !== "pending")
+                return;
+            set("in");
+            onRevealRef.current?.();
+            clearTimeout(timer);
+            // After the transition, drop the reveal styles so the element's own transitions
+            // (hover, focus) are its own again.
+            timer = setTimeout(() => el.getAttribute("data-reveal-state") === "in" && set("done"), transitionEnd(el, stagger) + 60);
+        };
+        if (disabled || !motionAllowed(el)) {
+            set("done");
+            return;
+        }
+        if (!ioSupported()) {
+            if (fresh)
+                frame = requestAnimationFrame(() => show());
+            else
+                set("done");
+            return () => cancelAnimationFrame(frame);
+        }
+        if (!fresh && inViewport(el)) {
+            set("done");
+            if (once)
+                return;
+        }
+        else
+            set("pending");
+        const stop = observe(el, (entry) => {
+            if (entry.isIntersecting) {
+                show();
+                if (once)
+                    stop();
+            }
+            else if (!once && entry.boundingClientRect.top > 0)
+                set("pending");
+        }, { rootMargin, threshold });
+        return () => {
+            stop();
+            clearTimeout(timer);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fresh, once, rootMargin, threshold, stagger, disabled]);
+    return { "data-reveal-state": fresh && !disabled ? "pending" : undefined };
+}
+function useComposedRef(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback((node) => {
+        for (const r of refs) {
+            if (typeof r === "function")
+                r(node);
+            else if (r)
+                r.current = node;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}
+const timing = (delay, duration, extra) => ({
+    ...(delay ? { "--vm-delay": `${delay}ms` } : null),
+    ...(duration ? { "--vm-duration": `${duration}ms` } : null),
+    ...extra,
+});
+/**
+ * Shows its content when it scrolls into view — opacity and transform only, so nothing moves
+ * (CLS 0). Server-rendered content is never hidden before hydration; reduced motion and
+ * `data-motion="off"` show it at once.
+ *
+ * ```tsx
+ * <Reveal effect="rise" delay={80}><Card>…</Card></Reveal>
+ * ```
+ */
+export const Reveal = React.forwardRef(function Reveal({ effect = "rise", delay, duration, once, rootMargin, threshold, disabled, onReveal, asChild, className, style, ...props }, ref) {
+    const inner = React.useRef(null);
+    const setRef = useComposedRef(ref, inner);
+    const initial = useReveal(inner, { once, rootMargin, threshold, disabled, onReveal });
+    const Comp = asChild ? Slot.Root : "div";
+    return _jsx(Comp, { ref: setRef, "data-reveal": effect, ...initial, className: cn("vm-reveal", className), style: { ...timing(delay, duration), ...style }, ...props });
+});
+/**
+ * Reveals its direct children one after another (the 13th and later share the last slot, so a
+ * long list never keeps people waiting). Use `asChild` on a list to keep its semantics.
+ *
+ * ```tsx
+ * <Stagger asChild step={70}><ul className="grid grid-cols-3">{plans.map(…)}</ul></Stagger>
+ * ```
+ */
+export const Stagger = React.forwardRef(function Stagger({ effect = "rise", step, delay, duration, once, rootMargin, threshold, disabled, onReveal, asChild, className, style, ...props }, ref) {
+    const inner = React.useRef(null);
+    const setRef = useComposedRef(ref, inner);
+    const initial = useReveal(inner, { once, rootMargin, threshold, disabled, onReveal, stagger: true });
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { ref: setRef, "data-reveal": effect, "data-reveal-stagger": "", ...initial, className: cn("vm-stagger", className), style: { ...timing(delay, duration, step ? { "--vm-step": `${step}ms` } : undefined), ...style }, ...props }));
+});

package/dist/motion/scroll-shrink.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface UseScrollShrinkOptions {
+    /** Scroll distance in px after which the header counts as scrolled. Default 24. */
+    threshold?: number;
+}
+/**
+ * Sticky header shrink: sets `data-scrolled` on the element once the page has scrolled past
+ * `threshold` (passive listener, rAF-throttled, no re-render). Pair it with the `vm-shrink`
+ * class, which tightens the bar with transforms only, so the content below never moves (CLS 0).
+ * Returns whether it is scrolled, for anything else you want to switch.
+ *
+ * ```tsx
+ * const ref = React.useRef<HTMLElement>(null);
+ * useScrollShrink(ref);
+ * <header ref={ref} className="vm-shrink sticky top-0">…</header>
+ * ```
+ */
+export declare function useScrollShrink(ref: React.RefObject<HTMLElement | null>, { threshold }?: UseScrollShrinkOptions): boolean;

package/dist/motion/scroll-shrink.js

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react";
+/**
+ * Sticky header shrink: sets `data-scrolled` on the element once the page has scrolled past
+ * `threshold` (passive listener, rAF-throttled, no re-render). Pair it with the `vm-shrink`
+ * class, which tightens the bar with transforms only, so the content below never moves (CLS 0).
+ * Returns whether it is scrolled, for anything else you want to switch.
+ *
+ * ```tsx
+ * const ref = React.useRef<HTMLElement>(null);
+ * useScrollShrink(ref);
+ * <header ref={ref} className="vm-shrink sticky top-0">…</header>
+ * ```
+ */
+export function useScrollShrink(ref, { threshold = 24 } = {}) {
+    const [scrolled, setScrolled] = React.useState(false);
+    React.useEffect(() => {
+        let raf = 0;
+        let last = null;
+        const update = () => {
+            raf = 0;
+            const next = window.scrollY > threshold;
+            if (next === last)
+                return;
+            last = next;
+            const el = ref.current;
+            if (el) {
+                if (next)
+                    el.setAttribute("data-scrolled", "");
+                else
+                    el.removeAttribute("data-scrolled");
+            }
+            setScrolled(next);
+        };
+        const onScroll = () => {
+            if (!raf)
+                raf = requestAnimationFrame(update);
+        };
+        update();
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("scroll", onScroll);
+        };
+    }, [ref, threshold]);
+    return scrolled;
+}

package/dist/motion/skeleton-swap.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface SkeletonSwapProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** While true the skeleton shows; when it turns false the content cross-fades in over it. */
+    loading: boolean;
+    /** The placeholder. Give it the content's size so the box does not jump when it leaves. */
+    skeleton: React.ReactNode;
+}
+/**
+ * Skeleton → content without a flash: both share one grid cell, the content fades in while the
+ * skeleton fades out, then the skeleton unmounts. `aria-busy` while loading. Content that is
+ * there from the first render never animates; reduced motion swaps at once.
+ *
+ * ```tsx
+ * <SkeletonSwap loading={isLoading} skeleton={<InvoiceSkeleton />}><InvoiceTable rows={rows} /></SkeletonSwap>
+ * ```
+ */
+export declare const SkeletonSwap: React.ForwardRefExoticComponent<SkeletonSwapProps & React.RefAttributes<HTMLDivElement>>;

package/dist/motion/skeleton-swap.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { motionAllowed } from "./core.js";
+import { useIsoLayoutEffect } from "./reveal.js";
+/**
+ * Skeleton → content without a flash: both share one grid cell, the content fades in while the
+ * skeleton fades out, then the skeleton unmounts. `aria-busy` while loading. Content that is
+ * there from the first render never animates; reduced motion swaps at once.
+ *
+ * ```tsx
+ * <SkeletonSwap loading={isLoading} skeleton={<InvoiceSkeleton />}><InvoiceTable rows={rows} /></SkeletonSwap>
+ * ```
+ */
+export const SkeletonSwap = React.forwardRef(function SkeletonSwap({ loading, skeleton, className, children, ...props }, ref) {
+    const inner = React.useRef(null);
+    const [prevLoading, setPrevLoading] = React.useState(loading);
+    const [leaving, setLeaving] = React.useState(false);
+    // Derived from the previous prop (React's "adjust state while rendering" pattern): the frame
+    // that flips loading → false already renders both layers, so nothing blinks.
+    if (prevLoading !== loading) {
+        setPrevLoading(loading);
+        setLeaving(!loading);
+    }
+    useIsoLayoutEffect(() => {
+        if (!leaving)
+            return;
+        if (!motionAllowed(inner.current)) {
+            setLeaving(false);
+            return;
+        }
+        const t = setTimeout(() => setLeaving(false), 700); // safety net if animationend never fires
+        return () => clearTimeout(t);
+    }, [leaving]);
+    return (_jsxs("div", { ref: (node) => {
+            inner.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, className: cn("vm-swap", className), ...props, children: [loading ? null : (_jsx("div", { className: "vm-swap-content", "data-entering": leaving ? "" : undefined, children: children })), loading || leaving ? (_jsx("div", { className: "vm-swap-skeleton", "aria-hidden": !loading || undefined, "data-leaving": loading ? undefined : "", onAnimationEnd: (e) => e.target === e.currentTarget && setLeaving(false), children: skeleton })) : null] }));
+});

package/dist/motion/text-reveal.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type UseRevealOptions } from "./reveal.js";
+type TextTag = "h1" | "h2" | "h3" | "h4" | "p" | "span" | "div" | "blockquote";
+export interface TextRevealProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Omit<UseRevealOptions, "stagger"> {
+    /** The text. In `by="line"` mode, `\n` separates lines. */
+    children: string;
+    /** Element to render. Default `"h2"`. */
+    as?: TextTag;
+    /** Split into words (default) or lines. */
+    by?: "word" | "line";
+    /**
+     * mask: each unit rises from behind its own baseline (default) · fade · blur.
+     */
+    effect?: "mask" | "fade" | "blur";
+    /** ms between two units. Default 45 (words) / 110 (lines). */
+    step?: number;
+    /** Delay before the first unit, in ms. */
+    delay?: number;
+}
+/**
+ * A heading that reveals word by word (or line by line) as it scrolls into view. Assistive
+ * tech gets one plain string: the split copy is `aria-hidden`, the real text is a visually
+ * hidden twin. Transform and opacity only; reduced motion shows it at once.
+ *
+ * ```tsx
+ * <TextReveal as="h2">Small rooms, slow mornings, nothing to scroll.</TextReveal>
+ * ```
+ */
+export declare const TextReveal: React.ForwardRefExoticComponent<TextRevealProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/motion/text-reveal.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useReveal } from "./reveal.js";
+/**
+ * A heading that reveals word by word (or line by line) as it scrolls into view. Assistive
+ * tech gets one plain string: the split copy is `aria-hidden`, the real text is a visually
+ * hidden twin. Transform and opacity only; reduced motion shows it at once.
+ *
+ * ```tsx
+ * <TextReveal as="h2">Small rooms, slow mornings, nothing to scroll.</TextReveal>
+ * ```
+ */
+export const TextReveal = React.forwardRef(function TextReveal({ children, as: Tag = "h2", by = "word", effect = "mask", step, delay, once, rootMargin, threshold, disabled, onReveal, className, style, ...props }, ref) {
+    const inner = React.useRef(null);
+    const initial = useReveal(inner, { once, rootMargin, threshold, disabled, onReveal });
+    const text = String(children);
+    const units = by === "line" ? text.split("\n") : text.split(/\s+/).filter(Boolean);
+    const gap = step ?? (by === "line" ? 110 : 45);
+    const Comp = Tag;
+    return (_jsxs(Comp, { ref: (node) => {
+            inner.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "data-reveal": effect === "mask" ? "text" : effect, "data-text-reveal": by, ...initial, className: cn("vm-text-reveal", className), style: { "--vm-step": `${gap}ms`, ...(delay ? { "--vm-delay": `${delay}ms` } : null), ...style }, ...props, children: [_jsx("span", { className: "sr-only", children: by === "line" ? units.join(" ") : text }), _jsx("span", { "aria-hidden": "true", className: "vm-text-reveal-visual", children: units.map((u, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: "vm-tr-mask", children: _jsx("span", { className: "vm-tr-unit", style: { "--vm-i": i }, children: u }) }), by === "word" && i < units.length - 1 ? " " : null] }, i))) })] }));
+});

package/dist/motion/ticker.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export interface TickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Seconds for one full loop. Default 40. */
+    duration?: number;
+    /** Which way the strip travels (mirrored in RTL). Default `"start"`. */
+    direction?: "start" | "end";
+    /** Element for each copy of the items, e.g. `"ul"` when the children are `li`. Default `"div"`. */
+    as?: "div" | "ul" | "ol";
+    /** Space between items (any CSS length). Default `clamp(2.5rem, 6cqi, 4.5rem)`. */
+    gap?: string;
+    /** Fade the start and end edges. Default true. */
+    fade?: boolean;
+    /**
+     * A small pause control (a native checkbox — works without JavaScript). Moving content that
+     * lasts longer than five seconds needs one (WCAG 2.2.2). Default true.
+     */
+    controls?: boolean;
+    /** Accessible name of the pause control. Default `"Pause animation"`. */
+    pauseLabel?: string;
+    /** Names the list of items (it lands on the first copy, e.g. the `ul`). */
+    "aria-label"?: string;
+    /** Classes for each copy of the items. */
+    groupClassName?: string;
+}
+/**
+ * The motion kit's marquee: an endless strip of logos or words that follows the motion level. Pure CSS (server component): the items are rendered
+ * twice and the track slides by one copy. The copy is `aria-hidden` and `inert`, so assistive
+ * tech and the keyboard meet every item once. Pauses on hover and focus and with its pause
+ * control; under reduced motion or `data-motion="off"` it becomes a static, wrapped row.
+ *
+ * ```tsx
+ * <Ticker as="ul" duration={30}>{logos.map((l) => <li key={l.name}>…</li>)}</Ticker>
+ * ```
+ */
+export declare const Ticker: React.ForwardRefExoticComponent<TickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/motion/ticker.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * The motion kit's marquee: an endless strip of logos or words that follows the motion level. Pure CSS (server component): the items are rendered
+ * twice and the track slides by one copy. The copy is `aria-hidden` and `inert`, so assistive
+ * tech and the keyboard meet every item once. Pauses on hover and focus and with its pause
+ * control; under reduced motion or `data-motion="off"` it becomes a static, wrapped row.
+ *
+ * ```tsx
+ * <Ticker as="ul" duration={30}>{logos.map((l) => <li key={l.name}>…</li>)}</Ticker>
+ * ```
+ */
+export const Ticker = React.forwardRef(function Ticker({ duration = 40, direction = "start", as: Group = "div", gap, fade = true, controls = true, pauseLabel = "Pause animation", groupClassName, className, style, children, "aria-label": ariaLabel, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, "data-direction": direction, "data-fade": fade ? "" : undefined, className: cn("vm-marquee", className), style: { "--vm-marquee-duration": `${duration}s`, ...(gap ? { "--vm-marquee-gap": gap } : null), ...style }, ...props, children: [_jsx("div", { className: "vm-marquee-viewport", children: _jsxs("div", { className: "vm-marquee-track", children: [_jsx(Group, { className: cn("vm-marquee-group", groupClassName), "aria-label": ariaLabel, children: children }), _jsx(Group, { className: cn("vm-marquee-group", groupClassName), "aria-hidden": "true", inert: true, "data-marquee-copy": "", children: children })] }) }), controls ? (_jsxs("label", { className: "vm-marquee-toggle", children: [_jsx("input", { type: "checkbox", className: "vm-marquee-pause sr-only", "aria-label": pauseLabel }), _jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", className: "vm-marquee-icon-pause", children: [_jsx("rect", { x: "4", y: "3", width: "2.5", height: "10", rx: "0.5" }), _jsx("rect", { x: "9.5", y: "3", width: "2.5", height: "10", rx: "0.5" })] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", className: "vm-marquee-icon-play", children: _jsx("path", { d: "M5 3.2v9.6a.5.5 0 0 0 .77.42l7.2-4.8a.5.5 0 0 0 0-.84l-7.2-4.8A.5.5 0 0 0 5 3.2Z" }) })] })) : null] }));
+});

package/dist/sortable/sortable-tree.d.ts

@@ -83,6 +83,10 @@ export interface SortableTreeProps<N extends SortableTreeNode> {
     moveMenu?: boolean;
     /** Shown when `nodes` is empty. */
     empty?: React.ReactNode;
+    /** Id of the selected row (`aria-selected`). Only used together with `onSelect`. */
+    selected?: string | null;
+    /** Click or Enter on a row selects it (Space still picks it up for a keyboard move). */
+    onSelect?: (node: N) => void;
     labels?: Partial<SortableTreeLabels>;
     "aria-label"?: string;
     "aria-labelledby"?: string;

package/dist/sortable/sortable-tree.js

@@ -110,7 +110,7 @@ const allParents = (nodes) => {
  * ```
  */
 export function SortableTree(props) {
-    const { nodes: nodesProp, onMove, getLabel = defaultLabel, maxDepth, canDrop, disabled, expanded: expandedProp, defaultExpanded, onExpandedChange, indent = 24, guides = true, size = "md", renderItem, renderActions, moveMenu = true, empty, labels, className, ...aria } = props;
+    const { nodes: nodesProp, onMove, getLabel = defaultLabel, maxDepth, canDrop, disabled, expanded: expandedProp, defaultExpanded, onExpandedChange, indent = 24, guides = true, size = "md", renderItem, renderActions, moveMenu = true, empty, selected, onSelect, labels, className, ...aria } = props;
     const t = useLabels("sortableTree", sortableTreeLabels, labels);
     const { dir } = useLocale();
     const reducedMotion = useReducedMotion();
@@ -325,6 +325,11 @@ export function SortableTree(props) {
                 announce(t("invalid", { item: labelOf(f.id), reason: op.ok }));
             return;
         }
+        if (e.key === "Enter" && onSelect && !e.altKey && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            onSelect(f.node);
+            return;
+        }
         if ((e.shiftKey && e.key === "F10") || e.key === "ContextMenu") {
             e.preventDefault();
             setMenuId(f.id);
@@ -388,7 +393,7 @@ export function SortableTree(props) {
                         const me = info.get(f.id);
                         const isActive = f.id === activeId;
                         const depth = isActive && projection ? projection.depth : f.depth;
-                        return (_jsx(TreeRow, { item: f, depth: depth, info: me, t: t, label: labelOf(f.id), expanded: openSet.has(f.id), onToggle: () => setOpen(f.id, !openSet.has(f.id)), tabbable: tabId === f.id, onFocus: () => setFocusedId(f.id), onKeyDown: onRowKeyDown, rowRef: (el) => {
+                        return (_jsx(TreeRow, { item: f, depth: depth, info: me, t: t, label: labelOf(f.id), expanded: openSet.has(f.id), onToggle: () => setOpen(f.id, !openSet.has(f.id)), tabbable: tabId === f.id, onFocus: () => setFocusedId(f.id), onKeyDown: onRowKeyDown, selected: onSelect ? selected === f.id : undefined, onSelect: onSelect ? () => onSelect(f.node) : undefined, rowRef: (el) => {
                                 if (el)
                                     rowRefs.current.set(f.id, el);
                                 else
@@ -434,10 +439,17 @@ function TreeRow(p) {
             s.setNodeRef(el);
             s.setActivatorNodeRef(el);
             p.rowRef(el);
-        }, role: "treeitem", "aria-level": item.depth + 1, "aria-setsize": info.siblings, "aria-posinset": info.index + 1, "aria-expanded": hasKids ? expanded : undefined, "aria-labelledby": labelId, "aria-disabled": disabled || undefined, tabIndex: tabbable ? 0 : -1, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight Shift+F10", ...attrs, ...(disabled ? {} : pointerListeners), onKeyDown: (e) => p.onKeyDown(e, item, disabled ? undefined : dndKeyDown), onFocus: (e) => {
+        }, role: "treeitem", "aria-level": item.depth + 1, "aria-setsize": info.siblings, "aria-posinset": info.index + 1, "aria-expanded": hasKids ? expanded : undefined, "aria-labelledby": labelId, "aria-disabled": disabled || undefined, "aria-selected": p.selected, tabIndex: tabbable ? 0 : -1, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight Shift+F10", ...attrs, ...(disabled ? {} : pointerListeners), onKeyDown: (e) => p.onKeyDown(e, item, disabled ? undefined : dndKeyDown), onFocus: (e) => {
             if (e.target === e.currentTarget)
                 p.onFocus();
-        }, "data-slot": "sortable-tree-item", "data-depth": depth, "data-dragging": s.isDragging ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, style: { transform: CSS.Translate.toString(s.transform), transition: reducedMotion ? undefined : s.transition, paddingInlineStart: depth * indent, "--depth-px": `${depth * indent}px` }, className: cn("vui-tree-row group/row relative flex min-w-0 items-center gap-1 rounded-ui-sm pe-1 text-fg outline-none", "transition-colors hover:bg-hover focus-visible:bg-hover focus-visible:shadow-[inset_0_0_0_2px_var(--ring)]", size === "sm" ? "h-8 text-[13px]" : "h-9 text-sm", !disabled && "cursor-grab active:cursor-grabbing"), children: [guides && !s.isDragging
+        }, onClick: p.onSelect
+            ? (e) => {
+                // The expand toggle, row actions and the Move menu keep their own click.
+                if (e.target.closest('button, a, input, [data-slot="sortable-tree-toggle"]'))
+                    return;
+                p.onSelect?.();
+            }
+            : undefined, "data-slot": "sortable-tree-item", "data-selected": p.selected ? "" : undefined, "data-depth": depth, "data-dragging": s.isDragging ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, style: { transform: CSS.Translate.toString(s.transform), transition: reducedMotion ? undefined : s.transition, paddingInlineStart: depth * indent, "--depth-px": `${depth * indent}px` }, className: cn("vui-tree-row group/row relative flex min-w-0 items-center gap-1 rounded-ui-sm pe-1 text-fg outline-none", "transition-colors hover:bg-hover focus-visible:bg-hover focus-visible:shadow-[inset_0_0_0_2px_var(--ring)]", size === "sm" ? "h-8 text-[13px]" : "h-9 text-sm", !disabled && "cursor-grab active:cursor-grabbing"), children: [guides && !s.isDragging
                 ? Array.from({ length: depth }, (_, l) => (_jsx("span", { "aria-hidden": true, "data-slot": "sortable-tree-guide", className: "pointer-events-none absolute inset-y-0 w-px bg-line", style: { insetInlineStart: l * indent + 12 } }, l)))
                 : null, s.isDragging ? _jsx("span", { "aria-hidden": true, "data-slot": "sortable-tree-indicator", className: "vui-tree-indicator" }) : null, _jsx("span", { className: "inline-flex size-6 shrink-0 items-center justify-center", children: hasKids ? (_jsx("span", { "aria-hidden": true, "data-slot": "sortable-tree-toggle", onClick: onToggle, onMouseDown: (e) => e.stopPropagation(), title: expanded ? t("collapse") : t("expand"), className: "inline-flex size-6 cursor-pointer items-center justify-center rounded-ui-sm text-fg-subtle hover:bg-hover hover:text-fg", children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform motion-reduce:transition-none rtl:-scale-x-100", expanded && "rotate-90 rtl:rotate-90") }) })) : null }), disabled ? (_jsx("span", { "aria-hidden": true, className: "w-4 shrink-0" })) : (_jsx(GripVertical, { "aria-hidden": true, className: "size-4 shrink-0 text-fg-subtle opacity-50 transition-opacity group-hover/row:opacity-100 group-focus-visible/row:opacity-100" })), _jsx("span", { id: labelId, className: "flex min-w-0 flex-1 items-center gap-2 ps-1", children: p.renderItem ? p.renderItem(item.node, { depth, isDragging: s.isDragging, overlay: false, expanded, childCount }) : _jsx("span", { className: "truncate", children: label }) }), p.actions, p.menu] }));
 }

package/dist/styles/blocks.css

@@ -259,7 +259,7 @@
   }
   [data-density="compact"] .vb-navbar,
   .vb-navbar[data-density="compact"] { --vb-nav-h: 3.75rem; }
-  [data-material="glass"] .vb-navbar { --vb-nav-fill: color-mix(in oklch, var(--scene) 72%, transparent); }
+  [data-material="glass"] .vb-navbar { --vb-nav-fill: color-mix(in oklch, var(--scene) 90%, transparent); }
   .vb-navbar[data-variant="rail"],
   .vb-navbar[data-variant="minimal"] { border-block-end-color: transparent; }
   .vb-navbar-row { min-height: var(--vb-nav-h); }
@@ -540,8 +540,8 @@
   }
   .vb-navbar[data-sticky]:not([data-overlay]) { background-color: var(--scene); }
   [data-material="glass"] .vb-navbar[data-sticky] {
-    -webkit-backdrop-filter: blur(var(--blur, 0px)) saturate(160%);
-    backdrop-filter: blur(var(--blur, 0px)) saturate(160%);
+    -webkit-backdrop-filter: blur(max(var(--blur, 0px), 14px)) saturate(160%);
+    backdrop-filter: blur(max(var(--blur, 0px), 14px)) saturate(160%);
   }
 }
 @supports not (animation-timeline: scroll()) {