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:T9e93,"use client" import * as React from "react" import { CheckIcon, ChevronDownIcon, PencilIcon } from "lucide-react" import { AnimatePresence, LayoutGroup, motion, type HTMLMotionProps, } from "motion/react" import { createPortal } from "react-dom" import { cn } from "@/lib/utils" /* ============================================================================= * ModelSelector — Motoko UI * * Cursor-style AI model picker: label + muted Effort/Fast/Thinking, hover Edit, * and a side panel for Effort / Context / Fast / Thinking. * * * * * * * * * * ============================================================================= */ // --------------------------------------------------------------------------- // Motion tokens // --------------------------------------------------------------------------- const EASE = [0.2, 0, 0, 1] as const const SPRING_SOFT = { type: "spring" as const, stiffness: 420, damping: 32 } const SPRING_PRESS = { type: "spring" as const, stiffness: 500, damping: 28 } const SPRING_ICON = { type: "spring" as const, duration: 0.3, bounce: 0 } const MENU_PANEL_CLASS = cn( "bg-b-pop overflow-hidden rounded-2xl border-2 p-1.5", "shadow-[0_8px_30px_-8px_rgba(8,8,8,0.18),0_2px_8px_-2px_rgba(8,8,8,0.08)]", "dark:shadow-[0_8px_30px_-8px_rgba(0,0,0,0.45),0_2px_8px_-2px_rgba(0,0,0,0.3)]" ) type PresenceProps = Pick< HTMLMotionProps<"span">, "initial" | "animate" | "exit" | "transition" > const FADE_ONLY: PresenceProps = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, } const ICON_SWAP: PresenceProps = { initial: { opacity: 0, scale: 0.25, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.25, filter: "blur(4px)" }, transition: SPRING_ICON, } function scaleBlurPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, scale: 0.9, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.9, filter: "blur(4px)" }, transition: SPRING_ICON, } } function menuPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, y: 6, scale: 0.96, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, y: 4, scale: 0.98, filter: "blur(2px)" }, transition: { duration: 0.2, ease: EASE }, } } function flyoutPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, x: -6, scale: 0.98, filter: "blur(4px)" }, animate: { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, x: -4, scale: 0.98, filter: "blur(2px)" }, transition: { duration: 0.18, ease: EASE }, } } function valuePresence(reduceMotion: boolean): PresenceProps { return reduceMotion ? FADE_ONLY : ICON_SWAP } const listVariants = { hidden: {}, show: { transition: { staggerChildren: 0.04 } }, } const itemVariants = { hidden: { opacity: 0, y: 4 }, show: { opacity: 1, y: 0, transition: { duration: 0.2, ease: EASE }, }, } const itemVariantsReduced = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { duration: 0.15 } }, } // --------------------------------------------------------------------------- // Public types & defaults // --------------------------------------------------------------------------- export type AiModelEffort = "high" | "medium" | "low" export type AiModel = { id: string /** Display name, e.g. "Opus 4.5" or "Cursor Grok 4.5". */ label: string description?: string efforts?: AiModelEffort[] contexts?: Array supportsFast?: boolean supportsThinking?: boolean defaultEffort?: AiModelEffort defaultContext?: string | number defaultFast?: boolean defaultThinking?: boolean disabled?: boolean } /** Full selection: model id + per-model runtime options. */ export type AiModelSelection = { id: string effort?: AiModelEffort context?: string fast?: boolean thinking?: boolean } export const DEFAULT_AI_MODELS: AiModel[] = [ { id: "opus-4.5", label: "Opus 4.5", description: "Powerful reasoning for complex coding and agentic tasks.", efforts: ["high", "medium", "low"], contexts: ["200K", "1M"], supportsFast: true, supportsThinking: true, defaultEffort: "high", defaultContext: "200K", defaultFast: true, }, { id: "cursor-grok-4.5", label: "Cursor Grok 4.5", description: "Fast, capable model tuned for coding workflows.", efforts: ["high", "medium", "low"], contexts: ["128K", "256K"], supportsFast: true, supportsThinking: true, defaultEffort: "high", defaultContext: "128K", defaultFast: true, }, { id: "gpt-5", label: "GPT-5", description: "General-purpose reasoning with strong code generation.", efforts: ["high", "medium", "low"], contexts: ["128K", "400K"], supportsFast: true, supportsThinking: true, defaultEffort: "medium", defaultContext: "128K", }, { id: "gemini-2.5", label: "Gemini 2.5", description: "Long-context model for large files and repositories.", efforts: ["high", "medium", "low"], contexts: ["1M"], supportsFast: true, supportsThinking: false, defaultEffort: "low", defaultContext: "1M", defaultFast: true, }, ] const EFFORT_LABEL: Record = { high: "High", medium: "Medium", low: "Low", } export interface ModelSelectorProps { children: React.ReactNode models?: AiModel[] value?: AiModelSelection defaultValue?: AiModelSelection onValueChange?: (value: AiModelSelection) => void open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void disabled?: boolean className?: string "aria-label"?: string } export interface ModelSelectorTriggerProps extends Omit< HTMLMotionProps<"button">, "children" > { children?: React.ReactNode } export type ModelSelectorValueProps = React.HTMLAttributes export interface ModelSelectorContentProps extends Omit< HTMLMotionProps<"div">, "children" > { children?: React.ReactNode side?: "top" | "bottom" } export interface ModelSelectorKitProps { models?: AiModel[] value?: AiModelSelection defaultValue?: AiModelSelection onValueChange?: (value: AiModelSelection) => void disabled?: boolean className?: string "aria-label"?: string } // --------------------------------------------------------------------------- // Context // --------------------------------------------------------------------------- interface ModelSelectorContextValue { open: boolean setOpen: (open: boolean) => void selection: AiModelSelection selectModel: (id: string) => void patchSelection: (patch: Partial) => void models: AiModel[] selectedModel: AiModel | undefined disabled: boolean reduceMotion: boolean triggerRef: React.RefObject contentRef: React.RefObject contentId: string layoutGroupId: string activeIndex: number setActiveIndex: (index: number) => void optionIds: string[] ariaLabel: string side: "top" | "bottom" setSide: (side: "top" | "bottom") => void editingId: string | null setEditingId: (id: string | null) => void previewId: string | null setPreviewId: (id: string | null) => void getConfigFor: (model: AiModel) => AiModelSelection } function optionDomId(contentId: string, modelId: string) { return `${contentId}-option-${modelId}` } function firstEnabledIndex(models: AiModel[], optionIds: string[]) { for (let i = 0; i < optionIds.length; i++) { const model = models.find((m) => m.id === optionIds[i]) if (model && !model.disabled) return i } return 0 } function lastEnabledIndex(models: AiModel[], optionIds: string[]) { for (let i = optionIds.length - 1; i >= 0; i--) { const model = models.find((m) => m.id === optionIds[i]) if (model && !model.disabled) return i } return Math.max(0, optionIds.length - 1) } const ModelSelectorContext = React.createContext(null) function useModelSelectorContext(component: string): ModelSelectorContextValue { const ctx = React.useContext(ModelSelectorContext) if (!ctx) { throw new Error(`${component} must be used within `) } return ctx } // --------------------------------------------------------------------------- // Utilities // --------------------------------------------------------------------------- function assignRef( node: T | null, ...refs: Array | undefined> ) { for (const ref of refs) { if (typeof ref === "function") { ref(node) } else if (ref) { ;(ref as React.MutableRefObject).current = node } } } function usePrefersReducedMotion() { const [reduceMotion, setReduceMotion] = React.useState(false) React.useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)") const sync = () => setReduceMotion(mq.matches) sync() mq.addEventListener("change", sync) return () => mq.removeEventListener("change", sync) }, []) return reduceMotion } function useControllableState({ value, defaultValue, onChange, }: { value: T | undefined defaultValue: T onChange?: (value: T) => void }): [T, (next: T | ((prev: T) => T)) => void] { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const isControlled = value !== undefined const current = isControlled ? value : uncontrolled const setValue = React.useCallback( (next: T | ((prev: T) => T)) => { const resolved = typeof next === "function" ? (next as (prev: T) => T)(current) : next if (!isControlled) setUncontrolled(resolved) onChange?.(resolved) }, [isControlled, onChange, current] ) return [current, setValue] } export function formatContext( context: string | number | undefined ): string | null { if (context === undefined || context === "") return null if (typeof context === "number") { if (context >= 1_000_000) return `${(context / 1_000_000).toFixed(0)}M` if (context >= 1_000) return `${Math.round(context / 1_000)}K` return String(context) } return String(context) } function defaultSelectionFor(model: AiModel): AiModelSelection { return { id: model.id, effort: model.defaultEffort ?? model.efforts?.[0], context: formatContext(model.defaultContext ?? model.contexts?.[0]) ?? undefined, fast: model.defaultFast ?? false, thinking: model.defaultThinking ?? false, } } function resolveSelection( models: AiModel[], value?: AiModelSelection ): AiModelSelection { const model = models.find((m) => m.id === value?.id) ?? models[0] if (!model) { return { id: value?.id ?? "" } } const base = defaultSelectionFor(model) if (!value || value.id !== model.id) return base return { id: model.id, effort: value.effort ?? base.effort, context: value.context ?? base.context, fast: value.fast ?? base.fast, thinking: value.thinking ?? base.thinking, } } /** Renders "Opus 4.5 High Fast" with muted modifiers. */ function ModelLabelParts({ model, selection, className, }: { model: AiModel | undefined selection: AiModelSelection className?: string }) { if (!model) { return ( Select model ) } const mods: string[] = [] if (selection.effort) mods.push(EFFORT_LABEL[selection.effort]) if (selection.fast) mods.push("Fast") if (selection.thinking) mods.push("Thinking") return ( {model.label} {mods.map((mod) => ( {mod} ))} ) } function MenuCheckmark({ visible, reduceMotion, className, }: { visible: boolean reduceMotion: boolean className?: string }) { return ( {visible ? ( ) : null} ) } function OptionChip({ selected, onClick, children, disabled, reduceMotion, }: { selected: boolean onClick: () => void children: React.ReactNode disabled?: boolean reduceMotion: boolean }) { return ( {children} ) } function ToggleChip({ selected, onClick, children, reduceMotion, }: { selected: boolean onClick: () => void children: React.ReactNode reduceMotion: boolean }) { return ( {children} ) } // --------------------------------------------------------------------------- // Root // --------------------------------------------------------------------------- function ModelSelector({ children, models = DEFAULT_AI_MODELS, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, disabled = false, className, "aria-label": ariaLabel = "AI models", }: ModelSelectorProps) { const reduceMotion = usePrefersReducedMotion() const layoutGroupId = React.useId() const contentId = React.useId() const triggerRef = React.useRef(null) const contentRef = React.useRef(null) const initial = defaultValue ?? (models[0] ? defaultSelectionFor(models[0]) : { id: "" }) const [selection, setSelection] = useControllableState({ value: valueProp, defaultValue: initial, onChange: onValueChange, }) const [open, setOpenState] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, }) const [activeIndex, setActiveIndex] = React.useState(0) const [side, setSide] = React.useState<"top" | "bottom">("top") const [editingId, setEditingId] = React.useState(null) const [previewId, setPreviewId] = React.useState(null) const optionIds = React.useMemo(() => models.map((m) => m.id), [models]) // Cache last config per model so switching models restores options const configCacheRef = React.useRef>({}) // Always expose a fully-resolved selection (fills effort/context/fast defaults) const resolved = resolveSelection(models, selection) React.useEffect(() => { if (resolved.id) configCacheRef.current[resolved.id] = resolved }, [resolved]) const selectedModel = models.find((m) => m.id === resolved.id) ?? models[0] const getConfigFor = React.useCallback( (model: AiModel): AiModelSelection => { if (resolved.id === model.id) return resolved return configCacheRef.current[model.id] ?? defaultSelectionFor(model) }, [resolved] ) const setOpen = React.useCallback( (next: boolean) => { if (disabled && next) return setOpenState(next) if (!next) { setEditingId(null) setPreviewId(null) } }, [disabled, setOpenState] ) const selectModel = React.useCallback( (id: string) => { const model = models.find((m) => m.id === id) if (!model || model.disabled) return const next = resolveSelection(models, { ...getConfigFor(model), id }) setSelection(next) setEditingId(null) setOpen(false) triggerRef.current?.focus() }, [models, getConfigFor, setSelection, setOpen] ) const patchSelection = React.useCallback( (patch: Partial) => { setSelection((prev) => { const id = patch.id ?? prev.id const model = models.find((m) => m.id === id) const base = model ? id === prev.id ? resolveSelection(models, prev) : (configCacheRef.current[id] ?? defaultSelectionFor(model)) : prev const next = resolveSelection(models, { ...base, ...patch, id }) configCacheRef.current[id] = next return next }) }, [models, setSelection] ) React.useEffect(() => { if (!open) return const idx = optionIds.indexOf(resolved.id) setActiveIndex(idx >= 0 ? idx : firstEnabledIndex(models, optionIds)) }, [open, optionIds, resolved.id, models]) React.useEffect(() => { if (!open) return const onPointer = (event: MouseEvent | TouchEvent) => { const target = event.target as Node | null if (!target) return const inTrigger = triggerRef.current?.contains(target) const inContent = contentRef.current?.contains(target) if (!inTrigger && !inContent) setOpen(false) } const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault() if (editingId) { setEditingId(null) return } setOpen(false) triggerRef.current?.focus() return } if (editingId || optionIds.length === 0) return if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault() const delta = event.key === "ArrowDown" ? 1 : -1 setActiveIndex((prev) => { let next = prev for (let i = 0; i < optionIds.length; i++) { next = (next + delta + optionIds.length) % optionIds.length const model = models.find((m) => m.id === optionIds[next]) if (!model?.disabled) break } return next }) return } if (event.key === "Enter" || event.key === " ") { const target = event.target as HTMLElement | null if (target?.closest("[data-slot='model-selector-item']")) return if (target?.closest("[data-slot='model-selector-edit']")) return event.preventDefault() const id = optionIds[activeIndex] if (id) selectModel(id) return } if (event.key === "Home") { event.preventDefault() setActiveIndex(firstEnabledIndex(models, optionIds)) return } if (event.key === "End") { event.preventDefault() setActiveIndex(lastEnabledIndex(models, optionIds)) } } document.addEventListener("mousedown", onPointer) document.addEventListener("touchstart", onPointer) document.addEventListener("keydown", onKey) return () => { document.removeEventListener("mousedown", onPointer) document.removeEventListener("touchstart", onPointer) document.removeEventListener("keydown", onKey) } }, [open, setOpen, optionIds, activeIndex, models, selectModel, editingId]) React.useEffect(() => { if (disabled) setOpen(false) }, [disabled, setOpen]) return (

