@vamos-ui/react 0.3.0 → 0.4.0

package/dist/charts/utils.js

@@ -188,6 +188,52 @@ export function alignZeroDomains(a, b) {
     };
     return [fit(aLo, aHi), fit(bLo, bHi)];
 }
+/**
+ * Two value axes (Combo) with nice, evenly spaced ticks whose zero lines meet: both axes get the
+ * same number of steps below and above zero, each with its own nice step (1, 2, 2.5, 5… × 10ⁿ), so
+ * one set of grid lines serves both scales. An axis whose data never goes below zero keeps only its
+ * non-negative ticks (its domain still reaches below zero to line up with the other axis).
+ */
+export function alignedAxes(a, b) {
+    const norm = ([lo, hi]) => [Math.min(0, Number.isFinite(lo) ? lo : 0), Math.max(0, Number.isFinite(hi) ? hi : 0)];
+    const axes = [norm(a), norm(b)];
+    const round = (v) => Number(v.toPrecision(12));
+    const build = (neg, pos, steps) => axes.map(([lo], i) => {
+        const step = steps[i];
+        const all = Array.from({ length: neg + pos + 1 }, (_, k) => round((k - neg) * step));
+        return { domain: [round(-neg * step), round(pos * step)], ticks: lo < 0 ? all : all.filter((v) => v >= 0) };
+    });
+    const anyNeg = axes.some(([lo]) => lo < 0);
+    const anyPos = axes.some(([, hi]) => hi > 0);
+    if (!anyNeg) {
+        // Non-negative data: four equal steps on both axes.
+        const steps = axes.map(([, hi]) => niceStep(hi / 4) || 0.25);
+        const [x, y] = build(0, 4, steps);
+        return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+    }
+    let best = null;
+    for (const total of [4, 5, 6]) {
+        for (let neg = 1; neg <= total; neg++) {
+            const pos = total - neg;
+            if (anyPos && pos === 0)
+                continue;
+            const steps = axes.map(([lo, hi]) => {
+                const need = Math.max(neg ? -lo / neg : 0, pos ? hi / pos : hi > 0 ? Infinity : 0);
+                return Number.isFinite(need) ? niceStep(need) || 1 : Infinity;
+            });
+            if (!steps.every(Number.isFinite))
+                continue;
+            // Share of each axis left empty, plus a small cost per extra step.
+            const waste = axes.reduce((sum, [lo, hi], i) => sum + 1 - (hi - lo) / (steps[i] * total || 1), 0);
+            const score = waste + (total - 4) * 0.06;
+            if (!best || score < best.score - 1e-9)
+                best = { score, neg, pos, steps };
+        }
+    }
+    const { neg, pos, steps } = best;
+    const [x, y] = build(neg, pos, steps);
+    return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+}
 /** Min / max / average of one series (nulls skipped). `null` when the series has no numbers. */
 export function seriesStats(rows, key) {
     let min = Infinity;

package/dist/components/activity-timeline.js

@@ -30,11 +30,11 @@ const indicatorVariants = cva("relative z-[1] grid size-(--tl-ind) shrink-0 plac
     variants: {
         tone: {
             neutral: "border-line bg-[color-mix(in_oklch,var(--surface)_90%,var(--scene))]",
-            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
+            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
         },
     },
     defaultVariants: { tone: "neutral" },

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/** `"16/9"`, `"4/3"`, `"1/1"`… or a number (`1.5`). */
+export type AspectRatioValue = `${number}/${number}` | number;
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export declare function parseAspectRatio(ratio: AspectRatioValue | string | undefined): number | undefined;
+export declare const aspectRatioVariants: (props?: ({
+    rounded?: "ui" | "ui-lg" | "full" | "none" | null | undefined;
+    fit?: "fill" | "contain" | "cover" | null | undefined;
+    tone?: "inset" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof aspectRatioVariants> {
+    /** Width ÷ height. `"16/9"` (default), `"4/3"`, `"1/1"`, `"21/9"` or a number. */
+    ratio?: AspectRatioValue;
+}
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export function parseAspectRatio(ratio) {
+    if (typeof ratio === "number")
+        return Number.isFinite(ratio) && ratio > 0 ? ratio : undefined;
+    if (!ratio)
+        return undefined;
+    const [w, h] = ratio.split(/[/:]/).map((s) => Number(s.trim()));
+    if (w && h && w > 0 && h > 0)
+        return w / h;
+    const n = Number(ratio);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+export const aspectRatioVariants = cva("relative isolate block w-full overflow-hidden", {
+    variants: {
+        rounded: { none: "", ui: "rounded-ui", "ui-lg": "rounded-ui-lg", full: "rounded-full" },
+        /** How a direct `img` / `video` child fills the box. */
+        fit: { cover: "[&>img]:object-cover [&>video]:object-cover", contain: "[&>img]:object-contain [&>video]:object-contain", fill: "[&>img]:object-fill [&>video]:object-fill" },
+        /** `inset`: a `surface-2` backdrop (letterboxing for `contain`, a frame while an iframe loads). */
+        tone: { none: "", inset: "bg-surface-2" },
+    },
+    defaultVariants: { rounded: "none", fit: "cover", tone: "none" },
+});
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export const AspectRatio = React.forwardRef(function AspectRatio({ ratio = "16/9", rounded, fit, tone, className, style, children, ...props }, ref) {
+    const value = parseAspectRatio(ratio) ?? 16 / 9;
+    return (_jsx("div", { ref: ref, "data-slot": "aspect-ratio", className: cn(aspectRatioVariants({ rounded, fit, tone }), 
+        // The child fills the box; iframes lose their default border.
+        "[&>*]:absolute [&>*]:inset-0 [&>*]:size-full [&>iframe]:border-0", className), style: { aspectRatio: String(value), ...style }, ...props, children: children }));
+});

package/dist/components/carousel.d.ts

@@ -19,6 +19,7 @@ declare const carouselLabels: {
     thumbs: string;
     empty: string;
     loading: string;
+    marqueePause: string;
 };
 export type CarouselLabels = typeof carouselLabels;
 export type CarouselPreset = "default" | "gallery" | "hero" | "strip";
@@ -161,10 +162,18 @@ export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Fade the edges. Default `true`. */
     fade?: boolean;
     gap?: "sm" | "md" | "lg";
+    /**
+     * A small pause control (a native checkbox, works without JavaScript). Moving content that runs
+     * longer than five seconds needs one (WCAG 2.2.2). Default `true`.
+     */
+    controls?: boolean;
+    /** Accessible name of the pause control. Default "Pause scrolling" (dictionary `carousel.marqueePause`). */
+    pauseLabel?: string;
 }
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
+export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, controls, pauseLabel, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
 export {};

package/dist/components/carousel.js

@@ -27,6 +27,7 @@ const carouselLabels = {
     thumbs: "Slide thumbnails",
     empty: "Nothing to show yet",
     loading: "Loading slides",
+    marqueePause: "Pause scrolling",
 };
 const CarouselContext = React.createContext(null);
 function useCarouselContext(part) {
@@ -338,11 +339,13 @@ export const CarouselCounter = React.forwardRef(function CarouselCounter({ class
     return (_jsxs("span", { ref: ref, "data-slot": "carousel-counter", className: cn("tabular text-[13px] text-fg-muted", className), ...props, children: [_jsx("span", { className: "sr-only", children: c.t("counter", { index: c.nf.format(c.index + 1), total: c.nf.format(c.count) }) }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: c.nf.format(c.index + 1) }), _jsx("span", { className: "mx-1 text-fg-subtle", children: "/" }), c.nf.format(c.count)] })] }));
 });
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", className, style, children, ...props }) {
+export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", controls = true, pauseLabel, className, style, children, ...props }) {
+    const t = useLabels("carousel", carouselLabels, pauseLabel ? { marqueePause: pauseLabel } : undefined);
     const items = React.Children.toArray(children);
-    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
-    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, className: cn("vui-marquee flex overflow-hidden", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [track(false), track(true)] }));
+    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, inert: hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
+    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, "data-controls": controls ? "" : undefined, className: cn("vui-marquee relative", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [_jsxs("div", { className: "vui-marquee-viewport flex overflow-hidden", children: [track(false), track(true)] }), controls ? (_jsxs("label", { className: "vui-marquee-toggle", children: [_jsx("input", { type: "checkbox", className: "vui-marquee-pause sr-only", "aria-label": t("marqueePause") }), _jsx(Pause, { "aria-hidden": true, className: "vui-marquee-icon-pause" }), _jsx(Play, { "aria-hidden": true, className: "vui-marquee-icon-play" })] })) : null] }));
 }

