@bysages/react 0.4.3 → 0.5.0

package/dist/components/focus-trap/index.d.mts

@@ -1,7 +1,5 @@
 import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
-//#region src/components/focus-trap/index.d.ts
 export declare const FocusTrap: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
 export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -1,6 +1,5 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { FocusTrap as FocusTrap$1 } from "@ark-ui/react/focus-trap";
-//#region src/components/focus-trap/index.tsx
+// src/components/focus-trap/index.tsx
 const FocusTrap = withSelfRoot(FocusTrap$1);
-//#endregion
 export { FocusTrap };

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

@@ -1,6 +1,5 @@
 import { ComponentType, HTMLAttributes, ReactNode } from "react";
 import { FieldApi, FormApi, useField, useForm } from "@tanstack/react-form";
-//#region src/components/form/index.d.ts
 /** The seam this family passes the engine through — the members the
  * components drive, with the engine's field-name generics opened to
  * `any`. The engine ships no "any form" alias: its loosest, `FormLikeAPI`,
@@ -44,5 +43,4 @@ declare function FormFieldImpl({ form: formProp, name, label, hint, required, in
 export declare const FormField: typeof FormFieldImpl & {
   Root: typeof FormFieldImpl;
 };
-//#endregion
 export { type FieldApi, type FormApi, useField, useForm };

package/dist/components/form/index.mjs

@@ -1,10 +1,10 @@
-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, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { Field } from "@ark-ui/react/field";
 import { useField, useForm } from "@tanstack/react-form";
-//#region src/components/form/index.tsx
+// src/components/form/index.tsx
 const FormContext = createContext(null);
 /** A validator's complaint is a string or a Standard Schema issue; both
 * reduce to the sentence the field shows. */
@@ -66,5 +66,4 @@ function FormFieldImpl({ form: formProp, name, label, hint, required = false, in
 	});
 }
 const FormField = withSelfRoot(FormFieldImpl);
-//#endregion
 export { Form, FormField, useField, useForm };

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

@@ -1,9 +1,7 @@
 import { Format as Format$1 } from "@ark-ui/react/format";
-//#region src/components/format/index.d.ts
 /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
  * numbers, currency, bytes and relative time. The components render bare
  * text with no DOM of their own — typography flows from the token layer,
  * so there is no component stylesheet. The API is Ark's own — Number,
  * Byte, Time, RelativeTime. */
-export declare const Format: typeof Format$1;
-//#endregion
+export declare const Format: typeof Format$1;

package/dist/components/format/index.mjs

@@ -1,10 +1,9 @@
 import { Format as Format$1 } from "@ark-ui/react/format";
-//#region src/components/format/index.tsx
+// src/components/format/index.tsx
 /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
 * numbers, currency, bytes and relative time. The components render bare
 * text with no DOM of their own — typography flows from the token layer,
 * so there is no component stylesheet. The API is Ark's own — Number,
 * Byte, Time, RelativeTime. */
 const Format = Format$1;
-//#endregion
 export { Format };

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

@@ -1,6 +1,4 @@
 import { FrameProps } from "@ark-ui/react/frame";
-//#region src/components/frame/index.d.ts
 export declare const Frame: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>> & {
   Root: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
-};
-//#endregion
+};

package/dist/components/frame/index.mjs

@@ -1,9 +1,9 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
-//#region src/components/frame/index.tsx
+// src/components/frame/index.tsx
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
 * iframe whose body teleports the children and whose `head` prop
 * carries extra <head> nodes — styles the child renders must travel
@@ -20,5 +20,4 @@ const FrameRoot = forwardRef(function FrameRoot(props, ref) {
 	});
 });
 const Frame = withSelfRoot(FrameRoot);
-//#endregion
 export { Frame };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/grid/index.d.ts
 /** An alignment lattice: tracks of equal measure, sized by column count
  * — or, with `minChildWidth`, as many tracks as the container fits. */
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,4 +12,4 @@ declare function GridImpl({ columns, gap, minChildWidth, ...rest }: GridProps):
 export declare const Grid: typeof GridImpl & {
   Root: typeof GridImpl;
 };
-//#endregion
+export {};

