@bysages/react 0.5.0 → 0.6.0

package/dist/components/date-picker/index.mjs

@@ -1,5 +1,6 @@
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
@@ -20,8 +21,9 @@ function toDatePickerValue(value) {
 }
 /** The complete picker behind one date: the field opens a single day grid,
 * while ranges, multiple selection, and custom views remain anatomy work. */
+const DatePickerPositioner = definePositioner(DatePicker$1.Positioner);
 function DatePickerFacade(props) {
-	const { value, defaultValue, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	const { portal = false, value, defaultValue, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
 	return /* @__PURE__ */ jsxs(DatePickerRoot, {
 		size,
 		defaultValue: toDatePickerValue(defaultValue),
@@ -39,31 +41,35 @@ function DatePickerFacade(props) {
 				width: 16,
 				height: 16
 			}) })] }),
-			/* @__PURE__ */ jsx(DatePicker$1.Positioner, { children: /* @__PURE__ */ jsx(DatePicker$1.Content, { children: /* @__PURE__ */ jsx(DatePicker$1.View, {
-				view: "day",
-				children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
-					/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: iconNode("chevron-left", {
-						width: 14,
-						height: 14
-					}) }),
-					/* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: /* @__PURE__ */ jsx(DatePicker$1.RangeText, {}) }),
-					/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: iconNode("chevron-right", {
-						width: 14,
-						height: 14
-					}) })
-				] }), /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: dp.weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
-					"aria-label": day.long,
-					children: day.narrow
-				}, index)) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: dp.weeks.map((week, index) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
-					value: day,
-					children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
-				}, dayIndex)) }, index)) })] })] }) })
-			}) }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(DatePicker$1.Positioner, { children: /* @__PURE__ */ jsx(DatePicker$1.Content, { children: /* @__PURE__ */ jsx(DatePicker$1.View, {
+					view: "day",
+					children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
+						/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: iconNode("chevron-left", {
+							width: 14,
+							height: 14
+						}) }),
+						/* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: /* @__PURE__ */ jsx(DatePicker$1.RangeText, {}) }),
+						/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: iconNode("chevron-right", {
+							width: 14,
+							height: 14
+						}) })
+					] }), /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: dp.weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
+						"aria-label": day.long,
+						children: day.narrow
+					}, index)) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: dp.weeks.map((week, index) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
+						value: day,
+						children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
+					}, dayIndex)) }, index)) })] })] }) })
+				}) }) })
+			})
 		]
 	});
 }
 const DatePicker = Object.assign(DatePickerFacade, {
 	...DatePicker$1,
+	Positioner: DatePickerPositioner,
 	Root: DatePickerRoot
 });
 export { DatePicker };

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

@@ -1,5 +1,7 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/react/dialog";
+export type DialogSize = "sm" | "md" | "lg" | "xl";
 interface DialogPartProps extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
 }
@@ -18,6 +20,12 @@ declare function Footer({ children, ...rest }: DialogPartProps): import("react")
 declare namespace Footer {
   var displayName: string;
 }
+/** The semantic sheet: `size` names one content measure instead of a caller
+ * overriding the sheet's max-width for every dialog. */
+interface DialogContentProps extends ComponentProps<typeof Dialog$1.Content> {
+  size?: DialogSize;
+}
+declare function DialogContent({ size, ...rest }: DialogContentProps): import("react").JSX.Element;
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
  * in on elevation, the backdrop fades, and nested overlays stack through
  * the shared z-index ladder. The API is Ark's own — Root, Trigger,
@@ -25,6 +33,8 @@ declare namespace Footer {
  * plus the Header, Body, and Footer anatomy parts. */
 declare function DialogRoot(props: ComponentProps<typeof Dialog$1.Root>): import("react").JSX.Element;
 export interface DialogFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger?: string;
@@ -32,18 +42,25 @@ export interface DialogFacadeProps {
   label?: string;
   description?: string;
   disabled?: boolean;
+  size?: DialogSize;
   children?: ReactNode;
   onOpenChange?: (open: boolean) => void;
 }
-declare function DialogFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DialogFacadeProps): import("react").JSX.Element;
+declare const DialogPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Dialog$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function DialogFacade({ portal, open, defaultOpen, trigger, content, label, description, disabled, size, children, onOpenChange }: DialogFacadeProps): import("react").JSX.Element;
 declare namespace DialogFacade {
   var displayName: string;
 }
