@bysages/solid 0.4.3 → 0.5.0

package/dist/mentions-DKUG7eHt.mjs

@@ -1,279 +0,0 @@
-import { n as withSelfRoot, t as defineFamily } from "./family-Cmd8HEyK.mjs";
-import { t as useElementId } from "./id-2ygNzPHF.mjs";
-import { Popover as Popover$1 } from "./components/popover/index.mjs";
-import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "@solidjs/web";
-import { injectComponentStyle } from "@bysages/core/styling";
-import { For, createSignal, splitProps } from "solid-js";
-import { Field } from "@ark-ui/solid/field";
-import { Portal } from "solid-js/web";
-import { Popover } from "@ark-ui/solid/popover";
-//#region 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 closePopup = () => {
-		setPopupOpen(false);
-		setMatches([]);
-	};
-	const detect = () => {
-		const text = handlers.getText();
-		const caret = textarea()?.selectionStart ?? text.length;
-		setCaretIndex(caret);
-		const head = text.slice(0, caret);
-		const char = options().trigger ?? "@";
-		const anchor = head.lastIndexOf(char);
-		const token = anchor === -1 ? "" : head.slice(anchor + char.length);
-		if (anchor === -1 || /\s/.test(token)) {
-			closePopup();
-			return;
-		}
-		const found = options().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
-		setMatches(found);
-		setActive(0);
-		setAnchorIndex(anchor);
-		setPopupOpen(found.length > 0);
-	};
-	const insert = (entry) => {
-		const text = handlers.getText();
-		const char = options().trigger ?? "@";
-		const next = text.slice(0, anchorIndex()) + char + entry.label + " " + text.slice(caretIndex());
-		handlers.setText(next);
-		closePopup();
-		queueMicrotask(() => {
-			const el = textarea();
-			if (!el) return;
-			const caret = anchorIndex() + char.length + entry.label.length + 1;
-			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, Enter inserts, 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();
-			setActive((active() + 1) % matches().length);
-		} else if (event.key === "ArrowUp") {
-			event.preventDefault();
-			setActive((active() - 1 + matches().length) % matches().length);
-		} else if (event.key === "Enter") {
-			event.preventDefault();
-			insert(matches()[active()]);
-		} else if (event.key === "Escape") closePopup();
-		else return false;
-		return true;
-	};
-	return {
-		open: popupOpen,
-		matches,
-		active,
-		setActive,
-		insert,
-		close: closePopup,
-		onInput,
-		onKeydown
-	};
-}
-//#endregion
-//#region src/components/mentions/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div role=option tabindex=-1 data-scope=mentions data-part=option>`);
-/** 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");
-	return createComponent(Popover.Root, {
-		get id() {
-			return id();
-		},
-		get open() {
-			return props.open ?? false;
-		},
-		onOpenChange: (details) => props.onOpenChange?.(details.open),
-		get positioning() {
-			return props.children ? { placement: "bottom-start" } : {
-				placement: "bottom-start",
-				getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
-			};
-		},
-		get children() {
-			return [memo(() => {
-				return memo(() => {
-					return !!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$ = _tmpl$();
-						spread(_el$, [contentProps, {
-							role: "listbox",
-							"data-scope": "mentions",
-							"data-part": "popup",
-							get "data-size"() {
-								return props.size ?? "md";
-							}
-						}], true);
-						insert(_el$, createComponent(For, {
-							get each() {
-								return props.matches ?? [];
-							},
-							children: (entry, index) => (() => {
-								var _el$2 = _tmpl$2();
-								_el$2._$$keydown = (event) => {
-									if (event.key !== "Enter" && event.key !== " ") return;
-									event.preventDefault();
-									props.onInsert?.(entry);
-								};
-								_el$2._$$click = () => props.onInsert?.(entry);
-								_el$2._$$mousedown = (event) => event.preventDefault();
-								_el$2.addEventListener("mouseenter", () => props.onActiveChange?.(index()));
-								insert(_el$2, () => {
-									return entry.label;
-								});
-								effect(() => {
-									return {
-										e: index() === (props.active ?? 0),
-										t: index() === (props.active ?? 0) ? "" : void 0
-									};
-								}, ({ e, t }, _p$) => {
-									e !== _p$?.e && setAttribute(_el$2, "aria-selected", e);
-									t !== _p$?.t && setAttribute(_el$2, "data-active", t);
-								});
-								return _el$2;
-							})()
-						}));
-						return _el$;
-					})() });
-				} });
-			} })];
-		}
-	});
-});
-/**
-* @-mentions: a plain textarea that, when the text before the caret ends
-* with the trigger character followed by a token, offers the matching
-* candidates in a small anchored vessel; choosing one replaces the token
-* with `trigger + label` and hands the whole text back through
-* `onValueChange`. Arrows move, Enter inserts, Escape dismisses.
-*
-* The field is the shared `Textarea` — field wiring (label ids, the
-* invalid state) 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",
-		"placeholder",
-		"autoresize",
-		"invalid",
-		"size",
-		"onValueChange"
-	]);
-	const [internal, setInternal] = createSignal("");
-	const [fieldEl, setFieldEl] = createSignal(null);
-	const value = () => own.value ?? internal();
-	const mentions = useMentions(() => ({
-		items: own.items ?? [],
-		trigger: own.trigger
-	}), fieldEl, {
-		getText: () => fieldEl()?.value ?? value(),
-		setText: (next) => {
-			setInternal(next);
-			own.onValueChange?.(next);
-		}
-	});
-	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;
-		},
-		rows: 3,
-		get placeholder() {
-			return own.placeholder;
-		},
-		get value() {
-			return value();
-		},
-		onInput,
-		onKeyDown: (event) => {
-			mentions.onKeydown(event);
-		},
-		"data-scope": "mentions",
-		"data-part": "textarea"
-	}));
-	var _el$3 = _tmpl$();
-	spread(_el$3, [rest, {
-		"data-scope": "mentions",
-		"data-part": "root",
-		get "data-size"() {
-			return own.size ?? "md";
-		}
-	}], true);
-	insert(_el$3, createComponent(MentionsVessel, {
-		get open() {
-			return mentions.open();
-		},
-		get matches() {
-			return mentions.matches();
-		},
-		get active() {
-			return mentions.active();
-		},
-		get size() {
-			return own.size ?? "md";
-		},
-		get onInsert() {
-			return mentions.insert;
-		},
-		get onActiveChange() {
-			return mentions.setActive;
-		},
-		onOpenChange: (open) => {
-			if (!open) mentions.close();
-		},
-		children: field
-	}));
-	return _el$3;
-}
-const Mentions = defineFamily(MentionsImpl, Popover$1);
-delegateEvents([
-	"mousedown",
-	"click",
-	"keydown"
-]);
-//#endregion
-export { MentionsVessel as n, useMentions as r, Mentions as t };