insforge 1.2.10 → 1.4.8

package/frontend/src/components/layout/AppSidebar.tsx

@@ -1,100 +1,85 @@
-import { useMemo, useState } from 'react';
-import { useLogSources } from '@/features/logs/hooks/useLogSources';
-import { PrimaryMenu } from './PrimaryMenu';
-import { SecondaryMenu } from './SecondaryMenu';
-import {
-  staticMenuItems,
-  documentationMenuItem,
-  usageMenuItem,
-  type PrimaryMenuItem,
-} from '@/lib/utils/menuItems';
-import { useLocation, matchPath } from 'react-router-dom';
-import { isInsForgeCloudProject, isIframe } from '@/lib/utils/utils';
-import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-import { ProjectInfoModal } from '@/components/ProjectInfoModal';
-import { Settings } from 'lucide-react';
-
-interface AppSidebarProps extends React.HTMLAttributes<HTMLElement> {
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-}
-
-export default function AppSidebar({ isCollapsed, onToggleCollapse }: AppSidebarProps) {
-  const { pathname } = useLocation();
-  const { menuItems: logsMenuItems, isLoading: logsLoading } = useLogSources();
-  const [isProjectInfoModalOpen, setIsProjectInfoModalOpen] = useState(false);
-
-  const isCloud = isInsForgeCloudProject();
-  const isInIframe = isIframe();
-
-  // Create a settings menu item that behaves differently based on iframe context
-  const settingsMenuItem: PrimaryMenuItem = useMemo(
-    () => ({
-      id: 'settings',
-      label: 'Settings',
-      href: '',
-      icon: Settings,
-      onClick: () => {
-        if (isInIframe) {
-          // In iframe: use postMessage to show cloud's settings overlay
-          postMessageToParent({ type: 'SHOW_SETTINGS_OVERLAY' }, '*');
-        } else {
-          // Not in iframe: show local project info modal
-          setIsProjectInfoModalOpen(true);
-        }
-      },
-    }),
-    [isInIframe]
-  );
-
-  // Build bottom menu items based on deployment environment
-  const bottomMenuItems = useMemo(() => {
-    const items = [];
-
-    // Only show Usage when in iframe (postMessage to parent works)
-    if (isCloud && isInIframe) {
-      items.push(usageMenuItem);
-    }
-
-    items.push(documentationMenuItem);
-    items.push(settingsMenuItem);
-    return items;
-  }, [isCloud, isInIframe, settingsMenuItem]);
-
-  // Find which primary menu item matches the current route
-  // Items with secondary menus use prefix matching (end: false)
-  // Items without secondary menus use exact matching (end: true)
-  const activeMenu = staticMenuItems.find((item) => {
-    const hasSecondaryMenu = !!item.secondaryMenu || item.id === 'logs';
-    return matchPath({ path: item.href, end: !hasSecondaryMenu }, pathname);
-  });
-
-  // Get secondary menu items (special case for logs)
-  const secondaryMenuItems = activeMenu?.id === 'logs' ? logsMenuItems : activeMenu?.secondaryMenu;
-  const isLoading = activeMenu?.id === 'logs' ? logsLoading : false;
-
-  return (
-    <>
-      <div className="flex h-full">
-        <PrimaryMenu
-          items={staticMenuItems}
-          bottomItems={bottomMenuItems}
-          activeItemId={activeMenu?.id}
-          isCollapsed={isCollapsed}
-          onToggleCollapse={onToggleCollapse}
-        />
-
-        {/* Render the secondary menu - always visible when there are items */}
-        {secondaryMenuItems && activeMenu && (
-          <SecondaryMenu title={activeMenu.label} items={secondaryMenuItems} loading={isLoading} />
-        )}
-      </div>
-
-      {/* Project Info Modal for cloud deployments accessed directly (not in iframe) */}
-      <ProjectInfoModal
-        open={isProjectInfoModalOpen}
-        onClose={() => setIsProjectInfoModalOpen(false)}
-      />
-    </>
-  );
-}
+import { useMemo } from 'react';
+import { useLogSources } from '@/features/logs/hooks/useLogSources';
+import { PrimaryMenu } from './PrimaryMenu';
+import { SecondaryMenu } from './SecondaryMenu';
+import {
+  staticMenuItems,
+  documentationMenuItem,
+  usageMenuItem,
+  settingsMenuItem,
+  deploymentsMenuItem,
+  type PrimaryMenuItem,
+} from '@/lib/utils/menuItems';
+import { useLocation, matchPath } from 'react-router-dom';
+import { isInsForgeCloudProject, isIframe } from '@/lib/utils/utils';
+
+interface AppSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+export default function AppSidebar({ isCollapsed, onToggleCollapse }: AppSidebarProps) {
+  const { pathname } = useLocation();
+  const { menuItems: logsMenuItems, isLoading: logsLoading } = useLogSources();
+
+  const isCloud = isInsForgeCloudProject();
+  const isInIframe = isIframe();
+
+  // Build main menu items - add deployments for cloud projects
+  const mainMenuItems = useMemo(() => {
+    if (isCloud) {
+      // Insert deployments after visualizer (at the end of main items)
+      return [...staticMenuItems, deploymentsMenuItem];
+    }
+    return staticMenuItems;
+  }, [isCloud]);
+
+  // Build bottom menu items based on deployment environment
+  const bottomMenuItems = useMemo(() => {
+    const items: PrimaryMenuItem[] = [];
+
+    // Only show Usage when in iframe (postMessage to parent works)
+    if (isCloud && isInIframe) {
+      items.push(usageMenuItem);
+    }
+
+    items.push(documentationMenuItem);
+    items.push(settingsMenuItem);
+    return items;
+  }, [isCloud, isInIframe]);
+
+  // Find which primary menu item matches the current route
+  // Items with secondary menus use prefix matching (end: false)
+  // Items without secondary menus use exact matching (end: true)
+  const activeMenu = useMemo(() => {
+    const allItems = [...mainMenuItems, ...bottomMenuItems];
+    return allItems.find((item) => {
+      if (item.external || item.onClick) {
+        return false;
+      }
+      const hasSecondaryMenu = !!item.secondaryMenu || item.id === 'logs';
+      return matchPath({ path: item.href, end: !hasSecondaryMenu }, pathname);
+    });
+  }, [mainMenuItems, bottomMenuItems, pathname]);
+
+  // Get secondary menu items (special case for logs)
+  const secondaryMenuItems = activeMenu?.id === 'logs' ? logsMenuItems : activeMenu?.secondaryMenu;
+  const isLoading = activeMenu?.id === 'logs' ? logsLoading : false;
+
+  return (
+    <div className="flex h-full">
+      <PrimaryMenu
+        items={mainMenuItems}
+        bottomItems={bottomMenuItems}
+        activeItemId={activeMenu?.id}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={onToggleCollapse}
+      />
+
+      {/* Render the secondary menu - always visible when there are items */}
+      {secondaryMenuItems && activeMenu && (
+        <SecondaryMenu title={activeMenu.label} items={secondaryMenuItems} loading={isLoading} />
+      )}
+    </div>
+  );
+}

