@bysages/react 0.4.4 → 0.5.0

package/dist/components/toast/index.mjs

@@ -1,11 +1,11 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/react/toast";
-//#region src/components/toast/index.tsx
+// src/components/toast/index.tsx
 /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
 * popup vessel while a pigment accents the title by type, and the machine's
 * translate variables carry the slide. The API is Ark's own — Toaster,
@@ -42,5 +42,4 @@ const ToasterRoot = forwardRef(function ToasterRoot(props, ref) {
 });
 const Toaster = withSelfRoot(ToasterRoot);
 injectComponentStyle("toast");
-//#endregion
 export { Toast, Toaster, createToaster };

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

@@ -1,6 +1,5 @@
 import { CSSProperties, ComponentProps } from "react";
 import { Toc as Toc$1, TocItemData } from "@ark-ui/react/toc";
-//#region src/components/toc/index.d.ts
 /** Toc, dressed in the paper-and-ink system: a quiet rail of links
  * beside the scroll, one stroke of primary ink marking where the reader
  * stands. The parts — Root, Title, List, Item, Link, Indicator. */
@@ -24,4 +23,4 @@ export declare const Toc: typeof TocFacade & Omit<typeof Toc$1, "Root" | "Indica
   Root: typeof TocRoot;
   Indicator: typeof TocIndicator;
 };
-//#endregion
+export {};

package/dist/components/toc/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 { Toc as Toc$1 } from "@ark-ui/react/toc";
-//#region src/components/toc/index.tsx
+// src/components/toc/index.tsx
 /** Toc, dressed in the paper-and-ink system: a quiet rail of links
 * beside the scroll, one stroke of primary ink marking where the reader
 * stands. The parts — Root, Title, List, Item, Link, Indicator. */
@@ -44,5 +44,4 @@ const Toc = Object.assign(TocFacade, {
 	Indicator: TocIndicator
 });
 injectComponentStyle("toc");
-//#endregion
 export { Toc };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
-//#region src/components/toggle/index.d.ts
 export interface ToggleFacadeProps extends ComponentProps<typeof Toggle$1.Root> {
   /** The accessible name when the content is only an icon. */
   label?: string;
@@ -11,4 +10,4 @@ declare namespace ToggleFacade {
 }
 type ToggleParts = typeof Toggle$1;
 export declare const Toggle: typeof ToggleFacade & ToggleParts;
-//#endregion
+export {};

package/dist/components/toggle/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 } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
-//#region src/components/toggle/index.tsx
+// src/components/toggle/index.tsx
 /** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
 * settles into the flat ink fill while pressed on. The API is Ark's own —
 * Root, Indicator. */
@@ -26,5 +26,4 @@ const Toggle = Object.assign(ToggleFacade, {
 	Root: ToggleRoot
 });
 injectComponentStyle("toggle");
-//#endregion
 export { Toggle };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
