@signal9/era-ui 22.0.0 → 23.1.0

package/dist/eslint/index.js

@@ -0,0 +1,77 @@
+/*
+ * ESLINT RULES FOR CONSUMING ERA.
+ *
+ * era's failure mode is silently wrong, never loudly broken. An unknown class
+ * renders as nothing; an arbitrary value renders as SOMETHING, which is worse,
+ * because it looks fine on the density you wrote it at and quietly falls off
+ * the ladder on the other three. Neither shows up in a type check, a test, or a
+ * screenshot taken at one setting.
+ *
+ * These rules catch the two shapes that account for nearly all of it, and both
+ * were proposed by a consumer who had hit them repeatedly rather than invented
+ * here:
+ *
+ *   era/no-arbitrary-tier    h-[24px] / h-(--era-h-control) where h-control is
+ *                            the name for exactly that value.
+ *   era/no-hardcoded-motion  duration-150 / ease-in-out, which pin timing that
+ *                            the motion axis is supposed to own — including at
+ *                            prefers-reduced-motion, where they refuse to stop.
+ *
+ * THE VOCABULARY IS IMPORTED, NOT RESTATED. TIERS and SPACING come from
+ * utils/tw-merge-config.js, the same lists cn() is built from and that
+ * check-twmerge verifies against the stylesheet. A second copy here would be
+ * the exact hand-maintained duplicate this repo keeps having to delete — and it
+ * would go stale in the direction that matters, telling consumers a rung exists
+ * that does not.
+ */
+import { TIERS, SPACING } from '../utils/tw-merge-config.js';
+import { findArbitraryTiers as findTiers, findHardcodedMotion } from './rules-core.js';
+/** era's real vocabulary, bound once. */
+const VOCAB = { TIERS, SPACING };
+/** Arbitrary/var-form lengths where era has a name, against era's own lists. */
+export const findArbitraryTiers = (value) => findTiers(value, VOCAB);
+export { findHardcodedMotion };
+function makeRule(description, find) {
+    return {
+        meta: { type: 'problem', docs: { description }, schema: [] },
+        create(ctx) {
+            const check = (node, text) => {
+                for (const r of find(text))
+                    ctx.report({ node, message: r.message });
+            };
+            return {
+                Literal(node) {
+                    if (typeof node.value === 'string')
+                        check(node, node.value);
+                },
+                TemplateElement(node) {
+                    const cooked = node.value?.cooked;
+                    if (typeof cooked === 'string')
+                        check(node, cooked);
+                },
+                SvelteLiteral(node) {
+                    if (typeof node.value === 'string')
+                        check(node, node.value);
+                }
+            };
+        }
+    };
+}
+export const rules = {
+    'no-arbitrary-tier': makeRule('Use era’s named rungs instead of arbitrary or var-form lengths.', findArbitraryTiers),
+    'no-hardcoded-motion': makeRule('Take transition timing from the motion axis, not from a literal.', findHardcodedMotion)
+};
+const plugin = {
+    meta: { name: '@sig-nine/era-ui/eslint' },
+    rules,
+    configs: {}
+};
+/** Flat-config preset: both rules as errors. */
+plugin.configs.recommended = {
+    plugins: { era: plugin },
+    rules: {
+        'era/no-arbitrary-tier': 'error',
+        'era/no-hardcoded-motion': 'error'
+    }
+};
+export default plugin;

package/dist/eslint/rules-core.d.ts

@@ -0,0 +1,14 @@
+/** One flagged class, with the offset that lets a host report it precisely. */
+export interface Report {
+    index: number;
+    length: number;
+    message: string;
+}
+export interface Vocabulary {
+    TIERS: string[];
+    SPACING: string[];
+}
+/** Every offending token in one class string, with its offset for a precise report. */
+export declare function findArbitraryTiers(value: string, vocab: Vocabulary): Report[];
+/** Hardcoded timing, which the motion axis is supposed to own. */
+export declare function findHardcodedMotion(value: string): Report[];

package/dist/eslint/rules-core.js

