@bysages/react 0.5.0 → 0.6.0

package/dist/{ai-B3vbpXlK.mjs → ai-B0o-dsAf.mjs}

@@ -3,7 +3,7 @@ import { t as withSelfRoot } from "./family-Co1YsN4N.mjs";
 import { n as useComponentMessages } from "./messages-B6n0lVyt.mjs";
 import { Action } from "./components/ai-action/index.mjs";
 import { AiMessage as Message } from "./components/ai-message/index.mjs";
-import { t as PromptInput } from "./ai-prompt-input-k34KssHJ.mjs";
+import { t as PromptInput } from "./ai-prompt-input-Cl9ulICF.mjs";
 import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
 import { t as Response } from "./ai-response-DTxdL5rX.mjs";
 import { AiSource as Source, AiSources as Sources } from "./components/ai-source/index.mjs";

package/dist/{ai-prompt-input-k34KssHJ.mjs → ai-prompt-input-Cl9ulICF.mjs}

@@ -4,7 +4,7 @@ import { t as withSelfRoot } from "./family-Co1YsN4N.mjs";
 import { n as useComponentMessages } from "./messages-B6n0lVyt.mjs";
 import { Button } from "./components/button/index.mjs";
 import { Field } from "./components/field/index.mjs";
-import { n as MentionsVessel, r as useMentions } from "./mentions-De7ChJbl.mjs";
+import { n as MentionsVessel, r as useMentions } from "./mentions-B59tQDPt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/components/ai/index.mjs

@@ -4,4 +4,4 @@ import "../ai-reasoning/index.mjs";
 import "../ai-source/index.mjs";
 import "../ai-suggestion/index.mjs";
 import "../ai-tool/index.mjs";
-export { t as Ai, n as AiActions, r as AiContent, i as AiConversation, a as AiJumpToLatest, o as AiMedia, s as AiParts, c as toolPartDisplay } from "../../ai-B3vbpXlK.mjs";
+export { t as Ai, n as AiActions, r as AiContent, i as AiConversation, a as AiJumpToLatest, o as AiMedia, s as AiParts, c as toolPartDisplay } from "../../ai-B0o-dsAf.mjs";

package/dist/components/ai-prompt-input/index.d.mts

@@ -1,4 +1,4 @@
-import { c as MentionCommitKey, n as MentionPlacement, t as MentionEntry } from "../../index-DcpvCyt6.mjs";
+import { c as MentionCommitKey, n as MentionPlacement, t as MentionEntry } from "../../index-CEYybyEQ.mjs";
 import { HTMLAttributes, ReactNode } from "react";
 /**
  * The prompt vessel: the shared field textarea — self-growing on the

package/dist/components/ai-prompt-input/index.mjs

@@ -1 +1 @@
-export { t as AiPromptInput, t as PromptInput } from "../../ai-prompt-input-k34KssHJ.mjs";
+export { t as AiPromptInput, t as PromptInput } from "../../ai-prompt-input-Cl9ulICF.mjs";

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

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Combobox } from "../combobox/index.mjs";
 import { HTMLAttributes } from "react";
 /**
@@ -8,6 +9,8 @@ import { HTMLAttributes } from "react";
  * a case-insensitive substring unless `filter` says otherwise.
  */
 export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onSelect"> {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: string;
   items?: string[];
   placeholder?: string;
@@ -17,6 +20,6 @@ export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>,
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string) => void;
 }
-declare function AutoCompleteImpl({ value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
+declare function AutoCompleteImpl({ portal, value, items, placeholder, filter, size, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
 export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
 export {};

package/dist/components/autocomplete/index.mjs

@@ -1,14 +1,14 @@
 import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 // src/components/autocomplete/index.tsx
-function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
+function AutoCompleteImpl({ portal = false, value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("combobox");
 	const messages = useComponentMessages();
 	const hostId = useElementId("autocomplete", rest);
@@ -38,10 +38,13 @@ function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size =
 			onValueChange?.(details.inputValue);
 		},
 		positioning: { sameWidth: true },
-		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: messages.command.noMatches }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
-			item,
-			children: /* @__PURE__ */ jsx(Combobox.ItemText, { children: item })
-		}, item))] }) }) })]
+		children: [/* @__PURE__ */ jsx(Combobox.Control, { children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder }) }), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: messages.command.noMatches }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox.Item, {
+				item,
+				children: /* @__PURE__ */ jsx(Combobox.ItemText, { children: item })
+			}, item))] }) })
+		})]
 	});
 }
 const AutoComplete = Object.assign(AutoCompleteImpl, Combobox$1);