package/dist/components/collapsible.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> {
+}
+/**
+ * One show/hide region with its trigger (WAI-ARIA disclosure). Controlled (`open` / `onOpenChange`)
+ * or uncontrolled (`defaultOpen`). For several sections that coordinate, use Accordion.
+ *
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
+ *   <CollapsibleContent>…</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> {
+    /** Trailing chevron that turns when open. Default `true` (ignored with `asChild`). */
+    chevron?: boolean;
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Right-side summary while closed, e.g. "4 fields". Part of the button's name. */
+    meta?: React.ReactNode;
+}
+/**
+ * The toggle button (`aria-expanded`, `aria-controls`). Styled as a quiet full-width row; pass
+ * `asChild` to make any button (a Button, a link-styled text) the trigger instead.
+ */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> {
+}
+/**
+ * The hidden region. Animates its height (`ui-collapse`); no animation with
+ * `prefers-reduced-motion` or inside `data-motion="off"`. `forceMount` keeps it in the DOM while closed.
+ */
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+/**
+ * One show/hide region with its trigger (WAI-ARIA disclosure). Controlled (`open` / `onOpenChange`)
+ * or uncontrolled (`defaultOpen`). For several sections that coordinate, use Accordion.
+ *
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
+ *   <CollapsibleContent>…</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export const Collapsible = React.forwardRef(function Collapsible({ className, ...props }, ref) {
+    return _jsx(CollapsiblePrimitive.Root, { ref: ref, "data-slot": "collapsible", className: cn("group/collapsible", className), ...props });
+});
+/**
+ * The toggle button (`aria-expanded`, `aria-controls`). Styled as a quiet full-width row; pass
+ * `asChild` to make any button (a Button, a link-styled text) the trigger instead.
+ */
+export const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger({ className, chevron = true, icon, meta, asChild, children, ...props }, ref) {
+    if (asChild) {
+        return (_jsx(CollapsiblePrimitive.Trigger, { ref: ref, "data-slot": "collapsible-trigger", asChild: true, className: className, ...props, children: children }));
+    }
+    return (_jsxs(CollapsiblePrimitive.Trigger, { ref: ref, "data-slot": "collapsible-trigger", className: cn("group/collapsible-trigger flex w-full min-w-0 items-center gap-2.5 rounded-ui-sm py-2 text-start text-sm font-medium text-fg outline-none transition-colors focus-ring", "hover:[&_[data-slot=collapsible-title]]:underline hover:[&_[data-slot=collapsible-title]]:decoration-line hover:[&_[data-slot=collapsible-title]]:underline-offset-4", "disabled:cursor-not-allowed disabled:opacity-45", "[&_svg]:size-4 [&_svg]:shrink-0", className), ...props, children: [icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 text-fg-muted", children: icon })) : null, _jsx("span", { "data-slot": "collapsible-title", className: "min-w-0 flex-1 text-pretty", children: children }), meta ? _jsx("span", { className: "sr-only", children: ", " }) : null, meta ? (_jsx("span", { "data-slot": "collapsible-meta", className: "tabular shrink-0 truncate text-[13px] font-normal text-fg-subtle", children: meta })) : null, chevron ? (_jsx(ChevronDown, { "aria-hidden": true, className: "text-fg-subtle transition-transform duration-200 group-data-[state=open]/collapsible-trigger:rotate-180 motion-reduce:transition-none in-data-[motion=off]:transition-none" })) : null] }));
+});
+/**
+ * The hidden region. Animates its height (`ui-collapse`); no animation with
+ * `prefers-reduced-motion` or inside `data-motion="off"`. `forceMount` keeps it in the DOM while closed.
+ */
+export const CollapsibleContent = React.forwardRef(function CollapsibleContent({ className, ...props }, ref) {
+    return _jsx(CollapsiblePrimitive.Content, { ref: ref, "data-slot": "collapsible-content", className: cn("ui-collapse in-data-[motion=off]:animate-none", className), ...props });
+});

package/dist/components/image.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { CropRect, ImageLoader, MediaAsset } from "../media/types.js";
+import { type PlaceholderArtPattern } from "./placeholder-art.js";
 export type ImageAspect = "auto" | "1/1" | "4/3" | "3/2" | "16/9" | "21/9" | "4/5" | "1.91/1" | number;
 /** Default `srcset` steps. */
 export declare const IMAGE_WIDTHS: number[];
@@ -57,7 +58,7 @@ declare const imageLabels: {
     error: string;
 };
 export type ImageLabels = typeof imageLabels;
-export type ImagePlaceholder = "blur" | "color" | "skeleton" | "none";
+export type ImagePlaceholder = "blur" | "color" | "skeleton" | "art" | "none";
 export interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "placeholder" | "width" | "height" | "alt">, Omit<VariantProps<typeof imageVariants>, "fit"> {
     width?: number;
     height?: number;
@@ -77,8 +78,20 @@ export interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageEl
     quality?: number;
     /** Above the fold: eager loading + `fetchpriority="high"`. */
     priority?: boolean;
-    /** While loading. Default: `blur` with a blur source, `color` with a dominant colour, else `skeleton`. */
+    /**
+     * While loading. Default: `blur` with a blur source, `color` with a dominant colour, else `skeleton`.
+     * `art` shows a seeded token pattern (PlaceholderArt) while loading and on error. Without a `src`
+     * the image always renders as art.
+     */
     placeholder?: ImagePlaceholder;
+    /** Seed for the art placeholder. Default: `alt`, then the URL. Same seed → same pattern. */
+    seed?: string;
+    /** Force the art pattern. Default `"auto"` (from the seed). */
+    placeholderPattern?: PlaceholderArtPattern | "auto";
+    /** Glyph in the art placeholder. `false` hides it. */
+    placeholderIcon?: React.ReactNode | false;
+    /** Print `alt` (or this node) as a small caption on the art placeholder. */
+    placeholderCaption?: boolean | React.ReactNode;
     /** Tiny blurred preview (LQIP data URL or a small URL). Defaults to `asset.placeholder`. */
     blurDataURL?: string;
     /** Placeholder colour. Defaults to `asset.dominantColor`. */
@@ -103,6 +116,9 @@ export type ImageProps = ImageBaseProps & ({
 } | {
     src: MediaAsset;
     alt?: string;
+} | {
+    src?: null | "";
+    alt: string;
 });
 /**
  * The image primitive: no layout shift (width/height + `aspect-ratio`), focal point →

package/dist/components/image.js

@@ -9,6 +9,7 @@ import { DefaultImage, useImage, useMediaAdapter } from "../lib/provider.js";
 import { useComposedRefs } from "../lib/compose-refs.js";
 import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
 import { Spinner } from "./spinner.js";
+import { PlaceholderArt } from "./placeholder-art.js";
 /** Default `srcset` steps. */
 export const IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
 /** `"16/9"` → 1.777…, `1.5` → 1.5, `"auto"` → the intrinsic ratio (or `undefined`). */
@@ -107,9 +108,10 @@ const FILENAME_ALT = /(^(img|dsc|pxl|screenshot)[-_ ]?\d+)|\.(jpe?g|png|gif|webp
  * <Image src={asset} alt="Lobby of the Kadıköy office" aspect="16/9" sizes="(min-width: 1024px) 50vw, 100vw" rounded="ui" />
  * ```
  */
-export const Image = React.forwardRef(function Image({ src: source, alt: altProp, width: widthProp, height: heightProp, aspect = "auto", fit = "cover", focal: focalProp, crop, sizes, widths, quality, priority, placeholder: placeholderProp, blurDataURL, color: colorProp, loader, fallback, processing: processingProp, rounded, frame, className, imgClassName, style, labels, onLoad, onError, loading, decoding, ...props }, forwardedRef) {
+export const Image = React.forwardRef(function Image({ src: source, alt: altProp, width: widthProp, height: heightProp, aspect = "auto", fit = "cover", focal: focalProp, crop, sizes, widths, quality, priority, placeholder: placeholderProp, blurDataURL, seed, placeholderPattern, placeholderIcon, placeholderCaption, color: colorProp, loader, fallback, processing: processingProp, rounded, frame, className, imgClassName, style, labels, onLoad, onError, loading, decoding, ...props }, forwardedRef) {
     const t = useLabels("image", imageLabels, labels);
     const Bridge = useImage();
+    const empty = !source || (typeof source === "string" && !source.trim());
     const asset = isAsset(source) ? source : undefined;
     const alt = altProp ?? asset?.alt ?? "";
     const width = widthProp ?? asset?.width;
@@ -118,9 +120,10 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
     const blur = blurDataURL ?? asset?.placeholder;
     const color = colorProp ?? asset?.dominantColor;
     const processing = processingProp ?? asset?.status === "processing";
-    const placeholder = placeholderProp ?? (blur ? "blur" : color ? "color" : "skeleton");
-    const ratio = aspectRatioOf(aspect, width, height);
-    const sources = useImageSources(source, { sizes, widths, loader, quality, focal, crop });
+    const placeholder = empty ? "art" : placeholderProp ?? (blur ? "blur" : color ? "color" : "skeleton");
+    // An empty image has no intrinsic size: fall back to 4:3 so it never collapses.
+    const ratio = aspectRatioOf(aspect, width, height) ?? (empty ? 4 / 3 : undefined);
+    const sources = useImageSources(source || "", { sizes, widths, loader, quality, focal, crop });
     const [state, setState] = React.useState("loading");
     const imgRef = React.useRef(null);
     const ref = useComposedRefs(forwardedRef, imgRef);
@@ -138,6 +141,10 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
     if (process.env.NODE_ENV !== "production" && alt && FILENAME_ALT.test(alt.trim())) {
         console.warn(`Image: alt text "${alt}" looks like a file name. Describe the image instead, or pass alt="" if it is decorative.`);
     }
+    const art = (decorative) => (_jsx(PlaceholderArt, { "data-slot": "image-art", seed: seed ?? (alt || (typeof source === "string" ? source : asset?.id) || ""), pattern: placeholderPattern, icon: placeholderIcon, caption: placeholderCaption === true ? alt || undefined : placeholderCaption, label: decorative ? undefined : alt || undefined, className: "absolute inset-0" }));
+    if (empty) {
+        return (_jsx("span", { "data-slot": "image", "data-state": "empty", "data-placeholder": "art", className: cn(imageVariants({ rounded, frame }), "bg-transparent", className), style: { aspectRatio: String(ratio), ...style }, children: art(false) }));
+    }
     const objectPosition = focalToObjectPosition(focal);
     const positioned = ratio !== undefined;
     const imgClasses = cn("vui-image-img block", positioned ? "absolute inset-0 size-full" : "h-auto w-full", fit === "contain" ? "object-contain" : "object-cover", imgClassName);
@@ -156,7 +163,7 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
             ...(positioned ? { aspectRatio: String(ratio) } : null),
             ...(placeholder === "color" && color ? { backgroundColor: color } : null),
             ...style,
-        }, children: [placeholder === "blur" && blur && state !== "error" ? (_jsx("img", { "aria-hidden": true, alt: "", src: blur, "data-slot": "image-blur", className: "vui-image-blur pointer-events-none absolute inset-0 size-full object-cover", style: imgStyle })) : null, placeholder === "skeleton" && state === "loading" ? _jsx("span", { "aria-hidden": true, "data-slot": "image-skeleton", className: "ui-shimmer absolute inset-0" }) : null, state === "error" ? (fallback ? (_jsx("span", { "data-slot": "image-fallback", className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center"), children: fallback })) : (_jsx("span", { "data-slot": "image-fallback", ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), title: t("error"), className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center text-fg-subtle [&_svg]:size-6"), children: _jsx(ImageOff, { "aria-hidden": true, strokeWidth: 1.5 }) }))) : (img), processing ? (_jsxs("span", { "data-slot": "image-processing", className: "surface-popover absolute start-2 top-2 z-10 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx(Spinner, { size: "xs", tone: "accent" }), t("processing")] })) : null] }));
+        }, children: [placeholder === "blur" && blur && state !== "error" ? (_jsx("img", { "aria-hidden": true, alt: "", src: blur, "data-slot": "image-blur", className: "vui-image-blur pointer-events-none absolute inset-0 size-full object-cover", style: imgStyle })) : null, placeholder === "skeleton" && state === "loading" ? _jsx("span", { "aria-hidden": true, "data-slot": "image-skeleton", className: "ui-shimmer absolute inset-0" }) : null, placeholder === "art" && state === "loading" ? art(true) : null, state === "error" ? (placeholder === "art" && !fallback ? (_jsx("span", { "data-slot": "image-fallback", title: t("error"), className: cn(positioned ? "absolute inset-0" : "relative block min-h-24"), children: art(false) })) : fallback ? (_jsx("span", { "data-slot": "image-fallback", className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center"), children: fallback })) : (_jsx("span", { "data-slot": "image-fallback", ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), title: t("error"), className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center text-fg-subtle [&_svg]:size-6"), children: _jsx(ImageOff, { "aria-hidden": true, strokeWidth: 1.5 }) }))) : (img), processing ? (_jsxs("span", { "data-slot": "image-processing", className: "surface-popover absolute start-2 top-2 z-10 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx(Spinner, { size: "xs", tone: "accent" }), t("processing")] })) : null] }));
 });
 /** `<figure>` for a captioned image (blocks, galleries, articles). */
 export const Figure = React.forwardRef(function Figure({ gap = "sm", className, ...props }, ref) {

package/dist/components/menubar.d.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+import type { MenuEntry } from "../lib/variants.js";
+export declare const menubarVariants: (props?: ({
+    variant?: "ghost" | "bar" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** One top-level menu in the data-driven form. */
+export interface MenubarMenuEntry {
+    id: string;
+    /** Trigger text ("File", "Edit", "View"…). */
+    label: React.ReactNode;
+    /** The menu's entries — the same `MenuEntry` model as Dropdown Menu, Context Menu and Command. */
+    items: MenuEntry[];
+    disabled?: boolean;
+    /** Hidden unless `can(permission)` is true (see `useCan`). */
+    permission?: string;
+}
+export interface MenubarProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>, VariantProps<typeof menubarVariants> {
+    /** Data-driven menus. Rendered before `children`. */
+    menus?: MenubarMenuEntry[];
+    /** Minimum panel width of every menu: `sm` 180px, `md` 220px. Default `md`. */
+    size?: "sm" | "md";
+}
+/**
+ * A desktop-app menu bar (WAI-ARIA `menubar`): File / Edit / View… One tab stop; ← → move between
+ * menus (and keep the open one open), ↓ / Enter / Space open, Esc closes, typeahead inside a menu.
+ *
+ * ```tsx
+ * <Menubar aria-label="Editor" menus={[
+ *   { id: "file", label: "File", items: [{ id: "new", label: "New document", shortcut: "mod+n", onSelect: create }] },
+ * ]} />
+ * ```
+ */
+export declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;
+/** One menu: a `MenubarTrigger` plus its `MenubarContent`. `value` is needed only for a controlled bar. */
+export declare const MenubarMenu: typeof MenubarPrimitive.Menu;
+export declare const MenubarGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarSub: React.FC<MenubarPrimitive.MenubarSubProps>;
+export declare const MenubarRadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** The top-level button ("File"). */
+export declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface MenubarContentProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> {
+    /** Overrides the bar's `size` for this menu. */
+    size?: "sm" | "md";
+}
+/** A menu panel under its trigger. Portals into the nearest `ThemeScope`; only this first layer blurs in glass mode. */
+export declare const MenubarContent: React.ForwardRefExoticComponent<MenubarContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> {
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shortcut hint, e.g. `"mod+s"` (rendered with Kbd). Display only — bind it with `useHotkeys`. */
+    shortcut?: string | string[];
+    badge?: React.ReactNode;
+    tone?: "default" | "danger";
+    /** Reserve the indicator gutter so labels align with checkbox/radio items. */
+    inset?: boolean;
+}
+/** One command. `onSelect` fires on click, Enter and Space, then the menu closes (`event.preventDefault()` keeps it open). */
+export declare const MenubarItem: React.ForwardRefExoticComponent<MenubarItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** A toggle (`menuitemcheckbox`) — "Show ruler", "Word wrap". */
+export declare const MenubarCheckboxItem: React.ForwardRefExoticComponent<MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarRadioItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** One choice inside a `MenubarRadioGroup` (`menuitemradio`) — zoom level, sort order. */
+export declare const MenubarRadioItem: React.ForwardRefExoticComponent<MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarLabel: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Trailing text hint (when you don't want keycaps). */
+export declare function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> {
+    icon?: React.ReactNode;
+    inset?: boolean;
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export declare const MenubarSubTrigger: React.ForwardRefExoticComponent<MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+/** A submenu panel. One layer deeper, so it is opaque in glass mode. */
+export declare const MenubarSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "sm" | "md";
+} & React.RefAttributes<HTMLDivElement>>;
+/** Renders `MenuEntry[]` as menubar items (inside your own `MenubarContent`). */
+export declare function MenubarEntries({ items }: {
+    items: MenuEntry[];
+}): React.JSX.Element;
+/** Renders `MenubarMenuEntry[]` (what `Menubar menus` uses). Menus with no visible entries are dropped. */
+export declare function MenubarMenus({ menus }: {
+    menus: MenubarMenuEntry[];
+}): React.JSX.Element;

package/dist/components/menubar.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { useCan } from "../lib/provider.js";
+import { MenuCheckIcon, MenuEntries, MenuItemContent, MenuRadioDot, MenuSizeContext, menuContentVariants, menuIndicatorClass, menuItemClass, menuLabelClass, menuSeparatorClass, useVisibleEntries, } from "../lib/menu.js";
+/* ------------------------------------------------------------------ */
+/* Bar                                                                 */
+/* ------------------------------------------------------------------ */
+export const menubarVariants = cva("flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none]", {
+    variants: {
+        variant: {
+            /** A hairline surface strip — the top of an editor or a desktop-style app window. */
+            bar: "surface rounded-ui-lg p-1",
+            /** No chrome: sits inside a Top bar, toolbar or window header. */
+            ghost: "",
+        },
+    },
+    defaultVariants: { variant: "bar" },
+});
+/**
+ * A desktop-app menu bar (WAI-ARIA `menubar`): File / Edit / View… One tab stop; ← → move between
+ * menus (and keep the open one open), ↓ / Enter / Space open, Esc closes, typeahead inside a menu.
+ *
+ * ```tsx
+ * <Menubar aria-label="Editor" menus={[
+ *   { id: "file", label: "File", items: [{ id: "new", label: "New document", shortcut: "mod+n", onSelect: create }] },
+ * ]} />
+ * ```
+ */
+export const Menubar = React.forwardRef(function Menubar({ className, variant, menus, size = "md", children, loop = true, ...props }, ref) {
+    return (_jsx(MenuSizeContext.Provider, { value: size, children: _jsxs(MenubarPrimitive.Root, { ref: ref, "data-slot": "menubar", "data-variant": variant ?? "bar", loop: loop, className: cn(menubarVariants({ variant }), className), ...props, children: [menus ? _jsx(MenubarMenus, { menus: menus }) : null, children] }) }));
+});
+/** One menu: a `MenubarTrigger` plus its `MenubarContent`. `value` is needed only for a controlled bar. */
+export const MenubarMenu = MenubarPrimitive.Menu;
+export const MenubarGroup = MenubarPrimitive.Group;
+export const MenubarSub = MenubarPrimitive.Sub;
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+/** The top-level button ("File"). */
+export const MenubarTrigger = React.forwardRef(function MenubarTrigger({ className, ...props }, ref) {
+    return (_jsx(MenubarPrimitive.Trigger, { ref: ref, "data-slot": "menubar-trigger", className: cn("inline-flex h-[calc(var(--control-h)-0.5rem)] shrink-0 cursor-default select-none items-center gap-1.5 rounded-ui-sm px-2.5 text-[13px] font-medium text-fg outline-none", "transition-colors duration-100 hover:bg-hover focus-visible:bg-hover focus-ring", "data-highlighted:bg-hover data-[state=open]:bg-selected", "disabled:pointer-events-none disabled:opacity-45 data-disabled:pointer-events-none data-disabled:opacity-45", "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-fg-muted", className), ...props }));
+});
+/** A menu panel under its trigger. Portals into the nearest `ThemeScope`; only this first layer blurs in glass mode. */
+export const MenubarContent = React.forwardRef(function MenubarContent({ className, size: sizeProp, sideOffset = 6, alignOffset = -4, collisionPadding = 12, align = "start", ...props }, ref) {
+    const container = usePortalContainer();
+    const barSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? barSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(MenuSizeContext.Provider, { value: size, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.Content, { ref: ref, "data-slot": "menubar-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, align: align, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin)", className), ...props }) }) }) }));
+});
+/** One command. `onSelect` fires on click, Enter and Space, then the menu closes (`event.preventDefault()` keeps it open). */
+export const MenubarItem = React.forwardRef(function MenubarItem({ className, icon, description, shortcut, badge, tone = "default", inset, asChild, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.Item, { ref: ref, "data-slot": "menubar-item", "data-tone": tone, asChild: asChild, className: menuItemClass({ size, tone, inset, className }), ...props, children: asChild ? (children) : (_jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, badge: badge, children: children })) }));
+});
+/** A toggle (`menuitemcheckbox`) — "Show ruler", "Word wrap". */
+export const MenubarCheckboxItem = React.forwardRef(function MenubarCheckboxItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, "data-slot": "menubar-checkbox-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuCheckIcon, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+/** One choice inside a `MenubarRadioGroup` (`menuitemradio`) — zoom level, sort order. */
+export const MenubarRadioItem = React.forwardRef(function MenubarRadioItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, "data-slot": "menubar-radio-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuRadioDot, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const MenubarLabel = React.forwardRef(function MenubarLabel({ className, inset, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Label, { ref: ref, "data-slot": "menubar-label", className: cn(menuLabelClass, inset && "ps-8", className), ...props });
+});
+export const MenubarSeparator = React.forwardRef(function MenubarSeparator({ className, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Separator, { ref: ref, "data-slot": "menubar-separator", className: cn(menuSeparatorClass, className), ...props });
+});
+/** Trailing text hint (when you don't want keycaps). */
+export function MenubarShortcut({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menubar-shortcut", className: cn("ms-auto ps-4 font-mono text-[11px] tracking-wide text-fg-subtle", className), ...props });
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export const MenubarSubTrigger = React.forwardRef(function MenubarSubTrigger({ className, icon, inset, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.SubTrigger, { ref: ref, "data-slot": "menubar-sub-trigger", className: menuItemClass({ size, inset, className: cn("data-[state=open]:bg-hover", className) }), ...props, children: _jsx(MenuItemContent, { icon: icon, chevron: true, children: children }) }));
+});
+/** A submenu panel. One layer deeper, so it is opaque in glass mode. */
+export const MenubarSubContent = React.forwardRef(function MenubarSubContent({ className, size: sizeProp, sideOffset = 4, alignOffset = -5, collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    const parentSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? parentSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.SubContent, { ref: ref, "data-slot": "menubar-sub-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height)", className), ...props }) }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Data-driven                                                         */
+/* ------------------------------------------------------------------ */
+const menubarParts = {
+    Item: MenubarItem,
+    CheckboxItem: MenubarCheckboxItem,
+    RadioGroup: MenubarRadioGroup,
+    RadioItem: MenubarRadioItem,
+    Label: MenubarLabel,
+    Separator: MenubarSeparator,
+    Group: MenubarGroup,
+    Sub: MenubarSub,
+    SubTrigger: MenubarSubTrigger,
+    SubContent: MenubarSubContent,
+};
+/** Renders `MenuEntry[]` as menubar items (inside your own `MenubarContent`). */
+export function MenubarEntries({ items }) {
+    const visible = useVisibleEntries(items);
+    return _jsx(MenuEntries, { entries: visible, parts: menubarParts });
+}
+function MenubarDataMenu({ menu }) {
+    const visible = useVisibleEntries(menu.items);
+    if (visible.length === 0)
+        return null;
+    return (_jsxs(MenubarMenu, { value: menu.id, children: [_jsx(MenubarTrigger, { disabled: menu.disabled, children: menu.label }), _jsx(MenubarContent, { children: _jsx(MenuEntries, { entries: visible, parts: menubarParts }) })] }));
+}
+/** Renders `MenubarMenuEntry[]` (what `Menubar menus` uses). Menus with no visible entries are dropped. */
+export function MenubarMenus({ menus }) {
+    const can = useCan();
+    return (_jsx(_Fragment, { children: menus
+            .filter((m) => !m.permission || can(m.permission))
+            .map((m) => (_jsx(MenubarDataMenu, { menu: m }, m.id))) }));
+}