@bysages/react 0.4.4 → 0.6.0

package/dist/components/layout/index.mjs

@@ -1,9 +1,9 @@
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Splitter } from "@ark-ui/react/splitter";
-//#region src/components/layout/index.tsx
+// src/components/layout/index.tsx
 const LAYOUT_CONTEXT = createContext(null);
 /** One step of Ark's keyboard resize, converted to a splitter percentage
 * at render time so the public behavior remains a 16px move. */
@@ -113,7 +113,7 @@ function region(name, tag) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => {
 		const layout = useContext(LAYOUT_CONTEXT);
-		const splitPanel = name === "Content" && !!layout?.siderPlacement() && !!layout.getSiderState()?.resizable && !layout.getSiderState().collapsed;
+		const splitPanel = name === "Content" && !!layout?.siderPlacement() && !!layout.getSiderState()?.resizable;
 		return /* @__PURE__ */ jsx(Tag, {
 			...rest,
 			"data-scope": "layout",
@@ -141,24 +141,28 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
 	const width = widthProp !== void 0 ? widthProp : innerWidth;
 	useEffect(() => {
+		const railWidth = collapsed ? collapsedWidth : width;
+		const railMin = collapsed ? collapsedWidth : minWidth;
+		const railMax = collapsed ? collapsedWidth : maxWidth;
 		layout?.setSiderState((previous) => previous ? {
 			...previous,
 			resizable,
 			collapsed,
-			width,
-			minWidth,
-			maxWidth
+			width: railWidth,
+			minWidth: railMin,
+			maxWidth: railMax
 		} : {
 			resizable,
 			collapsed,
-			width,
-			minWidth,
-			maxWidth
+			width: railWidth,
+			minWidth: railMin,
+			maxWidth: railMax
 		});
 	}, [
 		layout,
 		resizable,
 		collapsed,
+		collapsedWidth,
 		width,
 		minWidth,
 		maxWidth
@@ -194,12 +198,13 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		});
 	}, [layout, onWidthChange]);
 	const contents = typeof children === "function" ? children({ collapsed }) : children;
-	const body = active ? /* @__PURE__ */ jsxs(Splitter.Panel, {
+	const resizeTrigger = active ? /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+		id: layout?.siderPlacement() === "end" ? "flow:sider" : "sider:flow",
+		"aria-label": messages.sidebar.resize
+	}) : null;
+	const body = resizable && layout ? /* @__PURE__ */ jsxs(Splitter.Panel, {
 		id: "sider",
-		children: [contents, /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
-			id: layout?.siderPlacement() === "end" ? "flow:sider" : "sider:flow",
-			"aria-label": messages.sidebar.resize
-		})]
+		children: [contents, resizeTrigger]
 	}) : contents;
 	return /* @__PURE__ */ jsx("aside", {
 		...rest,
@@ -225,5 +230,4 @@ const Layout = Object.assign(Root, {
 	Footer
 });
 injectComponentStyle("layout");
-//#endregion
 export { Layout };

package/dist/components/link/index.d.mts

@@ -1,5 +1,4 @@
 import { AnchorHTMLAttributes } from "react";
-//#region src/components/link/index.d.ts
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   underline?: "always" | "hover" | "none";
 }
@@ -10,4 +9,4 @@ declare function LinkImpl({ underline, children, ...rest }: LinkProps): import("
 export declare const Link: typeof LinkImpl & {
   Root: typeof LinkImpl;
 };
-//#endregion
+export {};

package/dist/components/link/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/link/index.tsx
+// src/components/link/index.tsx
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
@@ -16,5 +16,4 @@ function LinkImpl({ underline = "hover", children, ...rest }) {
 	});
 }
 const Link = withSelfRoot(LinkImpl);
-//#endregion
 export { Link };

package/dist/components/list/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/list/index.d.ts
 export interface ListRootProps extends HTMLAttributes<HTMLUListElement> {
   /** One hairline between rows. */
   bordered?: boolean;
@@ -37,4 +36,4 @@ export declare const List: typeof Root & {
     displayName: string;
   };
 };
-//#endregion
+export {};