-type DialogParts = typeof Dialog$1;
-export declare const Dialog: typeof DialogFacade & Omit<DialogParts, "Root"> & {
+type DialogParts = Omit<typeof Dialog$1, "Root" | "Content" | "Positioner"> & {
+  Positioner: typeof DialogPositioner;
   Root: typeof DialogRoot;
+  Content: typeof DialogContent;
   Header: typeof Header;
   Body: typeof Body;
   Footer: typeof Footer;
 };
+export declare const Dialog: typeof DialogFacade & DialogParts;
 export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -1,5 +1,6 @@
 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 { Dialog as Dialog$1 } from "@ark-ui/react/dialog";
@@ -34,6 +35,12 @@ function Footer({ children, ...rest }) {
 Header.displayName = "DialogHeader";
 Body.displayName = "DialogBody";
 Footer.displayName = "DialogFooter";
+function DialogContent({ size, ...rest }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Content, {
+		...rest,
+		"data-size": size
+	});
+}
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
 * in on elevation, the backdrop fades, and nested overlays stack through
 * the shared z-index ladder. The API is Ark's own — Root, Trigger,
@@ -46,7 +53,8 @@ function DialogRoot(props) {
 		id
 	});
 }
-function DialogFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+const DialogPositioner = definePositioner(Dialog$1.Positioner);
+function DialogFacade({ portal = true, open, defaultOpen, trigger, content, label, description, disabled = false, size = "md", children, onOpenChange }) {
 	const title = label ?? trigger;
 	return /* @__PURE__ */ jsxs(DialogRoot, {
 		...open === void 0 ? {} : { open },
@@ -58,24 +66,32 @@ function DialogFacade({ open, defaultOpen, trigger, content, label, description,
 				children: trigger ?? title ?? "Open"
 			}),
 			/* @__PURE__ */ jsx(Dialog$1.Backdrop, {}),
-			/* @__PURE__ */ jsx(Dialog$1.Positioner, { children: /* @__PURE__ */ jsxs(Dialog$1.Content, { children: [
-				/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx(Dialog$1.Title, { children: title }), description ? /* @__PURE__ */ jsx(Dialog$1.Description, { children: description }) : null] }),
-				/* @__PURE__ */ jsxs(Body, { children: [content ? /* @__PURE__ */ jsx("p", { children: content }) : null, children] }),
-				/* @__PURE__ */ jsx(Dialog$1.CloseTrigger, {
-					"aria-label": "Close",
-					children: iconNode("x", {
-						width: 14,
-						height: 14
-					})
-				})
-			] }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Dialog$1.Positioner, { children: /* @__PURE__ */ jsxs(DialogContent, {
+					size,
+					children: [
+						/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx(Dialog$1.Title, { children: title }), description ? /* @__PURE__ */ jsx(Dialog$1.Description, { children: description }) : null] }),
+						/* @__PURE__ */ jsxs(Body, { children: [content ? /* @__PURE__ */ jsx("p", { children: content }) : null, children] }),
+						/* @__PURE__ */ jsx(Dialog$1.CloseTrigger, {
+							"aria-label": "Close",
+							children: iconNode("x", {
+								width: 14,
+								height: 14
+							})
+						})
+					]
+				}) })
+			})
 		]
 	});
 }
 DialogFacade.displayName = "SDialog";
 const Dialog = Object.assign(DialogFacade, {
 	...Dialog$1,
+	Positioner: DialogPositioner,
 	Root: DialogRoot,
+	Content: DialogContent,
 	Header,
 	Body,
 	Footer

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

@@ -1,6 +1,15 @@
-import { ReactNode } from "react";
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
+import { ComponentProps, ReactNode } from "react";
 import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
+/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
+ * cut flush to the edge it rises from, sliding on the machine's translate
+ * under the grabber's hand. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
+ * Description, CloseTrigger, SwipeArea. */
+declare function DrawerRoot(props: ComponentProps<typeof Drawer$1.Root>): import("react").JSX.Element;
 export interface DrawerFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger?: string;
@@ -11,10 +20,17 @@ export interface DrawerFacadeProps {
   children?: ReactNode;
   onOpenChange?: (open: boolean) => void;
 }
-declare function DrawerFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DrawerFacadeProps): import("react").JSX.Element;
+declare const DrawerPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Drawer$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function DrawerFacade({ portal, open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DrawerFacadeProps): import("react").JSX.Element;
 declare namespace DrawerFacade {
   var displayName: string;
 }
-type DrawerParts = typeof Drawer$1;
+type DrawerParts = Omit<typeof Drawer$1, "Root" | "Positioner"> & {
+  Positioner: typeof DrawerPositioner;
+  Root: typeof DrawerRoot;
+};
 export declare const Drawer: typeof DrawerFacade & DrawerParts;
 export {};

package/dist/components/drawer/index.mjs

@@ -1,5 +1,6 @@
 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 { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
@@ -16,7 +17,8 @@ function DrawerRoot(props) {
 		id
 	});
 }
-function DrawerFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+const DrawerPositioner = definePositioner(Drawer$1.Positioner);
+function DrawerFacade({ portal = true, open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
 	return /* @__PURE__ */ jsxs(DrawerRoot, {
 		...open === void 0 ? {} : { open },
 		...defaultOpen === void 0 ? {} : { defaultOpen },
@@ -27,23 +29,27 @@ function DrawerFacade({ open, defaultOpen, trigger, content, label, description,
 				children: trigger ?? label
 			}),
 			/* @__PURE__ */ jsx(Drawer$1.Backdrop, {}),
-			/* @__PURE__ */ jsx(Drawer$1.Positioner, { children: /* @__PURE__ */ jsxs(Drawer$1.Content, { children: [
-				/* @__PURE__ */ jsx(Drawer$1.Grabber, { children: /* @__PURE__ */ jsx(Drawer$1.GrabberIndicator, {}) }),
-				/* @__PURE__ */ jsx(Drawer$1.Title, { children: label }),
-				description ? /* @__PURE__ */ jsx(Drawer$1.Description, { children: description }) : null,
-				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
-				children,
-				/* @__PURE__ */ jsx(Drawer$1.CloseTrigger, {
-					"aria-label": "Close",
-					children: iconNode("x")
-				})
-			] }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Drawer$1.Positioner, { children: /* @__PURE__ */ jsxs(Drawer$1.Content, { children: [
+					/* @__PURE__ */ jsx(Drawer$1.Grabber, { children: /* @__PURE__ */ jsx(Drawer$1.GrabberIndicator, {}) }),
+					/* @__PURE__ */ jsx(Drawer$1.Title, { children: label }),
+					description ? /* @__PURE__ */ jsx(Drawer$1.Description, { children: description }) : null,
+					content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+					children,
+					/* @__PURE__ */ jsx(Drawer$1.CloseTrigger, {
+						"aria-label": "Close",
+						children: iconNode("x")
+					})
+				] }) })
+			})
 		]
 	});
 }
 DrawerFacade.displayName = "SDrawer";
 const Drawer = Object.assign(DrawerFacade, {
 	...Drawer$1,
+	Positioner: DrawerPositioner,
 	Root: DrawerRoot
 });
 injectComponentStyle("drawer");

package/dist/components/floating-panel/index.d.mts

@@ -1,6 +1,15 @@
-import { ReactNode } from "react";
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
+import { ComponentProps, ReactNode } from "react";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
+/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
+ * popup vessel let loose — a draggable, resizable sheet whose header is the
+ * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
+ * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
+ * Body. */
+declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): import("react").JSX.Element;
 export interface FloatingPanelFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger?: string;