package/dist/components/cascade-select/index.d.mts

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { HTMLAttributes } from "react";
 export interface CascadeSelectNode {
   label: string;
@@ -17,6 +18,8 @@ export interface CascadeSelectNode {
  * runs — each hit still reads as its full route.
  */
 export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: string[][];
   data: CascadeSelectNode[];
   placeholder?: string;
@@ -28,7 +31,7 @@ export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string[][]) => void;
 }
-declare function CascadeSelectImpl({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+declare function CascadeSelectImpl({ portal, value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
 export declare const CascadeSelect: typeof CascadeSelectImpl & {
   Root: typeof CascadeSelectImpl;
 };

package/dist/components/cascade-select/index.mjs

@@ -2,11 +2,11 @@ import { r as iconNode } from "../../icon-C9udWCyz.mjs";
 import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { t as Input } from "../../input-YRjehBhU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
 import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
 import * as cascade from "@zag-js/cascade-select";
@@ -15,7 +15,7 @@ import { normalizeProps, useMachine } from "@zag-js/react";
 const chevronDown = iconNode("chevron-down");
 const chevronRight = iconNode("chevron-right");
 const checkIcon = iconNode("check");
-function CascadeSelectImpl({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
+function CascadeSelectImpl({ portal = false, value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("cascade-select");
 	const messages = useComponentMessages();
 	const id = useElementId("cascade-select", rest);
@@ -169,40 +169,43 @@ function CascadeSelectImpl({ value, data, placeholder = "Select…", highlightTr
 					children: chevronDown
 				})]
 			})
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
-			...api.getPositionerProps(),
-			children: /* @__PURE__ */ jsxs("div", {
-				...api.getContentProps(),
-				"data-size": size,
-				children: [filterable ? /* @__PURE__ */ jsx("div", {
-					"data-scope": "cascade-select",
-					"data-part": "search",
-					children: /* @__PURE__ */ jsx(Input, {
-						size: "sm",
-						value: query,
-						onValueChange: setQuery,
-						placeholder: messages.select.filter,
-						"aria-label": messages.select.filter
-					})
-				}) : null, /* @__PURE__ */ jsx("div", {
-					"data-scope": "cascade-select",
-					"data-part": "corridor",
-					"data-flow": filtering ? "flat" : "columns",
-					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+		}), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx("div", {
+				...api.getPositionerProps(),
+				children: /* @__PURE__ */ jsxs("div", {
+					...api.getContentProps(),
+					"data-size": size,
+					children: [filterable ? /* @__PURE__ */ jsx("div", {
 						"data-scope": "cascade-select",
-						"data-part": "empty",
-						children: "Nothing matches"
-					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
-						type: "button",
+						"data-part": "search",
+						children: /* @__PURE__ */ jsx(Input, {
+							size: "sm",
+							value: query,
+							onValueChange: setQuery,
+							placeholder: messages.select.filter,
+							"aria-label": messages.select.filter
+						})
+					}) : null, /* @__PURE__ */ jsx("div", {
 						"data-scope": "cascade-select",
-						"data-part": "match",
-						"data-selected": isSelected(hit.path) || void 0,
-						onClick: () => pickMatch(hit.path),
-						children: hit.labels.join(" / ")
-					}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])
-				})]
+						"data-part": "corridor",
+						"data-flow": filtering ? "flat" : "columns",
+						children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+							"data-scope": "cascade-select",
+							"data-part": "empty",
+							children: "Nothing matches"
+						}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-scope": "cascade-select",
+							"data-part": "match",
+							"data-selected": isSelected(hit.path) || void 0,
+							onClick: () => pickMatch(hit.path),
+							children: hit.labels.join(" / ")
+						}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])
+					})]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 const CascadeSelect = withSelfRoot(CascadeSelectImpl);

package/dist/components/color-picker/index.d.mts

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { CSSProperties, ComponentProps } from "react";
 import { Color, ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
 type ColorPickerRootProps = ComponentProps<typeof ColorPicker$1.Root> & {
@@ -14,6 +15,8 @@ declare function ColorPickerRoot(props: ColorPickerRootProps): import("react").J
  * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
  * FormatSelect, HiddenInput, Context. */
 type ColorPickerFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: string | Color;
   defaultValue?: string | Color;
   disabled?: boolean;
@@ -30,8 +33,13 @@ type ColorPickerFacadeProps = {
 /** The complete picker behind one color: the hex input rides beside the
  * swatch trigger, while the popup carries the area and hue/alpha tracks.
  * Saved swatches and format switches remain anatomy work. */
+declare const ColorPickerPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & ColorPicker$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("react").JSX.Element;
-export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root"> & {
+export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root" | "Positioner"> & {
+  Positioner: typeof ColorPickerPositioner;
   Root: typeof ColorPickerRoot;
 };
 export {};

package/dist/components/color-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 { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/react/color-picker";
@@ -21,7 +22,9 @@ function ColorPickerRoot(props) {
 /** The complete picker behind one color: the hex input rides beside the
 * swatch trigger, while the popup carries the area and hue/alpha tracks.
 * Saved swatches and format switches remain anatomy work. */
+const ColorPickerPositioner = definePositioner(ColorPicker$1.Positioner);
 function ColorPickerFacade(props) {
+	const { portal = false } = props;
 	const { value, defaultValue, disabled, invalid, required, label, swatches = [], size = "md", className, style, onValueChange } = props;
 	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
 	return /* @__PURE__ */ jsxs(ColorPickerRoot, {
@@ -37,44 +40,48 @@ function ColorPickerFacade(props) {
 		children: [
 			label ? /* @__PURE__ */ jsx(ColorPicker$1.Label, { children: label }) : null,
 			/* @__PURE__ */ jsxs(ColorPicker$1.Control, { children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelInput, { channel: "hex" }), /* @__PURE__ */ jsxs(ColorPicker$1.Trigger, { children: [/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}), /* @__PURE__ */ jsx(ColorPicker$1.ValueSwatch, {})] })] }),
-			/* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [
-				/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }),
-				/* @__PURE__ */ jsxs("div", {
-					"data-scope": "color-picker",
-					"data-part": "channel-controls",
-					children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
-						width: 14,
-						height: 14
-					}) }), /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [
+					/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }),
+					/* @__PURE__ */ jsxs("div", {
 						"data-scope": "color-picker",
-						"data-part": "channel-sliders",
-						children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-							channel: "hue",
-							children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
-						}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-							channel: "alpha",
-							children: [
-								/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
-								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
-								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
-							]
+						"data-part": "channel-controls",
+						children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
+							width: 14,
+							height: 14
+						}) }), /* @__PURE__ */ jsxs("div", {
+							"data-scope": "color-picker",
+							"data-part": "channel-sliders",
+							children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+								channel: "hue",
+								children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
+							}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+								channel: "alpha",
+								children: [
+									/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
+									/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
+									/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
+								]
+							})]
 						})]