package/dist/components/list/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/list/index.tsx
+// src/components/list/index.tsx
 /** A ledger of rows: Root is the list, Item one row, Leading the mark
 * before the words, Content the title and its quiet echo, Actions the
 * way out. The bordered variant draws the hairlines; the hoverable
@@ -71,5 +71,4 @@ const List = Object.assign(Root, {
 	Actions
 });
 injectComponentStyle("list");
-//#endregion
 export { List };

package/dist/components/listbox/index.d.mts

@@ -1,7 +1,6 @@
 import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Listbox as Listbox$1, ListboxRootComponentProps, createListCollection } from "@ark-ui/react/listbox";
-//#region src/components/listbox/index.d.ts
 /** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
  * where the checked row alone takes the flat primary fill. The API is
  * Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
@@ -35,5 +34,4 @@ declare function ListboxFacade(props: ListboxFacadeProps): import("react").JSX.E
 export declare const Listbox: typeof ListboxFacade & Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
-//#endregion
 export { createListCollection };

package/dist/components/listbox/index.mjs

@@ -1,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Listbox as Listbox$1, createListCollection } from "@ark-ui/react/listbox";
-//#region src/components/listbox/index.tsx
+// src/components/listbox/index.tsx
 function ListboxRoot(props) {
 	injectComponentStyle("listbox");
 	const id = useElementId("listbox", props);
@@ -46,5 +46,4 @@ const Listbox = Object.assign(ListboxFacade, {
 	...Listbox$1,
 	Root: ListboxRoot
 });
-//#endregion
 export { Listbox, createListCollection };

package/dist/components/marquee/index.d.mts

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps } from "react";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
-//#region src/components/marquee/index.d.ts
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
  * seal-cut chips that dissolves into the paper at its edges rather than
  * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
@@ -21,4 +20,4 @@ declare function MarqueeFacade(props: MarqueeFacadeProps): import("react").JSX.E
 export declare const Marquee: typeof MarqueeFacade & Omit<typeof Marquee$1, "Root"> & {
   Root: typeof MarqueeRoot;
 };
-//#endregion
+export {};

package/dist/components/marquee/index.mjs

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
-//#region src/components/marquee/index.tsx
+// src/components/marquee/index.tsx
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
 * seal-cut chips that dissolves into the paper at its edges rather than
 * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
@@ -38,5 +38,4 @@ const Marquee = Object.assign(MarqueeFacade, {
 	...Marquee$1,
 	Root: MarqueeRoot
 });
-//#endregion
 export { Marquee };

package/dist/components/masonry/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/masonry/index.d.ts
 /** A wall of uneven heights: items flow down each column before
  * crossing to the next, so the order is column-first. A row-flow wall
  * would need grid masonry, which browsers do not ship yet. */
@@ -11,4 +10,4 @@ declare function MasonryImpl({ columns, gap, ...rest }: MasonryProps): import("r
 export declare const Masonry: typeof MasonryImpl & {
   Root: typeof MasonryImpl;
 };
-//#endregion
+export {};

package/dist/components/masonry/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/masonry/index.tsx
+// src/components/masonry/index.tsx
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -27,5 +27,4 @@ function MasonryImpl({ columns = 3, gap = "md", ...rest }) {
 	});
 }
 const Masonry = withSelfRoot(MasonryImpl);
-//#endregion
 export { Masonry };

package/dist/components/media-player/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-BcRdWGY-.mjs";
+import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-DIZEFqJM.mjs";
 export { Audio, type MediaPlayerProps, type MediaSourceOption, type MediaTextTrackOption, Video, formatMediaTime };

package/dist/components/media-player/index.mjs

@@ -1,2 +1 @@
-import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-C0WcjVI-.mjs";
-export { Audio, Video, formatMediaTime };
+export { t as Audio, n as Video, r as formatMediaTime } from "../../media-player-DxG0EYz7.mjs";

