@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/lib/labels.d.ts

@@ -0,0 +1,51 @@
+import { type ResolvedMessages } from "./locale.js";
+import type { MessagesInput } from "../locales/en.js";
+/** A flat map of label keys to English templates. */
+export type LabelValues = Record<string, string>;
+/** Per-instance label overrides (the `labels` prop of a component). */
+export type LabelsProp<T extends LabelValues> = Partial<T>;
+/**
+ * A label lookup: call it to get a formatted string, read `.labels` for the raw merged templates.
+ *
+ * ```ts
+ * t("remove", { label: "Design" }); // "Remove Design"
+ * t.labels.remove;                  // "Remove {label}"
+ * ```
+ */
+export interface LabelFn<T extends LabelValues> {
+    (key: keyof T & string, vars?: Record<string, unknown>): string;
+    readonly labels: T;
+    readonly locale: string;
+}
+/**
+ * Merges label sources. Precedence (highest first): per-instance `override` → dictionary
+ * `messages[namespace]` → English `defaults`. `undefined` overrides are ignored.
+ */
+export declare function resolveLabels<T extends LabelValues>(namespace: string, defaults: T, messages?: ResolvedMessages | MessagesInput, override?: Partial<T>): T;
+/**
+ * Server-friendly label lookup (no React context): for server components and `createBlocks({ labels })`.
+ *
+ * ```ts
+ * const t = createLabels("footer", { rights: "All rights reserved." }, { locale: "tr-TR", messages: tr });
+ * ```
+ */
+export declare function createLabels<T extends LabelValues>(namespace: string, defaults: T, options?: {
+    locale?: string;
+    messages?: ResolvedMessages | MessagesInput;
+    override?: Partial<T>;
+}): LabelFn<T>;
+/**
+ * Built-in strings for a component. Pass the component's English defaults (a module constant)
+ * and its `labels` prop; translations come from `LocaleProvider` messages under `namespace`.
+ *
+ * ```tsx
+ * const badgeLabels = { remove: "Remove {label}" };
+ * function Chip({ label, labels }: { label: string; labels?: Partial<typeof badgeLabels> }) {
+ *   const t = useLabels("badge", badgeLabels, labels);
+ *   return <button aria-label={t("remove", { label })}>…</button>;
+ * }
+ * ```
+ *
+ * Templates support `{name}` and `{count, plural, one {# item} other {# items}}` (Intl.PluralRules).
+ */
+export declare function useLabels<T extends LabelValues>(namespace: string, defaults: T, override?: Partial<T>): LabelFn<T>;