@@ -0,0 +1,111 @@
+/*
+ * THE PURE RULE LOGIC — string in, reports out.
+ *
+ * Split from index.ts for one reason: the vocabulary is PASSED IN rather than
+ * imported here. index.ts wires it to the real TIERS/SPACING (the same lists
+ * cn() is built from), and scripts/check-eslint-rules.ts wires the same lists
+ * itself, so the self-test exercises exactly what ships without needing to
+ * resolve the package's `.js`-suffixed internal imports from source.
+ *
+ * No cross-directory imports live in this file, and that is deliberate.
+ */
+/** Prefixes whose value is a tier height/width. */
+const TIER_PREFIXES = ['h', 'min-h', 'max-h', 'w', 'min-w', 'max-w', 'size', 'rounded'];
+/** Prefixes whose value is on the --spacing-* scale. */
+const SPACING_PREFIXES = [
+    'p',
+    'px',
+    'py',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'gap',
+    'gap-x',
+    'gap-y',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'inset',
+    'inset-x',
+    'inset-y'
+];
+/** `--era-h-control` -> `control`, so the var form can be named back. */
+function tierFromToken(token, TIERS) {
+    const m = token.match(/^--era-(?:h|rd)-([a-z]+)$/);
+    return m && TIERS.includes(m[1]) ? m[1] : null;
+}
+function spacingFromToken(token, SPACING) {
+    const m = token.match(/^--era-(.+)$/);
+    if (!m)
+        return null;
+    const name = m[1] === 'gap' ? 'gutter' : m[1];
+    return SPACING.includes(name) ? name : null;
+}
+/** Every offending token in one class string, with its offset for a precise report. */
+export function findArbitraryTiers(value, vocab) {
+    const { TIERS, SPACING } = vocab;
+    const out = [];
+    for (const m of value.matchAll(/(?:^|\s)((?:[a-z-]+:)*)([a-z-]+)-(\[[^\]]+\]|\([^)]+\))/g)) {
+        const cls = m[0].trimStart();
+        const index = m.index + (m[0].length - cls.length);
+        const [, variants, prefix, raw] = m;
+        const inner = raw.slice(1, -1);
+        // The paren form is era's own shorthand for a token — it is not wrong, it
+        // is just unnamed when a name exists.
+        const named = tierFromToken(inner, TIERS) ?? spacingFromToken(inner, SPACING);
+        if (named) {
+            const suggestion = `${variants}${prefix}-${named}`;
+            if ((TIER_PREFIXES.includes(prefix) && TIERS.includes(named)) ||
+                (SPACING_PREFIXES.includes(prefix) && SPACING.includes(named))) {
+                out.push({
+                    index,
+                    length: cls.length,
+                    message: `\`${cls}\` names a value era already has a name for — use \`${suggestion}\`. The named form is what tailwind-merge can resolve, so a consumer overriding it actually wins.`
+                });
+                continue;
+            }
+        }
+        // A bare ABSOLUTE length in a tier or spacing position is the real hazard:
+        // it is correct at the one density it was written at and wrong at the
+        // other three.
+        //
+        // Absolute only — px/rem/em, and a unitless 0. A percentage, ch, vh or fr
+        // is not on the ladder and era has no rung to offer instead, so flagging
+        // `w-[40%]` or `max-w-[65ch]` would be telling a consumer to replace
+        // correct code with something that does not exist. Both were false
+        // positives in the first draft, caught by this rule's own self-test.
+        const isLadderLength = /^-?\d+(?:\.\d+)?(?:px|rem|em)?$/.test(inner);
+        if (isLadderLength && (TIER_PREFIXES.includes(prefix) || SPACING_PREFIXES.includes(prefix))) {
+            out.push({
+                index,
+                length: cls.length,
+                message: `\`${cls}\` hardcodes a length on an axis era scales. It is correct at the density you wrote it at and wrong at the other three — use a rung (${prefix}-${TIERS.join(' / ')}) or a spacing name.`
+            });
+        }
+    }
+    return out;
+}
+/** Hardcoded timing, which the motion axis is supposed to own. */
+export function findHardcodedMotion(value) {
+    const out = [];
+    for (const m of value.matchAll(/(?:^|\s)((?:[a-z-]+:)*)(duration-\d+|duration-\[[^\]]+\]|ease-(?:linear|in|out|in-out)|ease-\[[^\]]+\])/g)) {
+        const cls = (m[1] ?? '') + m[2];
+        const index = m.index + (m[0].length - cls.length);
+        const fix = m[2].startsWith('duration') ? 'duration-base' : 'ease-base';
+        out.push({
+            index,
+            length: cls.length,
+            message: `\`${cls}\` pins timing the motion axis owns — use \`${fix}\`. Hardcoded timing ignores data-motion="instant", which is also what prefers-reduced-motion resolves to, so this animates for people who asked it not to.`
+        });
+    }
+    return out;
+}