package/dist/components/mentions/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-Bbg4heDO.mjs";
-export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };
+import { a as MentionsProps, c as MentionCommitKey, d as useMentions, i as Mentions, l as UseMentionsHandlers, n as MentionPlacement, o as MentionsVessel, r as MentionTriggers, s as MentionsVesselProps, t as MentionEntry, u as UseMentionsOptions } from "../../index-CEYybyEQ.mjs";
+export { type MentionCommitKey, MentionEntry, MentionPlacement, MentionTriggers, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -1,2 +1 @@
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-BwnyvdXz.mjs";
-export { Mentions, MentionsVessel, useMentions };
+export { t as Mentions, n as MentionsVessel, r as useMentions } from "../../mentions-B59tQDPt.mjs";

package/dist/components/menu/index.d.mts

@@ -1,6 +1,6 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { ComponentProps } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
-//#region src/components/menu/index.d.ts
 type MenuRootProps = ComponentProps<typeof Menu$1.Root> & {
   /** One rung of the control-height ladder for the vessel's rows. */
   size?: "sm" | "md" | "lg";
@@ -16,6 +16,8 @@ export interface MenuItemOption {
 }
 type MenuPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 export interface MenuFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger: string;
@@ -26,13 +28,18 @@ export interface MenuFacadeProps {
   onSelect?: (value: string) => void;
   onOpenChange?: (open: boolean) => void;
 }
-declare function MenuFacade({ open, defaultOpen, trigger, items, disabled, placement, size, onSelect, onOpenChange }: MenuFacadeProps): import("react").JSX.Element;
+declare const MenuPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Menu$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function MenuFacade({ portal, open, defaultOpen, trigger, items, disabled, placement, size, onSelect, onOpenChange }: MenuFacadeProps): import("react").JSX.Element;
 declare namespace MenuFacade {
   var displayName: string;
 }
-type MenuParts = Omit<typeof Menu$1, "Root" | "Content"> & {
+type MenuParts = Omit<typeof Menu$1, "Root" | "Content" | "Positioner"> & {
+  Positioner: typeof MenuPositioner;
   Root: typeof MenuRoot;
   Content: typeof MenuContent;
 };
 export declare const Menu: typeof MenuFacade & MenuParts;
-//#endregion
+export {};

package/dist/components/menu/index.mjs

@@ -1,10 +1,11 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as definePositioner, t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
-//#region src/components/menu/index.tsx
+// src/components/menu/index.tsx
 /** The row rung rides the context because Ark's Root renders no DOM of
 * its own — the vessel (Content) is the element the rung can land on,
 * and the Portal breaks CSS ancestry between the two. */
@@ -27,7 +28,8 @@ function MenuContent(props) {
 		"data-size": size
 	});
 }
-function MenuFacade({ open, defaultOpen, trigger, items, disabled = false, placement = "bottom-start", size = "md", onSelect, onOpenChange }) {
+const MenuPositioner = definePositioner(Menu$1.Positioner);
+function MenuFacade({ portal = false, open, defaultOpen, trigger, items, disabled = false, placement = "bottom-start", size = "md", onSelect, onOpenChange }) {
 	return /* @__PURE__ */ jsxs(MenuRoot, {
 		size,
 		positioning: { placement },
@@ -41,19 +43,22 @@ function MenuFacade({ open, defaultOpen, trigger, items, disabled = false, place
 				width: 14,
 				height: 14
 			}) })]
-		}), /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(MenuContent, { children: items.map((item) => /* @__PURE__ */ jsx(Menu$1.Item, {
-			value: item.value,
-			disabled: item.disabled,
-			children: item.label
-		}, item.value)) }) })]
+		}), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(MenuContent, { children: items.map((item) => /* @__PURE__ */ jsx(Menu$1.Item, {
+				value: item.value,
+				disabled: item.disabled,
+				children: item.label
+			}, item.value)) }) })
+		})]
 	});
 }
 MenuFacade.displayName = "SMenu";
 const Menu = Object.assign(MenuFacade, {
 	...Menu$1,
+	Positioner: MenuPositioner,
 	Root: MenuRoot,
 	Content: MenuContent
 });
 injectComponentStyle("menu");
-//#endregion
 export { Menu };

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