package/dist/lib/labels.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useLocale } from "./locale.js";
+import { formatMessage } from "./message-format.js";
+/**
+ * Merges label sources. Precedence (highest first): per-instance `override` → dictionary
+ * `messages[namespace]` → English `defaults`. `undefined` overrides are ignored.
+ */
+export function resolveLabels(namespace, defaults, messages, override) {
+    const dict = messages?.[namespace];
+    const out = { ...defaults };
+    if (dict)
+        for (const k in dict)
+            if (typeof dict[k] === "string")
+                out[k] = dict[k];
+    if (override)
+        for (const k in override)
+            if (typeof override[k] === "string")
+                out[k] = override[k];
+    return out;
+}
+/**
+ * Server-friendly label lookup (no React context): for server components and `createBlocks({ labels })`.
+ *
+ * ```ts
+ * const t = createLabels("footer", { rights: "All rights reserved." }, { locale: "tr-TR", messages: tr });
+ * ```
+ */
+export function createLabels(namespace, defaults, options = {}) {
+    const labels = resolveLabels(namespace, defaults, options.messages, options.override);
+    const locale = options.locale ?? "en-US";
+    const fn = ((key, vars) => formatMessage(labels[key] ?? String(key), vars, locale));
+    Object.defineProperties(fn, { labels: { value: labels }, locale: { value: locale } });
+    return fn;
+}
+/**
+ * Built-in strings for a component. Pass the component's English defaults (a module constant)
+ * and its `labels` prop; translations come from `LocaleProvider` messages under `namespace`.
+ *
+ * ```tsx
+ * const badgeLabels = { remove: "Remove {label}" };
+ * function Chip({ label, labels }: { label: string; labels?: Partial<typeof badgeLabels> }) {
+ *   const t = useLabels("badge", badgeLabels, labels);
+ *   return <button aria-label={t("remove", { label })}>…</button>;
+ * }
+ * ```
+ *
+ * Templates support `{name}` and `{count, plural, one {# item} other {# items}}` (Intl.PluralRules).
+ */
+export function useLabels(namespace, defaults, override) {
+    const { locale, messages } = useLocale();
+    // Overrides are usually inline objects; key them by content so the result stays stable.
+    const overrideKey = override ? JSON.stringify(override) : "";
+    return React.useMemo(() => createLabels(namespace, defaults, { locale, messages, override }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [namespace, defaults, locale, messages, overrideKey]);
+}

package/dist/lib/layer.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * Depth of the current floating layer: 0 = page, 1 = first overlay (dialog, popover, menu…),
+ * 2 = a popover inside that dialog, and so on. Travels through React context, so it survives portals.
+ */
+export declare function useLayerDepth(): number;
+/**
+ * Marks its subtree as one layer deeper. Use when you can't put `Layer` on the content element
+ * itself; read the depth with `useLayerDepth()` and set `data-layer-depth` yourself.
+ */
+export declare function LayerProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Attributes for a layer's content element at `depth`. */
+export declare function layerAttributes(depth: number): {
+    readonly "data-layer-depth": string;
+    readonly "data-layer-content": "";
+};
+export interface LayerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Merge onto the single child (e.g. `<Layer asChild><Popover.Content/></Layer>`). */
+    asChild?: boolean;
+}
+/**
+ * A floating layer's content root. Sets `data-layer-depth` and increments the depth for
+ * descendants. In glass mode only depth 1 blurs; deeper layers get `--blur: 0` and the more
+ * opaque `--popover-nested` (styles.css), keeping at most one overlay blur on screen.
+ *
+ * ```tsx
+ * <Popover.Portal container={usePortalContainer()}>
+ *   <Layer asChild>
+ *     <Popover.Content className="surface-popover ui-pop">…</Popover.Content>
+ *   </Layer>
+ * </Popover.Portal>
+ * ```
+ */
+export declare const Layer: React.ForwardRefExoticComponent<LayerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/layer.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+const LayerDepthContext = React.createContext(0);
+/**
+ * Depth of the current floating layer: 0 = page, 1 = first overlay (dialog, popover, menu…),
+ * 2 = a popover inside that dialog, and so on. Travels through React context, so it survives portals.
+ */
+export function useLayerDepth() {
+    return React.useContext(LayerDepthContext);
+}
+/**
+ * Marks its subtree as one layer deeper. Use when you can't put `Layer` on the content element
+ * itself; read the depth with `useLayerDepth()` and set `data-layer-depth` yourself.
+ */
+export function LayerProvider({ children }) {
+    const depth = useLayerDepth() + 1;
+    return _jsx(LayerDepthContext.Provider, { value: depth, children: children });
+}
+/** Attributes for a layer's content element at `depth`. */
+export function layerAttributes(depth) {
+    return { "data-layer-depth": String(depth), "data-layer-content": "" };
+}
+/**
+ * A floating layer's content root. Sets `data-layer-depth` and increments the depth for
+ * descendants. In glass mode only depth 1 blurs; deeper layers get `--blur: 0` and the more
+ * opaque `--popover-nested` (styles.css), keeping at most one overlay blur on screen.
+ *
+ * ```tsx
+ * <Popover.Portal container={usePortalContainer()}>
+ *   <Layer asChild>
+ *     <Popover.Content className="surface-popover ui-pop">…</Popover.Content>
+ *   </Layer>
+ * </Popover.Portal>
+ * ```
+ */
+export const Layer = React.forwardRef(function Layer({ asChild, ...props }, ref) {
+    const depth = useLayerDepth() + 1;
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(LayerDepthContext.Provider, { value: depth, children: _jsx(Comp, { ref: ref, ...layerAttributes(depth), ...props }) }));
+});