package/dist/index.d.ts

@@ -29,6 +29,6 @@
  * moment it exists, with no export map to maintain — and it means no component
  * can ever be pulled in by accident, because nothing re-exports them together.
  */
-export { cn, tv, hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions, type PartProps, type VariantProps } from './utils/index.js';
+export { cn, tv, hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions, type PartProps, type OwnedPartProps, type VariantProps } from './utils/index.js';
 export { modes, defaultMode, surfaces, defaultSurface, surfaceRegistry, corners, defaultCorners, fonts, defaultFont, motions, defaultMotion, axisRegistry, axisKeys, type Mode, type Surface, type SurfaceMeta, type Corners, type Font, type Motion, type AxisKey, type AxisMeta, type AxisLevel } from './ui/provider/index.js';
 export { Mode as ModeProvider } from './ui/mode/index.js';

package/dist/os/desktop.svelte

@@ -9,6 +9,7 @@
 	let {
 		pm: wmProp,
 		notifications: notifProp,
+		embedded = false,
 		children,
 		class: className,
 		...restProps
@@ -18,6 +19,22 @@
 		pm?: PaneManager;
 		/** The notification service, likewise shared via context. */
 		notifications?: NotificationService;
+		/**
+		 * This Desktop is a WIDGET inside an ordinary page, not the viewport.
+		 *
+		 * A full-viewport Desktop takes the document with it: it locks
+		 * <html>/<body> against scrolling and fences pinch-zoom, both of which are
+		 * correct when the workspace IS the page and hostile when it is a 26rem
+		 * box in the middle of a marketing site. Shipped exactly that way — a
+		 * consumer embedded one and their whole page stopped scrolling.
+		 *
+		 * Named for the situation rather than the mechanism. `lockScroll={false}`
+		 * was the obvious spelling and is the wrong one: more than one behaviour
+		 * differs for an embedded Desktop, so a mechanism-named boolean needs a
+		 * second boolean the first time that is true — and a consumer would have
+		 * to know which mechanisms to disable rather than what they are building.
+		 */
+		embedded?: boolean;
 		/** Chrome + wallpaper: place <Taskbar>, <Toaster>, <Launcher>,
 		 *  <NotificationCenter> and any desktop widgets here. */
 		children?: Snippet;
@@ -68,16 +85,23 @@
 		untrack(() => pm.relayout());
 	});
 