-					})]
-				}),
-				swatches.length > 0 ? /* @__PURE__ */ jsx(ColorPicker$1.SwatchGroup, { children: swatches.map((color) => /* @__PURE__ */ jsx(ColorPicker$1.SwatchTrigger, {
-					value: color,
-					children: /* @__PURE__ */ jsx(ColorPicker$1.Swatch, {
+					}),
+					swatches.length > 0 ? /* @__PURE__ */ jsx(ColorPicker$1.SwatchGroup, { children: swatches.map((color) => /* @__PURE__ */ jsx(ColorPicker$1.SwatchTrigger, {
 						value: color,
-						children: /* @__PURE__ */ jsx(ColorPicker$1.SwatchIndicator, { children: checkIcon })
-					})
-				}, color)) }) : null
-			] }) }),
+						children: /* @__PURE__ */ jsx(ColorPicker$1.Swatch, {
+							value: color,
+							children: /* @__PURE__ */ jsx(ColorPicker$1.SwatchIndicator, { children: checkIcon })
+						})
+					}, color)) }) : null
+				] }) })
+			}),
 			/* @__PURE__ */ jsx(ColorPicker$1.HiddenInput, {})
 		]
 	});
 }
 const ColorPicker = Object.assign(ColorPickerFacade, {
 	...ColorPicker$1,
+	Positioner: ColorPickerPositioner,
 	Root: ColorPickerRoot
 });
 export { ColorPicker };

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

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Combobox as Combobox$1, ComboboxRootComponentProps } from "@ark-ui/react/combobox";
@@ -17,6 +18,8 @@ type ComboboxOption = {
 };
 type ComboboxFacadeValue = string | string[];
 type ComboboxFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: ComboboxFacadeValue;
   defaultValue?: ComboboxFacadeValue;
   options: ComboboxOption[];
@@ -35,8 +38,13 @@ type ComboboxFacadeProps = {
 };
 /** The complete combobox behind one model value: options become the vessel's
  * rows while typing, clearing, and selection stay on the common field path. */