package/dist/lib/locale.d.ts

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { type Messages, type MessagesInput } from "../locales/en.js";
+import { type Formatter } from "../format/core.js";
+import * as text from "./text.js";
+/** A merged dictionary: the full `Messages` shape plus any extra component namespaces. */
+export type ResolvedMessages = Messages & Record<string, Record<string, string>>;
+export interface LocaleValue {
+    /** BCP 47 tag used for Intl formatting and text rules, e.g. "en-US", "tr-TR". */
+    locale: string;
+    /** The merged dictionary (base locale + partial overrides). */
+    messages: ResolvedMessages;
+    dir: "ltr" | "rtl";
+    /** IANA time zone for instants. Default "UTC" (explicit, so SSR and client agree). */
+    timeZone: string;
+    /** Default ISO 4217 currency. Default "USD". */
+    currency: string;
+    /** Formatter bound to locale, currency and time zone. Same object as `useFormat()`. */
+    format: Formatter;
+    /** Look up and format a message by path: `t("pagination.range", { from: 1, to: 20, total: 340 })`. */
+    t: (key: string, vars?: Record<string, unknown>) => string;
+}
+export interface LocaleProviderProps {
+    /** Default "en-US" (or the parent provider's locale). */
+    locale?: string;
+    /**
+     * Full or partial dictionary, deep-merged over the base. The base is the parent provider's
+     * dictionary when `locale` is unchanged, otherwise the built-in English `en`.
+     */
+    messages?: MessagesInput;
+    /** Text direction. Default: derived from the locale (ar, he, fa, ur → "rtl"). */
+    dir?: "ltr" | "rtl";
+    timeZone?: string;
+    currency?: string;
+    children: React.ReactNode;
+}
+/** "rtl" for right-to-left languages. */
+export declare function directionOf(locale: string): "ltr" | "rtl";
+/** Deep-merges a partial dictionary over a base dictionary (one level of namespaces). */
+export declare function mergeMessages(base: ResolvedMessages | Messages, override?: MessagesInput): ResolvedMessages;
+/**
+ * Locale for built-in strings, text rules and Intl formatting. No i18n library required.
+ * Zero config means English (`en-US`, USD, UTC). Nest providers to override a subtree.
+ *
+ * ```tsx
+ * import { tr } from "@vamos-ui/react/locale/tr";
+ * <LocaleProvider locale="tr-TR" messages={tr} timeZone="Europe/Istanbul" currency="TRY">…</LocaleProvider>
+ *
+ * // Rename one string without writing a locale:
+ * <LocaleProvider messages={{ common: { remove: "Move to bin" } }}>…</LocaleProvider>
+ * ```
+ */
+export declare function LocaleProvider({ locale, messages, dir, timeZone, currency, children }: LocaleProviderProps): React.JSX.Element;
+/** `{ locale, messages, dir, timeZone, currency, format, t }` from the nearest LocaleProvider. */
+export declare const useLocale: () => LocaleValue;
+/** The merged dictionary. Prefer `useLabels()` in components (it supports per-instance overrides). */
+export declare const useMessages: () => ResolvedMessages;
+/**
+ * Formatter bound to the provider's locale, currency and time zone.
+ *
+ * ```ts
+ * const f = useFormat();
+ * f.currency("1250.50");        // "$1,250.50" (provider currency)
+ * f.currency(5, "EUR");          // "€5.00"
+ * f.date("2026-11-08");          // "Nov 8, 2026"
+ * f.relative(-1, "day");         // "yesterday"
+ * ```
+ */
+export declare const useFormat: () => Formatter;
+/** Text helpers from `lib/text` bound to the provider's locale. */
+export declare function useText(): {
+    locale: string;
+    fold: (s: string) => string;
+    match: (s: string, q: string) => boolean;
+    highlight: (s: string, q: string) => [start: number, end: number][];
+    highlightParts: (s: string, q: string) => {
+        text: string;
+        match: boolean;
+    }[];
+    compare: (a: string, b: string) => number;
+    cmdkFilter: (value: string, search: string, keywords?: string[]) => number;
+    upper: (s: string) => string;
+    lower: (s: string) => string;
+    initials: (name: string, max?: 1 | 2) => string;
+    slugify: (s: string, o?: Omit<text.SlugifyOptions, "locale">) => string;
+};

