@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/motion/prompt-composer/prompt-composer.js

@@ -0,0 +1,374 @@
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "../../components/ui/input-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ArrowUpIcon, ChevronDownIcon, PlusIcon, SparklesIcon, SquareIcon } from "lucide-react";
+import { useControllableValue, useLatest } from "ahooks";
+import { AnimatePresence, motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/prompt-composer/prompt-composer.tsx
+/** The `@` or `/` token the caret is in, if any. */
+function findTrigger(text, caret) {
+	const before = text.slice(0, caret);
+	const mention = /(^|\s)@([^\s@]*)$/.exec(before);
+	if (mention) {
+		const query = mention[2] ?? "";
+		return {
+			char: "@",
+			start: caret - query.length - 1,
+			end: caret,
+			query
+		};
+	}
+	const command = /^(\s*)\/([^\s/]*)$/.exec(before);
+	if (command) {
+		const query = command[2] ?? "";
+		return {
+			char: "/",
+			start: caret - query.length - 1,
+			end: caret,
+			query
+		};
+	}
+	return null;
+}
+function matches(item, query) {
+	const q = query.toLowerCase();
+	return item.label.toLowerCase().includes(q) || item.id.toLowerCase().includes(q);
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/** Sources still referenced in `text`, in source order. */
+function mentionedSources(text, sources) {
+	return sources.filter((source) => new RegExp(`(^|\\s)@${escapeRegExp(source.label)}(?=$|[\\s.,;:!?])`).test(text));
+}
+function leadingCommand(text, commands) {
+	const match = /^\s*\/(\S+)/.exec(text);
+	if (!match) return null;
+	return commands.find((command) => command.label === match[1]) ?? null;
+}
+const MENU_SPRING = {
+	type: "spring",
+	stiffness: 600,
+	damping: 38
+};
+const ICON_SPRING = {
+	type: "spring",
+	stiffness: 700,
+	damping: 30
+};
+/**
+* A chat composer: `@` opens a source menu and `/` (at the start) a command
+* menu, with model and effort pickers, an attach button, a dictation slot and
+* a send button that becomes Stop while a run is in flight. Enter sends and
+* Shift+Enter adds a line.
+*
+* The text box drives the menus as an autocomplete text box: it carries
+* `aria-autocomplete`, `aria-controls` and `aria-activedescendant`, so the
+* highlighted option is announced while focus stays in the text.
+*
+* It does no I/O: `onSend(text, detail)`, `onStop` and `onAttach` go to the app.
+*
+* Behavior reference: reactbits prompt-bar.
+*/
+function PromptComposer(props) {
+	const { onSend, busy = false, onStop, onAttach, sources = [], commands = [], models = [], modelPicker, efforts = [], dictation, placeholder = "Ask anything", label = "Prompt", disabled = false, className } = props;
+	const [text, setText] = useControllableValue(props, {
+		defaultValue: "",
+		valuePropName: "value",
+		defaultValuePropName: "defaultValue",
+		trigger: "onValueChange"
+	});
+	const [model, setModel] = useControllableValue(props, {
+		defaultValue: models[0]?.id,
+		valuePropName: "model",
+		defaultValuePropName: "defaultModel",
+		trigger: "onModelChange"
+	});
+	const [effort, setEffort] = useControllableValue(props, {
+		defaultValue: efforts[0]?.id,
+		valuePropName: "effort",
+		defaultValuePropName: "defaultEffort",
+		trigger: "onEffortChange"
+	});
+	const reduced = useReducedMotionConfig() ?? false;
+	const textareaRef = React.useRef(null);
+	const [caret, setCaret] = React.useState(0);
+	const [active, setActive] = React.useState(0);
+	const [dismissed, setDismissed] = React.useState(null);
+	const pendingCaretRef = React.useRef(null);
+	const onSendRef = useLatest(onSend);
+	const baseId = React.useId();
+	const listboxId = `${baseId}-listbox`;
+	const optionId = (item) => `${baseId}-option-${item.id}`;
+	const trigger = disabled ? null : findTrigger(text, caret);
+	const triggerKey = trigger ? `${trigger.char}${trigger.start}:${text}` : null;
+	const pool = trigger?.char === "@" ? sources : trigger ? commands : [];
+	const items = trigger ? pool.filter((item) => matches(item, trigger.query)) : [];
+	const menuOpen = trigger !== null && items.length > 0 && dismissed !== triggerKey;
+	const activeIndex = Math.min(active, Math.max(items.length - 1, 0));
+	const activeItem = menuOpen ? items[activeIndex] : void 0;
+	React.useLayoutEffect(() => {
+		const at = pendingCaretRef.current;
+		const el = textareaRef.current;
+		if (at === null || !el) return;
+		pendingCaretRef.current = null;
+		el.setSelectionRange(at, at);
+		setCaret(at);
+	});
+	const syncCaret = () => {
+		const el = textareaRef.current;
+		if (el) setCaret(el.selectionStart);
+	};
+	const choose = (item) => {
+		if (!trigger) return;
+		const token = `${trigger.char}${item.label} `;
+		const after = text.slice(trigger.end).replace(/^\s+/, "");
+		const next = text.slice(0, trigger.start) + token + after;
+		pendingCaretRef.current = trigger.start + token.length;
+		setText(next);
+		setActive(0);
+		textareaRef.current?.focus();
+	};
+	const canSend = !disabled && !busy && text.trim().length > 0;
+	const send = () => {
+		if (!canSend) return;
+		onSendRef.current(text, {
+			sources: mentionedSources(text, sources),
+			command: leadingCommand(text, commands),
+			model,
+			effort
+		});
+		if (props.value === void 0) setText("");
+		setCaret(0);
+	};
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (menuOpen) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				setActive((activeIndex + step + items.length) % items.length);
+				return;
+			}
+			if (event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
+				event.preventDefault();
+				if (activeItem) choose(activeItem);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setDismissed(triggerKey);
+				return;
+			}
+		}
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			send();
+		}
+	};
+	const modelLabel = models.find((option) => option.id === model)?.label;
+	const effortLabel = efforts.find((option) => option.id === effort)?.label;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "prompt-composer",
+		"data-busy": busy ? "" : void 0,
+		"data-reduced-motion": reduced ? "" : void 0,
+		className: cn("relative w-full", className),
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, { children: menuOpen && trigger ? /* @__PURE__ */ jsxs(motion.div, {
+				"data-slot": "prompt-composer-menu",
+				initial: reduced ? { opacity: 0 } : {
+					opacity: 0,
+					y: 4,
+					scale: .98
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					scale: 1
+				},
+				exit: reduced ? { opacity: 0 } : {
+					opacity: 0,
+					y: 4,
+					scale: .98
+				},
+				transition: reduced ? { duration: .1 } : MENU_SPRING,
+				className: "absolute bottom-full left-0 z-50 mb-1.5 w-64 max-w-full origin-bottom-left overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
+				children: [/* @__PURE__ */ jsx("p", {
+					"aria-hidden": "true",
+					className: "px-2 pt-1 pb-1.5 text-[0.625rem] font-medium tracking-wide text-muted-foreground uppercase",
+					children: trigger.char === "@" ? "Sources" : "Commands"
+				}), /* @__PURE__ */ jsx("div", {
+					id: listboxId,
+					role: "listbox",
+					"aria-label": trigger.char === "@" ? "Sources" : "Commands",
+					className: "max-h-56 overflow-y-auto",
+					children: items.map((item, index) => {
+						const selected = index === activeIndex;
+						return /* @__PURE__ */ jsxs("div", {
+							id: optionId(item),
+							role: "option",
+							"aria-selected": selected,
+							tabIndex: -1,
+							"data-highlighted": selected ? "" : void 0,
+							onMouseDown: (event) => event.preventDefault(),
+							onMouseMove: () => {
+								if (!selected) setActive(index);
+							},
+							onClick: () => choose(item),
+							className: "flex min-h-7 items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:text-muted-foreground",
+							children: [
+								item.icon,
+								/* @__PURE__ */ jsxs("span", {
+									className: "shrink-0 font-medium",
+									children: [trigger.char, item.label]
+								}),
+								item.description ? /* @__PURE__ */ jsx("span", {
+									className: "truncate text-muted-foreground",
+									children: item.description
+								}) : null
+							]
+						}, item.id);
+					})
+				})]
+			}, trigger.char) : null }),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: menuOpen ? `${items.length} ${items.length === 1 ? "suggestion" : "suggestions"}` : ""
+			}),
+			/* @__PURE__ */ jsxs(InputGroup, {
+				"data-disabled": disabled ? "true" : void 0,
+				children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
+					ref: textareaRef,
+					"aria-label": label,
+					"aria-autocomplete": "list",
+					"aria-haspopup": "listbox",
+					"aria-controls": menuOpen ? listboxId : void 0,
+					"aria-activedescendant": activeItem ? optionId(activeItem) : void 0,
+					placeholder,
+					disabled,
+					value: text,
+					onChange: (event) => {
+						setText(event.target.value);
+						setCaret(event.target.selectionStart);
+						setActive(0);
+						setDismissed(null);
+					},
+					onSelect: syncCaret,
+					onClick: syncCaret,
+					onKeyUp: (event) => {
+						if (event.key.startsWith("Arrow") && !menuOpen) syncCaret();
+					},
+					onBlur: () => setDismissed(triggerKey),
+					onFocus: () => setDismissed(null),
+					onKeyDown: handleKeyDown,
+					className: "max-h-48 min-h-14 overflow-y-auto px-3 pt-3 text-sm md:text-sm"
+				}), /* @__PURE__ */ jsxs(InputGroupAddon, {
+					align: "block-end",
+					className: "gap-1 px-2 pb-2",
+					children: [
+						onAttach ? /* @__PURE__ */ jsx(InputGroupButton, {
+							size: "icon-sm",
+							"aria-label": "Attach files",
+							disabled,
+							onClick: onAttach,
+							className: "rounded-full",
+							children: /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+						}) : null,
+						modelPicker ?? (models.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+							disabled,
+							render: /* @__PURE__ */ jsx(InputGroupButton, {
+								size: "sm",
+								"aria-label": `Model: ${modelLabel ?? "none"}`
+							}),
+							children: [modelLabel, /* @__PURE__ */ jsx(ChevronDownIcon, {
+								"aria-hidden": "true",
+								className: "opacity-60"
+							})]
+						}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+							side: "top",
+							className: "w-auto min-w-44",
+							children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Model" }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+								value: model,
+								onValueChange: (next) => setModel(String(next)),
+								children: models.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+									value: option.id,
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "flex flex-col",
+										children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.description ? /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: option.description
+										}) : null]
+									})
+								}, option.id))
+							})] })
+						})] }) : null),
+						efforts.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+							disabled,
+							render: /* @__PURE__ */ jsx(InputGroupButton, {
+								size: "sm",
+								"aria-label": `Effort: ${effortLabel ?? "none"}`
+							}),
+							children: [/* @__PURE__ */ jsx(SparklesIcon, { "aria-hidden": "true" }), effortLabel]
+						}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+							side: "top",
+							className: "w-auto min-w-36",
+							children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Reasoning effort" }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+								value: effort,
+								onValueChange: (next) => setEffort(String(next)),
+								children: efforts.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+									value: option.id,
+									children: option.label
+								}, option.id))
+							})] })
+						})] }) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: "ml-auto flex items-center gap-1",
+							children: [dictation ? /* @__PURE__ */ jsx("fieldset", {
+								disabled,
+								className: "contents",
+								children: dictation
+							}) : null, /* @__PURE__ */ jsx(InputGroupButton, {
+								variant: "default",
+								size: "icon-sm",
+								"aria-label": busy ? "Stop" : "Send",
+								disabled: busy ? disabled || !onStop : !canSend,
+								onClick: busy ? onStop : send,
+								className: "relative overflow-hidden rounded-full",
+								children: /* @__PURE__ */ jsx(AnimatePresence, {
+									initial: false,
+									mode: "popLayout",
+									children: /* @__PURE__ */ jsx(motion.span, {
+										"aria-hidden": "true",
+										initial: reduced ? { opacity: 0 } : {
+											opacity: 0,
+											scale: .4,
+											rotate: -90
+										},
+										animate: {
+											opacity: 1,
+											scale: 1,
+											rotate: 0
+										},
+										exit: reduced ? { opacity: 0 } : {
+											opacity: 0,
+											scale: .4,
+											rotate: 90
+										},
+										transition: reduced ? { duration: 0 } : ICON_SPRING,
+										className: "flex items-center justify-center",
+										children: busy ? /* @__PURE__ */ jsx(SquareIcon, { className: "size-2.5 fill-current" }) : /* @__PURE__ */ jsx(ArrowUpIcon, {})
+									}, busy ? "stop" : "send")
+								})
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { PromptComposer };

package/dist/motion/scrub-select/scrub-select.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+//#region src/motion/scrub-select/scrub-select.d.ts
+export interface ScrubSelectOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+export interface ScrubSelectProps extends Omit<React.ComponentProps<"button">, "children" | "value" | "defaultValue" | "onChange" | "type" | "ref" | "role"> {
+  options: ScrubSelectOption[];
+  /** The selected option's value (controlled). */
+  value?: string | null;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string | null;
+  onValueChange?: (value: string) => void;
+  /** Accessible name of the select. */
+  label?: string;
+  /** Trigger text when nothing is selected. */
+  placeholder?: string;
+  size?: "sm" | "default";
+  /** Which trigger edge the list aligns to. */
+  align?: "start" | "end";
+}
+/**
+ * A select with a gliding highlight. Press the trigger and drag onto an
+ * option, releasing to pick it (pointer scrubbing), or click to open and pick.
+ * A select-only combobox: arrows, Home and End move the highlight, Enter or
+ * Space picks, Escape closes, and typing jumps to a matching option.
+ *
+ * Behavior reference: reactbits glide-select.
+ */
+export declare function ScrubSelect({ options, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, label, placeholder, size, align, disabled, className, onKeyDown, onBlur, ...props }: ScrubSelectProps): React.JSX.Element;
+//#endregion