@bysages/solid 0.4.4 → 0.5.0

package/dist/mentions-CvY9IGzc.mjs

@@ -0,0 +1,438 @@
+import { n as withSelfRoot, t as defineFamily } from "./family-B5HtE0on.mjs";
+import { t as useElementId } from "./id-DGvz-2rQ.mjs";
+import { Icon } from "./components/icon/index.mjs";
+import { Popover as Popover$1 } from "./components/popover/index.mjs";
+import { Portal, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createSignal, splitProps } from "solid-js";
+import { Field } from "@ark-ui/solid/field";
+import { Popover } from "@ark-ui/solid/popover";
+// src/components/mentions/use-mentions.ts
+/** The @-detection machinery behind a mention field: watch the caret,
+* offer the matching candidates, and answer for the keys that drive
+* them. The field element arrives as an accessor because hosts wrap it
+* differently (a bare textarea, a field's own part).
+*
+* `onKeydown` answers whether the vessel consumed the key, so a host
+* with its own Enter semantics — a composer that sends — can yield to
+* the candidates first and act only when the vessel stands down. */
+function useMentions(options, textarea, handlers) {
+	const [popupOpen, setPopupOpen] = createSignal(false);
+	const [matches, setMatches] = createSignal([]);
+	const [active, setActive] = createSignal(0);
+	const [anchorIndex, setAnchorIndex] = createSignal(0);
+	const [caretIndex, setCaretIndex] = createSignal(0);
+	const [activeTrigger, setActiveTrigger] = createSignal("@");
+	const triggers = () => {
+		const value = options().triggers ?? options().trigger ?? "@";
+		return (Array.isArray(value) ? value : [value]).filter((trigger) => trigger.length > 0);
+	};
+	const closePopup = () => {
+		setPopupOpen(false);
+		setMatches([]);
+	};
+	const moveActive = (delta) => {
+		const enabled = matches().map((entry, index) => ({
+			entry,
+			index
+		})).filter(({ entry }) => !entry.disabled);
+		if (enabled.length === 0) return;
+		const position = enabled.findIndex(({ index }) => index === active());
+		const next = position === -1 ? 0 : (position + delta + enabled.length) % enabled.length;
+		setActive(enabled[next]?.index ?? 0);
+	};
+	const detect = () => {
+		const text = handlers.getText();
+		const el = textarea();
+		const caret = handlers.getCaret?.() ?? el?.selectionStart ?? text.length;
+		setCaretIndex(caret);
+		const head = text.slice(0, caret);
+		const found = triggers().map((trigger) => ({
+			trigger,
+			anchor: head.lastIndexOf(trigger)
+		})).filter((candidate) => candidate.anchor !== -1).sort((left, right) => right.anchor - left.anchor || right.trigger.length - left.trigger.length)[0];
+		const token = found ? head.slice(found.anchor + found.trigger.length) : "";
+		if (!found || /\s/.test(token)) {
+			closePopup();
+			return;
+		}
+		const query = token.toLowerCase();
+		const roster = options().items.filter((entry) => entry.label.toLowerCase().startsWith(query) || entry.value.toLowerCase().startsWith(query));
+		setMatches(roster);
+		setActive(roster.findIndex((entry) => !entry.disabled));
+		setAnchorIndex(found.anchor);
+		setActiveTrigger(found.trigger);
+		setPopupOpen(roster.length > 0);
+	};
+	const insert = (entry) => {
+		if (entry.disabled) {
+			closePopup();
+			return;
+		}
+		if (handlers.select?.(entry) === false) {
+			handlers.commit?.(entry);
+			closePopup();
+			return;
+		}
+		if (handlers.commit) {
+			handlers.commit(entry);
+			closePopup();
+			return;
+		}
+		const text = handlers.getText();
+		const trigger = activeTrigger();
+		const replacement = entry.insertText ?? trigger + entry.label;
+		const suffix = entry.insertText == null ? " " : "";
+		const next = text.slice(0, anchorIndex()) + replacement + suffix + text.slice(caretIndex());
+		handlers.setText(next);
+		closePopup();
+		queueMicrotask(() => {
+			const el = textarea();
+			if (!el) return;
+			const caret = anchorIndex() + replacement.length + suffix.length;
+			el.focus();
+			el.setSelectionRange(caret, caret);
+		});
+	};
+	/** Feed the field's input events through here — the vessel watches
+	* the text as it lands, from the element itself. */
+	const onInput = () => detect();
+	/** Arrows move, configured commit keys insert, Escape dismisses.
+	* Answers `true` when the vessel consumed the key. */
+	const onKeydown = (event) => {
+		if (!popupOpen() || matches().length === 0) return false;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveActive(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			moveActive(-1);
+		} else if ((options().commitKeys ?? ["Enter", " "]).includes(event.key)) {
+			const entry = matches()[active()];
+			if (!entry || entry.disabled) return false;
+			event.preventDefault();
+			insert(entry);
+		} else if (event.key === "Escape") closePopup();
+		else return false;
+		return true;
+	};
+	return {
+		open: popupOpen,
+		matches,
+		active,
+		setActive,
+		anchorIndex,
+		caretIndex,
+		activeTrigger,
+		insert,
+		close: closePopup,
+		onInput,
+		onKeydown
+	};
+}
+// src/components/mentions/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-scope=mentions data-part=option-description>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-scope=mentions data-part=option-kind>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=option tabindex=-1 data-scope=mentions data-part=option><span data-scope=mentions data-part=option-main><span data-scope=mentions data-part=option-label>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div role=group data-scope=mentions data-part=group><div data-scope=mentions data-part=group-label>`);
+function groupMentions(matches) {
+	const ordered = [];
+	const byName = /* @__PURE__ */ new Map();
+	matches.forEach((entry, index) => {
+		const name = entry.group ?? "";
+		const group = byName.get(name);
+		if (group) group.entries.push({
+			entry,
+			index
+		});
+		else {
+			const next = {
+				name,
+				entries: [{
+					entry,
+					index
+				}]
+			};
+			byName.set(name, next);
+			ordered.push(next);
+		}
+	});
+	return ordered;
+}
+/** The vessel: the candidates themselves as a floating card. A host can
+* render its field through the Anchor; the rectangle fallback keeps the
+* textarea in the host's own anatomy. Shares the detection state with
+* the host through `useMentions`. */
+const MentionsVessel = withSelfRoot(function MentionsVessel(props) {
+	injectComponentStyle("mentions");
+	const id = useElementId("mentions-vessel", () => props.id);
+	const popupId = () => `${id()}:popup`;
+	const option = (entry, index) => {
+		const active = () => index() === (props.active ?? 0) && !entry.disabled;
+		return (() => {
+			var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+			_el$.$$keydown = (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				if (!entry.disabled) props.onInsert?.(entry);
+			};
+			_el$.$$mousedown = (event) => {
+				if (event.button !== 0) return;
+				event.preventDefault();
+				if (!entry.disabled) props.onInsert?.(entry);
+			};
+			_el$.addEventListener("mouseenter", () => {
+				if (!entry.disabled) props.onActiveChange?.(index());
+			});
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return entry.icon;
+				},
+				get children() {
+					return createComponent(Icon, { get name() {
+						return entry.icon;
+					} });
+				}
+			}), _el$2);
+			insert(_el$3, () => entry.label);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return entry.description;
+				},
+				get children() {
+					var _el$4 = _tmpl$();
+					insert(_el$4, () => entry.description);
+					return _el$4;
+				}
+			}), null);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return entry.kind;
+				},
+				get children() {
+					var _el$5 = _tmpl$2();
+					insert(_el$5, () => entry.kind);
+					return _el$5;
+				}
+			}), null);
+			effect((_p$) => {
+				var _v$ = `${popupId()}:option-${index()}`, _v$2 = active(), _v$3 = entry.disabled ? "true" : void 0, _v$4 = active() ? "" : void 0, _v$5 = entry.disabled ? "" : void 0;
+				_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$, "aria-selected", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$, "aria-disabled", _p$.a = _v$3);
+				_v$4 !== _p$.o && setAttribute(_el$, "data-active", _p$.o = _v$4);
+				_v$5 !== _p$.i && setAttribute(_el$, "data-disabled", _p$.i = _v$5);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0
+			});
+			return _el$;
+		})();
+	};
+	return createComponent(Popover.Root, {
+		get id() {
+			return `${id()}:vessel`;
+		},
+		get ids() {
+			return { content: popupId() };
+		},
+		get open() {
+			return props.open ?? false;
+		},
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get positioning() {
+			return memo(() => !!props.children)() ? { placement: props.placement ?? "bottom-start" } : {
+				placement: props.placement ?? "bottom-start",
+				getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
+			};
+		},
+		get children() {
+			return [memo(() => memo(() => !!props.children)() ? createComponent(Popover.Anchor, { asChild: (anchorProps) => typeof props.children === "function" ? props.children(anchorProps()) : props.children }) : null), createComponent(Portal, { get children() {
+				return createComponent(Popover.Positioner, { get children() {
+					return createComponent(Popover.Content, { asChild: (contentProps) => (() => {
+						var _el$6 = _tmpl$4();
+						spread(_el$6, mergeProps(contentProps, {
+							get id() {
+								return popupId();
+							},
+							"role": "listbox",
+							get ["aria-activedescendant"]() {
+								return memo(() => !!(props.matches?.[props.active ?? 0] && !props.matches?.[props.active ?? 0]?.disabled))() ? `${popupId()}:option-${props.active ?? 0}` : void 0;
+							},
+							"data-scope": "mentions",
+							"data-part": "popup",
+							get ["data-size"]() {
+								return props.size ?? "md";
+							}
+						}), false, true);
+						insert(_el$6, createComponent(For, {
+							get each() {
+								return groupMentions(props.matches ?? []);
+							},
+							children: (group, groupIndex) => {
+								const labelId = group.name ? `${popupId()}:group-${groupIndex()}` : void 0;
+								const options = createComponent(For, {
+									get each() {
+										return group.entries;
+									},
+									children: ({ entry, index }) => option(entry, () => index)
+								});
+								if (!group.name) return options;
+								return (() => {
+									var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild;
+									setAttribute(_el$7, "aria-labelledby", labelId);
+									setAttribute(_el$8, "id", labelId);
+									insert(_el$8, () => group.name);
+									insert(_el$7, options, null);
+									return _el$7;
+								})();
+							}
+						}));
+						return _el$6;
+					})() });
+				} });
+			} })];
+		}
+	});
+});
+/**
+* @-mentions: a plain textarea that, when the text before the caret ends
+* with a trigger character followed by a token, offers matching
+* candidates in a small anchored vessel. Entries may carry descriptions,
+* icons, groups and consumer metadata. Selecting reports the whole
+* entry; by default it also replaces the token with the trigger that
+* opened it plus the label. Arrows move, Enter inserts, Escape dismisses.
+*
+* The field is the shared `Field.Textarea` — field wiring (label ids,
+* the invalid state, autoresize) rides on it for free — and the vessel
+* anchors to the field as a whole (popover machinery), not to the caret
+* coordinates; caret-precise positioning would need a second positioning
+* system for no practical gain at typical field sizes. Composers that
+* keep their own field anatomy (the AI prompt input) skip this shell and
+* wire `useMentions` plus `MentionsVessel` themselves.
+*/
+function MentionsImpl(props) {
+	const [own, rest] = splitProps(props, [
+		"items",
+		"value",
+		"trigger",
+		"triggers",
+		"insertOnSelect",
+		"commitKeys",
+		"placement",
+		"placeholder",
+		"autoresize",
+		"invalid",
+		"size",
+		"onValueChange",
+		"onSelect"
+	]);
+	const [internal, setInternal] = createSignal("");
+	const [fieldEl, setFieldEl] = createSignal(null);
+	const hostId = useElementId("mentions", () => rest.id);
+	const popupId = () => `${hostId()}:vessel:popup`;
+	const value = () => own.value ?? internal();
+	const mentions = useMentions(() => ({
+		items: own.items ?? [],
+		trigger: own.trigger,
+		triggers: own.triggers,
+		commitKeys: own.commitKeys
+	}), fieldEl, {
+		getText: () => fieldEl()?.value ?? value(),
+		setText: (next) => {
+			setInternal(next);
+			own.onValueChange?.(next);
+		},
+		select: (entry) => {
+			own.onSelect?.(entry);
+			return own.insertOnSelect !== false;
+		}
+	});
+	const onInput = () => {
+		const node = fieldEl();
+		if (!node) return;
+		setInternal(node.value);
+		own.onValueChange?.(node.value);
+		mentions.onInput();
+	};
+	const field = (anchorProps) => createComponent(Field.Textarea, mergeProps(anchorProps, {
+		ref: (node) => setFieldEl(node),
+		get autoresize() {
+			return own.autoresize ?? false;
+		},
+		get ["aria-invalid"]() {
+			return own.invalid ? "true" : void 0;
+		},
+		get ["aria-expanded"]() {
+			return mentions.open();
+		},
+		get ["aria-controls"]() {
+			return memo(() => !!mentions.open())() ? popupId() : void 0;
+		},
+		rows: 3,
+		get placeholder() {
+			return own.placeholder;
+		},
+		get value() {
+			return value();
+		},
+		onInput,
+		onKeyDown: (event) => {
+			mentions.onKeydown(event);
+		},
+		"data-scope": "mentions",
+		"data-part": "textarea"
+	}));
+	return (() => {
+		var _el$9 = _tmpl$4();
+		spread(_el$9, mergeProps(rest, {
+			get id() {
+				return hostId();
+			},
+			"data-scope": "mentions",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "md";
+			}
+		}), false, true);
+		insert(_el$9, createComponent(MentionsVessel, {
+			get open() {
+				return mentions.open();
+			},
+			get matches() {
+				return mentions.matches();
+			},
+			get active() {
+				return mentions.active();
+			},
+			get size() {
+				return own.size ?? "md";
+			},
+			get id() {
+				return `${hostId()}:vessel`;
+			},
+			get placement() {
+				return own.placement ?? "bottom-start";
+			},
+			get onInsert() {
+				return mentions.insert;
+			},
+			get onActiveChange() {
+				return mentions.setActive;
+			},
+			onOpenChange: (open) => {
+				if (!open) mentions.close();
+			},
+			children: field
+		}));
+		return _el$9;
+	})();
+}
+const Mentions = defineFamily(MentionsImpl, Popover$1);
+delegateEvents(["mousedown", "keydown"]);
+export { MentionsVessel as n, useMentions as r, Mentions as t };