package/frontend/src/components/layout/Layout.tsx

@@ -1,32 +1,34 @@
-import React, { useState } from 'react';
-import AppSidebar from './AppSidebar';
-import AppHeader from './AppHeader';
-import { ThemeProvider } from '@/lib/contexts/ThemeContext';
-import { isIframe } from '@/lib/utils/utils';
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-export default function Layout({ children }: LayoutProps) {
-  // Sidebar is expanded by default; user can toggle via UI
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
-  const handleToggleCollapse = () => {
-    setSidebarCollapsed(!sidebarCollapsed);
-  };
-
-  return (
-    <ThemeProvider forcedTheme={isIframe() ? 'dark' : undefined}>
-      <div className="h-screen bg-gray-50 dark:bg-neutral-800 flex flex-col">
-        {!isIframe() && <AppHeader />}
-
-        {/* Main layout - sidebars + content in flexbox */}
-        <div className="flex-1 flex overflow-hidden">
-          <AppSidebar isCollapsed={sidebarCollapsed} onToggleCollapse={handleToggleCollapse} />
-          <main className="flex-1 overflow-y-auto">{children}</main>
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}
+import React, { useState } from 'react';
+import AppSidebar from './AppSidebar';
+import AppHeader from './AppHeader';
+import { ThemeProvider } from '@/lib/contexts/ThemeContext';
+import { OnboardingModal } from '@/features/onboard';
+import { isIframe } from '@/lib/utils/utils';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  // Sidebar is expanded by default; user can toggle via UI
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const handleToggleCollapse = () => {
+    setSidebarCollapsed(!sidebarCollapsed);
+  };
+
+  return (
+    <ThemeProvider forcedTheme={isIframe() ? 'dark' : undefined}>
+      <div className="h-screen bg-gray-50 dark:bg-neutral-800 flex flex-col">
+        {!isIframe() && <AppHeader />}
+
+        {/* Main layout - sidebars + content in flexbox */}
+        <div className="flex-1 flex overflow-hidden">
+          <AppSidebar isCollapsed={sidebarCollapsed} onToggleCollapse={handleToggleCollapse} />
+          <main className="flex-1 overflow-y-auto">{children}</main>
+        </div>
+      </div>
+      <OnboardingModal />
+    </ThemeProvider>
+  );
+}