package/dist/lib/locale.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Direction } from "radix-ui";
+import { en } from "../locales/en.js";
+import { createFormatter } from "../format/core.js";
+import { formatMessage } from "./message-format.js";
+import * as text from "./text.js";
+const RTL_LANGS = new Set(["ar", "he", "fa", "ur", "ps", "sd", "ug", "yi", "dv", "ckb"]);
+/** "rtl" for right-to-left languages. */
+export function directionOf(locale) {
+    return RTL_LANGS.has(text.baseLanguage(locale)) ? "rtl" : "ltr";
+}
+/** Deep-merges a partial dictionary over a base dictionary (one level of namespaces). */
+export function mergeMessages(base, override) {
+    const out = { ...base };
+    if (!override)
+        return out;
+    for (const [ns, values] of Object.entries(override)) {
+        if (!values)
+            continue;
+        const merged = { ...out[ns] };
+        for (const [k, v] of Object.entries(values))
+            if (typeof v === "string")
+                merged[k] = v;
+        out[ns] = merged;
+    }
+    return out;
+}
+function lookup(messages, key) {
+    const dot = key.indexOf(".");
+    if (dot === -1)
+        return undefined;
+    return messages[key.slice(0, dot)]?.[key.slice(dot + 1)];
+}
+function createValue(locale, messages, dir, timeZone, currency) {
+    return {
+        locale,
+        messages,
+        dir,
+        timeZone,
+        currency,
+        format: createFormatter(locale, { currency, timeZone }),
+        t: (key, vars) => formatMessage(lookup(messages, key) ?? key, vars, locale),
+    };
+}
+const defaultValue = createValue("en-US", en, "ltr", "UTC", "USD");
+const LocaleContext = React.createContext(defaultValue);
+/**
+ * Locale for built-in strings, text rules and Intl formatting. No i18n library required.
+ * Zero config means English (`en-US`, USD, UTC). Nest providers to override a subtree.
+ *
+ * ```tsx
+ * import { tr } from "@vamos-ui/react/locale/tr";
+ * <LocaleProvider locale="tr-TR" messages={tr} timeZone="Europe/Istanbul" currency="TRY">…</LocaleProvider>
+ *
+ * // Rename one string without writing a locale:
+ * <LocaleProvider messages={{ common: { remove: "Move to bin" } }}>…</LocaleProvider>
+ * ```
+ */
+export function LocaleProvider({ locale, messages, dir, timeZone, currency, children }) {
+    const parent = React.useContext(LocaleContext);
+    const nextLocale = locale ?? parent.locale;
+    const localeChanged = nextLocale !== parent.locale;
+    const base = localeChanged ? en : parent.messages;
+    const merged = React.useMemo(() => mergeMessages(base, messages), [base, messages]);
+    const nextDir = dir ?? (localeChanged ? directionOf(nextLocale) : parent.dir);
+    const tz = timeZone ?? parent.timeZone;
+    const cur = currency ?? parent.currency;
+    const value = React.useMemo(() => createValue(nextLocale, merged, nextDir, tz, cur), [nextLocale, merged, nextDir, tz, cur]);
+    return (_jsx(LocaleContext.Provider, { value: value, children: _jsx(Direction.Provider, { dir: nextDir, children: children }) }));
+}
+/** `{ locale, messages, dir, timeZone, currency, format, t }` from the nearest LocaleProvider. */
+export const useLocale = () => React.useContext(LocaleContext);
+/** The merged dictionary. Prefer `useLabels()` in components (it supports per-instance overrides). */
+export const useMessages = () => React.useContext(LocaleContext).messages;
+/**
+ * Formatter bound to the provider's locale, currency and time zone.
+ *
+ * ```ts
+ * const f = useFormat();
+ * f.currency("1250.50");        // "$1,250.50" (provider currency)
+ * f.currency(5, "EUR");          // "€5.00"
+ * f.date("2026-11-08");          // "Nov 8, 2026"
+ * f.relative(-1, "day");         // "yesterday"
+ * ```
+ */
+export const useFormat = () => React.useContext(LocaleContext).format;
+/** Text helpers from `lib/text` bound to the provider's locale. */
+export function useText() {
+    const { locale } = useLocale();
+    return React.useMemo(() => ({
+        locale,
+        fold: (s) => text.foldText(s, locale),
+        match: (s, q) => text.matchText(s, q, locale),
+        highlight: (s, q) => text.highlightText(s, q, locale),
+        highlightParts: (s, q) => text.highlightParts(s, q, locale),
+        compare: text.compareText(locale),
+        cmdkFilter: text.cmdkFilter(locale),
+        upper: (s) => text.upperText(s, locale),
+        lower: (s) => text.lowerText(s, locale),
+        initials: (name, max) => text.initials(name, locale, max),
+        slugify: (s, o) => text.slugify(s, { ...o, locale }),
+    }), [locale]);
+}

