@bysages/solid 0.2.2 → 0.3.0

package/dist/input-DoFQ7RXh.mjs

@@ -0,0 +1,78 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+//#region src/components/input/mask.ts
+function accepts(slot, ch) {
+	if (slot === "9") return /\d/.test(ch);
+	if (slot === "a") return /[a-zA-Z]/.test(ch);
+	return /[\da-zA-Z]/.test(ch);
+}
+/** Apply the entry mask: `9` takes a digit, `a` a letter, `*` either;
+* every other character is literal. A literal already typed is consumed,
+* not duplicated; a literal met out of place holds the walk and lets its
+* own slot claim it — so deleting through the middle reflows the shape
+* instead of corrupting it. */
+function applyMask(raw, mask) {
+	const literals = new Set(mask.split("").filter((s) => s !== "9" && s !== "a" && s !== "*"));
+	let out = "";
+	let at = 0;
+	slots: for (const slot of mask) {
+		if (at >= raw.length) break;
+		if (slot === "9" || slot === "a" || slot === "*") {
+			let ch = raw[at];
+			while (ch !== void 0 && !accepts(slot, ch)) {
+				if (literals.has(ch)) continue slots;
+				at += 1;
+				ch = raw[at];
+			}
+			if (ch === void 0) break;
+			out += ch;
+			at += 1;
+		} else if (raw[at] === slot) {
+			at += 1;
+			out += slot;
+		} else out += slot;
+	}
+	return out;
+}
+//#endregion
+//#region src/components/input/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input>`);
+/** The bare text input: the field recipe — border, surface, focus halo —
+* on a native control. Standing alone it styles itself from the `invalid`
+* prop; inside a `Field.Root` it consumes the field context, picking up
+* the label id, the described-by wiring and the invalid state for free,
+* which is also the seam the Form validation layer will drive. Disabled
+* rides the native attribute. */
+function Input(props) {
+	injectComponentStyle("input");
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"size",
+		"invalid",
+		"mask",
+		"onValueChange"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, () => {
+		return mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
+			get value() {
+				return own.value;
+			},
+			"data-scope": "input",
+			"data-part": "root",
+			get "data-size"() {
+				return own.size ?? "md";
+			},
+			get "data-invalid"() {
+				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
+			},
+			onInput: (event) => own.onValueChange?.(own.mask ? applyMask(event.currentTarget.value, own.mask) : event.currentTarget.value)
+		});
+	}, false);
+	return _el$;
+}
+//#endregion
+export { Input as t };

package/dist/mentions-f5Js_2W7.mjs

@@ -0,0 +1,263 @@
+import { Textarea } from "./components/textarea/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { For, createEffect, createSignal, splitProps } from "solid-js";
+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 data-scope=mentions data-part=option>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!><!>`);
+/** 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$, [contentProps, {
+							"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._$$click = () => props.onInsert?.(entry);
+								_el$2._$$mousedown = (event) => event.preventDefault();
+								_el$2.addEventListener("mouseenter", () => props.onActiveChange?.(index()));
+								insert(_el$2, () => {
+									return entry.label;
+								});
+								effect(() => index() === (props.active ?? 0) ? "" : void 0, (_v$) => {
+									setAttribute(_el$2, "data-active", _v$);
+								});
+								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();
+	};
+	var _el$3 = _tmpl$3();
+	var _el$4 = _el$3.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	spread(_el$3, [rest, {
+		"data-scope": "mentions",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}], 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"
+	}), _el$4);
+	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();
+		}
+	}), _el$5);
+	return _el$3;
+}
+delegateEvents(["mousedown", "click"]);
+//#endregion
+export { MentionsVessel as n, useMentions as r, Mentions as t };

package/dist/select-CHaXbzLX.mjs

@@ -0,0 +1,115 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { For, Show, createEffect, createSignal, onMount, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { Select } 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><!><!></select><svg data-scope=select data-part=native-icon viewBox="0 0 16 16"aria-hidden=true><path d="M4 6l4 4 4-4"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<option>`);
+function NativeSelect(props) {
+	injectComponentStyle("select");
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"size",
+		"invalid",
+		"placeholder",
+		"disabled",
+		"onValueChange"
+	]);
+	const [select, setSelect] = createSignal(null);
+	onMount(() => {
+		createEffect(() => {
+			const el = select();
+			if (el) el.value = own.value ?? "";
+		});
+	});
+	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, {
+		"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 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);
+	return _el$;
+}
+//#endregion
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Select.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const Select$1 = {
+	...Select,
+	Root: SelectRoot
+};
+injectComponentStyle("select");
+//#endregion
+export { NativeSelect as n, Select$1 as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/solid",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "By Sages Elements components for Solid — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -32,31 +32,125 @@
     "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": {
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
+    },
+    "./generative": {
+      "types": "./dist/generative/index.d.mts",
+      "import": "./dist/generative/index.mjs"
     }
   },
   "dependencies": {
     "@ark-ui/solid": "5.39.2",
-    "@tanstack/markdown": "0.0.15",
+    "@tanstack/markdown": "1.0.0",
+    "@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.3.0",
+    "@bysages/core": "0.3.0"
   },
   "devDependencies": {
-    "ai": "7.0.107",
+    "@json-render/core": "0.21.0",
+    "@json-render/solid": "0.21.0",
+    "ai": "7.0.126",
     "solid-js": "1.9.15",
-    "unplugin-solid": "2.0.0"
+    "unplugin-solid": "3.0.0",
+    "zod": "4.6.5"
   },
   "peerDependencies": {
-    "solid-js": "^1.9"
+    "@json-render/core": "^0.21.0",
+    "@json-render/solid": "^0.21.0",
+    "solid-js": "^1.9",
+    "zod": "^4.0"
+  },
+  "peerDependenciesMeta": {
+    "@json-render/core": {
+      "optional": true
+    },
+    "@json-render/solid": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "scripts": {
     "dev": "basis build --stub",