@bysages/solid 0.2.2 → 0.2.3

package/dist/mentions-xbI6vJAP.mjs

@@ -0,0 +1,257 @@
+import { Textarea } from "./components/textarea/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { For, createEffect, createSignal, splitProps } from "solid-js";
+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 data-scope=mentions data-part=option>`);
+/** The vessel: the candidates themselves as a floating card. The anchor
+* is virtual — a live rectangle off the host's field — so a host keeps
+* its own anatomy (the textarea rides where the host puts it) and the
+* vessel still points at the right place. Shares the detection state
+* with the host through `useMentions`. */
+function MentionsVessel(props) {
+	injectComponentStyle("mentions");
+	return createComponent(Popover.Root, {
+		get open() {
+			return props.open ?? false;
+		},
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
+		},
+		get children() {
+			return createComponent(Portal, { get children() {
+				return createComponent(Popover.Positioner, { get children() {
+					return createComponent(Popover.Content, { asChild: (contentProps) => (() => {
+						var _el$ = _tmpl$();
+						spread(_el$, mergeProps(contentProps, {
+							"data-scope": "mentions",
+							"data-part": "popup",
+							get ["data-size"]() {
+								return props.size ?? "md";
+							}
+						}), false, true);
+						insert(_el$, createComponent(For, {
+							get each() {
+								return props.matches ?? [];
+							},
+							children: (entry, index) => (() => {
+								var _el$2 = _tmpl$2();
+								_el$2.$$click = () => props.onInsert?.(entry);
+								_el$2.$$mousedown = (event) => event.preventDefault();
+								_el$2.addEventListener("mouseenter", () => props.onActiveChange?.(index()));
+								insert(_el$2, () => entry.label);
+								effect(() => setAttribute(_el$2, "data-active", index() === (props.active ?? 0) ? "" : void 0));
+								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 Mentions(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);
+		}
+	});
+	createEffect(() => {
+		value();
+		const node = fieldEl();
+		if (!node || !(own.autoresize ?? false)) return;
+		node.style.height = "auto";
+		node.style.height = `${node.scrollHeight}px`;
+	});
+	const onInput = () => {
+		const node = fieldEl();
+		if (!node) return;
+		setInternal(node.value);
+		own.onValueChange?.(node.value);
+		mentions.onInput();
+	};
+	return (() => {
+		var _el$3 = _tmpl$();
+		spread(_el$3, mergeProps(rest, {
+			"data-scope": "mentions",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "md";
+			}
+		}), false, true);
+		insert(_el$3, createComponent(Textarea, {
+			ref: (node) => setFieldEl(node),
+			get invalid() {
+				return own.invalid;
+			},
+			rows: 3,
+			get placeholder() {
+				return own.placeholder;
+			},
+			get value() {
+				return value();
+			},
+			onValueChange: (next) => {
+				setInternal(next);
+				own.onValueChange?.(next);
+			},
+			onInput,
+			onKeyDown: (event) => {
+				mentions.onKeydown(event);
+			},
+			"data-scope": "mentions",
+			"data-part": "textarea"
+		}), null);
+		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 anchor() {
+				return fieldEl();
+			},
+			get onInsert() {
+				return mentions.insert;
+			},
+			get onActiveChange() {
+				return mentions.setActive;
+			},
+			onOpenChange: (open) => {
+				if (!open) mentions.close();
+			}
+		}), null);
+		return _el$3;
+	})();
+}
+delegateEvents(["mousedown", "click"]);
+//#endregion
+export { MentionsVessel as n, useMentions as r, Mentions as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/solid",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "By Sages Elements components for Solid — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -32,6 +32,78 @@
     "dist"
   ],
   "type": "module",
+  "sideEffects": [
+    "./dist/components/accordion/index.mjs",
+    "./dist/components/ai/index.mjs",
+    "./dist/components/alert/index.mjs",
+    "./dist/components/angle-slider/index.mjs",
+    "./dist/components/avatar/index.mjs",
+    "./dist/components/banner/index.mjs",
+    "./dist/components/breadcrumb/index.mjs",
+    "./dist/components/card/index.mjs",
+    "./dist/components/carousel/index.mjs",
+    "./dist/components/checkbox/index.mjs",
+    "./dist/components/clipboard/index.mjs",
+    "./dist/components/collapsible/index.mjs",
+    "./dist/components/color-picker/index.mjs",
+    "./dist/components/combobox/index.mjs",
+    "./dist/components/date-input/index.mjs",
+    "./dist/components/date-picker/index.mjs",
+    "./dist/components/descriptions/index.mjs",
+    "./dist/components/dialog/index.mjs",
+    "./dist/components/drawer/index.mjs",
+    "./dist/components/editable/index.mjs",
+    "./dist/components/empty/index.mjs",
+    "./dist/components/field/index.mjs",
+    "./dist/components/fieldset/index.mjs",
+    "./dist/components/file-upload/index.mjs",
+    "./dist/components/float-button/index.mjs",
+    "./dist/components/floating-panel/index.mjs",
+    "./dist/components/highlight/index.mjs",
+    "./dist/components/hover-card/index.mjs",
+    "./dist/components/image-cropper/index.mjs",
+    "./dist/components/input-group/index.mjs",
+    "./dist/components/json-tree-view/index.mjs",
+    "./dist/components/layout/index.mjs",
+    "./dist/components/list/index.mjs",
+    "./dist/components/listbox/index.mjs",
+    "./dist/components/marquee/index.mjs",
+    "./dist/components/menu/index.mjs",
+    "./dist/components/meter/index.mjs",
+    "./dist/components/navigation-menu/index.mjs",
+    "./dist/components/number-input/index.mjs",
+    "./dist/components/page-header/index.mjs",
+    "./dist/components/pagination/index.mjs",
+    "./dist/components/password-input/index.mjs",
+    "./dist/components/pin-input/index.mjs",
+    "./dist/components/popover/index.mjs",
+    "./dist/components/progress/index.mjs",
+    "./dist/components/qr-code/index.mjs",
+    "./dist/components/radio-group/index.mjs",
+    "./dist/components/rating-group/index.mjs",
+    "./dist/components/scroll-area/index.mjs",
+    "./dist/components/segment-group/index.mjs",
+    "./dist/components/select/index.mjs",
+    "./dist/components/signature-pad/index.mjs",
+    "./dist/components/slider/index.mjs",
+    "./dist/components/splitter/index.mjs",
+    "./dist/components/stat/index.mjs",
+    "./dist/components/steps/index.mjs",
+    "./dist/components/swap/index.mjs",
+    "./dist/components/switch/index.mjs",
+    "./dist/components/tabs/index.mjs",
+    "./dist/components/tags-input/index.mjs",
+    "./dist/components/timeline/index.mjs",
+    "./dist/components/timer/index.mjs",
+    "./dist/components/toast/index.mjs",
+    "./dist/components/toc/index.mjs",
+    "./dist/components/toggle/index.mjs",
+    "./dist/components/toggle-group/index.mjs",
+    "./dist/components/tooltip/index.mjs",
+    "./dist/components/tour/index.mjs",
+    "./dist/components/tree-view/index.mjs",
+    "./dist/components/typography/index.mjs"
+  ],
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "exports": {
@@ -43,15 +115,16 @@
   "dependencies": {
     "@ark-ui/solid": "5.39.2",
     "@tanstack/markdown": "0.0.15",
+    "@tanstack/solid-form": "1.33.5",
     "@tanstack/solid-table": "9.2.4",
     "@tanstack/solid-virtual": "3.13.40",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/solid": "1.44.0",
-    "@bysages/icons": "0.2.2",
-    "@bysages/core": "0.2.2"
+    "@bysages/icons": "0.2.3",
+    "@bysages/core": "0.2.3"
   },
   "devDependencies": {
-    "ai": "7.0.107",
+    "ai": "7.0.118",
     "solid-js": "1.9.15",
     "unplugin-solid": "2.0.0"
   },