{children}

) } ModelSelector.displayName = "ModelSelector" // --------------------------------------------------------------------------- // Trigger // --------------------------------------------------------------------------- const ModelSelectorTrigger = React.forwardRef< HTMLButtonElement, ModelSelectorTriggerProps >(({ className, children, disabled, onClick, ...props }, ref) => { const { open, setOpen, triggerRef, contentId, disabled: rootDisabled, selectedModel, selection, } = useModelSelectorContext("ModelSelectorTrigger") const isDisabled = disabled || rootDisabled const label = selectedModel ? [ selectedModel.label, selection.effort ? EFFORT_LABEL[selection.effort] : null, selection.fast ? "Fast" : null, selection.thinking ? "Thinking" : null, ] .filter(Boolean) .join(" ") : "Select model" return ( assignRef(node, ref, triggerRef)} type="button" disabled={isDisabled} aria-haspopup="listbox" aria-expanded={open} aria-controls={contentId} aria-label={`Model: ${label}`} data-slot="model-selector-trigger" data-state={open ? "open" : "closed"} onClick={(event) => { onClick?.(event) if (event.defaultPrevented || isDisabled) return setOpen(!open) }} whileHover={isDisabled ? undefined : { scale: 1.02, y: -1 }} whileTap={isDisabled ? undefined : { scale: 0.96 }} transition={SPRING_PRESS} className={cn( "text-t-secondary flex min-h-9 cursor-pointer items-center gap-2 rounded-xl px-2.5 py-1.5 text-xs font-medium", "transition-[background-color,color,box-shadow,opacity] duration-200 ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-b-surface1 hover:text-t-primary", "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-40", open && "bg-b-surface1 text-t-primary", className )} {...props} > {children ?? } ) }) ModelSelectorTrigger.displayName = "ModelSelectorTrigger" // --------------------------------------------------------------------------- // Value // --------------------------------------------------------------------------- function ModelSelectorValue({ className, ...props }: ModelSelectorValueProps) { const { selectedModel, selection, reduceMotion } = useModelSelectorContext("ModelSelectorValue") return ( ) } ModelSelectorValue.displayName = "ModelSelectorValue" // --------------------------------------------------------------------------- // Content // --------------------------------------------------------------------------- const ModelSelectorContent = React.forwardRef< HTMLDivElement, ModelSelectorContentProps >(({ className, children, side: sideProp = "top", style, ...props }, ref) => { const { open, contentId, triggerRef, contentRef, reduceMotion, ariaLabel, setSide, editingId, previewId, models, activeIndex, optionIds, } = useModelSelectorContext("ModelSelectorContent") const [mounted, setMounted] = React.useState(false) const [coords, setCoords] = React.useState<{ top: number left: number } | null>(null) React.useEffect(() => { setMounted(true) }, []) React.useEffect(() => { setSide(sideProp) }, [sideProp, setSide]) React.useLayoutEffect(() => { if (!open) return const update = () => { const trigger = triggerRef.current if (!trigger) return const rect = trigger.getBoundingClientRect() if (sideProp === "bottom") { setCoords({ top: rect.bottom + 8, left: rect.left, }) } else { setCoords({ top: rect.top - 8, left: rect.left, }) } } update() window.addEventListener("resize", update) window.addEventListener("scroll", update, true) return () => { window.removeEventListener("resize", update) window.removeEventListener("scroll", update, true) } }, [open, triggerRef, sideProp]) if (!mounted) return null const list = children ?? const editingModel = models.find((m) => m.id === editingId) const previewModel = models.find((m) => m.id === previewId) const panelModel = editingModel ?? previewModel const activeModelId = optionIds[activeIndex] const activeOptionId = activeModelId ? optionDomId(contentId, activeModelId) : undefined return createPortal( {open && coords ? ( assignRef(node, ref, contentRef)} data-slot="model-selector-content" data-editing={editingId ? "" : undefined} {...menuPresence(reduceMotion)} style={{ position: "fixed", top: coords.top, left: coords.left, transform: sideProp === "top" ? "translateY(-100%)" : undefined, zIndex: 50, ...style, }} className={cn("flex origin-top-left items-start gap-3", className)} {...props} > {panelModel ? ( ) : null} ) : null} , document.body ) }) ModelSelectorContent.displayName = "ModelSelectorContent" // --------------------------------------------------------------------------- // Default list // --------------------------------------------------------------------------- function ModelSelectorDefaultItems() { const { models, layoutGroupId, reduceMotion, editingId, setPreviewId } = useModelSelectorContext("ModelSelectorDefaultItems") return ( { if (!editingId) setPreviewId(null) }} > {models.map((model) => (

))} ) } // --------------------------------------------------------------------------- // Stable side panel shell // --------------------------------------------------------------------------- function ModelSidePanel({ model, editing, }: { model: AiModel editing: boolean }) { const { reduceMotion } = useModelSelectorContext("ModelSidePanel") return ( {editing ? ( ) : ( )} ) } // --------------------------------------------------------------------------- // Hover info side panel // --------------------------------------------------------------------------- function ModelInfoPanelContent({ model }: { model: AiModel }) { const contexts = model.contexts ?.map((context) => formatContext(context)) .filter(Boolean) .join(" · ") return ( <>