-	// Document scroll lock: the Desktop IS the viewport, so the page itself must
-	// never scroll, rubber-band, or pull-to-refresh — on a phone those drag the
-	// whole workspace around, which is meaningless for a fixed surface. Lock
-	// <html>/<body> for the Desktop's lifetime and restore their prior inline
-	// values on unmount, so a consumer's ordinary page is untouched before and
-	// after the workspace mounts. Scrolling INSIDE panes and menus is unaffected
-	// — those are their own overflow-auto containers with overscroll-behavior.
-	// overscroll-behavior:none is the specific killer for iOS pull-to-refresh and
-	// the elastic bounce; overflow:hidden + height stop any residual page scroll.
+	// Document scroll lock: a full-viewport Desktop IS the viewport, so the page
+	// itself must never scroll, rubber-band, or pull-to-refresh — on a phone
+	// those drag the whole workspace around, which is meaningless for a fixed
+	// surface. Lock <html>/<body> for the Desktop's lifetime and restore their
+	// prior inline values on unmount. Scrolling INSIDE panes and menus is
+	// unaffected — those are their own overflow-auto containers with
+	// overscroll-behavior. overscroll-behavior:none is the specific killer for
+	// iOS pull-to-refresh and the elastic bounce; overflow:hidden + height stop
+	// any residual page scroll.
+	//
+	// NOT WHEN EMBEDDED. This comment used to say the consumer's ordinary page is
+	// untouched "before and after the workspace mounts", which is true and reads
+	// as broader than it is — DURING was the whole problem. A Desktop embedded as
+	// a widget in a scrolling page froze that page for its entire lifetime, and
+	// nothing in the API suggested a component would take the document with it.
 	$effect(() => {
+		if (embedded) return;
 		const els = [document.documentElement, document.body];
 		const lock = { overflow: 'hidden', overscrollBehavior: 'none', height: '100%' } as const;
 		const keys = Object.keys(lock) as (keyof typeof lock)[];
@@ -93,9 +117,16 @@
 	// chrome away and strand panes). Safari fires non-standard gesture* events
 	// for pinch/rotate; other engines surface it as a multi-touch touchmove.
 	// Cancel both — non-passive, so preventDefault actually stops the gesture.
-	// (Single-finger pane dragging runs on pointer events and is unaffected; the
-	// page can't scroll anyway now, see the scroll lock above.)
+	// (Single-finger pane dragging runs on pointer events and is unaffected; a
+	// full-viewport Desktop cannot scroll the page anyway, see the scroll lock.)
+	//
+	// ALSO NOT WHEN EMBEDDED, and this half is an accessibility question rather
+	// than a layout one. Pinch-zoom is how people with low vision read a page;
+	// swallowing it because the finger landed on a widget takes that away from
+	// the whole document. The parenthetical above is the tell — it assumed the
+	// page could not scroll, which stops being true the moment the lock is off.
 	$effect(() => {
+		if (embedded) return;
 		const el = ref;
 		if (!el) return;
 		const stop = (e: Event) => e.preventDefault();

package/dist/os/desktop.svelte.d.ts

@@ -8,6 +8,22 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     pm?: PaneManager;
     /** The notification service, likewise shared via context. */
     notifications?: NotificationService;
+    /**
+     * This Desktop is a WIDGET inside an ordinary page, not the viewport.
+     *
+     * A full-viewport Desktop takes the document with it: it locks
+     * <html>/<body> against scrolling and fences pinch-zoom, both of which are
+     * correct when the workspace IS the page and hostile when it is a 26rem
+     * box in the middle of a marketing site. Shipped exactly that way — a
+     * consumer embedded one and their whole page stopped scrolling.
+     *
+     * Named for the situation rather than the mechanism. `lockScroll={false}`
+     * was the obvious spelling and is the wrong one: more than one behaviour
+     * differs for an embedded Desktop, so a mechanism-named boolean needs a
+     * second boolean the first time that is true — and a consumer would have
+     * to know which mechanisms to disable rather than what they are building.
+     */
+    embedded?: boolean;
     /** Chrome + wallpaper: place <Taskbar>, <Toaster>, <Launcher>,
      *  <NotificationCenter> and any desktop widgets here. */
     children?: Snippet;

package/dist/ui/accordion/accordion-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Accordion } from 'bits-ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Accordion.TriggerProps> = $props();
+	}: OwnedPartProps<Accordion.TriggerProps> = $props();
 </script>
 
 <Accordion.Trigger

package/dist/ui/accordion/accordion-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Accordion } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const AccordionTrigger: import("svelte").Component<PartProps<Accordion.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const AccordionTrigger: import("svelte").Component<OwnedPartProps<Accordion.TriggerProps>, {}, "ref">;
 type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
 export default AccordionTrigger;

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { AlertDialog } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<AlertDialog.ContentProps> = $props();
+	}: OwnedPartProps<AlertDialog.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <AlertDialog.Portal>
 	<AlertDialog.Overlay class="fixed inset-0 z-overlay bg-overlay" />
 	<AlertDialog.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'fixed top-1/2 left-1/2 z-overlay flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter rounded-bar border border-divider bg-well p-card shadow-lg glass-blur',
 			className

package/dist/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
-declare const AlertDialogContent: import("svelte").Component<PartProps<import("bits-ui").DialogContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const AlertDialogContent: import("svelte").Component<OwnedPartProps<import("bits-ui").DialogContentProps>, {}, "ref">;
 type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
 export default AlertDialogContent;

package/dist/ui/alert-dialog/alert-dialog-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { AlertDialog } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = AlertDialog.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: AlertDialog.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<AlertDialog.Root bind:open {...restProps}>
+	{@render children?.()}
+</AlertDialog.Root>

package/dist/ui/alert-dialog/alert-dialog-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { AlertDialog } from 'bits-ui';
+type $$ComponentProps = AlertDialog.RootProps & {
+    children?: Snippet;
+};
+declare const AlertDialogRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AlertDialogRoot = ReturnType<typeof AlertDialogRoot>;
+export default AlertDialogRoot;