package/dist/lib/menu.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared internals of Dropdown Menu and Context Menu: classes, the item's inner layout and the
+ * `MenuEntry[]` renderer. Both menus build their parts from these, so they look and behave alike.
+ */
+import * as React from "react";
+import { type MenuEntry } from "./variants.js";
+/** Floating panel of a menu (root content and sub-content). */
+export declare const menuContentVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Menu items are `--control-h × 0.8` tall, so they follow the density axis. */
+export declare function menuItemClass(opts: {
+    size?: "sm" | "md";
+    tone?: "default" | "danger";
+    inset?: boolean;
+    className?: string;
+}): string;
+export declare const menuLabelClass: "px-2 pt-2 pb-1 text-[11px] font-medium tracking-[0.04em] text-fg-subtle";
+export declare const menuSeparatorClass: "-mx-1 my-1 h-px bg-line";
+export declare const menuIndicatorClass: "absolute start-2 flex size-4 items-center justify-center text-fg";
+/** Size context so items pick up the content's `size`. */
+export declare const MenuSizeContext: React.Context<"sm" | "md">;
+export interface MenuItemContentProps {
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    /** `"mod+shift+d"` or `["mod", "d"]`. */
+    shortcut?: string | string[];
+    /** Trailing count or badge. */
+    badge?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Trailing chevron for sub-triggers. */
+    chevron?: boolean;
+}
+/** Icon · label (+ description) · badge · shortcut · chevron. */
+export declare function MenuItemContent({ icon, description, shortcut, badge, chevron, children }: MenuItemContentProps): React.JSX.Element;
+export declare function MenuCheckIcon(): React.JSX.Element;
+export declare function MenuRadioDot(): React.JSX.Element;
+/** The styled parts a menu provides to the entry renderer. */
+export interface MenuParts {
+    Item: React.ComponentType<any>;
+    CheckboxItem: React.ComponentType<any>;
+    RadioGroup: React.ComponentType<any>;
+    RadioItem: React.ComponentType<any>;
+    Label: React.ComponentType<any>;
+    Separator: React.ComponentType<any>;
+    Group: React.ComponentType<any>;
+    Sub: React.ComponentType<any>;
+    SubTrigger: React.ComponentType<any>;
+    SubContent: React.ComponentType<any>;
+}
+/** Drops entries the user can't access, then leading/trailing/doubled separators. */
+export declare function useVisibleEntries(entries: MenuEntry[]): MenuEntry[];
+export declare function cleanEntries(entries: MenuEntry[], can: (p: string) => boolean): MenuEntry[];
+/** Renders a `MenuEntry[]` with the given parts. Call `useVisibleEntries` first. */
+export declare function MenuEntries({ entries, parts }: {
+    entries: MenuEntry[];
+    parts: MenuParts;
+}): React.JSX.Element;

