52: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"] 53: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"] 54:T543a,"use client"; import * as React from "react"; import { Tick02Icon, ArrowDown01Icon, ArrowRight01Icon, SquareLock01Icon, Search01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { cva, type VariantProps } from "class-variance-authority"; import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"; import { cn } from "@/lib/utils"; const triggerVariants = cva( "inline-flex h-8 cursor-pointer items-center gap-1 rounded-full px-3 font-normal text-primary text-sm outline-none transition-all duration-200 ease-out [&>span:last-child]:transition-transform [&>span:last-child]:duration-200 data-[state=open]:[&>span:last-child]:rotate-180", { variants: { variant: { filled: "bg-muted hover:bg-border", outline: "border border-input bg-transparent hover:bg-muted data-[state=open]:bg-transparent", ghost: "bg-transparent hover:bg-muted data-[state=open]:bg-transparent", }, }, defaultVariants: { variant: "filled", }, }, ); export type ModelItemData = { icon?: React.ComponentType<{ className?: string }>; title: string; description?: string; }; function matchesModelItemFilter( filterQuery: string, fields: { value?: string; title?: string | null; description?: string | null; }, ) { const q = filterQuery.trim().toLowerCase(); if (!q) return true; if (fields.value != null && fields.value.toLowerCase().includes(q)) { return true; } if (fields.title?.toLowerCase().includes(q)) return true; if (fields.description?.toLowerCase().includes(q)) return true; return false; } const ModelSelectorContext = React.createContext<{ value: string; onValueChange: (value: string) => void; items: Map; filterQuery: string; setFilterQuery: (query: string) => void; } | null>(null); function useModelSelectorContext() { const ctx = React.useContext(ModelSelectorContext); if (!ctx) { throw new Error( "ModelSelector components must be used within ModelSelector", ); } return ctx; } function ModelSelector({ value, onValueChange, items: itemsProp, children, onOpenChange, ...props }: Omit< React.ComponentProps, "value" | "onValueChange" > & { value: string; onValueChange: (value: string) => void; items?: Array<{ value: string } & ModelItemData>; }) { const items = React.useMemo(() => { if (!itemsProp) return new Map(); const m = new Map(); for (const { value: v, ...rest } of itemsProp) { m.set(v, rest); } return m; }, [itemsProp]); const [filterQuery, setFilterQuery] = React.useState(""); const handleOpenChange = React.useCallback( (open: boolean) => { onOpenChange?.(open); if (!open) setFilterQuery(""); }, [onOpenChange], ); const ctx = React.useMemo( () => ({ value, onValueChange, items, filterQuery, setFilterQuery, }), [value, onValueChange, items, filterQuery], ); return ( {children} ); } ModelSelector.displayName = "ModelSelector"; function ModelSelectorPortal({ ...props }: React.ComponentProps) { return ( ); } ModelSelectorPortal.displayName = "ModelSelectorPortal"; function ModelSelectorTrigger({ className, children, asChild, variant = "filled", ...props }: React.ComponentProps & VariantProps) { const { value, items } = useModelSelectorContext(); const selected = items.get(value); const defaultContent = ( <> {selected?.icon && } {selected?.title ?? value} ); const content = children ?? defaultContent; let triggerContent = content; if (asChild && React.isValidElement(children)) { const child = children as React.ReactElement<{ children?: React.ReactNode; }>; triggerContent = React.cloneElement(child, { children: child.props.children ?? defaultContent, }); } return ( {triggerContent} ); } ModelSelectorTrigger.displayName = "ModelSelectorTrigger"; function ModelSelectorContent({ className, sideOffset = 4, ...props }: React.ComponentProps) { return ( ); } ModelSelectorContent.displayName = "ModelSelectorContent"; const ModelSelectorSearch = React.forwardRef< HTMLInputElement, React.ComponentProps<"input"> >(function ModelSelectorSearch( { className, type = "text", onKeyDown, onPointerDown, onChange, autoComplete = "off", ...props }, ref, ) { const { filterQuery, setFilterQuery } = useModelSelectorContext(); return (

{ e.preventDefault(); }} > { onKeyDown?.(e); if (e.key === "Escape") return; e.stopPropagation(); }} onPointerDown={(e) => { onPointerDown?.(e); e.stopPropagation(); }} {...props} value={filterQuery} onChange={(e) => { setFilterQuery(e.target.value); onChange?.(e); }} />

); }); ModelSelectorSearch.displayName = "ModelSelectorSearch"; function ModelSelectorEmpty({ className, children, ...props }: React.HTMLAttributes) { const { filterQuery, items } = useModelSelectorContext(); const q = filterQuery.trim(); const hasCatalogMatch = React.useMemo(() => { if (!q || items.size === 0) return true; for (const [value, data] of items) { if ( matchesModelItemFilter(q, { value, title: data.title, description: data.description, }) ) { return true; } } return false; }, [q, items]); if (!q || hasCatalogMatch) return null; return (

{children ?? "No models found"}

); } ModelSelectorEmpty.displayName = "ModelSelectorEmpty"; function ModelSelectorGroup({ ...props }: React.ComponentProps) { return ( ); } ModelSelectorGroup.displayName = "ModelSelectorGroup"; function ModelSelectorItemTitle({ className, ...props }: React.HTMLAttributes) { return (

); } ModelSelectorItemTitle.displayName = "ModelSelectorItemTitle"; function ModelSelectorItemDescription({ className, ...props }: React.HTMLAttributes) { return (

); } ModelSelectorItemDescription.displayName = "ModelSelectorItemDescription"; function ModelSelectorItemIcon({ className, ...props }: React.HTMLAttributes) { return ( ); } ModelSelectorItemIcon.displayName = "ModelSelectorItemIcon"; function ModelSelectorItemIndicator({ className, children, wrapWithItemIndicator = true, ...props }: React.HTMLAttributes & { /** When false, children are rendered directly without ItemIndicator. Use for always-visible content (e.g. LockIcon when disabled). */ wrapWithItemIndicator?: boolean; }) { return ( {wrapWithItemIndicator ? ( {children} ) : ( children )} ); } ModelSelectorItemIndicator.displayName = "ModelSelectorItemIndicator"; function ModelSelectorItem({ className, inset, variant = "default", ...props }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive"; }) { return ( ); } ModelSelectorItem.displayName = "ModelSelectorItem"; function ModelSelectorCheckboxItem({ className, children, checked, icon: Icon, title, description, disabled, indicator, ...props }: React.ComponentProps & { icon?: React.ComponentType<{ className?: string }>; title?: string; description?: string; disabled?: boolean; indicator?: React.ReactNode; /** Custom content to show when selected. Renders inside ItemIndicator. Defaults to CheckIcon. */ }) { const { filterQuery } = useModelSelectorContext(); const hasFilterableText = title != null || description != null; if ( hasFilterableText && !matchesModelItemFilter(filterQuery, { title, description }) ) { return null; } const defaultContent = ( <> {Icon && ( )}

{title != null && ( {title} )} {description != null && ( {description} )}

); return ( {children ?? defaultContent} {disabled ? ( ) : ( (indicator ?? ( )) )} ); } ModelSelectorCheckboxItem.displayName = "ModelSelectorCheckboxItem"; function ModelSelectorRadioGroup({ ...props }: React.ComponentProps) { return ( ); } ModelSelectorRadioGroup.displayName = "ModelSelectorRadioGroup"; function ModelSelectorRadioItem({ className, value, children, icon: Icon, title, description, disabled, indicator, ...props }: React.ComponentProps & { icon?: React.ComponentType<{ className?: string }>; title?: string; description?: string; /** Custom content to show when selected. Renders inside ItemIndicator. Defaults to CheckIcon. */ indicator?: React.ReactNode; }) { const { filterQuery } = useModelSelectorContext(); if ( !matchesModelItemFilter(filterQuery, { value, title, description, }) ) { return null; } const defaultContent = ( <> {Icon && ( )}

{title != null && ( {title} )} {description != null && ( {description} )}

); return ( {children ?? defaultContent} {disabled ? ( ) : ( (indicator ?? ( )) )} ); } ModelSelectorRadioItem.displayName = "ModelSelectorRadioItem"; function ModelSelectorLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( ); } ModelSelectorLabel.displayName = "ModelSelectorLabel"; function ModelSelectorSeparator({ className, ...props }: React.ComponentProps) { return ( ); } ModelSelectorSeparator.displayName = "ModelSelectorSeparator"; function ModelSelectorSub({ ...props }: React.ComponentProps) { return ( ); } ModelSelectorSub.displayName = "ModelSelectorSub"; function ModelSelectorSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( svg:last-child]:transition-transform [&>svg:last-child]:duration-200 data-[state=open]:[&>svg:last-child]:rotate-90", className, )} {...props} > {children} ); } ModelSelectorSubTrigger.displayName = "ModelSelectorSubTrigger"; function ModelSelectorSubContent({ className, ...props }: React.ComponentProps) { return ( ); } ModelSelectorSubContent.displayName = "ModelSelectorSubContent"; export { ModelSelector, ModelSelectorPortal, ModelSelectorTrigger, ModelSelectorContent, ModelSelectorSearch, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorLabel, ModelSelectorItemTitle, ModelSelectorItemDescription, ModelSelectorItemIcon, ModelSelectorItemIndicator, ModelSelectorItem, ModelSelectorCheckboxItem, ModelSelectorRadioGroup, ModelSelectorRadioItem, ModelSelectorSeparator, ModelSelectorSub, ModelSelectorSubTrigger, ModelSelectorSubContent, }; 51:["$","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","radix-ui",{"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"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L52",null,{"namespace":"@nexus-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/nexus-ui/model-selector.tsx","content":"$54","type":"registry:file","target":"~/components/nexus-ui/model-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]