diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index 2a633aeaf9..6fe3c5c787 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -223,7 +223,7 @@ function NavItem({ onClick={onClick} isActive={active} data-tour={dataTour} - className="sidebar-nav-btn h-[33px] rounded-[11px] gap-[8.5px] px-2.5 font-medium group-data-[collapsible=icon]:!w-[32px] group-data-[collapsible=icon]:!rounded-[10px] group-data-[collapsible=icon]:mx-auto" + className="sidebar-nav-btn h-[33px] rounded-full gap-[8.5px] px-2.5 font-medium group-data-[collapsible=icon]:!w-[32px] group-data-[collapsible=icon]:!rounded-full group-data-[collapsible=icon]:mx-auto" > {label} @@ -597,7 +597,7 @@ export function AppSidebar() { ? "sidebar-row-action group-hover/project-chat-item:opacity-100 group-hover/project-chat-item:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto" : "sidebar-row-action group-hover/recent-item:opacity-100 group-hover/recent-item:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto"; const buttonClass = cn( - "sidebar-nav-btn h-[33px] cursor-pointer rounded-[11px] pr-4 text-[14.5px] leading-[19px] tracking-nav font-medium", + "sidebar-nav-btn h-[33px] cursor-pointer rounded-full pr-4 text-[14.5px] leading-[19px] tracking-nav font-medium", variant === "project" ? "pl-[37px]" : "pl-2.5", variant === "project" ? "group-hover/project-chat-item:pr-8 group-has-[.sidebar-row-action[data-state=open]]/project-chat-item:pr-8" @@ -647,7 +647,7 @@ export function AppSidebar() { openRenameChat(item)}> @@ -660,7 +660,7 @@ export function AppSidebar() { Move to project @@ -827,7 +827,7 @@ export function AppSidebar() { )} - + - + - + - + {recentChatItems.map((item) => renderChatSidebarItem(item, "recent"), @@ -1065,7 +1065,7 @@ export function AppSidebar() { > { setSelectedHistoryRunId(run.id); closeMobileIfOpen(); @@ -1106,8 +1106,8 @@ export function AppSidebar() { openRenameRun(run)}> @@ -1154,7 +1154,7 @@ export function AppSidebar() {
diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index b6fc554423..8146c4603b 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -740,8 +740,8 @@ function buildWelcome(hour: number, name: string): Welcome { // Use the name on ~a third of lines (only direct salutations where it reads // naturally); the rest stay name-free so greetings don't feel repetitive. const base: Welcome[] = [ - g(name ? `Good to see you, ${name}.` : "Good to see you.", "large sloth wave.png"), - g("Ready when you are.", "large sloth thumbs.png"), + g(name ? `Good to see you, ${name}` : "Good to see you", "large sloth wave.png"), + g("Ready when you are", "large sloth thumbs.png"), DEFAULT_WELCOME, g("How can I help?", "sloth sir large.png"), ]; @@ -785,7 +785,7 @@ const ThreadWelcome: FC<{ return (
-
+
{/* Center the greeting (sloth + title) over the composer. */}
@@ -2131,7 +2131,7 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ { side="bottom" align="start" onCloseAutoFocus={(e) => e.preventDefault()} - className="aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md [--radius:1.1rem] bg-popover p-1 text-popover-foreground shadow-[0_2px_8px_-2px_rgba(27,27,31,0.16)] dark:shadow-none" + className="aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md [--radius:1.1rem] bg-popover p-1 text-popover-foreground shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] dark:shadow-none" > diff --git a/studio/frontend/src/components/ui/button.tsx b/studio/frontend/src/components/ui/button.tsx index 9e27446989..51fc31697e 100644 --- a/studio/frontend/src/components/ui/button.tsx +++ b/studio/frontend/src/components/ui/button.tsx @@ -10,7 +10,7 @@ import type * as React from "react"; import { cn } from "@/lib/utils"; export const buttonVariants = cva( - "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer", + "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-full border border-transparent text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer", { variants: { variant: { diff --git a/studio/frontend/src/components/ui/combobox.tsx b/studio/frontend/src/components/ui/combobox.tsx index 53d77415e5..7eb8b07d34 100644 --- a/studio/frontend/src/components/ui/combobox.tsx +++ b/studio/frontend/src/components/ui/combobox.tsx @@ -146,7 +146,7 @@ function ComboboxInput({ function ComboboxContent({ className, side = "bottom", - sideOffset = 6, + sideOffset = 0, align = "start", alignOffset = 0, anchor, diff --git a/studio/frontend/src/components/ui/dropdown-menu.tsx b/studio/frontend/src/components/ui/dropdown-menu.tsx index 0ce4fd87c8..c4f742a164 100644 --- a/studio/frontend/src/components/ui/dropdown-menu.tsx +++ b/studio/frontend/src/components/ui/dropdown-menu.tsx @@ -36,7 +36,7 @@ function DropdownMenuTrigger({ function DropdownMenuContent({ className, align = "start", - sideOffset = 4, + sideOffset = 0, ...props }: React.ComponentProps) { return ( @@ -46,7 +46,7 @@ function DropdownMenuContent({ sideOffset={sideOffset} align={align} className={cn( - "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-48 rounded-lg p-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", + "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-48 rounded-lg p-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-[calc(var(--radix-dropdown-menu-trigger-width)_+_6px)] data-[align=start]:-translate-x-[3px] data-[align=end]:translate-x-[3px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className, )} {...props} @@ -78,7 +78,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-lg px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-full px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0", className, )} {...props} @@ -96,7 +96,7 @@ function DropdownMenuCheckboxItem({ ) { return ( diff --git a/studio/frontend/src/components/ui/popover.tsx b/studio/frontend/src/components/ui/popover.tsx index a3fdac2100..800bd9c7da 100644 --- a/studio/frontend/src/components/ui/popover.tsx +++ b/studio/frontend/src/components/ui/popover.tsx @@ -23,7 +23,7 @@ function PopoverTrigger({ function PopoverContent({ className, align = "center", - sideOffset = 4, + sideOffset = 0, ...props }: React.ComponentProps) { return ( diff --git a/studio/frontend/src/components/ui/select.tsx b/studio/frontend/src/components/ui/select.tsx index 03c584fdd1..0ec21850ac 100644 --- a/studio/frontend/src/components/ui/select.tsx +++ b/studio/frontend/src/components/ui/select.tsx @@ -63,7 +63,9 @@ function SelectTrigger({ children, icon, iconClassName, - animateRadius = true, + /* Off by default: the radius morph matched the old item-aligned popup + that overlaid the trigger; popper menus drop below it instead. */ + animateRadius = false, ...props }: React.ComponentProps & { size?: "sm" | "default"; @@ -111,7 +113,7 @@ function SelectTrigger({ function SelectContent({ className, children, - position = "item-aligned", + position = "popper", align = "center", container, ...props @@ -125,9 +127,8 @@ function SelectContent({ data-slot="select-content" data-align-trigger={position === "item-aligned"} className={cn( - "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-36 rounded-xl p-1 corner-squircle duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto ", - position === "popper" && - "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", + "bg-popover text-popover-foreground font-heading data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-36 rounded-xl p-1 corner-squircle duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto ", + // No popper translate offset: the menu sits flush against the trigger. className, )} position={position} @@ -172,7 +173,7 @@ function SelectItem({ {children} diff --git a/studio/frontend/src/features/auth/login-page.tsx b/studio/frontend/src/features/auth/login-page.tsx index 6f4d03f1a1..eb33a6a71b 100644 --- a/studio/frontend/src/features/auth/login-page.tsx +++ b/studio/frontend/src/features/auth/login-page.tsx @@ -16,7 +16,7 @@ export function LoginPage() { length="70vh" style={{ opacity: 0.4 }} /> - +
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index 4472fffe7f..41451d06b1 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -1009,7 +1009,7 @@ function ProjectLanding({ : { compare: item.id, project: projectId }, }); }} - className="group flex min-h-[58px] w-full items-center gap-4 rounded-[10px] px-4 py-2 text-left transition-colors hover:bg-nav-surface-hover" + className="group flex min-h-[58px] w-full items-center gap-4 rounded-full px-4 py-2 text-left transition-colors hover:bg-nav-surface-hover" >
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx index fc5d5f8b5c..776bad5244 100644 --- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx +++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx @@ -187,12 +187,16 @@ function NumericValueInput({ } }; + const displayed = focused ? draft : (displayValue ?? String(value)); + return ( { cancelBlurCommitRef.current = false; @@ -263,7 +267,7 @@ function ParamSlider({ onChange={onChange} displayValue={displayValue} ariaLabel={label} - size={valueSize ?? 6} + size={valueSize ?? 4} />
@@ -877,7 +881,7 @@ export function ChatSettingsPanel({ animateRadius={false} icon={ArrowDown01Icon} iconClassName="size-3.5" - className="grid h-7 w-[120px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.07] px-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0" + className="grid h-7 w-[120px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] px-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0" data-test-id="speculative-type-select" > @@ -928,7 +932,7 @@ export function ChatSettingsPanel({ }} data-test-id="spec-draft-n-max-input" aria-label="Speculative decoding draft tokens" - className="h-7 w-[72px] rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.07] px-2 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0" + className="h-7 w-[72px] rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] px-2 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0" />
)} @@ -1058,7 +1062,7 @@ export function ChatSettingsPanel({ {presets.map((p, index) => ( @@ -1092,7 +1096,7 @@ export function ChatSettingsPanel({ variant={presetSaveState.isSaveReady ? "default" : "outline"} size="sm" className={cn( - "h-9 w-full rounded-[10px] text-[13px] font-medium tracking-nav", + "h-9 w-full rounded-full text-[13px] font-medium tracking-nav", presetSaveState.isSaveReady && "bg-primary text-primary-foreground hover:bg-primary/90", )} @@ -1107,7 +1111,7 @@ export function ChatSettingsPanel({ disabled={!(settingsHydrated && activeCustomPreset)} variant="outline" size="sm" - className="h-9 w-full rounded-[10px] text-[13px] font-medium tracking-nav text-muted-foreground" + className="h-9 w-full rounded-full text-[13px] font-medium tracking-nav text-muted-foreground" title={ activeCustomPreset ? activeBuiltinPreset diff --git a/studio/frontend/src/features/chat/components/chat-search-dialog.tsx b/studio/frontend/src/features/chat/components/chat-search-dialog.tsx index 3d867b07f7..7a987851aa 100644 --- a/studio/frontend/src/features/chat/components/chat-search-dialog.tsx +++ b/studio/frontend/src/features/chat/components/chat-search-dialog.tsx @@ -64,7 +64,7 @@ export function ChatSearchDialog() { @@ -117,7 +117,7 @@ export function ChatSearchDialog() { }); close(); }} - className="relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-sm outline-hidden data-selected:bg-muted data-selected:text-foreground" + className="relative flex cursor-pointer select-none items-center gap-3 rounded-full px-3 py-2.5 text-sm outline-hidden data-selected:bg-muted data-selected:text-foreground" > {showLoadingRow ? ( diff --git a/studio/frontend/src/features/chat/mcp-composer-button.tsx b/studio/frontend/src/features/chat/mcp-composer-button.tsx index 348c744b2c..ae6c97528e 100644 --- a/studio/frontend/src/features/chat/mcp-composer-button.tsx +++ b/studio/frontend/src/features/chat/mcp-composer-button.tsx @@ -260,7 +260,7 @@ export function McpComposerButton({ diff --git a/studio/frontend/src/features/chat/projects-page.tsx b/studio/frontend/src/features/chat/projects-page.tsx index c4cd911fdb..a9496858c0 100644 --- a/studio/frontend/src/features/chat/projects-page.tsx +++ b/studio/frontend/src/features/chat/projects-page.tsx @@ -258,7 +258,7 @@ export function ProjectsPage() { value={sortMode} onValueChange={(v) => setSortMode(v as SortMode)} > - + @@ -324,15 +324,15 @@ export function ProjectsPage() {
-
- +
+ setQuery(e.target.value)} placeholder="Search projects..." - className="h-11 pl-10" + className="h-14 rounded-full border-none bg-background pl-13 pr-5 shadow-[0_0_20px_0_rgba(0,0,0,0.07)] dark:bg-card dark:shadow-none" aria-label="Search projects" />
@@ -342,7 +342,7 @@ export function ProjectsPage() { {Array.from({ length: 6 }).map((_, index) => (
@@ -361,7 +361,7 @@ export function ProjectsPage() { {projects.length === 0 && (
) : recipes.length === 0 ? ( - + diff --git a/studio/frontend/src/features/export/export-page.tsx b/studio/frontend/src/features/export/export-page.tsx index b1a379b582..aa18be37f7 100644 --- a/studio/frontend/src/features/export/export-page.tsx +++ b/studio/frontend/src/features/export/export-page.tsx @@ -539,7 +539,7 @@ export function ExportPage() { description="Select source, method, and quantization" accent="emerald" featured={true} - className="shadow-border ring-1 ring-border" + className="ring-0 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] dark:shadow-none" > {/* Loading / error states */} {loadingCheckpoints && ( diff --git a/studio/frontend/src/features/hub/catalog/catalog-states.tsx b/studio/frontend/src/features/hub/catalog/catalog-states.tsx index e4c8554773..1df85a6f81 100644 --- a/studio/frontend/src/features/hub/catalog/catalog-states.tsx +++ b/studio/frontend/src/features/hub/catalog/catalog-states.tsx @@ -58,7 +58,7 @@ export function NetworkErrorState({