+declare const ComboboxPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & Combobox$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function ComboboxFacade(props: ComboboxFacadeProps): import("react").JSX.Element;
-export declare const Combobox: typeof ComboboxFacade & Omit<typeof Combobox$1, "Root"> & {
+export declare const Combobox: typeof ComboboxFacade & Omit<typeof Combobox$1, "Root" | "Positioner"> & {
+  Positioner: typeof ComboboxPositioner;
   Root: typeof ComboboxRoot;
 };
 export {};

package/dist/components/combobox/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 { Combobox as Combobox$1, createListCollection } from "@ark-ui/react/combobox";
@@ -23,8 +24,9 @@ function fromComboboxValue(value, multiple) {
 }
 /** The complete combobox behind one model value: options become the vessel's
 * rows while typing, clearing, and selection stay on the common field path. */
+const ComboboxPositioner = definePositioner(Combobox$1.Positioner);
 function ComboboxFacade(props) {
-	const { value, defaultValue, options, multiple, clearable = true, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	const { portal = false, value, defaultValue, options, multiple, clearable = true, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
 	const collection = createListCollection({ items: options });
 	return /* @__PURE__ */ jsxs(ComboboxRoot, {
 		size,
@@ -57,18 +59,22 @@ function ComboboxFacade(props) {
 					height: 16
 				}) })
 			] }),
-			/* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No results found" }), /* @__PURE__ */ jsx(Combobox$1.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
-				item,
-				children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: iconNode("check", {
-					width: 14,
-					height: 14
-				}) })]
-			}, item.value)) })] }) })
+			/* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No results found" }), /* @__PURE__ */ jsx(Combobox$1.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
+					item,
+					children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: iconNode("check", {
+						width: 14,
+						height: 14
+					}) })]
+				}, item.value)) })] }) })
+			})
 		]
 	});
 }
 const Combobox = Object.assign(ComboboxFacade, {
 	...Combobox$1,
+	Positioner: ComboboxPositioner,
 	Root: ComboboxRoot
 });
 export { Combobox };

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

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Dialog } from "../dialog/index.mjs";
 export interface CommandEntry {
   label: string;
@@ -17,6 +18,8 @@ export interface CommandEntry {
  * grafts onto the sheet's list.
  */
 export interface CommandProps {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   id?: string;
   /** The commands on offer, grouped as they arrive. */
   items?: CommandEntry[];
@@ -40,6 +43,6 @@ export interface CommandProps {
   /** Reports the field's live text. */
   onInputValueChange?: (value: string) => void;
 }
-declare function CommandImpl({ items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }: CommandProps): import("react").JSX.Element;
+declare function CommandImpl({ portal, items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }: CommandProps): import("react").JSX.Element;
 export declare const Command: typeof CommandImpl & typeof Dialog;
 export {};

package/dist/components/command/index.mjs

@@ -1,15 +1,15 @@
 import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Dialog as Dialog$1 } from "../dialog/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog } from "@ark-ui/react/dialog";
 // src/components/command/index.tsx
-function CommandImpl({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }) {
+function CommandImpl({ portal = true, items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
 	const hostId = useElementId("command", { id });
@@ -72,76 +72,79 @@ function CommandImpl({ items = [], placeholder, open, autoFilter = true, inputVa
 		id: `${hostId}:dialog`,
 		open: currentOpen,
 		onOpenChange: (details) => setOpen(details.open),
-		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("div", {
-				"data-scope": "command",
-				"data-part": "positioner",
-				children: /* @__PURE__ */ jsx(Dialog.Content, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("div", {
-						"data-scope": "command",
-						"data-part": "content",
-						"aria-label": messages.command.palette,
-						children: /* @__PURE__ */ jsxs(Combobox.Root, {
-							id: `${hostId}:combobox`,
-							collection,
-							inputValue,
-							open: listOpen,
-							onOpenChange: (details) => setListOpen(details.open),
-							inputBehavior: "autohighlight",
-							loopFocus: true,
-							onInputValueChange: (details) => {
-								setFieldText(details.inputValue);
-								if (autoFilter) filter(details.inputValue);
-								onInputValueChange?.(details.inputValue);
-							},
-							onValueChange: (details) => {
-								const [first] = details.value;
-								if (first == null) return;
-								onSelect?.(first);
-								setOpen(false);
-							},
-							children: [/* @__PURE__ */ jsx(Combobox.Input, {
-								asChild: true,
-								children: /* @__PURE__ */ jsx("input", {
-									type: "text",
-									placeholder: resolvedPlaceholder,
-									"aria-label": resolvedPlaceholder,
-									"data-scope": "command",
-									"data-part": "input"
-								})
-							}), /* @__PURE__ */ jsx(Combobox.Content, {
-								asChild: true,
-								children: /* @__PURE__ */ jsxs("div", {
-									"data-scope": "command",
-									"data-part": "list",
-									children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
-										asChild: true,
-										children: /* @__PURE__ */ jsxs("div", {
-											"data-scope": "command",
-											"data-part": "group",
-											children: [/* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
-												asChild: true,
-												children: /* @__PURE__ */ jsx("div", {
-													"data-scope": "command",
-													"data-part": "group-label",
-													children: group
-												})
-											}), entries.map(row)]
-										})
-									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs(FloatingPortal, {
+			portal,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-scope": "command",
+					"data-part": "positioner",
+					children: /* @__PURE__ */ jsx(Dialog.Content, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("div", {
+							"data-scope": "command",
+							"data-part": "content",
+							"aria-label": messages.command.palette,
+							children: /* @__PURE__ */ jsxs(Combobox.Root, {
+								id: `${hostId}:combobox`,
+								collection,
+								inputValue,
+								open: listOpen,
+								onOpenChange: (details) => setListOpen(details.open),
+								inputBehavior: "autohighlight",
+								loopFocus: true,
+								onInputValueChange: (details) => {
+									setFieldText(details.inputValue);
+									if (autoFilter) filter(details.inputValue);
+									onInputValueChange?.(details.inputValue);
+								},
+								onValueChange: (details) => {
+									const [first] = details.value;
+									if (first == null) return;
+									onSelect?.(first);
+									setOpen(false);
+								},
+								children: [/* @__PURE__ */ jsx(Combobox.Input, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("input", {
+										type: "text",
+										placeholder: resolvedPlaceholder,
+										"aria-label": resolvedPlaceholder,
 										"data-scope": "command",
-										"data-part": "empty",
-										children: resolvedEmptyText
-									}) : null]
-								})
-							})]
+										"data-part": "input"
+									})
+								}), /* @__PURE__ */ jsx(Combobox.Content, {
+									asChild: true,
+									children: /* @__PURE__ */ jsxs("div", {
+										"data-scope": "command",
+										"data-part": "list",
+										children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
+											asChild: true,
+											children: /* @__PURE__ */ jsxs("div", {
+												"data-scope": "command",
+												"data-part": "group",
+												children: [/* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
+													asChild: true,
+													children: /* @__PURE__ */ jsx("div", {
+														"data-scope": "command",
+														"data-part": "group-label",
+														children: group
+													})
+												}), entries.map(row)]
+											})
+										}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+											"data-scope": "command",
+											"data-part": "empty",
+											children: resolvedEmptyText
+										}) : null]
+									})
+								})]
+							})
 						})
 					})
 				})
-			})
-		})] })
+			})]
+		})
 	});
 }
 const Command = Object.assign(CommandImpl, Dialog$1);