package/frontend/src/components/layout/PrimaryMenu.tsx

@@ -66,13 +66,21 @@ export function PrimaryMenu({
   };
 
   const BottomMenuItem = ({ item }: { item: PrimaryMenuItem }) => {
+    const isActive = item.id === activeItemId;
+
+    const itemClasses = cn(
+      baseButtonClasses,
+      isActive
+        ? 'bg-zinc-950 dark:bg-emerald-300 text-white dark:text-black hover:bg-zinc-950 dark:hover:bg-emerald-300 hover:text-white dark:hover:text-black'
+        : 'hover:bg-zinc-100 dark:hover:bg-neutral-600 text-black dark:text-neutral-400'
+    );
     // For items with onClick handler or external links, use a button
     if (item.onClick || item.external) {
       return (
         <Tooltip>
           <TooltipTrigger asChild>
             <button
-              className={baseButtonClasses}
+              className={itemClasses}
               onClick={
                 item.onClick || (item.external ? () => window.open(item.href, '_blank') : undefined)
               }
@@ -108,7 +116,7 @@ export function PrimaryMenu({
     return (
       <Tooltip>
         <TooltipTrigger asChild>
-          <Link to={item.href} className={baseButtonClasses}>
+          <Link to={item.href} className={itemClasses}>
             <div className="absolute left-2 h-5 w-5">
               <item.icon className="w-5 h-5" />
             </div>
@@ -132,13 +140,13 @@ export function PrimaryMenu({
     <TooltipProvider disableHoverableContent delayDuration={300}>
       <aside
         className={cn(
-          'bg-white dark:bg-neutral-800 border-r border-gray-200 dark:border-neutral-700 flex flex-col flex-shrink-0 pt-2 pb-6 px-2',
+          'bg-white dark:bg-neutral-800 border-r border-gray-200 dark:border-neutral-700 flex flex-col flex-shrink-0 pt-2 pb-6 pl-2',
           'transition-[width] duration-300 ease-in-out overflow-hidden',
           isCollapsed ? 'w-[52px]' : 'w-[200px]'
         )}
       >
         {/* Top navigation items with separators */}
-        <nav className="flex flex-col gap-2">
+        <nav className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden pr-2 w-full">
           {items.map((item) => (
             <div key={item.id}>
               <MenuItem item={item} />

package/frontend/src/components/radix/Select.tsx

@@ -1,151 +1,151 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@/lib/utils/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background text-black dark:text-white data-[placeholder]:text-muted-foreground dark:data-[placeholder]:text-neutral-400 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50 dark:text-white" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border-gray dark:border-transparent bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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',
-        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',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <div className="flex-1 w-full">{children}</div>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background text-black dark:text-white data-[placeholder]:text-muted-foreground dark:data-[placeholder]:text-neutral-400 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50 dark:text-white" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border-gray dark:border-transparent bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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',
+        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',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <div className="flex-1 w-full">{children}</div>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};