@@ -11,10 +20,17 @@ export interface FloatingPanelFacadeProps {
   children?: ReactNode;
   onOpenChange?: (open: boolean) => void;
 }
-declare function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: FloatingPanelFacadeProps): import("react").JSX.Element;
+declare const FloatingPanelPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & FloatingPanel$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function FloatingPanelFacade({ portal, open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: FloatingPanelFacadeProps): import("react").JSX.Element;
 declare namespace FloatingPanelFacade {
   var displayName: string;
 }
-type FloatingPanelParts = typeof FloatingPanel$1;
+type FloatingPanelParts = Omit<typeof FloatingPanel$1, "Root" | "Positioner"> & {
+  Positioner: typeof FloatingPanelPositioner;
+  Root: typeof FloatingPanelRoot;
+};
 export declare const FloatingPanel: typeof FloatingPanelFacade & FloatingPanelParts;
 export {};

package/dist/components/floating-panel/index.mjs

@@ -1,5 +1,6 @@
 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 { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
@@ -26,44 +27,49 @@ const resizeAxes = [
 	"sw",
 	"nw"
 ];
-function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+const FloatingPanelPositioner = definePositioner(FloatingPanel$1.Positioner);
+function FloatingPanelFacade({ portal = true, open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
 	return /* @__PURE__ */ jsxs(FloatingPanelRoot, {
 		disabled,
 		...open === void 0 ? {} : { open },
 		...defaultOpen === void 0 ? {} : { defaultOpen },
 		onOpenChange: (details) => onOpenChange?.(details.open),
-		children: [/* @__PURE__ */ jsx(FloatingPanel$1.Trigger, { children: trigger ?? label }), /* @__PURE__ */ jsx(FloatingPanel$1.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Content, { children: [
-			/* @__PURE__ */ jsx(FloatingPanel$1.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Header, { children: [/* @__PURE__ */ jsx(FloatingPanel$1.Title, { children: label }), /* @__PURE__ */ jsxs(FloatingPanel$1.Control, { children: [
-				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
-					stage: "minimized",
-					children: iconNode("minus")
-				}),
-				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
-					stage: "maximized",
-					children: iconNode("maximize-2")
-				}),
-				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
-					stage: "default",
-					"aria-label": "Restore",
-					children: iconNode("minimize-2")
-				}),
-				/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
-					"aria-label": "Close",
-					children: iconNode("x")
-				})
-			] })] }) }),
-			/* @__PURE__ */ jsxs(FloatingPanel$1.Body, { children: [
-				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
-				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
-				children
-			] }),
-			resizeAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanel$1.ResizeTrigger, { axis }, axis))
-		] }) })]
+		children: [/* @__PURE__ */ jsx(FloatingPanel$1.Trigger, { children: trigger ?? label }), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(FloatingPanel$1.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Content, { children: [
+				/* @__PURE__ */ jsx(FloatingPanel$1.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Header, { children: [/* @__PURE__ */ jsx(FloatingPanel$1.Title, { children: label }), /* @__PURE__ */ jsxs(FloatingPanel$1.Control, { children: [
+					/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+						stage: "minimized",
+						children: iconNode("minus")
+					}),
+					/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+						stage: "maximized",
+						children: iconNode("maximize-2")
+					}),
+					/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+						stage: "default",
+						"aria-label": "Restore",
+						children: iconNode("minimize-2")
+					}),
+					/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
+						"aria-label": "Close",
+						children: iconNode("x")
+					})
+				] })] }) }),
+				/* @__PURE__ */ jsxs(FloatingPanel$1.Body, { children: [
+					description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+					content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+					children
+				] }),
+				resizeAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanel$1.ResizeTrigger, { axis }, axis))
+			] }) })
+		})]
 	});
 }
 FloatingPanelFacade.displayName = "SFloatingPanel";
 const FloatingPanel = Object.assign(FloatingPanelFacade, {
 	...FloatingPanel$1,
+	Positioner: FloatingPanelPositioner,
 	Root: FloatingPanelRoot
 });
 injectComponentStyle("floating-panel");