package/dist/components/grid/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/grid/index.tsx
+// src/components/grid/index.tsx
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -29,5 +29,4 @@ function GridImpl({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 	});
 }
 const Grid = withSelfRoot(GridImpl);
-//#endregion
 export { Grid };

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

@@ -1,5 +1,3 @@
-//#region src/components/highlight/index.d.ts
 export declare const Highlight: ((props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element) & {
   Root: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
-};
-//#endregion
+};

package/dist/components/highlight/index.mjs

@@ -1,8 +1,8 @@
-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";
 import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
-//#region src/components/highlight/index.tsx
+// src/components/highlight/index.tsx
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
@@ -12,5 +12,4 @@ function HighlightRoot(props) {
 }
 const Highlight = withSelfRoot(HighlightRoot);
 injectComponentStyle("highlight");
-//#endregion
 export { Highlight };

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

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
-//#region src/components/hover-card/index.d.ts
 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 {
   open?: boolean;
@@ -20,4 +19,4 @@ declare namespace HoverCardFacade {
 }
 type HoverCardParts = typeof HoverCard$1;
 export declare const HoverCard: typeof HoverCardFacade & HoverCardParts;
-//#endregion
+export {};

package/dist/components/hover-card/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 { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
-//#region src/components/hover-card/index.tsx
+// src/components/hover-card/index.tsx
 /** 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. */
@@ -37,5 +37,4 @@ const HoverCard = Object.assign(HoverCardFacade, {
 	Root: HoverCardRoot
 });
 injectComponentStyle("hover-card");
-//#endregion
 export { HoverCard };

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

@@ -1,6 +1,5 @@
 import { IconifyIcon } from "@bysages/core/icons";
 import { HTMLAttributes } from "react";
-//#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
  * size of its own. Bring an `@bysages/icons` export or any other
@@ -23,4 +22,4 @@ declare function IconImpl({ size, label, glyph, name, children, ...rest }: IconP
 export declare const Icon: typeof IconImpl & {
   Root: typeof IconImpl;
 };
-//#endregion
+export {};

package/dist/components/icon/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { getIcon } from "@bysages/core/icons";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/icon/index.tsx
+// src/components/icon/index.tsx
 function IconImpl({ size = "inherit", label, glyph, name, children, ...rest }) {
 	injectComponentStyle("icon");
 	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
@@ -24,5 +24,4 @@ function IconImpl({ size = "inherit", label, glyph, name, children, ...rest }) {
 	});
 }
 const Icon = withSelfRoot(IconImpl);
-//#endregion
 export { Icon };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/image/index.d.ts
 /** A framed picture: while the source loads, the frame keeps the
  * skeleton's breath; the picture dissolves in when it lands; a broken
  * source leaves the `fallback` — or the placeholder icon when the
@@ -23,4 +22,4 @@ declare function ImageImpl({ src, alt, fit, loading, width, height, fallback, ..
 export declare const Image: typeof ImageImpl & {
   Root: typeof ImageImpl;
 };
-//#endregion
+export {};

package/dist/components/image/index.mjs

@@ -1,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-//#region src/components/image/index.tsx
+// src/components/image/index.tsx
 const placeholderIcon = iconNode("image");
 function ImageImpl({ src, alt = "", fit = "cover", loading = "lazy", width, height, fallback, ...rest }) {
 	injectComponentStyle("image");
@@ -40,5 +40,4 @@ function ImageImpl({ src, alt = "", fit = "cover", loading = "lazy", width, heig
 	});
 }
 const Image = withSelfRoot(ImageImpl);
-//#endregion
 export { Image };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
-//#region src/components/image-cropper/index.d.ts
 /** ImageCropper, dressed in the paper-and-ink system: a rounded vessel
  * holding the photograph, one lit selection window framed by light hairlines.
  * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
@@ -16,4 +15,4 @@ declare function ImageCropperFacade({ src, alt }: ImageCropperFacadeProps): impo
 export declare const ImageCropper: typeof ImageCropperFacade & typeof ImageCropper$1 & {
   Root: typeof ImageCropperRoot;
 };
-//#endregion
+export {};

package/dist/components/image-cropper/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 { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
-//#region src/components/image-cropper/index.tsx
+// src/components/image-cropper/index.tsx
 /** ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
 * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
@@ -39,5 +39,4 @@ const ImageCropper = Object.assign(ImageCropperFacade, {
 	Root: ImageCropperRoot
 });
 injectComponentStyle("image-cropper");
-//#endregion
 export { ImageCropper };

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes } from "react";
-//#region src/components/input/index.d.ts
 /** The bare text input: the field recipe — border, surface, focus halo —
  * on a native control. Standing alone it styles itself from the `invalid`
  * prop; inside a `Field.Root` it consumes the field context, picking up
@@ -17,5 +16,4 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>> & {
   Root: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
-};
-//#endregion
+};

package/dist/components/input/index.mjs

@@ -1,2 +1 @@
-import { t as Input } from "../../input-BDpQ0e6G.mjs";
-export { Input };
+export { t as Input } from "../../input-YRjehBhU.mjs";

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/input-group/index.d.ts
 export type InputGroupPartProps = HTMLAttributes<HTMLDivElement>;
 export declare const InputGroup: {
   ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
@@ -13,5 +12,4 @@ export declare const InputGroup: {
     ({ children, ...rest }: InputGroupPartProps): import("react").JSX.Element;
     displayName: string;
   };
-};
-//#endregion
+};

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

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/input-group/index.tsx
+// src/components/input-group/index.tsx
 function part(name) {
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -27,5 +27,4 @@ const InputGroup = Object.assign(Root, {
 	Addon
 });
 injectComponentStyle("input-group");
-//#endregion
 export { InputGroup };

package/dist/components/json-tree-view/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
-//#region src/components/json-tree-view/index.d.ts
 /** The auto-rendered tree hands every branch its chevron from the
  * `arrow` element — filled with the house icon unless the consumer
  * draws their own, so a JSON tree never opens as a bare indent. */
@@ -20,4 +19,4 @@ export declare const JsonTreeView: typeof JsonTreeViewFacade & {
   Tree: typeof JsonTreeViewTree;
   RootProvider: import("react").ForwardRefExoticComponent<JsonTreeView$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
+export {};

package/dist/components/json-tree-view/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 } from "react/jsx-runtime";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
-//#region src/components/json-tree-view/index.tsx
+// src/components/json-tree-view/index.tsx
 /** The auto-rendered tree hands every branch its chevron from the
 * `arrow` element — filled with the house icon unless the consumer
 * draws their own, so a JSON tree never opens as a bare indent. */
@@ -40,5 +40,4 @@ const JsonTreeView = Object.assign(JsonTreeViewFacade, {
 	Tree: JsonTreeViewTree
 });
 injectComponentStyle("json-tree-view");
-//#endregion
 export { JsonTreeView };

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

@@ -1,9 +1,8 @@
 import { HTMLAttributes } from "react";
-//#region src/components/kbd/index.d.ts
 /** A keycap in miniature, riding the type it annotates. */
 export type KbdProps = HTMLAttributes<HTMLElement>;
 declare function KbdImpl({ children, ...rest }: KbdProps): import("react").JSX.Element;
 export declare const Kbd: typeof KbdImpl & {
   Root: typeof KbdImpl;
 };
-//#endregion
+export {};

package/dist/components/kbd/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/kbd/index.tsx
+// src/components/kbd/index.tsx
 function KbdImpl({ children, ...rest }) {
 	injectComponentStyle("kbd");
 	return /* @__PURE__ */ jsx("kbd", {
@@ -12,5 +12,4 @@ function KbdImpl({ children, ...rest }) {
 	});
 }
 const Kbd = withSelfRoot(KbdImpl);
-//#endregion
 export { Kbd };

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

@@ -1,5 +1,4 @@
 import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from "react";
-//#region src/components/layout/index.d.ts
 /** Declare which edge the skeleton reserves for its sider — without
  * it the root is a single column. */
 export interface LayoutRootProps extends HTMLAttributes<HTMLDivElement> {
@@ -78,4 +77,4 @@ export declare const Layout: typeof Root & {
     displayName: string;
   };
 };
-//#endregion
+export {};

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 };