package/dist/{select-DI7pFspF.mjs → select-NaNlrYUT.mjs}

@@ -1,15 +1,15 @@
-import { t as defineFamily } from "./family-Cmd8HEyK.mjs";
-import { r as iconNode } from "./icon-DTqmJCd5.mjs";
-import { t as useElementId } from "./id-2ygNzPHF.mjs";
-import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { t as defineFamily } from "./family-B5HtE0on.mjs";
+import { r as iconNode } from "./icon-DQqYA2fO.mjs";
+import { t as useElementId } from "./id-DGvz-2rQ.mjs";
+import { createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createEffect, createSignal, onMount, splitProps } from "solid-js";
 import { useFieldContext } from "@ark-ui/solid/field";
 import { Select, createListCollection } from "@ark-ui/solid/select";
-//#region src/components/select/native.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<option value disabled>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<span><select><!><!>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<option>`);
+// src/components/select/native.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<option value disabled>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span><select>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<option>`);
 function NativeSelect(props) {
 	injectComponentStyle("select");
 	const field = useFieldContext();
@@ -34,89 +34,70 @@ function NativeSelect(props) {
 	const fieldProps = field?.().getInputProps() ?? {};
 	const empty = () => own.value == null || own.value === "";
 	const off = () => own.disabled || field?.().disabled;
-	var _el$ = _tmpl$2();
-	var _el$2 = _el$.firstChild;
-	var _el$4 = _el$2.firstChild;
-	var _el$5 = _el$4.nextSibling;
-	spread(_el$, [rest, {
-		"data-scope": "select",
-		"data-part": "native-root",
-		get "data-size"() {
-			return own.size ?? "md";
-		},
-		get "data-invalid"() {
-			return own.invalid || field?.().invalid ? "" : void 0;
-		},
-		get "data-disabled"() {
-			return off() ? "" : void 0;
-		},
-		get "data-placeholder-shown"() {
-			return empty() ? "" : void 0;
-		}
-	}], true);
-	ref(() => {
-		return setSelect;
-	}, _el$2);
-	spread(_el$2, [fieldProps, {
-		get "aria-label"() {
-			return own["aria-label"];
-		},
-		get "aria-labelledby"() {
-			return own["aria-labelledby"];
-		},
-		"data-scope": "select",
-		"data-part": "native",
-		get disabled() {
-			return off() || void 0;
-		},
-		onChange: (event) => own.onValueChange?.(event.currentTarget.value)
-	}], true);
-	insert(_el$2, createComponent(Show, {
-		get when() {
-			return own.placeholder;
-		},
-		get children() {
-			var _el$3 = _tmpl$();
-			insert(_el$3, () => {
+	return (() => {
+		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "select",
+			"data-part": "native-root",
+			get ["data-size"]() {
+				return own.size ?? "md";
+			},
+			get ["data-invalid"]() {
+				return own.invalid || field?.().invalid ? "" : void 0;
+			},
+			get ["data-disabled"]() {
+				return off() ? "" : void 0;
+			},
+			get ["data-placeholder-shown"]() {
+				return empty() ? "" : void 0;
+			}
+		}), false, true);
+		use(setSelect, _el$2);
+		spread(_el$2, mergeProps(fieldProps, {
+			get ["aria-label"]() {
+				return own["aria-label"];
+			},
+			get ["aria-labelledby"]() {
+				return own["aria-labelledby"];
+			},
+			"data-scope": "select",
+			"data-part": "native",
+			get disabled() {
+				return off() || void 0;
+			},
+			"onChange": (event) => own.onValueChange?.(event.currentTarget.value)
+		}), false, true);
+		insert(_el$2, createComponent(Show, {
+			get when() {
 				return own.placeholder;
-			});
-			effect(() => empty() ? void 0 : true, (_v$) => {
-				setAttribute(_el$3, "hidden", _v$);
-			});
-			return _el$3;
-		}
-	}), _el$4);
-	insert(_el$2, createComponent(For, {
-		get each() {
-			return own.options;
-		},
-		children: (option) => (() => {
-			var _el$6 = _tmpl$3();
-			insert(_el$6, () => {
-				return option.label;
-			});
-			effect(() => {
-				return {
-					e: option.value,
-					t: option.disabled
-				};
-			}, ({ e, t }, _p$) => {
-				_el$6.value = e;
-				t !== _p$?.t && setAttribute(_el$6, "disabled", t);
-			});
-			return _el$6;
-		})()
-	}), _el$5);
-	insert(_el$, () => {
-		return iconNode("chevron-down", {
+			},
+			get children() {
+				var _el$3 = _tmpl$();
+				insert(_el$3, () => own.placeholder);
+				effect(() => _el$3.hidden = empty() ? void 0 : true);
+				return _el$3;
+			}
+		}), null);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return own.options;
+			},
+			children: (option) => (() => {
+				var _el$4 = _tmpl$3();
+				insert(_el$4, () => option.label);
+				effect(() => _el$4.disabled = option.disabled);
+				effect(() => _el$4.value = option.value);
+				return _el$4;
+			})()
+		}), null);
+		insert(_el$, () => iconNode("chevron-down", {
 			"data-scope": "select",
 			"data-part": "native-icon"
-		});
-	}, null);
-	return _el$;
+		}), null);
+		return _el$;
+	})();
 }