package/dist/components/hover-card/index.d.mts

@@ -1,7 +1,14 @@
-import { ReactNode } from "react";
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
+import { ComponentProps, ReactNode } from "react";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
+/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
+ * that dissolves in over a quiet inline link, never stealing focus. The
+ * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
+declare function HoverCardRoot(props: ComponentProps<typeof HoverCard$1.Root>): import("react").JSX.Element;
 type HoverCardPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 export interface HoverCardFacadeProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   open?: boolean;
   defaultOpen?: boolean;
   trigger: string;
@@ -13,10 +20,17 @@ export interface HoverCardFacadeProps {
   children?: ReactNode;
   onOpenChange?: (open: boolean) => void;
 }
-declare function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: HoverCardFacadeProps): import("react").JSX.Element;
+declare const HoverCardPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & HoverCard$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
+declare function HoverCardFacade({ portal, open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: HoverCardFacadeProps): import("react").JSX.Element;
 declare namespace HoverCardFacade {
   var displayName: string;
 }
-type HoverCardParts = typeof HoverCard$1;
+type HoverCardParts = Omit<typeof HoverCard$1, "Root" | "Positioner"> & {
+  Positioner: typeof HoverCardPositioner;
+  Root: typeof HoverCardRoot;
+};
 export declare const HoverCard: typeof HoverCardFacade & HoverCardParts;
 export {};

package/dist/components/hover-card/index.mjs

@@ -1,4 +1,5 @@
 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 { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
@@ -13,7 +14,8 @@ function HoverCardRoot(props) {
 		id
 	});
 }