{model.label}

{model.description ? (

{model.description}

) : null} {contexts ? (

Context {contexts}

) : null} ) } // --------------------------------------------------------------------------- // Edit side panel // --------------------------------------------------------------------------- function ModelEditPanelContent({ model }: { model: AiModel }) { const { getConfigFor, patchSelection, reduceMotion } = useModelSelectorContext("ModelEditPanelContent") const config = getConfigFor(model) const efforts = model.efforts ?? [] const contexts = model.contexts ?? [] return ( <> {efforts.length > 0 ? (

Effort

{efforts.map((effort) => ( patchSelection({ id: model.id, effort })} > {EFFORT_LABEL[effort]} ))}

) : null} {contexts.length > 0 ? (

Context

{contexts.map((ctx) => { const label = formatContext(ctx) ?? String(ctx) return ( patchSelection({ id: model.id, context: label }) } > {label} ) })}

) : null} {(model.supportsFast || model.supportsThinking) && (

Modes

{model.supportsFast ? ( patchSelection({ id: model.id, fast: !config.fast }) } > Fast ) : null} {model.supportsThinking ? ( patchSelection({ id: model.id, thinking: !config.thinking, }) } > Thinking ) : null}

)} ) } // --------------------------------------------------------------------------- // Item // --------------------------------------------------------------------------- function ModelSelectorItem({ model }: { model: AiModel }) { const { selection, selectModel, reduceMotion, layoutGroupId, contentId, activeIndex, setActiveIndex, optionIds, editingId, setEditingId, setPreviewId, getConfigFor, patchSelection, } = useModelSelectorContext("ModelSelectorItem") const isActive = model.id === selection.id const isEditing = editingId === model.id const optionIndex = optionIds.indexOf(model.id) const isHighlighted = optionIndex === activeIndex && optionIndex >= 0 const isDisabled = !!model.disabled const config = getConfigFor(model) const optionId = optionDomId(contentId, model.id) const optionRef = React.useRef(null) React.useEffect(() => { if (isHighlighted) { optionRef.current?.scrollIntoView({ block: "nearest" }) } }, [isHighlighted]) return ( { if (!isDisabled && optionIndex >= 0) { setActiveIndex(optionIndex) if (!editingId) setPreviewId(model.id) } }} > {isActive ? ( ) : null} {/* Option has no nested buttons — Edit is a sibling for valid listbox a11y. */} { event.stopPropagation() if (isEditing) { setEditingId(null) return } // Opening edit selects this model’s config into the active selection // so the panel edits the live value, without closing the list. patchSelection({ ...config, id: model.id }) setEditingId(model.id) }} whileTap={isDisabled ? undefined : { scale: 0.96 }} transition={SPRING_PRESS} className={cn( "relative z-10 mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg", "text-t-tertiary opacity-0 transition-[opacity,background-color,color] duration-150 ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-b-surface2 hover:text-t-primary", "focus-visible:ring-ring/50 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none", "group-hover/item:opacity-100", (isEditing || isHighlighted) && "opacity-100", isEditing && "bg-b-surface2 text-t-primary" )} > ) } // --------------------------------------------------------------------------- // Kit // --------------------------------------------------------------------------- function ModelSelectorKit({ models = DEFAULT_AI_MODELS, value, defaultValue, onValueChange, disabled, className, "aria-label": ariaLabel, }: ModelSelectorKitProps) { return ( ) } ModelSelectorKit.displayName = "ModelSelectorKit" // --------------------------------------------------------------------------- // Exports // --------------------------------------------------------------------------- export { ModelSelector, ModelSelectorTrigger, ModelSelectorValue, ModelSelectorContent, ModelSelectorKit, defaultSelectionFor, } 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","motion",{"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"}]]}]}],["$","li","lucide-react",{"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"}]]}]}]]}],["$","$L52",null,{"namespace":"@motokoui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/motokoui/ai-model-selector.tsx","content":"$54","type":"registry:ui","target":"components/ui/ai-model-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]