@stll/folio-react 0.6.0 → 0.8.0

package/dist/folio-ui-BgDDRsUX.js

@@ -0,0 +1,1013 @@
+import { c } from "react-compiler-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { Popover } from "@base-ui/react/popover";
+import { Dialog } from "@base-ui/react/dialog";
+import { Input } from "@base-ui/react/input";
+import { Menu } from "@base-ui/react/menu";
+import { Select } from "@base-ui/react/select";
+//#region src/lib/utils.ts
+/** Merge class names, filtering out falsy values. */
+function cn(...inputs) {
+	return inputs.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/ui/defaults/button.tsx
+/**
+* Built-in, dependency-free Button used when a consumer does not inject one.
+*
+* Renders a native, accessible `<button>` honoring the `FolioButtonProps`
+* subset. The minimal default styling lives in `editor.css`
+* (`.folio-default-button*` classes, keyed off folio's `--doc-*` variables with
+* safe fallbacks) rather than inline styles, so a caller's `className` can
+* override the defaults through the normal cascade. Consumers that want
+* polished chrome inject their own design-system Button via `DocxEditor`'s
+* `components` prop.
+*/
+function DefaultButton({ variant = "default", size = "sm", className, children, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("folio-default-button", `folio-default-button--${variant}`, `folio-default-button--${size}`, className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/ui/defaults/checkbox.tsx
+/**
+* Built-in, dependency-light Checkbox used when a consumer does not inject one.
+* Wraps `@base-ui/react`'s accessible Checkbox primitive with a minimal check
+* indicator; consumers inject their own design-system Checkbox for full polish.
+*/
+function DefaultCheckbox(t0) {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-checkbox", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "folio-default-checkbox-indicator",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "14",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "14",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Checkbox.Root, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+//#region src/ui/defaults/color-picker.tsx
+/**
+* Built-in, dependency-light ColorPicker used when a consumer does not inject
+* one. Wraps `@base-ui/react`'s Popover primitive (focus management,
+* portalling, collision-aware positioning) and renders the `presets` as a row
+* of swatch buttons plus a native `<input type="color">` for a custom color.
+* `onSelect` emits a preset value or a 6-char uppercase hex (no `#`), matching
+* the design-system ColorPicker contract. Consumers inject a polished picker
+* via `DocxEditor`'s `components` prop.
+*/
+const swatchColor = (preset) => preset.color ?? `#${preset.value}`;
+const normalizeHex = (hex) => hex.replace(/^#/u, "").toUpperCase();
+const EMPTY_PRESETS = [];
+function DefaultColorPicker({ value, onSelect, onClear, presets = EMPTY_PRESETS, columns = 8, children }) {
+	const t = useTranslations("folio");
+	const trigger = useMemo(() => /* @__PURE__ */ jsx("div", { className: "folio-default-color-picker-trigger" }), []);
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		nativeButton: false,
+		render: trigger,
+		children
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align: "start",
+		className: "folio-default-popover-positioner folio-root",
+		side: "bottom",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: "folio-default-color-picker-popup",
+			children: [
+				onClear && /* @__PURE__ */ jsx(Popover.Close, {
+					className: "folio-default-color-picker-clear",
+					onClick: onClear,
+					children: t("colorPicker.noColor")
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "folio-default-color-picker-swatches",
+					style: { gridTemplateColumns: `repeat(${columns}, 1fr)` },
+					children: presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatch, {
+						onSelect,
+						preset,
+						selected: value === preset.value
+					}, preset.value))
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "folio-default-color-picker-custom",
+					children: [t("colorPicker.custom"), /* @__PURE__ */ jsx("input", {
+						"aria-label": t("colorPicker.customColor"),
+						onChange: (event) => onSelect?.(normalizeHex(event.target.value)),
+						type: "color",
+						value: value ? `#${normalizeHex(value)}` : "#000000"
+					})]
+				})
+			]
+		})
+	}) })] });
+}
+function ColorSwatch(t0) {
+	const $ = c(14);
+	const { onSelect, preset, selected } = t0;
+	let t1;
+	if ($[0] !== onSelect || $[1] !== preset.value) {
+		t1 = () => onSelect?.(preset.value);
+		$[0] = onSelect;
+		$[1] = preset.value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const handleClick = t1;
+	let t2;
+	if ($[3] !== preset) {
+		t2 = swatchColor(preset);
+		$[3] = preset;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = { backgroundColor: t2 };
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
+	const t4 = preset.label;
+	const t5 = selected && "folio-default-color-picker-swatch--selected";
+	let t6;
+	if ($[7] !== t5) {
+		t6 = cn("folio-default-color-picker-swatch", t5);
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== handleClick || $[10] !== preset.label || $[11] !== style || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Popover.Close, {
+			"aria-label": t4,
+			className: t6,
+			onClick: handleClick,
+			style,
+			title: preset.label
+		});
+		$[9] = handleClick;
+		$[10] = preset.label;
+		$[11] = style;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+//#endregion
+//#region src/ui/defaults/date-picker-popover.tsx
+/**
+* Built-in, dependency-light DatePickerPopover used when a consumer does not
+* inject one. Renders a native `<input type="date">` whose value is an ISO
+* `yyyy-mm-dd` string; `onChange` emits that string (or `null` when cleared),
+* matching the design-system picker contract. Consumers inject a polished
+* calendar via `DocxEditor`'s `components` prop.
+*/
+const toISODate = (value) => {
+	if (value === null) return "";
+	if (value instanceof Date) return `${value.getFullYear().toString().padStart(4, "0")}-${(value.getMonth() + 1).toString().padStart(2, "0")}-${value.getDate().toString().padStart(2, "0")}`;
+	return value.length >= 10 ? value.slice(0, 10) : value;
+};
+function DefaultDatePickerPopover({ value, onChange, defaultOpen = false }) {
+	return /* @__PURE__ */ jsx("input", {
+		autoFocus: defaultOpen,
+		className: "folio-default-date-input",
+		onChange: (event) => onChange(event.target.value || null),
+		type: "date",
+		value: toISODate(value)
+	});
+}
+//#endregion
+//#region src/ui/defaults/dialog.tsx
+/**
+* Built-in, dependency-light Dialog parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive — the same
+* accessible primitive the app design system wraps — with minimal styling.
+* Folio's chrome positions the popup itself via `className`, so the default
+* popup is a bare portalled surface (no viewport grid); consumers inject a
+* polished Dialog through `DocxEditor`'s `components` prop.
+*/
+function DefaultDialogRoot(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultDialogPortal(t0) {
+	const $ = c(9);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { display: "contents" };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== children) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "folio-root",
+			style: t1,
+			children
+		});
+		$[4] = children;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog.Portal, {
+			...props,
+			children: t2
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+function DefaultDialogBackdrop(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-dialog-backdrop", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Backdrop, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultDialogPopup(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-dialog-popup", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultDialogTitle(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-dialog-title", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Title, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultDialogClose(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-dialog-close", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Close, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const DefaultDialog = {
+	Root: DefaultDialogRoot,
+	Portal: DefaultDialogPortal,
+	Backdrop: DefaultDialogBackdrop,
+	Popup: DefaultDialogPopup,
+	Title: DefaultDialogTitle,
+	Close: DefaultDialogClose
+};
+//#endregion
+//#region src/ui/defaults/input.tsx
+/**
+* Built-in, dependency-light Input used when a consumer does not inject one.
+*
+* Wraps `@base-ui/react`'s Input primitive, honoring the `nativeInput` escape
+* hatch (render a plain `<input>` when the caller needs uncontrolled native
+* behavior) and folio's `size` shorthand. Styling is intentionally minimal;
+* consumers inject their own design-system Input for full polish.
+*/
+function DefaultInput({ className, size = "default", nativeInput = false, ...props }) {
+	const inputClassName = cn("folio-default-input", className);
+	const numericSize = typeof size === "number" ? size : void 0;
+	if (nativeInput) return /* @__PURE__ */ jsx("input", {
+		className: inputClassName,
+		"data-size": typeof size === "string" ? size : void 0,
+		size: numericSize,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		className: inputClassName,
+		"data-size": typeof size === "string" ? size : void 0,
+		size: numericSize,
+		...props
+	});
+}
+//#endregion
+//#region src/ui/defaults/menu.tsx
+/**
+* Built-in, dependency-light Menu parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real
+* keyboard navigation, portalling, collision-aware positioning) with minimal
+* styling. Consumers inject a polished Menu via `DocxEditor`'s `components`
+* prop.
+*/
+function DefaultMenuRoot(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultMenuTrigger({ nativeButton = true, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		nativeButton,
+		...props
+	});
+}
+function DefaultMenuPopup({ className, children, align = "center", side = "bottom", sideOffset = 4, alignOffset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		align,
+		alignOffset,
+		className: "folio-default-menu-positioner folio-root",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			className: cn("folio-default-menu-popup", className),
+			...props,
+			children
+		})
+	}) });
+}
+function DefaultMenuItem(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-menu-item", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Item, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultMenuCheckboxItem(t0) {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("folio-default-menu-checkbox-item", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "folio-default-menu-checkbox-indicator",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "14",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "14",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children) {
+		t3 = /* @__PURE__ */ jsx("span", { children });
+		$[7] = children;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+			className: t1,
+			...props,
+			children: [t2, t3]
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+function DefaultMenuGroup(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Group, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultMenuGroupLabel(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-menu-group-label", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.GroupLabel, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultMenuSeparator(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-menu-separator", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Separator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const DefaultMenu = {
+	Root: DefaultMenuRoot,
+	Trigger: DefaultMenuTrigger,
+	Popup: DefaultMenuPopup,
+	Item: DefaultMenuItem,
+	CheckboxItem: DefaultMenuCheckboxItem,
+	Group: DefaultMenuGroup,
+	GroupLabel: DefaultMenuGroupLabel,
+	Separator: DefaultMenuSeparator
+};
+//#endregion
+//#region src/ui/defaults/outline-rail.tsx
+/**
+* Built-in, dependency-light OutlineRail used when a consumer does not inject
+* one. Renders the outline as a plain semantic `<nav>` list of clickable
+* entries indented by level; clicking an entry calls `onJump` with the resolved
+* scroll container. Consumers inject the polished tick-rail + hover panel via
+* `DocxEditor`'s `components` prop.
+*/
+function DefaultOutlineRail({ items, scrollContainerRef, onJump, activeId, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) {
+	if (items.length < 2) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: "folio-default-outline-rail",
+		style: {
+			top: topOffset,
+			width: panelWidth
+		},
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "folio-default-outline-list",
+			children: items.map((item) => {
+				const isActive = item.id === activeId;
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					"aria-current": isActive ? "true" : void 0,
+					className: cn("folio-default-outline-item", isActive && "folio-default-outline-item--active"),
+					onClick: () => {
+						const container = scrollContainerRef.current;
+						if (container) onJump(item.id, container);
+					},
+					style: { paddingInlineStart: `${item.level * 12 + 8}px` },
+					title: item.label,
+					type: "button",
+					children: item.label
+				}) }, item.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/ui/defaults/popover.tsx
+/**
+* Built-in, dependency-light Popover parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real focus
+* management, portalling, and collision-aware positioning) with minimal
+* styling. Consumers inject a polished Popover via `DocxEditor`'s `components`
+* prop.
+*/
+function DefaultPopoverRoot(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Popover.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultPopoverTrigger(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultPopoverPopup({ className, children, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		className: "folio-default-popover-positioner folio-root",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: cn("folio-default-popover-popup", className),
+			...props,
+			children
+		})
+	}) });
+}
+function DefaultPopoverClose(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Popover.Close, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const DefaultPopover = {
+	Root: DefaultPopoverRoot,
+	Trigger: DefaultPopoverTrigger,
+	Popup: DefaultPopoverPopup,
+	Close: DefaultPopoverClose
+};
+//#endregion
+//#region src/ui/defaults/select.tsx
+/**
+* Built-in, dependency-light Select parts used when a consumer does not inject
+* its own. Each part wraps the matching `@base-ui/react` primitive (real
+* listbox semantics, keyboard navigation, portalled positioning) with minimal
+* styling. The default popup omits the scroll arrows and item-aligned
+* positioning of a fully styled design-system Select; consumers inject their
+* own Select via `DocxEditor`'s `components` prop for that polish.
+*/
+function DefaultSelectRoot(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Select.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function DefaultSelectTrigger(t0) {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	let size;
+	if ($[0] !== t0) {
+		({className, children, size, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = size;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		size = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cn("folio-default-select-trigger", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Select.Icon, {
+			className: "folio-default-select-icon",
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				fill: "none",
+				height: "16",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "16",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+			})
+		});
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== props || $[10] !== size || $[11] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Select.Trigger, {
+			className: t1,
+			"data-size": size,
+			...props,
+			children: [children, t2]
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = size;
+		$[11] = t1;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+}
+function DefaultSelectValue(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("folio-default-select-value", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.Value, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function DefaultSelectPopup(t0) {
+	const $ = c(12);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("folio-default-select-popup", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(Select.List, { children });
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			align: "start",
+			className: "folio-default-select-positioner folio-root",
+			side: "bottom",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: t1,
+				...props,
+				children: t2
+			})
+		}) });
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function DefaultSelectItem(t0) {
+	const $ = c(12);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("folio-default-select-item", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(Select.ItemText, { children });
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Select.Item, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+//#endregion
+//#region src/ui/folio-ui.tsx
+const DEFAULT_COMPONENTS = {
+	Button: DefaultButton,
+	Dialog: DefaultDialog,
+	Select: {
+		Root: DefaultSelectRoot,
+		Trigger: DefaultSelectTrigger,
+		Value: DefaultSelectValue,
+		Popup: DefaultSelectPopup,
+		Item: DefaultSelectItem
+	},
+	Menu: DefaultMenu,
+	Popover: DefaultPopover,
+	Input: DefaultInput,
+	Checkbox: DefaultCheckbox,
+	ColorPicker: DefaultColorPicker,
+	DatePickerPopover: DefaultDatePickerPopover,
+	OutlineRail: DefaultOutlineRail
+};
+const FolioUIContext = createContext(DEFAULT_COMPONENTS);
+/**
+* Merge a consumer's partial overrides over the built-in defaults: every key is
+* present (defaults fill the gaps), and each provided override wins. Pure, so
+* the resolution contract is unit-tested independently of React.
+*/
+function resolveFolioComponents(components) {
+	return components ? {
+		...DEFAULT_COMPONENTS,
+		...components
+	} : DEFAULT_COMPONENTS;
+}
+function FolioUIProvider(t0) {
+	const $ = c(5);
+	const { components, children } = t0;
+	let t1;
+	if ($[0] !== components) {
+		t1 = resolveFolioComponents(components);
+		$[0] = components;
+		$[1] = t1;
+	} else t1 = $[1];
+	const value = t1;
+	let t2;
+	if ($[2] !== children || $[3] !== value) {
+		t2 = /* @__PURE__ */ jsx(FolioUIContext.Provider, {
+			value,
+			children
+		});
+		$[2] = children;
+		$[3] = value;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function useFolioUI() {
+	return useContext(FolioUIContext);
+}
+//#endregion
+export { cn as i, FolioUIProvider as n, useFolioUI as r, DEFAULT_COMPONENTS as t };