-function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, placement, children, onOpenChange }) {
+const HoverCardPositioner = definePositioner(HoverCard$1.Positioner);
+function HoverCardFacade({ portal = false, open, defaultOpen, trigger, content, label, description, disabled = false, placement, children, onOpenChange }) {
 	return /* @__PURE__ */ jsxs(HoverCardRoot, {
 		...placement === void 0 ? {} : { positioning: { placement } },
 		...open === void 0 ? {} : { open },
@@ -22,18 +24,22 @@ function HoverCardFacade({ open, defaultOpen, trigger, content, label, descripti
 		children: [/* @__PURE__ */ jsx(HoverCard$1.Trigger, {
 			disabled,
 			children: trigger
-		}), /* @__PURE__ */ jsx(HoverCard$1.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard$1.Content, { children: [
-			/* @__PURE__ */ jsx(HoverCard$1.Arrow, { children: /* @__PURE__ */ jsx(HoverCard$1.ArrowTip, {}) }),
-			/* @__PURE__ */ jsx("h3", { children: label }),
-			description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
-			content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
-			children
-		] }) })]
+		}), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(HoverCard$1.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard$1.Content, { children: [
+				/* @__PURE__ */ jsx(HoverCard$1.Arrow, { children: /* @__PURE__ */ jsx(HoverCard$1.ArrowTip, {}) }),
+				/* @__PURE__ */ jsx("h3", { children: label }),
+				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children
+			] }) })
+		})]
 	});
 }
 HoverCardFacade.displayName = "SHoverCard";
 const HoverCard = Object.assign(HoverCardFacade, {
 	...HoverCard$1,
+	Positioner: HoverCardPositioner,
 	Root: HoverCardRoot
 });
 injectComponentStyle("hover-card");

package/dist/components/image-viewer/index.d.mts

@@ -1,2 +1,2 @@
-import { n as ImageViewerProps, t as ImageViewer } from "../../index-D4C52fI7.mjs";
+import { n as ImageViewerProps, t as ImageViewer } from "../../index-n9VlNO7D.mjs";
 export { ImageViewer, ImageViewerProps };

package/dist/components/image-viewer/index.mjs

@@ -1,3 +1,3 @@
 import "../button-group/index.mjs";
 import "../dialog/index.mjs";
-export { t as ImageViewer } from "../../image-viewer-BYiXpi1X.mjs";
+export { t as ImageViewer } from "../../image-viewer-BPTApdoP.mjs";

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

@@ -1 +1 @@
-export { t as Audio, n as Video, r as formatMediaTime } from "../../media-player-CO2Cczl-.mjs";
+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 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-DcpvCyt6.mjs";
+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 +1 @@
-export { t as Mentions, n as MentionsVessel, r as useMentions } from "../../mentions-De7ChJbl.mjs";
+export { t as Mentions, n as MentionsVessel, r as useMentions } from "../../mentions-B59tQDPt.mjs";

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

@@ -1,3 +1,4 @@
+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";
 type MenuRootProps = ComponentProps<typeof Menu$1.Root> & {
@@ -15,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;
@@ -25,11 +28,16 @@ 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;
 };

package/dist/components/menu/index.mjs

@@ -1,5 +1,6 @@
 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";
@@ -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,16 +43,20 @@ 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
 });

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

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Menu } from "../menu/index.mjs";
 import { HTMLAttributes } from "react";
 export interface MenubarEntry {
@@ -23,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;
 export {};