@@ -1,6 +1,6 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Menu } from "../menu/index.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/menubar/index.d.ts
 export interface MenubarEntry {
   label: string;
   value: string;
@@ -24,11 +24,13 @@ export interface MenubarGroup {
  * version. Inside an open menu the machine handles arrows and Escape.
  */
 export interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   /** The menus across the bar, each with its entries. */
   items: MenubarGroup[];
   /** Called with the entry's `value` when it is chosen. */
   onSelect?: (value: string) => void;
 }
-declare function MenubarImpl({ items, onSelect, children, ...rest }: MenubarProps): import("react").JSX.Element;
+declare function MenubarImpl({ portal, items, onSelect, children, ...rest }: MenubarProps): import("react").JSX.Element;
 export declare const Menubar: typeof MenubarImpl & typeof Menu;
-//#endregion
+export {};

package/dist/components/menubar/index.mjs

@@ -1,11 +1,11 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Menu } from "@ark-ui/react/menu";
-//#region src/components/menubar/index.tsx
-function MenubarImpl({ items, onSelect, children, ...rest }) {
+// src/components/menubar/index.tsx
+function MenubarImpl({ portal = false, items, onSelect, children, ...rest }) {
 	injectComponentStyle("menubar");
 	injectComponentStyle("menu");
 	const hostId = useElementId("menubar", rest);
@@ -26,16 +26,18 @@ function MenubarImpl({ items, onSelect, children, ...rest }) {
 					"data-part": "trigger",
 					children: group.label
 				})
-			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
-				value: entry.value,
-				disabled: entry.disabled,
-				"data-danger": entry.danger ? "" : void 0,
-				onSelect: () => onSelect?.(entry.value),
-				children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
-			}, entry.value)) }) }) })]
+			}), /* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
+					value: entry.value,
+					disabled: entry.disabled,
+					"data-danger": entry.danger ? "" : void 0,
+					onSelect: () => onSelect?.(entry.value),
+					children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
+				}, entry.value)) }) })
+			})]
 		}, group.label)), children]
 	});
 }
 const Menubar = Object.assign(MenubarImpl, Menu$1);
-//#endregion
 export { Menubar };

package/dist/components/meter/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/meter/index.d.ts
 export interface MeterRootProps extends HTMLAttributes<HTMLElement> {
   /** The measured value — clamped between min and max. */
   value: number;