package/dist/components/date-picker/index.d.mts

@@ -1,3 +1,4 @@
+import { n as FloatingPortalTarget, t as FloatingPortalProps } from "../../floating-BhcDRgnx.mjs";
 import { CSSProperties, ComponentProps } from "react";
 import { DatePicker as DatePicker$1, DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails, DateValue } from "@ark-ui/react/date-picker";
 type DatePickerRootProps$1 = ComponentProps<typeof DatePicker$1.Root> & {
@@ -13,6 +14,8 @@ declare function DatePickerRoot(props: DatePickerRootProps$1): import("react").J
  * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
 type DatePickerFacadeValue = DateValue | DateValue[];
 type DatePickerFacadeProps = {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   value?: DatePickerFacadeValue;
   defaultValue?: DatePickerFacadeValue;
   disabled?: boolean;
@@ -27,8 +30,13 @@ type DatePickerFacadeProps = {
 };
 /** The complete picker behind one date: the field opens a single day grid,
  * while ranges, multiple selection, and custom views remain anatomy work. */
+declare const DatePickerPositioner: {
+  ({ portal, ...rest }: FloatingPortalProps & DatePicker$1.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+  displayName: string;
+};
 declare function DatePickerFacade(props: DatePickerFacadeProps): import("react").JSX.Element;
-export declare const DatePicker: typeof DatePickerFacade & Omit<typeof DatePicker$1, "Root"> & {
+export declare const DatePicker: typeof DatePickerFacade & Omit<typeof DatePicker$1, "Root" | "Positioner"> & {
+  Positioner: typeof DatePickerPositioner;
   Root: typeof DatePickerRoot;
 };
 export type { DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails };