@johly/bits-ui 2.18.1

package/dist/bits/menu-data/utils.js

@@ -0,0 +1,456 @@
+import { computeCommandScore } from "../command/compute-command-score.js";
+import { isDisplayGroupNode, isDisplayRadioGroupNode, isDisplaySeparatorNode, } from "./types.js";
+export function isItemDef(node) {
+    return node.kind === "item";
+}
+export function isCheckboxItemDef(node) {
+    return node.kind === "checkbox-item";
+}
+export function isSubmenuDef(node) {
+    return node.kind === "submenu";
+}
+export function isGroupDef(node) {
+    return node.kind === "group";
+}
+export function isRadioGroupDef(node) {
+    return node.kind === "radio-group";
+}
+export function isSeparatorDef(node) {
+    return node.kind === "separator";
+}
+export function flattenNodes(nodes, options = {}) {
+    const { deep = false, breadcrumbs = [], breadcrumbIds = [], group = null, radioGroup = null, } = options;
+    const result = [];
+    for (const node of nodes) {
+        if (node.kind === "separator")
+            continue;
+        if (node.kind === "group") {
+            if (node.hidden)
+                continue;
+            const groupInfo = { id: node.id, label: node.label, groupDef: node };
+            result.push(...flattenNodes(node.nodes, {
+                deep,
+                breadcrumbs,
+                breadcrumbIds,
+                group: groupInfo,
+                radioGroup: null,
+            }));
+            continue;
+        }
+        if (node.kind === "radio-group") {
+            if (node.hidden)
+                continue;
+            const radioGroupInfo = { id: node.id, label: node.label, radioGroupDef: node };
+            result.push(...flattenNodes(node.nodes, {
+                deep,
+                breadcrumbs,
+                breadcrumbIds,
+                group: null,
+                radioGroup: radioGroupInfo,
+            }));
+            continue;
+        }
+        if (node.hidden)
+            continue;
+        if (node.kind === "item" || node.kind === "checkbox-item") {
+            result.push({ node, breadcrumbs, breadcrumbIds, group, radioGroup });
+            continue;
+        }
+        result.push({ node, breadcrumbs, breadcrumbIds, group, radioGroup });
+        if (deep && node.deepSearch !== false && node.nodes) {
+            result.push(...flattenNodes(node.nodes, {
+                deep,
+                breadcrumbs: [...breadcrumbs, node.title],
+                breadcrumbIds: [...breadcrumbIds, node.id],
+                group: null,
+                radioGroup: null,
+            }));
+        }
+    }
+    return result;
+}
+export function scoreNodes(flattenedNodes, query) {
+    if (!query) {
+        return flattenedNodes.map((node) => ({ ...node, score: 1 }));
+    }
+    const results = [];
+    for (const flattenedNode of flattenedNodes) {
+        const label = flattenedNode.node.kind === "submenu"
+            ? (flattenedNode.node.label ?? flattenedNode.node.title)
+            : flattenedNode.node.label;
+        const score = computeCommandScore(label, query, flattenedNode.node.keywords);
+        if (score > 0) {
+            results.push({ ...flattenedNode, score });
+        }
+    }
+    return results;
+}
+export function sortByScore(nodes) {
+    return [...nodes].sort((a, b) => b.score - a.score);
+}
+export function partitionByKind(nodes) {
+    const items = nodes.filter((n) => n.node.kind === "item" || n.node.kind === "checkbox-item");
+    const submenus = nodes.filter((n) => n.node.kind === "submenu");
+    return [...items, ...submenus];
+}
+export function deduplicateNodes(nodes) {
+    const seen = new Set();
+    const result = [];
+    for (const scoredNode of nodes) {
+        const compositeId = [...scoredNode.breadcrumbIds, scoredNode.node.id].join(".");
+        if (seen.has(compositeId))
+            continue;
+        seen.add(compositeId);
+        result.push(scoredNode);
+    }
+    return result;
+}
+function buildRowContext(scoredNode, query, highlightedId) {
+    const isDeepSearchResult = scoredNode.breadcrumbs.length > 0;
+    return {
+        search: query ? { query, score: scoredNode.score } : null,
+        breadcrumbs: scoredNode.breadcrumbs,
+        isDeepSearchResult,
+        highlighted: scoredNode.node.id === highlightedId,
+        disabled: scoredNode.node.disabled ?? false,
+        group: scoredNode.group ? { id: scoredNode.group.id, label: scoredNode.group.label } : null,
+    };
+}
+function buildDisplayRowNode(scoredNode, query, highlightedId) {
+    return {
+        node: scoredNode.node,
+        context: buildRowContext(scoredNode, query, highlightedId),
+    };
+}
+export function buildDisplayRowNodes(scoredNodes, query, highlightedId) {
+    return scoredNodes.map((scoredNode) => buildDisplayRowNode(scoredNode, query, highlightedId));
+}
+export function getBrowseNodesPreserve(nodes, highlightedId) {
+    const result = [];
+    for (const node of nodes) {
+        if (node.kind === "separator") {
+            if (!node.hidden)
+                result.push({ kind: "separator", separator: node });
+            continue;
+        }
+        if (node.kind === "group") {
+            if (node.hidden)
+                continue;
+            const groupItems = [];
+            for (const child of node.nodes) {
+                if (child.kind === "separator" || child.kind === "group" || child.kind === "radio-group") {
+                    continue;
+                }
+                if (child.hidden)
+                    continue;
+                groupItems.push({
+                    node: child,
+                    context: {
+                        search: null,
+                        breadcrumbs: [],
+                        isDeepSearchResult: false,
+                        highlighted: child.id === highlightedId,
+                        disabled: child.disabled ?? false,
+                        group: { id: node.id, label: node.label },
+                    },
+                });
+            }
+            if (groupItems.length > 0) {
+                result.push({
+                    kind: "group",
+                    group: node,
+                    context: {
+                        search: null,
+                        matchCount: groupItems.length,
+                        breadcrumbs: [],
+                        isDeepSearchResult: false,
+                    },
+                    items: groupItems,
+                    bestScore: 1,
+                });
+            }
+            continue;
+        }
+        if (node.kind === "radio-group") {
+            if (node.hidden)
+                continue;
+            const radioItems = [];
+            for (const child of node.nodes) {
+                if (child.hidden)
+                    continue;
+                radioItems.push({
+                    node: child,
+                    context: {
+                        search: null,
+                        breadcrumbs: [],
+                        isDeepSearchResult: false,
+                        highlighted: child.id === highlightedId,
+                        disabled: child.disabled ?? false,
+                        group: null,
+                    },
+                });
+            }
+            if (radioItems.length > 0) {
+                result.push({
+                    kind: "radio-group",
+                    radioGroup: node,
+                    context: {
+                        search: null,
+                        matchCount: radioItems.length,
+                        breadcrumbs: [],
+                        isDeepSearchResult: false,
+                    },
+                    items: radioItems,
+                    bestScore: 1,
+                });
+            }
+            continue;
+        }
+        if (node.hidden)
+            continue;
+        result.push({
+            node,
+            context: {
+                search: null,
+                breadcrumbs: [],
+                isDeepSearchResult: false,
+                highlighted: node.id === highlightedId,
+                disabled: node.disabled ?? false,
+                group: null,
+            },
+        });
+    }
+    return result;
+}
+function collectAllRadioGroupItems(flattened, enabled) {
+    const allRadioGroupItems = new Map();
+    if (!enabled)
+        return allRadioGroupItems;
+    for (const flatNode of flattened) {
+        if (!flatNode.radioGroup)
+            continue;
+        const existing = allRadioGroupItems.get(flatNode.radioGroup.id);
+        if (existing) {
+            existing.items.push(flatNode);
+        }
+        else {
+            allRadioGroupItems.set(flatNode.radioGroup.id, {
+                radioGroupDef: flatNode.radioGroup.radioGroupDef,
+                items: [flatNode],
+                breadcrumbs: flatNode.breadcrumbs,
+            });
+        }
+    }
+    return allRadioGroupItems;
+}
+function buildRadioGroupDisplayNodes({ radioGroupedItems, allRadioGroupItems, query, highlightedId, radioGroupSearchBehavior, }) {
+    const displayNodes = [];
+    if (radioGroupSearchBehavior === "flatten")
+        return displayNodes;
+    for (const [radioGroupId, { radioGroupDef, items: matchingItems, breadcrumbs },] of radioGroupedItems) {
+        let itemsToDisplay;
+        if (radioGroupSearchBehavior === "preserve-show-all") {
+            const allItems = allRadioGroupItems.get(radioGroupId);
+            if (allItems) {
+                const matchingScores = new Map(matchingItems.map((item) => [item.node.id, item.score]));
+                itemsToDisplay = allItems.items.map((flatNode) => ({
+                    node: flatNode.node,
+                    score: matchingScores.get(flatNode.node.id) ?? 0,
+                    breadcrumbs: flatNode.breadcrumbs,
+                    breadcrumbIds: flatNode.breadcrumbIds,
+                    group: flatNode.group,
+                    radioGroup: flatNode.radioGroup,
+                }));
+            }
+            else {
+                itemsToDisplay = matchingItems;
+            }
+        }
+        else {
+            itemsToDisplay = matchingItems;
+        }
+        itemsToDisplay.sort((a, b) => b.score - a.score);
+        const bestScore = Math.max(...itemsToDisplay.map((item) => item.score), 0);
+        const isDeepSearchResult = breadcrumbs.length > 0;
+        const context = {
+            search: query ? { query, bestScore } : null,
+            matchCount: matchingItems.length,
+            breadcrumbs,
+            isDeepSearchResult,
+        };
+        displayNodes.push({
+            kind: "radio-group",
+            radioGroup: radioGroupDef,
+            context,
+            items: itemsToDisplay.map((item) => buildDisplayRowNode(item, query, highlightedId)),
+            bestScore,
+        });
+    }
+    return displayNodes;
+}
+function filterNodesFlatten(options) {
+    const { query, nodes, highlightedId, deepSearch = true, minLength = 0, radioGroupSearchBehavior = "preserve", } = options;
+    const shouldDeepSearch = deepSearch && query.length >= minLength;
+    const flattened = flattenNodes(nodes, { deep: shouldDeepSearch });
+    const allRadioGroupItems = collectAllRadioGroupItems(flattened, radioGroupSearchBehavior === "preserve-show-all");
+    const scored = scoreNodes(flattened, query);
+    const radioGroupedItems = new Map();
+    const regularItems = [];
+    for (const scoredNode of scored) {
+        if (scoredNode.radioGroup && radioGroupSearchBehavior !== "flatten") {
+            const existing = radioGroupedItems.get(scoredNode.radioGroup.id);
+            if (existing) {
+                existing.items.push(scoredNode);
+            }
+            else {
+                radioGroupedItems.set(scoredNode.radioGroup.id, {
+                    radioGroupDef: scoredNode.radioGroup.radioGroupDef,
+                    items: [scoredNode],
+                    breadcrumbs: scoredNode.breadcrumbs,
+                });
+            }
+        }
+        else {
+            regularItems.push(scoredNode);
+        }
+    }
+    const regularDisplayNodes = buildDisplayRowNodes(deduplicateNodes(partitionByKind(sortByScore(regularItems))), query, highlightedId);
+    const radioGroupDisplayNodes = buildRadioGroupDisplayNodes({
+        radioGroupedItems,
+        allRadioGroupItems,
+        query,
+        highlightedId,
+        radioGroupSearchBehavior,
+    });
+    const allNodes = [
+        ...regularDisplayNodes.map((node) => ({ node, score: node.context.search?.score ?? 0 })),
+        ...radioGroupDisplayNodes.map((node) => ({ node, score: node.bestScore })),
+    ];
+    allNodes.sort((a, b) => b.score - a.score);
+    return {
+        displayNodes: allNodes.map((node) => node.node),
+        isDeepSearching: shouldDeepSearch,
+    };
+}
+function filterNodesPreserve(options) {
+    const { query, nodes, highlightedId, deepSearch = true, minLength = 0, sortGroups = true, radioGroupSearchBehavior = "preserve", } = options;
+    const shouldDeepSearch = deepSearch && query.length >= minLength;
+    const flattened = flattenNodes(nodes, { deep: shouldDeepSearch });
+    const allRadioGroupItems = collectAllRadioGroupItems(flattened, radioGroupSearchBehavior === "preserve-show-all");
+    const scored = scoreNodes(flattened, query);
+    const groupedItems = new Map();
+    const radioGroupedItems = new Map();
+    const ungroupedItems = [];
+    for (const scoredNode of scored) {
+        if (scoredNode.radioGroup && radioGroupSearchBehavior !== "flatten") {
+            const existing = radioGroupedItems.get(scoredNode.radioGroup.id);
+            if (existing) {
+                existing.items.push(scoredNode);
+            }
+            else {
+                radioGroupedItems.set(scoredNode.radioGroup.id, {
+                    radioGroupDef: scoredNode.radioGroup.radioGroupDef,
+                    items: [scoredNode],
+                    breadcrumbs: scoredNode.breadcrumbs,
+                });
+            }
+        }
+        else if (scoredNode.group) {
+            const existing = groupedItems.get(scoredNode.group.id);
+            if (existing) {
+                existing.items.push(scoredNode);
+            }
+            else {
+                groupedItems.set(scoredNode.group.id, {
+                    groupDef: scoredNode.group.groupDef,
+                    items: [scoredNode],
+                    breadcrumbs: scoredNode.breadcrumbs,
+                });
+            }
+        }
+        else {
+            ungroupedItems.push(scoredNode);
+        }
+    }
+    const groupDisplayNodes = [];
+    for (const { groupDef, items, breadcrumbs } of groupedItems.values()) {
+        items.sort((a, b) => b.score - a.score);
+        const bestScore = items[0]?.score ?? 0;
+        groupDisplayNodes.push({
+            kind: "group",
+            group: groupDef,
+            context: {
+                search: query ? { query, bestScore } : null,
+                matchCount: items.length,
+                breadcrumbs,
+                isDeepSearchResult: breadcrumbs.length > 0,
+            },
+            items: items.map((item) => buildDisplayRowNode(item, query, highlightedId)),
+            bestScore,
+        });
+    }
+    const radioGroupDisplayNodes = buildRadioGroupDisplayNodes({
+        radioGroupedItems,
+        allRadioGroupItems,
+        query,
+        highlightedId,
+        radioGroupSearchBehavior,
+    });
+    const ungroupedDisplayNodes = ungroupedItems
+        .sort((a, b) => b.score - a.score)
+        .map((item) => buildDisplayRowNode(item, query, highlightedId));
+    const allNodes = [
+        ...groupDisplayNodes.map((node) => ({ node, score: node.bestScore })),
+        ...radioGroupDisplayNodes.map((node) => ({ node, score: node.bestScore })),
+        ...ungroupedDisplayNodes.map((node) => ({ node, score: node.context.search?.score ?? 0 })),
+    ];
+    if (sortGroups) {
+        allNodes.sort((a, b) => b.score - a.score);
+    }
+    return {
+        displayNodes: allNodes.map((node) => node.node),
+        isDeepSearching: shouldDeepSearch,
+    };
+}
+export function filterNodes(options) {
+    const { query, nodes, highlightedId, groupSearchBehavior = "preserve" } = options;
+    if (!query) {
+        return {
+            displayNodes: getBrowseNodesPreserve(nodes, highlightedId),
+            isDeepSearching: false,
+        };
+    }
+    if (groupSearchBehavior === "preserve")
+        return filterNodesPreserve(options);
+    return filterNodesFlatten(options);
+}
+export function getNavigableIds(displayNodes) {
+    const ids = [];
+    for (const node of displayNodes) {
+        if (isDisplayGroupNode(node)) {
+            for (const item of node.items) {
+                if (!item.node.disabled)
+                    ids.push(item.node.id);
+            }
+        }
+        else if (isDisplayRadioGroupNode(node)) {
+            for (const item of node.items) {
+                if (!item.node.disabled)
+                    ids.push(item.node.id);
+            }
+        }
+        else if (!isDisplaySeparatorNode(node) && !node.node.disabled) {
+            ids.push(node.node.id);
+        }
+    }
+    return ids;
+}
+export function getDisplayNodeKey(node, fallbackIndex = 0) {
+    if (isDisplayGroupNode(node))
+        return node.group.id;
+    if (isDisplayRadioGroupNode(node))
+        return node.radioGroup.id;
+    if (isDisplaySeparatorNode(node))
+        return node.separator.id ?? `separator-${fallbackIndex}`;
+    return [...node.context.breadcrumbs, node.node.id].join(".");
+}

