50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T48c9,"use client"; import { CommandEmpty, type CommandFilter, CommandGroup, CommandItem, CommandList, CommandProvider, useCommandInput, useGlidingHeight, } from "@/components/ui/command"; import { blur, duration, ease, spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { ChevronDownIcon, XIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { type ComponentProps, Fragment, type KeyboardEvent, type ReactNode, useMemo, useRef, useState, } from "react"; /* * Combobox: type to filter and pick, right in the field (roadmap, 2026-10-16). The field is the text input, * styled like Select's trigger; the options open in a list below it. The list is Command (filtering and * ranking, groups, the gliding highlight and height, the keyboard) inside a Radix Popover (placement, flipping, * Escape and clicks outside). * - One value, or several (`multiple`), shown as chips in the field. * - The keyboard stays in the field (WAI-ARIA's editable combobox with list autocomplete): typing or ArrowDown * opens the list, the arrows move, Enter picks, Escape closes, and Backspace in an empty field removes the * last chip. Home and End stay with the text. * - Motion (.agents/rules/motion.md): * - the chosen option's check draws itself in and erases the way it came (Checkbox's stroke) * - chips come and go through the blur while the others glide into place, and the field's height glides * when they wrap onto another line (the height pattern, never a spring) * - the list opens out of the field and closes back into it through the blur (popover-in/out) * Nothing animates on first paint. With reduced motion everything jumps or only fades. * - One value: the field shows the chosen label. Typing searches from it; leaving without picking puts the * label back, and clearing the text clears the choice. */ export type ComboboxOption = { value: string; /** What the field and the list show, and what the search matches */ label: string; /** More words the search matches */ keywords?: string[]; disabled?: boolean; /** Options with the same group are listed together under it as a heading */ group?: string; }; type ComboboxBaseProps = Omit< ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size" | "type" | "multiple" | "children" > & { options: ComboboxOption[]; /** Shown when nothing matches */ emptyText?: ReactNode; size?: "sm" | "md"; /** Custom content for an option in the list (the field still shows its label) */ renderOption?: (option: ComboboxOption) => ReactNode; /** Scores an option's label against the search; 0 hides it */ filter?: CommandFilter; /** Called with the search as it changes */ onSearchChange?: (search: string) => void; }; type ComboboxSingleProps = { multiple?: false; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; }; type ComboboxMultipleProps = { multiple: true; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; }; export type ComboboxProps = ComboboxBaseProps & (ComboboxSingleProps | ComboboxMultipleProps); const sizes = { // Rows are the input's height; chips sit centred in them, so wrapped lines keep the same rhythm sm: { field: "min-h-(--size-control-sm) rounded-md", row: "h-7", chip: "my-0.5" }, md: { field: "min-h-(--size-control-md)", row: "h-8", chip: "my-1" }, } as const; const asList = (value?: string | string[]) => value === undefined ? undefined : Array.isArray(value) ? value : value ? [value] : []; /** The same check as Checkbox: it draws itself in, and erases the way it came */ const CHECK = "M5 12.5l4.5 4.5L19 7.5"; function Check({ shown, reduce }: { shown: boolean; reduce: boolean }) { return ( ); } /** The text input, wired to the list by Command (it has to sit inside CommandProvider) */ function FieldInput({ open, onKeyDown, className, ...props }: ComponentProps<"input"> & { open: boolean }) { const field = useCommandInput({ onKeyDown, homeEnd: false }); return ( ); } /** * A text field that filters a list of options as you type, for one value or several (`multiple`, shown as * chips). Give it a visible label (`` with its `id`) or an aria-label. */ function Combobox({ multiple = false, value, defaultValue, onValueChange, options, placeholder, emptyText = "No results found.", size = "md", renderOption, filter, onSearchChange, className, name, disabled = false, onKeyDown, onBlur, ref, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, ...props }: ComboboxProps) { const [own, setOwn] = useState(() => asList(defaultValue) ?? []); const values = asList(value) ?? own; const [open, setOpen] = useState(false); // The text typed in the field. With one value it only counts while editing; otherwise the label shows. const [text, setText] = useState(""); const [editing, setEditing] = useState(false); const [active, setActive] = useState(""); const field = useRef(null); const inner = useRef(null); const input = useRef(null); const content = useRef(null); const reduce = useReducedMotion() ?? false; const look = sizes[size]; useGlidingHeight(field, inner); const labels = useMemo(() => new Map(options.map((option) => [option.value, option.label])), [options]); const labelOf = (option: string) => labels.get(option) ?? option; // Options in groups of the same `group`, in the order each group first appears const sections = useMemo(() => { const out: { heading?: string; options: ComboboxOption[] }[] = []; for (const option of options) { const section = out.find((entry) => entry.heading === option.group); if (section) section.options.push(option); else out.push({ heading: option.group, options: [option] }); } return out; }, [options]); const shownText = multiple || editing ? text : values[0] ? labelOf(values[0]) : ""; const search = multiple || editing ? text : ""; const invalid = ariaInvalid === true || ariaInvalid === "true"; function commit(next: string[]) { setOwn(next); (onValueChange as ((value: string | string[]) => void) | undefined)?.(multiple ? next : (next[0] ?? "")); } function show() { if (disabled || open) return; // One value opens on the chosen option (Command centres it); several start at the top setActive(multiple ? "" : (values[0] ?? "")); setOpen(true); } function close() { // Clearing the text and leaving clears a single choice; otherwise its label comes back if (!multiple && editing && !text.trim() && values.length) commit([]); setEditing(false); setText(""); setOpen(false); } function pick(option: string) { if (multiple) { // The list stays open, so the check can be seen drawing in or erasing commit(values.includes(option) ? values.filter((entry) => entry !== option) : [...values, option]); return; } commit([option]); setEditing(false); setText(""); setOpen(false); } function onFieldKeyDown(event: KeyboardEvent) { onKeyDown?.(event); if (event.defaultPrevented) return; if ((event.key === "ArrowDown" || event.key === "ArrowUp") && !open) { event.preventDefault(); show(); } else if (event.key === "Backspace" && multiple && !text && values.length) { commit(values.slice(0, -1)); } // Escape closes through the popover; Enter, the arrows and the rest go on to Command } const item = (option: ComboboxOption) => { const selected = values.includes(option.value); return ( {renderOption ? renderOption(option) : option.label} ); }; const hidden = reduce ? blur.shown : blur.hidden; return ( (next ? show() : close())}> {/* The input has the keyboard; a press anywhere else in the field focuses it and opens the list, and the chevron closes an open list */} {/* biome-ignore lint/a11y/noStaticElementInteractions: pointer convenience only; the input inside handles the keyboard */}

{ const target = event.target as HTMLElement; const node = input.current; if (disabled || !node || target.closest("[data-slot=combobox-chip-remove]")) return; // With one value, the first press selects its label, so typing replaces it const selectLabel = !multiple && !editing && values.length > 0 && document.activeElement !== node; if (target !== node || selectLabel) { event.preventDefault(); node.focus(); if (selectLabel) node.select(); } if (open && target.closest("[data-slot=combobox-chevron]")) close(); else show(); }} className={cn( "group relative w-full min-w-0 cursor-text rounded-lg border border-input bg-transparent text-sm shadow-xs", "transition duration-(--duration-fast) ease-out", "outline-ring has-focus-visible:border-ring has-focus-visible:outline-(length:--focus-ring-width) has-focus-visible:outline-offset-(--focus-ring-offset)", "data-invalid:border-destructive data-invalid:outline-destructive", "data-disabled:cursor-not-allowed data-disabled:opacity-(--opacity-disabled)", look.field, className, )} >

{multiple ? ( // A chip that leaves pops out of the flow and fades through the blur where it was, while // the rest glide into place {values.map((entry) => ( {labelOf(entry)} {/* Out of the tab order: Backspace removes the last chip, and the list unpicks any */} ))} ) : null} { input.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }} open={open} disabled={disabled} aria-label={ariaLabel} aria-invalid={ariaInvalid} placeholder={multiple && values.length ? undefined : placeholder} value={shownText} onChange={(event) => { setText(event.target.value); if (!multiple) setEditing(true); onSearchChange?.(event.target.value); show(); }} onKeyDown={onFieldKeyDown} onBlur={(event) => { onBlur?.(event); const next = event.relatedTarget; if ( next instanceof Node && (field.current?.contains(next) || content.current?.contains(next)) ) return; close(); }} className={cn(look.row, multiple && values.length ? "ps-1" : "ps-2")} />

{/* Not a dialog: it only holds the listbox, and focus stays in the field */} {/* biome-ignore lint/a11y/useValidAriaRole: removes Radix's role="dialog" rather than setting one */} event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()} onInteractOutside={(event) => { if (event.target instanceof Node && field.current?.contains(event.target)) event.preventDefault(); }} className={cn( "z-(--z-popover) flex max-h-(--radix-popover-content-available-height) w-(--radix-popover-trigger-width) flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-hidden", "origin-(--radix-popover-content-transform-origin) data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out", )} > {emptyText} {sections.map((section) => section.heading ? ( {section.options.map(item)} ) : ( {section.options.map(item)} ), )} {name ? (multiple ? values : [values[0] ?? ""]).map((entry) => ( )) : null} ); } export { Combobox }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.52.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.52.0"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json","https://ui.fewtone.com/r/command.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/combobox.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]