package/dist/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
 	import { Button, type ButtonVariants } from '../button';
@@ -17,6 +18,13 @@
 		ButtonVariants & {
 			children?: Snippet;
 		} = $props();
+
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <AlertDialog.Trigger {...restProps}>

package/dist/ui/alert-dialog/index.d.ts

@@ -1,5 +1,5 @@
 import { AlertDialog } from 'bits-ui';
-export declare const Root: typeof AlertDialog.Root;
+export { default as Root } from './alert-dialog-root.svelte';
 export declare const Portal: typeof AlertDialog.Portal;
 export { default as Trigger } from './alert-dialog-trigger.svelte';
 export { default as Content } from './alert-dialog-content.svelte';

package/dist/ui/alert-dialog/index.js

@@ -1,5 +1,5 @@
 import { AlertDialog } from 'bits-ui';
-export const Root = AlertDialog.Root;
+export { default as Root } from './alert-dialog-root.svelte';
 export const Portal = AlertDialog.Portal;
 export { default as Trigger } from './alert-dialog-trigger.svelte';
 export { default as Content } from './alert-dialog-content.svelte';

package/dist/ui/combobox/combobox-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Combobox } from 'bits-ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Combobox.TriggerProps> = $props();
+	}: OwnedPartProps<Combobox.TriggerProps> = $props();
 </script>
 
 <Combobox.Trigger

package/dist/ui/combobox/combobox-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Combobox } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ComboboxTrigger: import("svelte").Component<PartProps<Combobox.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ComboboxTrigger: import("svelte").Component<OwnedPartProps<Combobox.TriggerProps>, {}, "ref">;
 type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
 export default ComboboxTrigger;

package/dist/ui/context-menu/context-menu-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { ContextMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<ContextMenu.ContentProps> = $props();
+	}: OwnedPartProps<ContextMenu.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <ContextMenu.Portal>
 	<ContextMenu.Content
 		bind:ref
+		{...relay?.attrs}
 		align="start"
 		// p-menu, SURFACE-owned on purpose: 0 on flat — rows run the
 		// panel's full width, flush, and the first row sits directly under the

package/dist/ui/context-menu/context-menu-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuContent: import("svelte").Component<PartProps<import("bits-ui").DropdownMenuContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuContent: import("svelte").Component<OwnedPartProps<import("bits-ui").DropdownMenuContentProps>, {}, "ref">;
 type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
 export default ContextMenuContent;

package/dist/ui/context-menu/context-menu-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ContextMenu } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = ContextMenu.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: ContextMenu.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<ContextMenu.Root bind:open {...restProps}>
+	{@render children?.()}
+</ContextMenu.Root>

package/dist/ui/context-menu/context-menu-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { ContextMenu } from 'bits-ui';
+type $$ComponentProps = ContextMenu.RootProps & {
+    children?: Snippet;
+};
+declare const ContextMenuRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ContextMenuRoot = ReturnType<typeof ContextMenuRoot>;
+export default ContextMenuRoot;

package/dist/ui/context-menu/context-menu-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { ContextMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<ContextMenu.SubContentProps> = $props();
+	}: OwnedPartProps<ContextMenu.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <ContextMenu.Portal>
 	<ContextMenu.SubContent
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className

package/dist/ui/context-menu/context-menu-sub-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuSubContent: import("svelte").Component<PartProps<ContextMenu.SubContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuSubContent: import("svelte").Component<OwnedPartProps<ContextMenu.SubContentProps>, {}, "ref">;
 type ContextMenuSubContent = ReturnType<typeof ContextMenuSubContent>;
 export default ContextMenuSubContent;

package/dist/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<ContextMenu.SubTriggerProps> = $props();
+	}: OwnedPartProps<ContextMenu.SubTriggerProps> = $props();
 </script>
 
 <ContextMenu.SubTrigger

package/dist/ui/context-menu/context-menu-sub-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ContextMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const ContextMenuSubTrigger: import("svelte").Component<PartProps<ContextMenu.SubTriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const ContextMenuSubTrigger: import("svelte").Component<OwnedPartProps<ContextMenu.SubTriggerProps>, {}, "ref">;
 type ContextMenuSubTrigger = ReturnType<typeof ContextMenuSubTrigger>;
 export default ContextMenuSubTrigger;