-//#region src/components/toggle-group/index.d.ts
 type ToggleGroupRootProps = ComponentProps<typeof ToggleGroup$1.Root> & {
   /** One rung of the control-height ladder for the items. */
   size?: "sm" | "md" | "lg";
@@ -36,4 +35,4 @@ type ToggleGroupParts = Omit<typeof ToggleGroup$1, "Root"> & {
   Root: typeof ToggleGroupRoot;
 };
 export declare const ToggleGroup: typeof ToggleGroupFacade & ToggleGroupParts;
-//#endregion
+export {};

package/dist/components/toggle-group/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 { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
-//#region src/components/toggle-group/index.tsx
+// src/components/toggle-group/index.tsx
 function ToggleGroupRoot(props) {
 	const id = useElementId("toggle-group", props);
 	const { size = "md", ...rest } = props;
@@ -41,5 +41,4 @@ const ToggleGroup = Object.assign(ToggleGroupFacade, {
 	Root: ToggleGroupRoot
 });
 injectComponentStyle("toggle-group");
-//#endregion
 export { ToggleGroup };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/toolbar/index.d.ts
 export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
   /** Accessible name when more than one toolbar shares a page. */
   label?: string;
@@ -17,4 +16,4 @@ declare function ToolbarImpl({ label, start, end, children, ...rest }: ToolbarPr
 export declare const Toolbar: typeof ToolbarImpl & {
   Root: typeof ToolbarImpl;
 };
-//#endregion
+export {};

package/dist/components/toolbar/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, jsxs } from "react/jsx-runtime";
-//#region src/components/toolbar/index.tsx
+// src/components/toolbar/index.tsx
 /** A workbench rail: the start tools at the leading edge, the end tools
 * at the trailing, the rail itself carrying the toolbar role so
 * assistive tech reads it as one group of commands. */
@@ -27,5 +27,4 @@ function ToolbarImpl({ label, start, end, children, ...rest }) {
 	});
 }
 const Toolbar = withSelfRoot(ToolbarImpl);
-//#endregion
 export { Toolbar };

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

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
-//#region src/components/tooltip/index.d.ts
 type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 export interface TooltipFacadeProps {
   open?: boolean;
@@ -17,4 +16,4 @@ declare namespace TooltipFacade {
 }
 type TooltipParts = typeof Tooltip$1;
 export declare const Tooltip: typeof TooltipFacade & TooltipParts;
-//#endregion
+export {};

package/dist/components/tooltip/index.mjs

@@ -1,9 +1,9 @@
-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 { isValidElement } from "react";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
-//#region src/components/tooltip/index.tsx
+// src/components/tooltip/index.tsx
 /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
 * vessel — a tight chip of ink that dissolves in over its anchor. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
@@ -33,5 +33,4 @@ const Tooltip = Object.assign(TooltipFacade, {
 	Root: TooltipRoot
 });
 injectComponentStyle("tooltip");
-//#endregion
 export { Tooltip };

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

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, UseTourProps, UseTourReturn } from "@ark-ui/react/tour";
-//#region src/components/tour/index.d.ts
 export interface TourFacadeProps {
   tour: UseTourReturn;
   trigger?: string;
@@ -16,5 +15,4 @@ type TourParts = typeof Tour$1;
 export declare const Tour: typeof TourFacade & TourParts;
 /** Tour machines are created by useTour, so the stable id belongs there. */
 export declare function useTour(props?: UseTourProps): UseTourReturn;
-//#endregion
 export type { TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails };

package/dist/components/tour/index.mjs

@@ -1,9 +1,9 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/react/tour";
-//#region src/components/tour/index.tsx
+// src/components/tour/index.tsx
 /** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
 * the spotlight alone keeps the focus halo, and the anchored card rides
 * the shared popup vessel. The API is Ark's own — Root, Backdrop,
@@ -51,5 +51,4 @@ function useTour(props = {}) {
 	});
 }
 injectComponentStyle("tour");
-//#endregion
 export { Tour, useTour };

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

@@ -1,6 +1,5 @@
 import { Checkbox } from "../checkbox/index.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/transfer/index.d.ts
 export interface TransferItem {
   label: string;
   value: string;
@@ -22,4 +21,4 @@ export interface TransferProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function TransferImpl({ value, data, titles, searchable, disabled, onValueChange, ...rest }: TransferProps): import("react").JSX.Element;
 export declare const Transfer: typeof TransferImpl & typeof Checkbox;
-//#endregion
+export {};

package/dist/components/transfer/index.mjs

@@ -1,14 +1,14 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-B6n0lVyt.mjs";
 import { Button } from "../button/index.mjs";
-import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { t as Input } from "../../input-YRjehBhU.mjs";
 import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Checkbox } from "@ark-ui/react/checkbox";
-//#region src/components/transfer/index.tsx
+// src/components/transfer/index.tsx
 const checkIcon = iconNode("check");
 function arrowIcon(direction) {
 	return iconNode(direction === "right" ? "arrow-right" : "arrow-left");
@@ -140,5 +140,4 @@ function TransferImpl({ value = [], data, titles = ["Source", "Target"], searcha
 	});
 }
 const Transfer = Object.assign(TransferImpl, Checkbox$1);
-//#endregion
 export { Transfer };

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

@@ -1,6 +1,5 @@
-import { t as Popover } from "../../index-Eu-Bttta.mjs";
+import { t as Popover } from "../../index-BVdkcSSY.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/tree-select/index.d.ts
 export interface TreeSelectNode {
   label: string;
   value: string;
@@ -27,4 +26,4 @@ export interface TreeSelectProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function TreeSelectImpl({ value, data, placeholder, filterable, disabled, size, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
 export declare const TreeSelect: typeof TreeSelectImpl & typeof Popover;
-//#endregion
+export {};

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

@@ -1,8 +1,8 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { Popover as Popover$1 } from "../popover/index.mjs";
-import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { t as Input } from "../../input-YRjehBhU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
@@ -10,7 +10,7 @@ import { Popover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
 import { useFilter } from "@ark-ui/react/locale";
 import { TreeView, createTreeCollection } from "@ark-ui/react/tree-view";
-//#region src/components/tree-select/index.tsx
+// src/components/tree-select/index.tsx
 const chevron = iconNode("chevron-right");
 const chevronDown = /* @__PURE__ */ jsx("span", {
 	"data-part": "chevron",
@@ -144,5 +144,4 @@ function TreeSelectImpl({ value, data, placeholder = "Select…", filterable = f
 	});
 }
 const TreeSelect = Object.assign(TreeSelectImpl, Popover$1);
-//#endregion
 export { TreeSelect };

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

@@ -1,7 +1,6 @@
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { TreeView as TreeView$1, TreeViewRootComponentProps } from "@ark-ui/react/tree-view";
-//#region src/components/tree-view/index.d.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
  * selection is pure light on the paper, one hairline plumb line per depth,
  * and branches that swing open on the spring. The API is Ark's own —
@@ -20,15 +19,24 @@ declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.No
 /** A branch is born with its chevron — the indicator stays a consumer's
  * children to override, never a chore to remember. */
 declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): import("react").JSX.Element;
-type TreeOption = {
+export type TreeViewOption = {
   label: string;
   value: string;
   disabled?: boolean;
-  children?: TreeOption[];
+  /** A curated core icon at the row's leading edge. */
+  icon?: string;
+  /** A quiet trailing label, commonly a count. */
+  meta?: string;
+  children?: TreeViewOption[];
 };
+type TreeOption = TreeViewOption;
 type TreeViewFacadeProps = {
   value?: string[];
   defaultValue?: string[];
+  /** Branch values expanded on first render; top-level branches by default. */
+  defaultExpandedValue?: string[];
+  /** Controlled expanded branch values. */
+  expandedValue?: string[];
   options: TreeOption[];
   multiple?: boolean;
   label?: string;
@@ -36,6 +44,8 @@ type TreeViewFacadeProps = {
   className?: string;
   style?: CSSProperties;
   onValueChange?: (value: string[]) => void;
+  onExpandedChange?: (value: string[]) => void;
+  renderTrailing?: (node: TreeOption) => ReactNode;
 };
 /** The complete tree behind selected values: nested options render their own
  * branches and leaves, while async and checkbox trees remain anatomy work. */
@@ -45,4 +55,4 @@ export declare const TreeView: typeof TreeViewFacade & Omit<typeof TreeView$1, "
   NodeCheckbox: typeof TreeViewNodeCheckbox;
   BranchIndicator: typeof TreeViewBranchIndicator;
 };
-//#endregion
+export {};

package/dist/components/tree-view/index.mjs

@@ -1,9 +1,10 @@
-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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/react/tree-view";
-//#region src/components/tree-view/index.tsx
+// src/components/tree-view/index.tsx
 function TreeViewRoot(props) {
 	injectComponentStyle("tree-view");
 	const id = useElementId("tree-view", props);
@@ -31,10 +32,26 @@ function TreeViewBranchIndicator(props) {
 		children
 	});
 }
-function treeNodes(items, path = []) {
+function nodeTrailing(node, props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [node.meta ? /* @__PURE__ */ jsx("span", {
+		"data-scope": "tree-view",
+		"data-part": "node-meta",
+		children: node.meta
+	}) : null, props.renderTrailing?.(node)] });
+}
+function treeNodes(items, path = [], facade) {
 	return items.map((node, index) => {
 		const indexPath = [...path, index];
-		const row = node.children?.length ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: iconNode("chevron-right") }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsx(TreeView$1.BranchContent, { children: treeNodes(node.children, indexPath) })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, { children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label }) });
+		const row = node.children?.length ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [
+			node.icon ? iconNode(node.icon) : null,
+			/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: iconNode("chevron-right") }),
+			/* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label }),
+			nodeTrailing(node, facade)
+		] }), /* @__PURE__ */ jsx(TreeView$1.BranchContent, { children: treeNodes(node.children, indexPath, facade) })] }) : /* @__PURE__ */ jsxs(TreeView$1.Item, { children: [
+			node.icon ? iconNode(node.icon) : null,
+			/* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label }),
+			nodeTrailing(node, facade)
+		] });
 		return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
 			node,
 			indexPath,
@@ -45,9 +62,9 @@ function treeNodes(items, path = []) {
 /** The complete tree behind selected values: nested options render their own
 * branches and leaves, while async and checkbox trees remain anatomy work. */
 function TreeViewFacade(props) {
-	const { value, defaultValue, options, multiple, label, size = "md", className, style, onValueChange } = props;
+	const { value, defaultValue, defaultExpandedValue, expandedValue, options, multiple, label, size = "md", className, style, onValueChange, onExpandedChange } = props;
 	const branchValues = options.filter((option) => option.children?.length).map((option) => option.value);
-	const collection = createTreeCollection({
+	const collection = useMemo(() => createTreeCollection({
 		nodeToValue: (node) => node.value,
 		nodeToString: (node) => node.label,
 		isNodeDisabled: (node) => !!node.disabled,
@@ -56,11 +73,12 @@ function TreeViewFacade(props) {
 			label: "",
 			children: options
 		}
-	});
+	}), [options]);
 	return /* @__PURE__ */ jsx(TreeViewRoot, {
 		size,
 		collection,
-		defaultExpandedValue: branchValues,
+		defaultExpandedValue: defaultExpandedValue ?? branchValues,
+		...expandedValue === void 0 ? {} : { expandedValue },
 		defaultSelectedValue: defaultValue,
 		selectedValue: value,
 		selectionMode: multiple ? "multiple" : "single",
@@ -68,7 +86,8 @@ function TreeViewFacade(props) {
 		className,
 		style,
 		onSelectionChange: (event) => onValueChange?.(event.selectedValue),
-		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options) })
+		onExpandedChange: (event) => onExpandedChange?.(event.expandedValue),
+		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options, [], props) })
 	});
 }
 const TreeView = Object.assign(TreeViewFacade, {
@@ -77,5 +96,4 @@ const TreeView = Object.assign(TreeViewFacade, {
 	NodeCheckbox: TreeViewNodeCheckbox,
 	BranchIndicator: TreeViewBranchIndicator
 });
-//#endregion
 export { TreeView };

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

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

package/dist/components/typography/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/typography/index.tsx
+// src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and
 * heading ride the song-serif, the rest ride the hei. Nothing here is
 * decorative — hierarchy is size, weight, and space. */
@@ -31,5 +31,4 @@ const Typography = Object.assign(Display, {
 	Label
 });
 injectComponentStyle("typography");
-//#endregion
 export { Typography };

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

@@ -1,6 +1,5 @@
 import { AvatarSize } from "../avatar/index.mjs";
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/user/index.d.ts
 export interface UserProps extends HTMLAttributes<HTMLDivElement> {
   /** The person's name — the loud line. */
   name: string;
@@ -20,4 +19,4 @@ declare function UserImpl({ name, description, size, src, shape, children, ...re
 export declare const User: typeof UserImpl & {
   Root: typeof UserImpl;
 };
-//#endregion
+export {};

package/dist/components/user/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { Avatar } from "../avatar/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/user/index.tsx
+// src/components/user/index.tsx
 function initialsOf(name) {
 	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
 }
@@ -40,5 +40,4 @@ function UserImpl({ name, description, size, src, shape = "circle", children, ..
 	});
 }
 const User = withSelfRoot(UserImpl);
-//#endregion
 export { User };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/virtual-list/index.d.ts
 export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
   items: unknown[];
   /** The height every row occupies — fixed rows keep it simple. */
@@ -17,4 +16,4 @@ declare function VirtualListImpl({ items, itemHeight, height, renderItem, ...res
 export declare const VirtualList: typeof VirtualListImpl & {
   Root: typeof VirtualListImpl;
 };
-//#endregion
+export {};

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

@@ -1,9 +1,9 @@
-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 { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-//#region src/components/virtual-list/index.tsx
+// src/components/virtual-list/index.tsx
 function toCssLength(length) {
 	return typeof length === "number" ? `${length}px` : length;
 }
@@ -47,5 +47,4 @@ function VirtualListImpl({ items, itemHeight = 40, height = 320, renderItem, ...
 	});
 }
 const VirtualList = withSelfRoot(VirtualListImpl);
-//#endregion
 export { VirtualList };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/watermark/index.d.ts
 export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
   content: string;
   opacity?: number;
@@ -16,4 +15,4 @@ declare function WatermarkImpl({ content, opacity, rotate, fontSize, children, .
 export declare const Watermark: typeof WatermarkImpl & {
   Root: typeof WatermarkImpl;
 };
-//#endregion
+export {};

package/dist/components/watermark/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, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-//#region src/components/watermark/index.tsx
+// src/components/watermark/index.tsx
 /** Font-relative measures ride the root's own measure; absolute units
 * pass through untouched — the canvas needs a number, the prop may
 * speak in CSS. */
@@ -78,5 +78,4 @@ function WatermarkImpl({ content, opacity = .06, rotate = -20, fontSize = "0.875
 	});
 }
 const Watermark = withSelfRoot(WatermarkImpl);
-//#endregion
 export { Watermark };

package/dist/{family-DE_GQeeM.mjs → family-Co1YsN4N.mjs}

@@ -1,9 +1,8 @@
-//#region src/internal/family.ts
+// src/internal/family.ts
 /** Gives a single-component family the same callable + Root surface. */
 function withSelfRoot(component) {
 	const family = component;
 	family.Root = component;
 	return family;
 }
-//#endregion
 export { withSelfRoot as t };

package/dist/generative/index.d.mts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-//#region src/generative/index.d.ts
 export declare const catalog: import("@json-render/core").Catalog<{
   spec: import("@json-render/core").SchemaType<"object", {
     root: import("@json-render/core").SchemaType<"string", unknown>;
@@ -49,5 +48,4 @@ declare const registry: import("@json-render/react").ComponentRegistry;
  * several names - Layout plus its parts, Bento plus its cell - and the
  * palette groups by provenance, never by guessing from the name. */
 export declare const faceFamilies: Record<string, string>;
-//#endregion
 export { registry };