@zvk/ui 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.1.7](https://github.com/brandon-schabel/zvk/compare/v0.1.6...v0.1.7) (2026-06-15)
+
+
+### Bug Fixes
+
+* harden popup positioning ([efb8c8a](https://github.com/brandon-schabel/zvk/commit/efb8c8a98c2b759f4e84a60f5ae292b1e8900907))
+
 ## [0.1.6](https://github.com/brandon-schabel/zvk/compare/v0.1.5...v0.1.6) (2026-06-12)
 
 

package/dist/components/context-menu/context-menu.d.ts

@@ -14,6 +14,8 @@ export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivEle
     side?: FloatingSide;
     align?: FloatingAlign;
     alignOffset?: number;
+    sideOffset?: number;
+    collisionPadding?: number;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -38,7 +40,7 @@ export interface ContextMenuRadioItemProps extends ContextMenuItemProps {
 }
 declare function ContextMenuRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, ...props }: ContextMenuProps): React.JSX.Element;
 declare function ContextMenuTrigger({ asChild, children, className, onContextMenu, onKeyDown, ref, ...props }: ContextMenuTriggerProps): React.JSX.Element;
-declare function ContextMenuContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, style, ...props }: ContextMenuContentProps): React.JSX.Element | null;
+declare function ContextMenuContent({ align, alignOffset, children, className, collisionPadding, onKeyDown, ref, side, sideOffset, style, ...props }: ContextMenuContentProps): React.JSX.Element | null;
 declare function ContextMenuItem({ asChild, children, className, disabled, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuItemProps): React.JSX.Element;
 declare function ContextMenuLabel({ className, ref, ...props }: ContextMenuLabelProps): React.JSX.Element;
 declare function ContextMenuCheckboxItem({ asChild, checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuCheckboxItemProps): React.JSX.Element;

package/dist/components/context-menu/context-menu.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { createCollection } from "../../internal/collection/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { clamp, computeFloatingPosition } from "../../internal/floating/index.js";
 import { placementFromSideAlign, placementParts } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
 import { Slot } from "../../internal/slot/index.js";
@@ -114,20 +115,73 @@ function currentIndex(items) {
     const enabled = items.filter((item) => item.data.disabled !== true && item.data.ref !== null);
     return enabled.findIndex((item) => item.data.ref === document.activeElement);
 }
-function ContextMenuContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, style, ...props }) {
+function ContextMenuContent({ align, alignOffset = 0, children, className, collisionPadding = 4, onKeyDown, ref, side, sideOffset = 0, style, ...props }) {
     const { close, contentId, getItems, open, point } = useContextMenuContext("ContextMenu.Content");
     const contentPlacement = placementFromSideAlign(side, align, "bottom-start");
-    const contentPlacementParts = placementParts(contentPlacement);
+    const [contentStyle, setContentStyle] = React.useState({});
+    const [resolvedPlacement, setResolvedPlacement] = React.useState(contentPlacement);
+    const contentRef = React.useRef(null);
+    const updatePosition = React.useCallback(() => {
+        const node = contentRef.current;
+        if (node === null || typeof window === "undefined") {
+            return;
+        }
+        const rect = node.getBoundingClientRect();
+        const computed = computeFloatingPosition({
+            reference: { x: point.x, y: point.y, width: 0, height: 0 },
+            floating: { x: 0, y: 0, width: rect.width, height: rect.height },
+            boundary: { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight },
+            placement: contentPlacement,
+            strategy: "fixed",
+            offset: sideOffset,
+            alignmentOffset: alignOffset,
+            collisionPadding,
+            flip: true,
+            shift: true
+        });
+        const minX = collisionPadding;
+        const minY = collisionPadding;
+        const maxX = Math.max(minX, window.innerWidth - collisionPadding - rect.width);
+        const maxY = Math.max(minY, window.innerHeight - collisionPadding - rect.height);
+        setContentStyle({
+            position: computed.strategy,
+            left: `${clamp(computed.x, minX, maxX)}px`,
+            top: `${clamp(computed.y, minY, maxY)}px`
+        });
+        setResolvedPlacement(computed.placement);
+    }, [alignOffset, collisionPadding, contentPlacement, point.x, point.y, sideOffset]);
+    const schedulePositionUpdate = React.useCallback(() => {
+        if (typeof queueMicrotask === "function") {
+            queueMicrotask(updatePosition);
+            return;
+        }
+        window.setTimeout(updatePosition, 0);
+    }, [updatePosition]);
     React.useLayoutEffect(() => {
         if (!open) {
             return;
         }
         queueMicrotask(() => focusItem(getItems(), 0));
     }, [getItems, open]);
+    React.useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [open, updatePosition]);
     if (!open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "menu", className: cn("zvk-ui-context-menu__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, style: { ...style, left: `${point.x}px`, top: `${point.y}px` }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx("div", { ...props, ref: (node) => {
+                    setComposedRef(contentRef, ref, node);
+                    if (node !== null) {
+                        schedulePositionUpdate();
+                    }
+                }, id: contentId, role: "menu", className: cn("zvk-ui-context-menu__content", className), "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, style: { ...style, ...contentStyle }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = getItems();
                     const index = currentIndex(items);
                     if (event.key === "ArrowDown") {

package/dist/components/context-menu/index.d.ts

@@ -1,2 +1,2 @@
 export { ContextMenu } from "./context-menu.js";
-export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu.js";
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuRadioItemProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu.js";

package/dist/components/index.d.ts

@@ -41,9 +41,9 @@ export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandI
 export { Combobox } from "./combobox/index.js";
 export type { ComboboxOption, ComboboxProps } from "./combobox/index.js";
 export { ContextMenu } from "./context-menu/index.js";
-export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu/index.js";
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuRadioItemProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu/index.js";
 export { Menubar } from "./menubar/index.js";
-export type { MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar/index.js";
+export type { MenubarCheckboxItemProps, MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarRadioItemProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar/index.js";
 export { EmptyState } from "./empty-state/index.js";
 export type { EmptyStateAlign, EmptyStateProps, EmptyStateSize } from "./empty-state/index.js";
 export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";

package/dist/components/menubar/index.d.ts

@@ -1,2 +1,2 @@
 export { Menubar } from "./menubar.js";
-export type { MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar.js";
+export type { MenubarCheckboxItemProps, MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarRadioItemProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar.js";

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

@@ -46,7 +46,7 @@ export interface MenubarShortcutProps extends React.HTMLAttributes<HTMLSpanEleme
 declare function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChange, ref, value, ...props }: MenubarProps): React.JSX.Element;
 declare function MenubarMenu({ children, value }: MenubarMenuProps): React.JSX.Element;
 declare function MenubarTrigger({ asChild, children, className, disabled, onClick, onKeyDown, ref, type, ...props }: MenubarTriggerProps): React.JSX.Element;
-declare function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }: MenubarContentProps): React.JSX.Element | null;
+declare function MenubarContent({ align, alignOffset, children, className, onKeyDown, ref, side, sideOffset, style, ...props }: MenubarContentProps): React.JSX.Element | null;
 declare function MenubarItem({ asChild, children, className, disabled, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarItemProps): React.JSX.Element;
 declare function MenubarCheckboxItem({ asChild, checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarCheckboxItemProps): React.JSX.Element;
 declare function MenubarRadioItem({ asChild, checked, children, className, disabled, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarRadioItemProps): React.JSX.Element;

package/dist/components/menubar/menubar.js

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { createCollection } from "../../internal/collection/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
 import { placementFromSideAlign, placementParts } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
 import { Slot } from "../../internal/slot/index.js";
@@ -55,6 +56,14 @@ function setComposedRef(internalRef, externalRef, node) {
         externalRef.current = node;
     }
 }
+function setForwardedRef(externalRef, node) {
+    if (typeof externalRef === "function") {
+        externalRef(node);
+    }
+    else if (externalRef !== undefined && externalRef !== null) {
+        externalRef.current = node;
+    }
+}
 function isActivationKey(key) {
     return key === "Enter" || key === " " || key === "Space" || key === "Spacebar";
 }
@@ -172,15 +181,34 @@ function MenubarTrigger({ asChild = false, children, className, disabled, onClic
             setComposedRef(triggerRef, ref, node);
         }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("zvk-ui-menubar__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": menu.open ? "open" : "closed", onClick: triggerProps.onClick, onKeyDown: triggerProps.onKeyDown, children: children }));
 }
-function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }) {
+function MenubarContent({ align, alignOffset = 0, children, className, onKeyDown, ref, side, sideOffset = 4, style, ...props }) {
     const menubar = useMenubarContext("Menubar.Content");
     const menu = useMenuContext("Menubar.Content");
     const contentPlacement = placementFromSideAlign(side, align, "bottom-start");
-    const contentPlacementParts = placementParts(contentPlacement);
+    const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef } = useFloatingPosition({
+        open: menu.open,
+        placement: contentPlacement,
+        strategy: "fixed",
+        offset: sideOffset,
+        alignmentOffset: alignOffset,
+        collisionPadding: 4
+    });
+    React.useLayoutEffect(() => {
+        if (!menu.open) {
+            referenceRef(null);
+            return;
+        }
+        const activeTrigger = menubar.getTriggers().find((trigger) => trigger.data.value === menu.value);
+        referenceRef(activeTrigger?.data.ref ?? null);
+        return () => referenceRef(null);
+    }, [menubar, menu.open, menu.value, referenceRef]);
     if (!menu.open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: (node) => {
+                    floatingRef(node);
+                    setForwardedRef(ref, node);
+                }, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), style: { ...style, ...floatingStyle }, "data-align": placementParts(resolvedPlacement).align, "data-side": placementParts(resolvedPlacement).side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = menu.getItems();
                     const index = activeIndex(items);
                     if (event.key === "ArrowDown") {

package/dist/internal/floating/auto-update.js

@@ -1,18 +1,30 @@
 function hasBrowserApis() {
     return typeof window !== "undefined" && typeof document !== "undefined";
 }
+function scheduleFrame(callback) {
+    if (typeof window.requestAnimationFrame === "function") {
+        const frame = window.requestAnimationFrame(callback);
+        return () => {
+            if (typeof window.cancelAnimationFrame === "function") {
+                window.cancelAnimationFrame(frame);
+            }
+        };
+    }
+    const timeout = window.setTimeout(callback, 0);
+    return () => {
+        window.clearTimeout(timeout);
+    };
+}
 export function autoUpdateFloating(params) {
     const { enabled, reference, floating, update } = params;
     if (!hasBrowserApis() || !enabled || reference === null || floating === null) {
         return () => { };
     }
-    let frameRequest = null;
+    let cancelScheduledUpdate = null;
     const scheduleUpdate = () => {
-        if (frameRequest !== null) {
-            cancelAnimationFrame(frameRequest);
-        }
-        frameRequest = window.requestAnimationFrame(() => {
-            frameRequest = null;
+        cancelScheduledUpdate?.();
+        cancelScheduledUpdate = scheduleFrame(() => {
+            cancelScheduledUpdate = null;
             update();
         });
     };
@@ -40,9 +52,9 @@ export function autoUpdateFloating(params) {
         for (const cleanup of cleanupFns) {
             cleanup();
         }
-        if (frameRequest !== null) {
-            cancelAnimationFrame(frameRequest);
-            frameRequest = null;
+        if (cancelScheduledUpdate !== null) {
+            cancelScheduledUpdate();
+            cancelScheduledUpdate = null;
         }
     };
 }

package/dist/styles.css

@@ -3663,7 +3663,6 @@
     color: var(--zvk-ui-color-foreground);
     display: grid;
     gap: var(--zvk-ui-space-1);
-    margin-block-start: var(--zvk-ui-space-1);
     min-inline-size: 12rem;
     padding: var(--zvk-ui-space-1);
     position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvk/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A polished, zero-runtime-dependency React component library for ZvkUi applications.",
   "private": false,
   "type": "module",
@@ -270,13 +270,14 @@
     "test:ssr": "vitest run tests/ssr --environment node",
     "test:exports": "vitest run tests/exports --environment node",
     "test:accessibility": "vitest run tests/accessibility",
+    "test:browser": "playwright test --config playwright.config.ts",
     "test:types": "tsd",
     "docs:lint": "bun run scripts/lint-docs.mjs",
     "verify:style-contract": "bun run scripts/verify-style-contract.mjs",
     "validate:exports": "bun run scripts/validate-exports.mjs",
     "tarball:inspect": "bun run scripts/check-tarball.mjs",
     "pack:dry": "npm pack --dry-run",
-    "preflight": "bun run typecheck && bun run build && bun run test:unit && bun run test:ssr && bun run test:types && bun run test:exports && bun run test:accessibility && bun run docs:lint && bun run verify:style-contract && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
+    "preflight": "bun run typecheck && bun run build && bun run test:unit && bun run test:ssr && bun run test:types && bun run test:exports && bun run test:accessibility && bun run test:browser && bun run docs:lint && bun run verify:style-contract && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -287,6 +288,7 @@
     "directory": "tests/types"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",