@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/prompt-input.mjs

@@ -0,0 +1,400 @@
+import { Button } from "./button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./dropdown-menu.mjs";
+import { Chip } from "./chip.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowUp, AtSign, Check, ChevronDown, FileText, Mic, Paperclip, Plus, SlidersHorizontal, Square, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/prompt-input.tsx
+/**
+* A flexible AI prompt composer. Composes:
+* - removable attachment chips / file cards
+* - an auto-resizing textarea (Enter to send, Shift+Enter for newline)
+* - a `+` menu (Upload file + custom actions)
+* - a Tools menu whose active tools appear as removable pills
+* - an "Add context" popover with a searchable list
+* - a model-picker dropdown, a mic button, and a Send button
+* - an optional row of suggestion pills beneath the composer
+*/
+function PromptInput({ value, onChange, onSend, placeholder = "Ask anything...", disabled = false, submitting = false, autoFocus = true, attachments, onRemoveAttachment, availableContext, onAddContext, onUploadFile, acceptFileTypes, multipleFiles = true, addActions, tools, activeToolIds, onToolToggle, models, modelId, onModelChange, onMic, recording = false, suggestions, trailingActions, sendLabel, minHeight = 88, maxHeight = 198, className }) {
+	const textareaRef = React.useRef(null);
+	const fileInputRef = React.useRef(null);
+	const [showScrollbar, setShowScrollbar] = React.useState(false);
+	const hasAttachments = attachments !== void 0 && attachments.length > 0;
+	const canSend = !disabled && !submitting && (value.trim().length > 0 || hasAttachments);
+	const handleSubmit = () => {
+		if (!canSend) return;
+		onSend(value.trim());
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit();
+		}
+	};
+	React.useEffect(() => {
+		if (!textareaRef.current) return;
+		textareaRef.current.style.height = `${minHeight}px`;
+		const scrollHeight = textareaRef.current.scrollHeight;
+		const newHeight = Math.min(scrollHeight, maxHeight);
+		textareaRef.current.style.height = `${newHeight}px`;
+		setShowScrollbar(scrollHeight > maxHeight);
+	}, [
+		value,
+		minHeight,
+		maxHeight
+	]);
+	React.useEffect(() => {
+		if (autoFocus) textareaRef.current?.focus();
+	}, [autoFocus]);
+	const showAddContext = availableContext !== void 0 && onAddContext !== void 0;
+	const showUpload = onUploadFile !== void 0;
+	const showPlusMenu = showUpload || addActions !== void 0 && addActions.length > 0;
+	const showTools = tools !== void 0 && tools.length > 0;
+	const showModels = models !== void 0 && models.length > 0;
+	const activeTools = showTools ? tools.filter((t) => activeToolIds?.includes(t.id)) : [];
+	const selectedModel = showModels ? models.find((m) => m.id === modelId) ?? models[0] : void 0;
+	const handleFileChange = (e) => {
+		if (e.target.files && e.target.files.length > 0 && onUploadFile) {
+			onUploadFile(e.target.files);
+			e.target.value = "";
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:w-full wwc:flex-col wwc:gap-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"aria-busy": submitting || void 0,
+			className: cn("wwc:flex wwc:w-full wwc:flex-col wwc:rounded-2xl wwc:border wwc:bg-card wwc:transition-shadow wwc:focus-within:ring-2 wwc:focus-within:ring-ring/30", disabled && "wwc:opacity-60"),
+			children: [
+				hasAttachments && /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:flex-wrap wwc:gap-1.5 wwc:px-3 wwc:pt-3",
+					children: attachments.map((att) => /* @__PURE__ */ jsx(AttachmentChip, {
+						attachment: att,
+						onRemove: onRemoveAttachment
+					}, att.id))
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					ref: textareaRef,
+					value,
+					onChange: (e) => onChange(e.target.value),
+					onKeyDown: handleKeyDown,
+					placeholder,
+					disabled,
+					rows: 1,
+					className: cn("wwc:w-full wwc:resize-none wwc:bg-transparent wwc:px-4 wwc:py-3 wwc:text-sm wwc:leading-[22px] wwc:text-foreground wwc:placeholder:text-muted-foreground wwc:focus:outline-none wwc:disabled:cursor-not-allowed", showScrollbar ? "wwc:overflow-y-auto" : "wwc:overflow-hidden"),
+					style: {
+						minHeight: `${minHeight}px`,
+						maxHeight: `${maxHeight}px`
+					}
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-1 wwc:px-2 wwc:pb-2",
+					children: [
+						showPlusMenu && /* @__PURE__ */ jsx(AddMenu, {
+							onUploadClick: showUpload ? () => fileInputRef.current?.click() : void 0,
+							addActions,
+							disabled
+						}),
+						showUpload && /* @__PURE__ */ jsx("input", {
+							ref: fileInputRef,
+							type: "file",
+							className: "wwc:hidden",
+							accept: acceptFileTypes,
+							multiple: multipleFiles,
+							onChange: handleFileChange
+						}),
+						showTools && /* @__PURE__ */ jsx(ToolsMenu, {
+							tools,
+							activeToolIds,
+							onToolToggle,
+							disabled
+						}),
+						showAddContext && /* @__PURE__ */ jsx(AddContextButton, {
+							availableContext,
+							onAddContext,
+							disabled
+						}),
+						activeTools.map((t) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							disabled,
+							onClick: () => onToolToggle?.(t.id),
+							className: "wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:rounded-full wwc:bg-primary/10 wwc:px-2.5 wwc:py-1 wwc:text-[13px] wwc:font-medium wwc:text-primary wwc:transition-colors wwc:hover:bg-primary/20",
+							children: [
+								t.icon,
+								t.label,
+								/* @__PURE__ */ jsx(X, { className: "wwc:h-3 wwc:w-3" })
+							]
+						}, t.id)),
+						/* @__PURE__ */ jsx("span", { className: "wwc:flex-1" }),
+						trailingActions,
+						showModels && /* @__PURE__ */ jsx(ModelSelect, {
+							models,
+							selected: selectedModel,
+							onModelChange,
+							disabled
+						}),
+						onMic && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							icon: true,
+							onClick: onMic,
+							disabled,
+							"aria-label": recording ? "Stop recording" : "Start voice input",
+							"aria-pressed": recording,
+							className: cn("wwc:rounded-full", recording && "wwc:bg-primary/10 wwc:text-primary"),
+							children: /* @__PURE__ */ jsx(Mic, {})
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							icon: true,
+							size: "sm",
+							onClick: handleSubmit,
+							disabled: !canSend,
+							"aria-label": submitting ? "Generating response" : "Send",
+							className: "wwc:rounded-full",
+							children: submitting ? /* @__PURE__ */ jsx(Square, { className: "wwc:!size-3 wwc:fill-current" }) : sendLabel ?? /* @__PURE__ */ jsx(ArrowUp, {})
+						})
+					]
+				})
+			]
+		}), suggestions !== void 0 && suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex wwc:flex-wrap wwc:gap-1.5",
+			children: suggestions.map((s) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled,
+				onClick: s.onSelect,
+				className: "wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:rounded-full wwc:border wwc:bg-card wwc:px-3 wwc:py-1.5 wwc:text-[13px] wwc:text-foreground wwc:transition-colors wwc:hover:bg-muted wwc:disabled:opacity-60",
+				children: [s.icon, s.label]
+			}, s.id))
+		})]
+	});
+}
+function AttachmentChip({ attachment, onRemove }) {
+	const defaultIcon = attachment.type === "context" ? /* @__PURE__ */ jsx(AtSign, { className: "wwc:h-3 wwc:w-3" }) : /* @__PURE__ */ jsx(FileText, { className: "wwc:h-3 wwc:w-3" });
+	if (attachment.subtitle) return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:group wwc:relative wwc:flex wwc:items-center wwc:gap-2 wwc:rounded-lg wwc:border wwc:bg-muted/40 wwc:py-1.5 wwc:pl-1.5 wwc:pr-6",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:flex wwc:h-8 wwc:w-8 wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:bg-card wwc:text-muted-foreground",
+				children: attachment.icon ?? /* @__PURE__ */ jsx(FileText, { className: "wwc:h-4 wwc:w-4" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "wwc:min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "wwc:block wwc:max-w-[160px] wwc:truncate wwc:text-[13px] wwc:font-medium wwc:text-foreground",
+					children: attachment.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+					children: attachment.subtitle
+				})]
+			}),
+			onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onRemove(attachment.id),
+				"aria-label": `Remove ${attachment.label}`,
+				className: "wwc:absolute wwc:right-1 wwc:top-1 wwc:flex wwc:h-4 wwc:w-4 wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-foreground/60 wwc:text-background wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100",
+				children: /* @__PURE__ */ jsx(X, { className: "wwc:h-2.5 wwc:w-2.5" })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Chip, {
+		variant: "attachment",
+		leadingIcon: attachment.icon ?? defaultIcon,
+		onRemove: onRemove ? () => onRemove(attachment.id) : void 0,
+		removeLabel: `Remove ${attachment.label}`,
+		preview: attachment.preview,
+		children: attachment.label
+	});
+}
+function AddMenu({ onUploadClick, addActions, disabled }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			icon: true,
+			disabled,
+			"aria-label": "Add",
+			className: "wwc:rounded-full",
+			children: /* @__PURE__ */ jsx(Plus, {})
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: "top",
+		align: "start",
+		className: "wwc:w-52",
+		children: [onUploadClick && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: () => setTimeout(() => onUploadClick(), 0),
+			className: "wwc:gap-2",
+			children: [/* @__PURE__ */ jsx(Paperclip, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), "Upload file"]
+		}), addActions?.map((a) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: a.onSelect,
+			className: "wwc:gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "wwc:text-muted-foreground",
+				children: a.icon
+			}), a.label]
+		}, a.id))]
+	})] });
+}
+function ToolsMenu({ tools, activeToolIds, onToolToggle, disabled }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			disabled,
+			className: "wwc:gap-1.5 wwc:rounded-full",
+			children: [/* @__PURE__ */ jsx(SlidersHorizontal, {}), /* @__PURE__ */ jsx("span", {
+				className: "wwc:hidden wwc:sm:inline",
+				children: "Tools"
+			})]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: "top",
+		align: "start",
+		className: "wwc:w-56",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Tools" }), tools.map((t) => {
+			const active = activeToolIds?.includes(t.id);
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: (e) => {
+					e.preventDefault();
+					onToolToggle?.(t.id);
+				},
+				className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "wwc:flex wwc:items-center wwc:gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-muted-foreground",
+						children: t.icon
+					}), t.label]
+				}), active && /* @__PURE__ */ jsx(Check, { className: "wwc:h-4 wwc:w-4 wwc:text-primary" })]
+			}, t.id);
+		})]
+	})] });
+}
+function ModelSelect({ models, selected, onModelChange, disabled }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			disabled,
+			className: "wwc:gap-1.5 wwc:rounded-full wwc:text-foreground/80",
+			children: [
+				selected?.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:font-medium",
+					children: selected?.label
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" })
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: "top",
+		align: "end",
+		className: "wwc:w-64",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Models" }), models.map((m) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: m.disabled,
+			onSelect: () => onModelChange?.(m.id),
+			className: "wwc:flex wwc:items-center wwc:gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:text-muted-foreground",
+					children: m.icon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "wwc:flex-1 wwc:min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:block wwc:truncate wwc:font-medium wwc:text-foreground",
+						children: m.label
+					}), m.description && /* @__PURE__ */ jsx("span", {
+						className: "wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+						children: m.description
+					})]
+				}),
+				m.badge ?? (m.disabled && /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-[11px] wwc:text-muted-foreground",
+					children: "Soon"
+				})),
+				m.id === selected?.id && /* @__PURE__ */ jsx(Check, { className: "wwc:h-4 wwc:w-4 wwc:text-primary" })
+			]
+		}, m.id))]
+	})] });
+}
+function AddContextButton({ availableContext, onAddContext, disabled }) {
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const filtered = React.useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return availableContext;
+		return availableContext.filter((item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q));
+	}, [availableContext, query]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				disabled,
+				className: "wwc:gap-1.5 wwc:rounded-full",
+				children: [/* @__PURE__ */ jsx(AtSign, {}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:hidden wwc:sm:inline",
+					children: "Add context"
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			side: "top",
+			align: "start",
+			sideOffset: 8,
+			className: "wwc:w-72 wwc:p-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "wwc:border-b wwc:p-2",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: query,
+					onChange: (e) => setQuery(e.target.value),
+					placeholder: "Search context...",
+					className: "wwc:w-full wwc:bg-transparent wwc:px-2 wwc:py-1 wwc:text-sm wwc:outline-none wwc:placeholder:text-muted-foreground",
+					autoFocus: true
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "wwc:max-h-72 wwc:overflow-y-auto wwc:p-1",
+				children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "wwc:px-3 wwc:py-4 wwc:text-center wwc:text-xs wwc:text-muted-foreground",
+					children: "No context found"
+				}) : filtered.map((item) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						onAddContext(item);
+						setOpen(false);
+						setQuery("");
+					},
+					className: "wwc:flex wwc:w-full wwc:items-start wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:text-left wwc:text-sm wwc:hover:bg-muted",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:mt-0.5 wwc:text-muted-foreground",
+						children: item.icon ?? /* @__PURE__ */ jsx(FileText, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "wwc:flex-1 wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:truncate wwc:font-medium wwc:text-foreground",
+							children: item.label
+						}), item.description && /* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+							children: item.description
+						})]
+					})]
+				}, item.id))
+			})]
+		})]
+	});
+}
+//#endregion
+export { PromptInput };
+
+//# sourceMappingURL=prompt-input.mjs.map

package/dist/prompt-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input.mjs","names":[],"sources":["../src/prompt-input.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {\n\tArrowUp,\n\tAtSign,\n\tCheck,\n\tChevronDown,\n\tFileText,\n\tMic,\n\tPaperclip,\n\tPlus,\n\tSlidersHorizontal,\n\tSquare,\n\tX,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Chip, type AttachmentPreview} from \"./chip\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\n\nexport interface PromptAttachment {\n\tid: string;\n\tlabel: string;\n\ttype?: \"file\" | \"context\";\n\ticon?: React.ReactNode;\n\t/** Secondary line shown under the label — renders the chip as a richer file card. */\n\tsubtitle?: string;\n\t/** Optional hover preview content. */\n\tpreview?: AttachmentPreview;\n}\n\nexport interface PromptContextItem {\n\tid: string;\n\tlabel: string;\n\tdescription?: string;\n\ticon?: React.ReactNode;\n}\n\n/** A selectable model shown in the model-picker dropdown. */\nexport interface PromptModel {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\t/** Trailing marker (e.g. a plan/region badge). */\n\tbadge?: React.ReactNode;\n\tdescription?: string;\n\t/** Dim and make the option unselectable (e.g. \"coming soon\"). */\n\tdisabled?: boolean;\n}\n\n/** A tool toggled from the Tools menu; active tools show as pills in the toolbar. */\nexport interface PromptTool {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n}\n\n/** An action inside the `+` menu (Upload file is added automatically from `onUploadFile`). */\nexport interface PromptAddAction {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\tonSelect: () => void;\n}\n\n/** A quick-action pill rendered in a row beneath the composer. */\nexport interface PromptSuggestion {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\tonSelect?: () => void;\n}\n\nexport interface PromptInputProps {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSend: (value: string) => void;\n\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\t/** Response generation is in progress. Keeps the textarea editable while disabling the send action. */\n\tsubmitting?: boolean;\n\tautoFocus?: boolean;\n\n\t/** Attachments displayed as removable chips/cards above the textarea. */\n\tattachments?: PromptAttachment[];\n\tonRemoveAttachment?: (id: string) => void;\n\n\t/** When provided, shows an \"Add context\" button that opens a popover with these items. */\n\tavailableContext?: PromptContextItem[];\n\tonAddContext?: (item: PromptContextItem) => void;\n\n\t/** When provided, shows an \"Upload file\" entry inside the `+` menu (hidden file input). */\n\tonUploadFile?: (files: FileList) => void;\n\t/** File types accepted by the upload input (e.g. \".pdf,.png\"). */\n\tacceptFileTypes?: string;\n\t/** Allow multiple file selection. Defaults to true. */\n\tmultipleFiles?: boolean;\n\n\t/** Extra actions in the `+` menu, after \"Upload file\". */\n\taddActions?: PromptAddAction[];\n\n\t/** Tools shown in the Tools menu. Active ones render as removable pills in the toolbar. */\n\ttools?: PromptTool[];\n\tactiveToolIds?: string[];\n\tonToolToggle?: (id: string) => void;\n\n\t/** Selectable models. Shows a model-picker button on the right when provided. */\n\tmodels?: PromptModel[];\n\tmodelId?: string;\n\tonModelChange?: (id: string) => void;\n\n\t/** Shows a microphone button. Called on click; `recording` drives the active state. */\n\tonMic?: () => void;\n\trecording?: boolean;\n\n\t/** Quick-action pills rendered in a row below the composer. */\n\tsuggestions?: PromptSuggestion[];\n\n\t/** Extra slots rendered just before the model selector (legacy escape hatch). */\n\ttrailingActions?: React.ReactNode;\n\n\t/** Override the Send button icon. */\n\tsendLabel?: React.ReactNode;\n\n\t/** Min/max textarea heights in pixels. Defaults: 88 (≈3 lines) / 198. */\n\tminHeight?: number;\n\tmaxHeight?: number;\n\n\tclassName?: string;\n}\n\nconst LINE_HEIGHT = 22;\nconst PADDING_Y = 22;\n\n/**\n * A flexible AI prompt composer. Composes:\n * - removable attachment chips / file cards\n * - an auto-resizing textarea (Enter to send, Shift+Enter for newline)\n * - a `+` menu (Upload file + custom actions)\n * - a Tools menu whose active tools appear as removable pills\n * - an \"Add context\" popover with a searchable list\n * - a model-picker dropdown, a mic button, and a Send button\n * - an optional row of suggestion pills beneath the composer\n */\nexport function PromptInput({\n\tvalue,\n\tonChange,\n\tonSend,\n\tplaceholder = \"Ask anything...\",\n\tdisabled = false,\n\tsubmitting = false,\n\tautoFocus = true,\n\tattachments,\n\tonRemoveAttachment,\n\tavailableContext,\n\tonAddContext,\n\tonUploadFile,\n\tacceptFileTypes,\n\tmultipleFiles = true,\n\taddActions,\n\ttools,\n\tactiveToolIds,\n\tonToolToggle,\n\tmodels,\n\tmodelId,\n\tonModelChange,\n\tonMic,\n\trecording = false,\n\tsuggestions,\n\ttrailingActions,\n\tsendLabel,\n\tminHeight = LINE_HEIGHT * 3 + PADDING_Y,\n\tmaxHeight = LINE_HEIGHT * 8 + PADDING_Y,\n\tclassName,\n}: PromptInputProps) {\n\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\tconst fileInputRef = React.useRef<HTMLInputElement>(null);\n\tconst [showScrollbar, setShowScrollbar] = React.useState(false);\n\n\tconst hasAttachments = attachments !== undefined && attachments.length > 0;\n\tconst canSend = !disabled && !submitting && (value.trim().length > 0 || hasAttachments);\n\n\tconst handleSubmit = () => {\n\t\tif (!canSend) return;\n\t\tonSend(value.trim());\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (e.key === \"Enter\" && !e.shiftKey) {\n\t\t\te.preventDefault();\n\t\t\thandleSubmit();\n\t\t}\n\t};\n\n\tReact.useEffect(() => {\n\t\tif (!textareaRef.current) return;\n\t\ttextareaRef.current.style.height = `${minHeight}px`;\n\t\tconst scrollHeight = textareaRef.current.scrollHeight;\n\t\tconst newHeight = Math.min(scrollHeight, maxHeight);\n\t\ttextareaRef.current.style.height = `${newHeight}px`;\n\t\tsetShowScrollbar(scrollHeight > maxHeight);\n\t}, [value, minHeight, maxHeight]);\n\n\tReact.useEffect(() => {\n\t\tif (autoFocus) textareaRef.current?.focus();\n\t}, [autoFocus]);\n\n\tconst showAddContext = availableContext !== undefined && onAddContext !== undefined;\n\tconst showUpload = onUploadFile !== undefined;\n\tconst showPlusMenu = showUpload || (addActions !== undefined && addActions.length > 0);\n\tconst showTools = tools !== undefined && tools.length > 0;\n\tconst showModels = models !== undefined && models.length > 0;\n\tconst activeTools = showTools ? tools.filter((t) => activeToolIds?.includes(t.id)) : [];\n\tconst selectedModel = showModels ? (models.find((m) => m.id === modelId) ?? models[0]) : undefined;\n\n\tconst handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (e.target.files && e.target.files.length > 0 && onUploadFile) {\n\t\t\tonUploadFile(e.target.files);\n\t\t\te.target.value = \"\";\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:w-full wwc:flex-col wwc:gap-2\", className)}>\n\t\t\t<div\n\t\t\t\taria-busy={submitting || undefined}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:w-full wwc:flex-col wwc:rounded-2xl wwc:border wwc:bg-card wwc:transition-shadow wwc:focus-within:ring-2 wwc:focus-within:ring-ring/30\",\n\t\t\t\t\tdisabled && \"wwc:opacity-60\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{hasAttachments && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:gap-1.5 wwc:px-3 wwc:pt-3\">\n\t\t\t\t\t\t{attachments.map((att) => (\n\t\t\t\t\t\t\t<AttachmentChip key={att.id} attachment={att} onRemove={onRemoveAttachment} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<textarea\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\trows={1}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:w-full wwc:resize-none wwc:bg-transparent wwc:px-4 wwc:py-3 wwc:text-sm wwc:leading-[22px] wwc:text-foreground wwc:placeholder:text-muted-foreground wwc:focus:outline-none wwc:disabled:cursor-not-allowed\",\n\t\t\t\t\t\tshowScrollbar ? \"wwc:overflow-y-auto\" : \"wwc:overflow-hidden\",\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px`}}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1 wwc:px-2 wwc:pb-2\">\n\t\t\t\t\t{showPlusMenu && (\n\t\t\t\t\t\t<AddMenu\n\t\t\t\t\t\t\tonUploadClick={showUpload ? () => fileInputRef.current?.click() : undefined}\n\t\t\t\t\t\t\taddActions={addActions}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showUpload && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclassName=\"wwc:hidden\"\n\t\t\t\t\t\t\taccept={acceptFileTypes}\n\t\t\t\t\t\t\tmultiple={multipleFiles}\n\t\t\t\t\t\t\tonChange={handleFileChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showTools && (\n\t\t\t\t\t\t<ToolsMenu tools={tools} activeToolIds={activeToolIds} onToolToggle={onToolToggle} disabled={disabled} />\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddContext && (\n\t\t\t\t\t\t<AddContextButton availableContext={availableContext} onAddContext={onAddContext} disabled={disabled} />\n\t\t\t\t\t)}\n\t\t\t\t\t{activeTools.map((t) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={t.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tonClick={() => onToolToggle?.(t.id)}\n\t\t\t\t\t\t\tclassName=\"wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:rounded-full wwc:bg-primary/10 wwc:px-2.5 wwc:py-1 wwc:text-[13px] wwc:font-medium wwc:text-primary wwc:transition-colors wwc:hover:bg-primary/20\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{t.icon}\n\t\t\t\t\t\t\t{t.label}\n\t\t\t\t\t\t\t<X className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<span className=\"wwc:flex-1\" />\n\n\t\t\t\t\t{trailingActions}\n\t\t\t\t\t{showModels && (\n\t\t\t\t\t\t<ModelSelect models={models} selected={selectedModel} onModelChange={onModelChange} disabled={disabled} />\n\t\t\t\t\t)}\n\t\t\t\t\t{onMic && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\tonClick={onMic}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\taria-label={recording ? \"Stop recording\" : \"Start voice input\"}\n\t\t\t\t\t\t\taria-pressed={recording}\n\t\t\t\t\t\t\tclassName={cn(\"wwc:rounded-full\", recording && \"wwc:bg-primary/10 wwc:text-primary\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Mic />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={handleSubmit}\n\t\t\t\t\t\tdisabled={!canSend}\n\t\t\t\t\t\taria-label={submitting ? \"Generating response\" : \"Send\"}\n\t\t\t\t\t\tclassName=\"wwc:rounded-full\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{submitting ? <Square className=\"wwc:!size-3 wwc:fill-current\" /> : (sendLabel ?? <ArrowUp />)}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{suggestions !== undefined && suggestions.length > 0 && (\n\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:gap-1.5\">\n\t\t\t\t\t{suggestions.map((s) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={s.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tonClick={s.onSelect}\n\t\t\t\t\t\t\tclassName=\"wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:rounded-full wwc:border wwc:bg-card wwc:px-3 wwc:py-1.5 wwc:text-[13px] wwc:text-foreground wwc:transition-colors wwc:hover:bg-muted wwc:disabled:opacity-60\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{s.icon}\n\t\t\t\t\t\t\t{s.label}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction AttachmentChip({attachment, onRemove}: {attachment: PromptAttachment; onRemove?: (id: string) => void}) {\n\tconst defaultIcon =\n\t\tattachment.type === \"context\" ? <AtSign className=\"wwc:h-3 wwc:w-3\" /> : <FileText className=\"wwc:h-3 wwc:w-3\" />;\n\n\t// Richer file card (icon tile + name + subtitle) when a subtitle is provided.\n\tif (attachment.subtitle) {\n\t\treturn (\n\t\t\t<div className=\"wwc:group wwc:relative wwc:flex wwc:items-center wwc:gap-2 wwc:rounded-lg wwc:border wwc:bg-muted/40 wwc:py-1.5 wwc:pl-1.5 wwc:pr-6\">\n\t\t\t\t<span className=\"wwc:flex wwc:h-8 wwc:w-8 wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:bg-card wwc:text-muted-foreground\">\n\t\t\t\t\t{attachment.icon ?? <FileText className=\"wwc:h-4 wwc:w-4\" />}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"wwc:min-w-0\">\n\t\t\t\t\t<span className=\"wwc:block wwc:max-w-[160px] wwc:truncate wwc:text-[13px] wwc:font-medium wwc:text-foreground\">\n\t\t\t\t\t\t{attachment.label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground\">{attachment.subtitle}</span>\n\t\t\t\t</span>\n\t\t\t\t{onRemove && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={() => onRemove(attachment.id)}\n\t\t\t\t\t\taria-label={`Remove ${attachment.label}`}\n\t\t\t\t\t\tclassName=\"wwc:absolute wwc:right-1 wwc:top-1 wwc:flex wwc:h-4 wwc:w-4 wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-foreground/60 wwc:text-background wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className=\"wwc:h-2.5 wwc:w-2.5\" />\n\t\t\t\t\t</button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Chip\n\t\t\tvariant=\"attachment\"\n\t\t\tleadingIcon={attachment.icon ?? defaultIcon}\n\t\t\tonRemove={onRemove ? () => onRemove(attachment.id) : undefined}\n\t\t\tremoveLabel={`Remove ${attachment.label}`}\n\t\t\tpreview={attachment.preview}\n\t\t>\n\t\t\t{attachment.label}\n\t\t</Chip>\n\t);\n}\n\nfunction AddMenu({\n\tonUploadClick,\n\taddActions,\n\tdisabled,\n}: {\n\tonUploadClick?: () => void;\n\taddActions?: PromptAddAction[];\n\tdisabled?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button type=\"button\" variant=\"ghost\" icon disabled={disabled} aria-label=\"Add\" className=\"wwc:rounded-full\">\n\t\t\t\t\t<Plus />\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent side=\"top\" align=\"start\" className=\"wwc:w-52\">\n\t\t\t\t{onUploadClick && (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t// Defer the file-picker click until after the menu finishes closing —\n\t\t\t\t\t\t// a synchronous <input type=file> click during Radix's teardown is\n\t\t\t\t\t\t// swallowed by the browser, so the picker never opens.\n\t\t\t\t\t\tonSelect={() => setTimeout(() => onUploadClick(), 0)}\n\t\t\t\t\t\tclassName=\"wwc:gap-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Paperclip className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />\n\t\t\t\t\t\tUpload file\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t)}\n\t\t\t\t{addActions?.map((a) => (\n\t\t\t\t\t<DropdownMenuItem key={a.id} onSelect={a.onSelect} className=\"wwc:gap-2\">\n\t\t\t\t\t\t<span className=\"wwc:text-muted-foreground\">{a.icon}</span>\n\t\t\t\t\t\t{a.label}\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t))}\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction ToolsMenu({\n\ttools,\n\tactiveToolIds,\n\tonToolToggle,\n\tdisabled,\n}: {\n\ttools: PromptTool[];\n\tactiveToolIds?: string[];\n\tonToolToggle?: (id: string) => void;\n\tdisabled?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={disabled} className=\"wwc:gap-1.5 wwc:rounded-full\">\n\t\t\t\t\t<SlidersHorizontal />\n\t\t\t\t\t<span className=\"wwc:hidden wwc:sm:inline\">Tools</span>\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent side=\"top\" align=\"start\" className=\"wwc:w-56\">\n\t\t\t\t<DropdownMenuLabel>Tools</DropdownMenuLabel>\n\t\t\t\t{tools.map((t) => {\n\t\t\t\t\tconst active = activeToolIds?.includes(t.id);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\tkey={t.id}\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tonToolToggle?.(t.id);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t<span className=\"wwc:text-muted-foreground\">{t.icon}</span>\n\t\t\t\t\t\t\t\t{t.label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{active && <Check className=\"wwc:h-4 wwc:w-4 wwc:text-primary\" />}\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction ModelSelect({\n\tmodels,\n\tselected,\n\tonModelChange,\n\tdisabled,\n}: {\n\tmodels: PromptModel[];\n\tselected?: PromptModel;\n\tonModelChange?: (id: string) => void;\n\tdisabled?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName=\"wwc:gap-1.5 wwc:rounded-full wwc:text-foreground/80\"\n\t\t\t\t>\n\t\t\t\t\t{selected?.icon}\n\t\t\t\t\t<span className=\"wwc:font-medium\">{selected?.label}</span>\n\t\t\t\t\t<ChevronDown className=\"wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent side=\"top\" align=\"end\" className=\"wwc:w-64\">\n\t\t\t\t<DropdownMenuLabel>Models</DropdownMenuLabel>\n\t\t\t\t{models.map((m) => (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={m.id}\n\t\t\t\t\t\tdisabled={m.disabled}\n\t\t\t\t\t\tonSelect={() => onModelChange?.(m.id)}\n\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:gap-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"wwc:text-muted-foreground\">{m.icon}</span>\n\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:min-w-0\">\n\t\t\t\t\t\t\t<span className=\"wwc:block wwc:truncate wwc:font-medium wwc:text-foreground\">{m.label}</span>\n\t\t\t\t\t\t\t{m.description && (\n\t\t\t\t\t\t\t\t<span className=\"wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground\">{m.description}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{m.badge ?? (m.disabled && <span className=\"wwc:text-[11px] wwc:text-muted-foreground\">Soon</span>)}\n\t\t\t\t\t\t{m.id === selected?.id && <Check className=\"wwc:h-4 wwc:w-4 wwc:text-primary\" />}\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t))}\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction AddContextButton({\n\tavailableContext,\n\tonAddContext,\n\tdisabled,\n}: {\n\tavailableContext: PromptContextItem[];\n\tonAddContext: (item: PromptContextItem) => void;\n\tdisabled?: boolean;\n}) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [query, setQuery] = React.useState(\"\");\n\n\tconst filtered = React.useMemo(() => {\n\t\tconst q = query.trim().toLowerCase();\n\t\tif (!q) return availableContext;\n\t\treturn availableContext.filter(\n\t\t\t(item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q),\n\t\t);\n\t}, [availableContext, query]);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={disabled} className=\"wwc:gap-1.5 wwc:rounded-full\">\n\t\t\t\t\t<AtSign />\n\t\t\t\t\t<span className=\"wwc:hidden wwc:sm:inline\">Add context</span>\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent side=\"top\" align=\"start\" sideOffset={8} className=\"wwc:w-72 wwc:p-0\">\n\t\t\t\t<div className=\"wwc:border-b wwc:p-2\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tonChange={(e) => setQuery(e.target.value)}\n\t\t\t\t\t\tplaceholder=\"Search context...\"\n\t\t\t\t\t\tclassName=\"wwc:w-full wwc:bg-transparent wwc:px-2 wwc:py-1 wwc:text-sm wwc:outline-none wwc:placeholder:text-muted-foreground\"\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"wwc:max-h-72 wwc:overflow-y-auto wwc:p-1\">\n\t\t\t\t\t{filtered.length === 0 ? (\n\t\t\t\t\t\t<div className=\"wwc:px-3 wwc:py-4 wwc:text-center wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\tNo context found\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tfiltered.map((item) => (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonAddContext(item);\n\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\tsetQuery(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:w-full wwc:items-start wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:text-left wwc:text-sm wwc:hover:bg-muted\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"wwc:mt-0.5 wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{item.icon ?? <FileText className=\"wwc:h-3.5 wwc:w-3.5\" />}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:min-w-0\">\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:block wwc:truncate wwc:font-medium wwc:text-foreground\">{item.label}</span>\n\t\t\t\t\t\t\t\t\t{item.description && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:block wwc:truncate wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t))\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}

package/dist/property-list.d.mts

@@ -0,0 +1,37 @@
+import * as React from "react";
+//#region src/property-list.d.ts
+export interface PropertyListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, "title"> {
+  /** Optional section title rendered above the rows (e.g. "Properties"). */
+  title?: React.ReactNode;
+  /** Width of the label column. Default: 9rem. */
+  labelWidth?: string;
+}
+/**
+ * Vertical list of labeled properties, rendered as semantic <dl> markup.
+ * Pair with PropertyRow children. Use for issue / work item detail panels,
+ * settings summaries, and any "icon + label : value" stack.
+ */
+declare const PropertyList: React.ForwardRefExoticComponent<PropertyListProps & React.RefAttributes<HTMLDListElement>>;
+export interface PropertyRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Leading icon rendered next to the label. */
+  icon?: React.ReactNode;
+  /** Label text (the property name, e.g. "Assignees"). */
+  label: React.ReactNode;
+  /**
+   * Vertical alignment of the value relative to the label.
+   * - `center` (default): single-line values
+   * - `start`: multi-line / wrapping values
+   */
+  align?: "center" | "start";
+  /** Append a required-field asterisk after the label. Decorative — the control carries the semantics. */
+  required?: boolean;
+}
+declare const PropertyRow: React.ForwardRefExoticComponent<PropertyRowProps & React.RefAttributes<HTMLDivElement>>;
+/** Muted placeholder text for empty values (e.g. "No module"). */
+declare function PropertyEmpty({ children, className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace PropertyEmpty {
+  var displayName: string;
+}
+//#endregion
+export { PropertyEmpty, PropertyList, PropertyRow };
+//# sourceMappingURL=property-list.d.mts.map

package/dist/property-list.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-list.d.mts","names":[],"sources":["../src/property-list.tsx"],"mappings":";;iBAKiB,0BAA0B,KAAK,MAAM,eAAe;;EAEpE,QAAQ,MAAM;;EAEd;;;;;;;cAQK,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA;iBAaD,yBAAyB,KAAK,MAAM,eAAe;;EAEnE,OAAO,MAAM;;EAEb,OAAO,MAAM;;;;;;EAMb;;EAEA;;cAGK,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;;iBAkCR,gBAAe,UAAU,cAAc,SAAQ,MAAM,eAAe,+CAAgB,IAAA;kBAApF;MAAA"}

package/dist/property-list.mjs

@@ -0,0 +1,60 @@
+import { RequiredMark } from "./label.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/property-list.tsx
+/**
+* Vertical list of labeled properties, rendered as semantic <dl> markup.
+* Pair with PropertyRow children. Use for issue / work item detail panels,
+* settings summaries, and any "icon + label : value" stack.
+*/
+const PropertyList = React.forwardRef(({ title, labelWidth, className, children, style, ...props }, ref) => {
+	const mergedStyle = labelWidth ? {
+		...style,
+		["--wwc-property-label-width"]: labelWidth
+	} : style;
+	return /* @__PURE__ */ jsxs("dl", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col", className),
+		style: mergedStyle,
+		...props,
+		children: [title && /* @__PURE__ */ jsx("div", {
+			className: "wwc:mb-3 wwc:text-base wwc:font-semibold wwc:text-foreground",
+			children: title
+		}), children]
+	});
+});
+PropertyList.displayName = "PropertyList";
+const PropertyRow = React.forwardRef(({ icon, label, align = "center", required = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:flex wwc:gap-3 wwc:py-2", align === "center" ? "wwc:items-center" : "wwc:items-start", className),
+	...props,
+	children: [/* @__PURE__ */ jsxs("dt", {
+		className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:text-sm wwc:text-muted-foreground",
+		style: { width: "var(--wwc-property-label-width, 9rem)" },
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: "wwc:flex wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:text-muted-foreground/80",
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "wwc:truncate",
+			children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+		})]
+	}), /* @__PURE__ */ jsx("dd", {
+		className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-wrap wwc:items-center wwc:gap-1.5 wwc:text-sm wwc:text-foreground",
+		children
+	})]
+}));
+PropertyRow.displayName = "PropertyRow";
+/** Muted placeholder text for empty values (e.g. "No module"). */
+function PropertyEmpty({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("wwc:text-sm wwc:text-muted-foreground/80", className),
+		...props,
+		children
+	});
+}
+PropertyEmpty.displayName = "PropertyEmpty";
+//#endregion
+export { PropertyEmpty, PropertyList, PropertyRow };
+
+//# sourceMappingURL=property-list.mjs.map