package/dist/bits/menubar/components/menubar-content-static.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { MenubarContentStaticProps } from "../types.js";
+	import { MenubarContentState } from "../menubar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import MenuContentStatic from "../../menu/components/menu-content-static.svelte";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		interactOutsideBehavior = "close",
+		id = createId(uid),
+		onInteractOutside = noop,
+		onCloseAutoFocus = noop,
+		onFocusOutside = noop,
+		onOpenAutoFocus = noop,
+		...restProps
+	}: MenubarContentStaticProps = $props();
+
+	const contentState = MenubarContentState.create({
+		id: boxWith(() => id),
+		interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onFocusOutside: boxWith(() => onFocusOutside),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+<MenuContentStatic bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

package/dist/bits/menubar/components/menubar-content-static.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenubarContentStaticProps } from "../types.js";
+declare const MenubarContentStatic: import("svelte").Component<MenubarContentStaticProps, {}, "ref">;
+type MenubarContentStatic = ReturnType<typeof MenubarContentStatic>;
+export default MenubarContentStatic;

package/dist/bits/menubar/components/menubar-content.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { MenubarContentProps } from "../types.js";
+	import { MenubarContentState } from "../menubar.svelte.js";
+	import MenuContent from "../../menu/components/menu-content.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		interactOutsideBehavior = "close",
+		id = createId(uid),
+		onInteractOutside = noop,
+		onFocusOutside = noop,
+		onCloseAutoFocus = noop,
+		onOpenAutoFocus = noop,
+		...restProps
+	}: MenubarContentProps = $props();
+
+	const contentState = MenubarContentState.create({
+		id: boxWith(() => id),
+		interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onFocusOutside: boxWith(() => onFocusOutside),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+<MenuContent bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

package/dist/bits/menubar/components/menubar-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenubarContentProps } from "../types.js";
+declare const MenubarContent: import("svelte").Component<MenubarContentProps, {}, "ref">;
+type MenubarContent = ReturnType<typeof MenubarContent>;
+export default MenubarContent;

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { MenubarMenuProps } from "../types.js";
+	import { MenubarMenuState } from "../menubar.svelte.js";
+	import Menu from "../../menu/components/menu.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let { value = createId(uid), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
+
+	const menuState = MenubarMenuState.create({
+		value: boxWith(() => value),
+		onOpenChange: boxWith(() => onOpenChange),
+	});
+</script>
+
+<Menu
+	open={menuState.open}
+	onOpenChange={(open) => {
+		if (!open) menuState.root.onMenuClose();
+	}}
+	dir={menuState.root.opts.dir.current}
+	_internal_variant="menubar"
+	{...restProps}
+	_internal_should_skip_exit_animation={() =>
+		menuState.root.skipExitAnimationForMenuValue === menuState.opts.value.current}
+/>

package/dist/bits/menubar/components/menubar-menu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MenubarMenu: import("svelte").Component<import("../types.js").MenubarMenuPropsWithoutHTML, {}, "">;
+type MenubarMenu = ReturnType<typeof MenubarMenu>;
+export default MenubarMenu;

package/dist/bits/menubar/components/menubar-trigger.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { attachRef, boxWith, mergeProps } from "svelte-toolbelt";
+	import type { MenubarTriggerProps } from "../types.js";
+	import { MenubarTriggerState } from "../menubar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
+	import { DropdownMenuTriggerState } from "../../menu/menu.svelte.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		disabled = false,
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: MenubarTriggerProps = $props();
+
+	const triggerState = MenubarTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const dropdownTriggerState = DropdownMenuTriggerState.create(triggerState.opts);
+	const triggerAttachment = attachRef(
+		(v: HTMLElement | null) => (dropdownTriggerState.parentMenu.triggerNode = v)
+	);
+
+	const mergedProps = $derived(
+		mergeProps(restProps, triggerState.props, {
+			...triggerAttachment,
+		})
+	);
+</script>
+
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+</FloatingLayerAnchor>

package/dist/bits/menubar/components/menubar-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenubarTriggerProps } from "../types.js";
+declare const MenubarTrigger: import("svelte").Component<MenubarTriggerProps, {}, "ref">;
+type MenubarTrigger = ReturnType<typeof MenubarTrigger>;
+export default MenubarTrigger;

package/dist/bits/menubar/components/menubar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { MenubarRootProps } from "../types.js";
+	import { MenubarRootState } from "../menubar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		children,
+		child,
+		ref = $bindable(null),
+		value = $bindable(""),
+		dir = "ltr",
+		loop = true,
+		onValueChange = noop,
+		...restProps
+	}: MenubarRootProps = $props();
+
+	const rootState = MenubarRootState.create({
+		id: boxWith(() => id),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange?.(v);
+			}
+		),
+		dir: boxWith(() => dir),
+		loop: boxWith(() => loop),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/menubar/components/menubar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenubarRootProps } from "../types.js";
+declare const Menubar: import("svelte").Component<MenubarRootProps, {}, "value" | "ref">;
+type Menubar = ReturnType<typeof Menubar>;
+export default Menubar;