@@ -22,5 +21,4 @@ export declare const Meter: (({ value, min, max, level, size, label, children, .
     displayName: string;
   };
   Track: ({ ...rest }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;
-};
-//#endregion
+};

package/dist/components/meter/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/meter/index.tsx
+// src/components/meter/index.tsx
 function part(name, tag) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
@@ -55,5 +55,4 @@ const Meter = Object.assign(Root, {
 	Track
 });
 injectComponentStyle("meter");
-//#endregion
 export { Meter };

package/dist/components/navigation-menu/index.d.mts

@@ -1,12 +1,18 @@
+import { t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { ComponentProps } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
-//#region src/components/navigation-menu/index.d.ts
 /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
  * ghost triggers with one sliding stroke of primary ink, opening the shared
  * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
  * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
 declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenu$1.Root>): import("react").JSX.Element;
 declare function NavigationMenuLink(props: ComponentProps<typeof NavigationMenu$1.Link>): import("react").JSX.Element;
+/** The shared panel stage keeps the raw Ark part until a caller opts into
+ * a portal; the flat-link facade has no vessel of its own. */
+declare const NavigationMenuViewportPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & NavigationMenu$1.ViewportPositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 /** One flat destination in the callable bar; grouped panels and mega
  * menus stay on the anatomy. */
 export interface NavigationMenuLinkOption {
@@ -24,9 +30,10 @@ declare function NavigationMenuFacade({ items, orientation, className }: Navigat
 declare namespace NavigationMenuFacade {
   var displayName: string;
 }
-type NavigationMenuParts = Omit<typeof NavigationMenu$1, "Root" | "Link"> & {
+type NavigationMenuParts = Omit<typeof NavigationMenu$1, "Root" | "Link" | "ViewportPositioner"> & {
   Root: typeof NavigationMenuRoot;
   Link: typeof NavigationMenuLink;
+  ViewportPositioner: typeof NavigationMenuViewportPositioner;
 };
 export declare const NavigationMenu: typeof NavigationMenuFacade & NavigationMenuParts;
-//#endregion
+export {};

package/dist/components/navigation-menu/index.mjs

@@ -1,8 +1,9 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as definePositioner } from "../../floating-CMR7cvmA.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
-//#region src/components/navigation-menu/index.tsx
+// src/components/navigation-menu/index.tsx
 /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
 * ghost triggers with one sliding stroke of primary ink, opening the shared
 * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
@@ -21,6 +22,10 @@ function NavigationMenuLink(props) {
 		"data-motion": "ink-ripple"
 	});
 }
+/** The shared panel stage keeps the raw Ark part until a caller opts into
+* a portal; the flat-link facade has no vessel of its own. */
+const NavigationMenuViewportPositioner = definePositioner(NavigationMenu$1.ViewportPositioner);
+NavigationMenuViewportPositioner.displayName = "SNavigationMenuViewportPositioner";
 function NavigationMenuFacade({ items, orientation = "horizontal", className }) {
 	return /* @__PURE__ */ jsx(NavigationMenuRoot, {
 		className,
@@ -39,8 +44,8 @@ NavigationMenuFacade.displayName = "SNavigationMenu";
 const NavigationMenu = Object.assign(NavigationMenuFacade, {
 	...NavigationMenu$1,
 	Root: NavigationMenuRoot,
-	Link: NavigationMenuLink
+	Link: NavigationMenuLink,
+	ViewportPositioner: NavigationMenuViewportPositioner
 });
 injectComponentStyle("navigation-menu");
-//#endregion
 export { NavigationMenu };

package/dist/components/number-input/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
-//#region src/components/number-input/index.d.ts
 type NumberInputRootProps = ComponentProps<typeof NumberInput$1.Root> & {
   /** One rung of the control-height ladder for the field and its stepper. */
   size?: "sm" | "md" | "lg";
@@ -35,4 +34,4 @@ export declare const NumberInput: typeof NumberInputFacade & {
   Scrubber: import("react").ForwardRefExoticComponent<NumberInput$1.ScrubberProps & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<NumberInput$1.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
+export {};

package/dist/components/number-input/index.mjs

@@ -1,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
-//#region src/components/number-input/index.tsx
+// src/components/number-input/index.tsx
 function NumberInputRoot(props) {
 	const id = useElementId("number-input", props);
 	const { size = "md", ...rest } = props;
@@ -42,5 +42,4 @@ const NumberInput = Object.assign(NumberInputFacade, {
 	Root: NumberInputRoot
 });
 injectComponentStyle("number-input");
-//#endregion
 export { NumberInput };

package/dist/components/order-list/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/order-list/index.d.ts
 export interface OrderOption {
   label: string;
   value: string;
@@ -21,4 +20,4 @@ declare function OrderListImpl({ value, options, label, onValueChange, ...rest }
 export declare const OrderList: typeof OrderListImpl & {
   Root: typeof OrderListImpl;
 };
-//#endregion
+export {};

package/dist/components/order-list/index.mjs

@@ -1,10 +1,10 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-//#region src/components/order-list/index.tsx
+// src/components/order-list/index.tsx
 const ORDER_ICONS = {
 	up: { name: "chevron-up" },
 	down: { name: "chevron-down" },
@@ -159,5 +159,4 @@ function OrderListImpl({ value, options, label, onValueChange, ...rest }) {
 	});
 }
 const OrderList = withSelfRoot(OrderListImpl);
-//#endregion
 export { OrderList };

package/dist/components/page-header/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/page-header/index.d.ts
 export declare const PageHeader: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
@@ -28,5 +27,4 @@ export declare const PageHeader: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
   };
-};
-//#endregion
+};

package/dist/components/page-header/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/page-header/index.tsx
+// src/components/page-header/index.tsx
 /** The page's face: an eyebrow whisper, a serif title, one line of
 * description, and the actions resting beside the title on the same
 * baseline. Heading groups title and actions; the rest compose below. */
@@ -30,5 +30,4 @@ const PageHeader = Object.assign(Root, {
 	Actions
 });
 injectComponentStyle("page-header");
-//#endregion
 export { PageHeader };

package/dist/components/pagination/index.d.mts

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps } from "react";
 import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
-//#region src/components/pagination/index.d.ts
 type PaginationRootProps = ComponentProps<typeof Pagination$1.Root> & {
   /** One rung of the control-height ladder every page seal shares. */
   size?: "sm" | "md" | "lg";
@@ -27,8 +26,8 @@ type PaginationFacadeProps = {
   style?: CSSProperties;
   onValueChange?: (page: number) => void;
 };
-declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<Pagination$1.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<Pagination$1.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<Pagination$1.PrevTriggerProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<Pagination$1.NextTriggerProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 /** The complete pagination bar behind one page: count and page size become
  * the visible ladder, with edge semantics left to anatomy. */
 declare function PaginationFacade(props: PaginationFacadeProps): import("react").JSX.Element;
@@ -37,4 +36,4 @@ export declare const Pagination: typeof PaginationFacade & Omit<typeof Paginatio
   PrevTrigger: typeof PaginationPrevTrigger;
   NextTrigger: typeof PaginationNextTrigger;
 };
-//#endregion
+export {};