-//#endregion
-//#region src/components/select/index.tsx
+// src/components/select/index.tsx
 function SelectRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	const id = useElementId("select", () => rest.id);
@@ -124,7 +105,7 @@ function SelectRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		}
 	}));
@@ -172,9 +153,7 @@ function SelectFacade(props) {
 		get defaultValue() {
 			return toArkValue(props.value ?? props.defaultValue);
 		}
-	}, () => {
-		return props.value === void 0 ? {} : { value: toArkValue(props.value) };
-	}, {
+	}, () => props.value === void 0 ? {} : { value: toArkValue(props.value) }, {
 		onValueChange: (details) => props.onValueChange?.(props.multiple ? details.value : details.value.at(0) ?? ""),
 		get children() {
 			return [
@@ -191,10 +170,8 @@ function SelectFacade(props) {
 				createComponent(Select.Control, { get children() {
 					return [
 						createComponent(Select.Trigger, {
-							get "aria-label"() {
-								return memo(() => {
-									return !!props.label;
-								})() ? void 0 : props.placeholder;
+							get ["aria-label"]() {
+								return memo(() => !!props.label)() ? void 0 : props.placeholder;
 							},
 							get children() {
 								return createComponent(Select.ValueText, { get placeholder() {
@@ -288,5 +265,4 @@ const Select$1 = defineFamily(SelectFacade, {
 	Root: SelectRoot
 });
 injectComponentStyle("select");
-//#endregion
 export { NativeSelect as n, Select$1 as t };

package/dist/{toc-DRHr8_eD.mjs → toc-RnPG3w7q.mjs}

@@ -1,17 +1,16 @@
-import { t as defineFamily } from "./family-Cmd8HEyK.mjs";
-import { t as useElementId } from "./id-2ygNzPHF.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "./family-B5HtE0on.mjs";
+import { t as useElementId } from "./id-DGvz-2rQ.mjs";
+import { createComponent, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Toc } from "@ark-ui/solid/toc";
-//#region src/components/toc/TocIndicator.tsx
+// src/components/toc/TocIndicator.tsx
 /** The active stroke is decoration; hidden so the list reads as links
 * alone. */
 function TocIndicator(props) {
 	return createComponent(Toc.Indicator, mergeProps(props, { "aria-hidden": "true" }));
 }
-//#endregion
-//#region src/components/toc/index.tsx
+// src/components/toc/index.tsx
 /** Ark's 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 API is Ark's own — Root, Title, List, Item, Link, Indicator. */
@@ -84,5 +83,4 @@ const Toc$1 = defineFamily(TocFacade, {
 	Content: TocContent
 });
 injectComponentStyle("toc");
-//#endregion
 export { Toc$1 as t };