package/dist/lib/menu.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Shared internals of Dropdown Menu and Context Menu: classes, the item's inner layout and the
+ * `MenuEntry[]` renderer. Both menus build their parts from these, so they look and behave alike.
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Check, ChevronRight } from "lucide-react";
+import { cn } from "./cn.js";
+import { itemSlots, itemVariants } from "./variants.js";
+import { useCan, useLink } from "./provider.js";
+import { KbdGroup } from "../components/kbd.js";
+/** Floating panel of a menu (root content and sub-content). */
+export const menuContentVariants = cva([
+    "surface-popover ui-pop z-(--z-popover) rounded-ui-lg p-1 outline-none",
+    "overflow-x-hidden overflow-y-auto overscroll-contain",
+], {
+    variants: {
+        size: {
+            sm: "min-w-[180px] max-w-[min(20rem,calc(100vw-1.5rem))]",
+            md: "min-w-[220px] max-w-[min(24rem,calc(100vw-1.5rem))]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/** Menu items are `--control-h × 0.8` tall, so they follow the density axis. */
+export function menuItemClass(opts) {
+    return cn(itemVariants({ size: opts.size ?? "md", tone: opts.tone ?? "default", inset: opts.inset }), "min-h-[calc(var(--control-h)*0.8)]", opts.size === "sm" && "min-h-[calc(var(--control-h)*0.7)]", opts.className);
+}
+export const menuLabelClass = itemSlots.groupLabel;
+export const menuSeparatorClass = itemSlots.separator;
+export const menuIndicatorClass = itemSlots.indicator;
+/** Size context so items pick up the content's `size`. */
+export const MenuSizeContext = React.createContext("md");
+/** Icon · label (+ description) · badge · shortcut · chevron. */
+export function MenuItemContent({ icon, description, shortcut, badge, chevron, children }) {
+    return (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 items-center", description ? "self-start pt-px" : undefined), children: icon })) : null, _jsxs("span", { className: itemSlots.label, children: [children, description ? _jsx("span", { className: cn(itemSlots.description, "mt-0.5 whitespace-normal"), children: description }) : null] }), badge != null ? _jsx("span", { className: "ms-auto shrink-0 ps-3 text-xs tabular text-fg-subtle", children: badge }) : null, shortcut ? _jsx(KbdGroup, { keys: shortcut, size: "sm", variant: "ghost", className: cn("shrink-0 ps-4", badge == null && "ms-auto") }) : null, chevron ? _jsx(ChevronRight, { "aria-hidden": true, className: cn("ms-auto size-3.5! shrink-0 text-fg-subtle rtl:-scale-x-100", (shortcut || badge != null) && "ms-2") }) : null] }));
+}
+export function MenuCheckIcon() {
+    return _jsx(Check, { className: "size-3.5! text-fg!", strokeWidth: 2.5 });
+}
+export function MenuRadioDot() {
+    return _jsx("span", { className: "size-1.5 rounded-full bg-fg" });
+}
+/** Drops entries the user can't access, then leading/trailing/doubled separators. */
+export function useVisibleEntries(entries) {
+    const can = useCan();
+    return React.useMemo(() => cleanEntries(entries, can), [entries, can]);
+}
+export function cleanEntries(entries, can) {
+    const allowed = entries.filter((e) => !("permission" in e && e.permission) || can(e.permission));
+    const out = [];
+    for (const e of allowed) {
+        if (e.type === "separator" && (out.length === 0 || out[out.length - 1].type === "separator"))
+            continue;
+        if (e.type === "submenu" || e.type === "group") {
+            const items = cleanEntries(e.items, can);
+            if (items.length === 0)
+                continue;
+            out.push({ ...e, items });
+            continue;
+        }
+        out.push(e);
+    }
+    while (out.length && out[out.length - 1].type === "separator")
+        out.pop();
+    return out;
+}
+const keyOf = (e, i) => ("id" in e && e.id ? e.id : `${e.type ?? "item"}-${i}`);
+/** Renders a `MenuEntry[]` with the given parts. Call `useVisibleEntries` first. */
+export function MenuEntries({ entries, parts }) {
+    const Link = useLink();
+    const P = parts;
+    return (_jsx(_Fragment, { children: entries.map((e, i) => {
+            const key = keyOf(e, i);
+            switch (e.type) {
+                case "separator":
+                    return _jsx(P.Separator, {}, key);
+                case "label":
+                    return _jsx(P.Label, { children: e.label }, key);
+                case "group":
+                    return (_jsxs(P.Group, { children: [e.label ? _jsx(P.Label, { children: e.label }) : null, _jsx(MenuEntries, { entries: e.items, parts: parts })] }, key));
+                case "checkbox":
+                    return (_jsx(P.CheckboxItem, { checked: e.checked, onCheckedChange: e.onCheckedChange, disabled: e.disabled, textValue: e.textValue, shortcut: e.shortcut, children: e.label }, key));
+                case "radio":
+                    return (_jsxs(P.Group, { children: [e.label ? _jsx(P.Label, { children: e.label }) : null, _jsx(P.RadioGroup, { value: e.value, onValueChange: e.onValueChange, children: e.options.map((o) => (_jsx(P.RadioItem, { value: o.value, disabled: o.disabled || e.disabled, textValue: o.textValue, children: o.label }, o.value))) })] }, key));
+                case "submenu":
+                    return (_jsxs(P.Sub, { children: [_jsx(P.SubTrigger, { icon: e.icon, disabled: e.disabled, textValue: e.textValue, children: e.label }), _jsx(P.SubContent, { children: _jsx(MenuEntries, { entries: e.items, parts: parts }) })] }, key));
+                default: {
+                    const content = (_jsx(MenuItemContent, { icon: e.icon, description: e.description, shortcut: e.shortcut, badge: e.badge, children: e.label }));
+                    if (e.href) {
+                        return (_jsx(P.Item, { asChild: true, tone: e.tone, disabled: e.disabled, textValue: e.textValue, onSelect: e.onSelect, children: _jsx(Link, { href: e.href, children: content }) }, key));
+                    }
+                    return (_jsx(P.Item, { tone: e.tone, disabled: e.disabled, textValue: e.textValue, onSelect: e.onSelect, icon: e.icon, description: e.description, shortcut: e.shortcut, badge: e.badge, children: e.label }, key));
+                }
+            }
+        }) }));
+}

package/dist/lib/message-format.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ICU-lite message formatting — React-free, ~no dependencies.
+ *
+ * Supported syntax:
+ * - `{name}` — replaced with `vars.name` (numbers are formatted with the locale: 1250 → "1,250").
+ * - `{count, plural, =0 {No files} one {# file} other {# files}}` — `Intl.PluralRules`; `#` is the formatted number.
+ * - `{count, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}`.
+ * - `{role, select, admin {Administrator} other {Member}}`.
+ *
+ * Unknown placeholders are left as-is (`{name}`), so a missing variable is visible, not silent.
+ */
+/**
+ * Formats a message template.
+ *
+ * ```ts
+ * formatMessage("Remove {label}", { label: "Design" }); // "Remove Design"
+ * formatMessage("{count, plural, one {# reply} other {# replies}}", { count: 1250 }, "en-US"); // "1,250 replies"
+ * ```
+ */
+export declare function formatMessage(template: string, vars?: Record<string, unknown>, locale?: string): string;