package/dist/property-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-list.mjs","names":[],"sources":["../src/property-list.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {RequiredMark} from \"./label\";\n\nexport interface PropertyListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, \"title\"> {\n\t/** Optional section title rendered above the rows (e.g. \"Properties\"). */\n\ttitle?: React.ReactNode;\n\t/** Width of the label column. Default: 9rem. */\n\tlabelWidth?: string;\n}\n\n/**\n * Vertical list of labeled properties, rendered as semantic <dl> markup.\n * Pair with PropertyRow children. Use for issue / work item detail panels,\n * settings summaries, and any \"icon + label : value\" stack.\n */\nconst PropertyList = React.forwardRef<HTMLDListElement, PropertyListProps>(\n\t({title, labelWidth, className, children, style, ...props}, ref) => {\n\t\tconst mergedStyle = labelWidth ? {...style, [\"--wwc-property-label-width\" as string]: labelWidth} : style;\n\t\treturn (\n\t\t\t<dl ref={ref} className={cn(\"wwc:flex wwc:flex-col\", className)} style={mergedStyle} {...props}>\n\t\t\t\t{title && <div className=\"wwc:mb-3 wwc:text-base wwc:font-semibold wwc:text-foreground\">{title}</div>}\n\t\t\t\t{children}\n\t\t\t</dl>\n\t\t);\n\t},\n);\nPropertyList.displayName = \"PropertyList\";\n\nexport interface PropertyRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/** Leading icon rendered next to the label. */\n\ticon?: React.ReactNode;\n\t/** Label text (the property name, e.g. \"Assignees\"). */\n\tlabel: React.ReactNode;\n\t/**\n\t * Vertical alignment of the value relative to the label.\n\t * - `center` (default): single-line values\n\t * - `start`: multi-line / wrapping values\n\t */\n\talign?: \"center\" | \"start\";\n\t/** Append a required-field asterisk after the label. Decorative — the control carries the semantics. */\n\trequired?: boolean;\n}\n\nconst PropertyRow = React.forwardRef<HTMLDivElement, PropertyRowProps>(\n\t({icon, label, align = \"center\", required = false, className, children, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:gap-3 wwc:py-2\",\n\t\t\t\talign === \"center\" ? \"wwc:items-center\" : \"wwc:items-start\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<dt\n\t\t\t\tclassName=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:text-sm wwc:text-muted-foreground\"\n\t\t\t\tstyle={{width: \"var(--wwc-property-label-width, 9rem)\"}}\n\t\t\t>\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className=\"wwc:flex wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:text-muted-foreground/80\">\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className=\"wwc:truncate\">\n\t\t\t\t\t{label}\n\t\t\t\t\t{required && <RequiredMark />}\n\t\t\t\t</span>\n\t\t\t</dt>\n\t\t\t<dd className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-wrap wwc:items-center wwc:gap-1.5 wwc:text-sm wwc:text-foreground\">\n\t\t\t\t{children}\n\t\t\t</dd>\n\t\t</div>\n\t),\n);\nPropertyRow.displayName = \"PropertyRow\";\n\n/** Muted placeholder text for empty values (e.g. \"No module\"). */\nfunction PropertyEmpty({children, className, ...props}: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span className={cn(\"wwc:text-sm wwc:text-muted-foreground/80\", className)} {...props}>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\nPropertyEmpty.displayName = \"PropertyEmpty\";\n\nexport {PropertyList, PropertyRow, PropertyEmpty};\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe,MAAM,YACzB,EAAC,OAAO,YAAY,WAAW,UAAU,OAAO,GAAG,SAAQ,QAAQ;CACnE,MAAM,cAAc,aAAa;EAAC,GAAG;GAAQ,+BAAyC;CAAU,IAAI;CACpG,OACC,qBAAC,MAAD;EAAS;EAAK,WAAW,GAAG,yBAAyB,SAAS;EAAG,OAAO;EAAa,GAAI;EAAzF,UAAA,CACE,SAAS,oBAAC,OAAD;GAAK,WAAU;GAAgE,UAAA;EAAW,CAAA,GACnG,QACE;;AAEN,CACD;AACA,aAAa,cAAc;AAiB3B,MAAM,cAAc,MAAM,YACxB,EAAC,MAAM,OAAO,QAAQ,UAAU,WAAW,OAAO,WAAW,UAAU,GAAG,SAAQ,QAClF,qBAAC,OAAD;CACM;CACL,WAAW,GACV,+BACA,UAAU,WAAW,qBAAqB,mBAC1C,SACD;CACA,GAAI;CAPL,UAAA,CASC,qBAAC,MAAD;EACC,WAAU;EACV,OAAO,EAAC,OAAO,wCAAuC;EAFvD,UAAA,CAIE,QACA,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA;EACI,CAAA,GAEP,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,OACA,YAAY,oBAAC,cAAD,CAAe,CAAA,CACvB;EACH,CAAA,CAAA;CACJ,CAAA,GAAA,oBAAC,MAAD;EAAI,WAAU;EACZ;CACE,CAAA,CACA;AAEP,CAAA,CAAA;AACA,YAAY,cAAc;;AAG1B,SAAS,cAAc,EAAC,UAAU,WAAW,GAAG,SAA+C;CAC9F,OACC,oBAAC,QAAD;EAAM,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;EAC9E;CACI,CAAA;AAER;AACA,cAAc,cAAc"}