init approach 2

apps/studio-prototype/src/app/[org]/[project]/table-editor/tabs-header.tsx

@@ -176,7 +176,9 @@ const Tab = ({
         'transition-all'
       )}
       aria-current={active}
-      onClick={() => router.push(`/${config.selectedOrg?.key}/table-editor/${id}`)}
+      onClick={() =>
+        router.push(`/${config.selectedOrg?.key}/${config.selectedProject?.key}/table-editor/${id}`)
+      }
     >
       <div className="flex items-center gap-1.5">
         <div className="w-5 h-5 flex items-center justify-center">

apps/studio-prototype/src/app/[org]/layout.tsx

@@ -1,9 +1,8 @@
 import RedirectCatcher from '@/src/components/redirect-catcher'
-import SettingsMenuPanel from './settings-menu-panel'
-import TopHeader from './top-header'
-import { motion } from 'framer-motion'
 import EntranceTransition from './entrance-transition'
 import ProjectContentTransition from './project-content-transition'
+import SettingsMenuPanel from './settings-menu-panel'
+import SideNav from './side-nav'
 
 export default function OrgLayout({
   children,
@@ -12,10 +11,11 @@ export default function OrgLayout({
 }>) {
   return (
     <div className="w-screen h-screen flex">
+      <SideNav />
       <EntranceTransition>
         <SettingsMenuPanel />
         <div className="flex flex-col grow">
-          <TopHeader />
+          {/* <TopHeader /> */}
           <ProjectContentTransition>{children}</ProjectContentTransition>
         </div>
       </EntranceTransition>

apps/studio-prototype/src/app/[org]/org-menu.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { Org, orgs } from '@/src/config/org'
+import { useConfig } from '@/src/hooks/use-config'
+import { Boxes, Building2, Check } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Button, CommandSeparator_Shadcn_, ScrollArea, ScrollBar, cn } from 'ui'
+
+import {
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  Command_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+export default function OrgMenu() {
+  const [open, setOpenState] = useState(false)
+  const [config, setConfig] = useConfig()
+
+  const router = useRouter()
+
+  const { selectedOrg, db } = config
+
+  return (
+    <>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpenState}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button size="tiny" type="default" icon={<Building2 />}>
+            {config?.selectedOrg?.name}
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="w-[320px] p-0" side="right" align="start" sideOffset={8}>
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Search organizations..." />
+            <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              <ScrollArea className="max-h-[128px] overflow-y-auto">
+                {orgs.map((org) => (
+                  <CommandItem_Shadcn_
+                    key={org.key}
+                    value={org.key}
+                    onSelect={(currentValue) => {
+                      console.log('about to push')
+                      setConfig({
+                        ...config,
+                        selectedOrg: db.orgs.find((o: Org) => o.key === currentValue),
+                        selectedProject: db?.orgs?.find((o: Org) => o.key === currentValue)
+                          ?.projects[0],
+                        selectedEnv: db?.orgs?.find((o: Org) => o.key === currentValue)?.projects[0]
+                          .branches[0] ?? {
+                          name: 'main',
+                          type: 'prod',
+                          key: 'main',
+                        },
+                      })
+                      setOpenState(false)
+                    }}
+                    className="flex items-center justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div
+                        className={cn(
+                          'w-[26px] h-[26px] border bg-foreground rounded-md',
+                          'flex items-center justify-center text-background text-xs font-semibold'
+                        )}
+                      >
+                        {org.name?.slice(0, 2).toUpperCase()}
+                      </div>
+                      <span className="truncate">{org.name}</span>
+                    </div>
+                    <div
+                      className={cn(
+                        'w-4 h-4 bg-foreground rounded-full',
+                        'flex items-center justify-center',
+                        selectedOrg?.key === org.key ? 'opacity-100' : 'opacity-0'
+                      )}
+                    >
+                      <Check className={cn('h-2 w-2 text-background')} strokeWidth={5} />
+                    </div>
+                  </CommandItem_Shadcn_>
+                ))}
+                <ScrollBar />
+              </ScrollArea>
+            </CommandGroup_Shadcn_>
+            <CommandSeparator_Shadcn_ />
+            <CommandGroup_Shadcn_>
+              <CommandItem_Shadcn_ onSelect={() => router.push('/new')}>
+                New organization
+              </CommandItem_Shadcn_>
+            </CommandGroup_Shadcn_>
+            <CommandSeparator_Shadcn_ />
+            <CommandGroup_Shadcn_>
+              <Link href={`/${selectedOrg?.key}/settings/general`}>
+                <CommandItem_Shadcn_ onSelect={() => setOpenState(false)} value="Settings">
+                  Organization Settings
+                </CommandItem_Shadcn_>
+              </Link>
+              <CommandItem_Shadcn_ value="Members">Members</CommandItem_Shadcn_>
+              <CommandItem_Shadcn_ value="Billing">Billing</CommandItem_Shadcn_>
+            </CommandGroup_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
+  )
+}

apps/studio-prototype/src/app/[org]/settings-menu-panel.tsx

@@ -6,9 +6,9 @@ import SettingsMenuChildren from './settings-menu-children'
 import { ClickCounter } from './click-counter'
 
 export default function SettingsMenuPanel() {
-  const { org } = useParams()
+  const { org, project } = useParams()
   const pathname = usePathname()
-  const isActive = pathname.startsWith(`/${org}/settings`)
+  const isActive = pathname.startsWith(`/${org}/${project}/settings`)
 
   return (
     <div

apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx

@@ -10,7 +10,7 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
   const [config] = useConfig()
   const { selectedOrg, selectedProject } = config
   const pathname = usePathname()
-  const isActive = pathname.startsWith(`/${org}${product.href}`)
+  const isActive = pathname.startsWith(`/${org}/${selectedProject?.key}${product.href}`)
 
   // console.log('config.tableEditor.activeTabId', config.tableEditor.activeTabId)
 
@@ -20,16 +20,16 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
    */
   let overrideHref = null
   if (product.name === 'settings') {
-    overrideHref = `/${selectedOrg?.key}/settings/project/${selectedProject?.key}/general`
+    overrideHref = `/${selectedOrg?.key}/${selectedProject?.key}/settings/project/${selectedProject?.key}/general`
   }
   if (product.name === 'table-editor' && config.tableEditor.activeTabId) {
-    overrideHref = `/${selectedOrg?.key}/table-editor/${config.tableEditor.activeTabId}`
+    overrideHref = `/${selectedOrg?.key}/${selectedProject?.key}/table-editor/${config.tableEditor.activeTabId}`
   }
 
   return (
     <Link
       key={product.name}
-      href={overrideHref || `/${org}${product.href}`}
+      href={overrideHref || `/${org}/${selectedProject?.key}${product.href}`}
       className={cn('relative', 'w-full', 'group/nav-item-anchor', 'flex flex-col items-center')}
       aria-current={isActive ? 'page' : undefined}
     >

apps/studio-prototype/src/app/[org]/side-nav.tsx

@@ -1,16 +1,15 @@
-import SideNavMenuIcon from './side-nav-menu-icon'
-import UserMenu from './user-menu'
 import { SideNav as SideNavData } from '@/src/config/nav'
-import SideMenuOrgMenu from './side-menu-org-menu'
-import SideNavMotion from './side-nav-motion'
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { Separator } from 'ui'
+import SideMenuOrgMenu from './side-menu-org-menu'
+import SideNavMenuIcon from './side-nav-menu-icon'
+import SideNavMotion from './side-nav-motion'
 
 function SideNav() {
   return (
     <SideNavMotion>
-      <SideMenuOrgMenu />
-      <div className="grow w-full flex flex-col my-6 gap-6">
+      {/* <SideMenuOrgMenu /> */}
+      <div className="grow w-full flex flex-col my-5 gap-6">
         {SideNavData.map((group, i) => {
           return (
             <>
@@ -24,7 +23,6 @@ function SideNav() {
           )
         })}
       </div>
-      <UserMenu />
     </SideNavMotion>
   )
 }

apps/studio-prototype/src/app/[org]/top-header.tsx

@@ -2,10 +2,13 @@
 
 import { useConfig } from '@/src/hooks/use-config'
 import { resolveHideBranchesDropdown, resolveHideProjectsDropdown } from '@/src/utils/url-resolver'
+import { LifeBuoy, MessageCircle } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 import { Button, cn } from 'ui'
 import { BranchMenu } from './branch-menu'
-import { LifeBuoy, MessageCircle } from 'lucide-react'
+import UserMenu from './user-menu'
+import SideMenuOrgMenu from './side-menu-org-menu'
+import OrgMenu from './org-menu'
 
 export default function TopHeader() {
   const pathName = usePathname()
@@ -34,7 +37,7 @@ export default function TopHeader() {
     <div
       className={cn(
         'relative',
-        'w-full px-3 py-2.5',
+        'w-full px-5',
         !isHome && 'bg-dash-sidebar',
         isPreview
           ? 'bg-[#05A5FF]/5 items-start flex flex-col gap-3 h-[80px] delay-500'
@@ -43,16 +46,67 @@ export default function TopHeader() {
       )}
     >
       <div className="flex items-center justify-between w-full">
-        <div className="flex items-center -space-x-px">
-          <BranchMenu />
+        <div className="flex gap-3">
+          <svg
+            width="109"
+            height="113"
+            viewBox="0 0 109 113"
+            fill="none"
+            className="w-6 h-6 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+              fill="url(#paint0_linear)"
+            />
+            <path
+              d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+              fill="url(#paint1_linear)"
+              fillOpacity="0.2"
+            />
+            <path
+              d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
+              fill="#3ECF8E"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear"
+                x1="53.9738"
+                y1="54.974"
+                x2="94.1635"
+                y2="71.8295"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#249361" />
+                <stop offset="1" stopColor="#3ECF8E" />
+              </linearGradient>
+              <linearGradient
+                id="paint1_linear"
+                x1="36.1558"
+                y1="30.578"
+                x2="54.4844"
+                y2="65.0806"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop />
+                <stop offset="1" stopOpacity="0" />
+              </linearGradient>
+            </defs>
+          </svg>
+          {/* <SideMenuOrgMenu /> */}
+          <OrgMenu />
+          <div className="flex items-center -space-x-px">
+            <BranchMenu />
+          </div>
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-3 h-[46px] items-center">
           <Button type="default" icon={<MessageCircle />}>
             Feedback
           </Button>
           <Button type="default" icon={<LifeBuoy />}>
             Help
           </Button>
+          <UserMenu />
         </div>
       </div>
       {/* {isPreview && (, */}

apps/studio-prototype/src/app/[org]/user-menu.tsx

@@ -15,51 +15,49 @@ import ThemeSwitcher from './theme-switcher'
 
 export default function UserMenu() {
   return (
-    <div>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button>
-            <Image
-              src="https://avatars.githubusercontent.com/u/8291514?v=4"
-              alt="avatar"
-              width={16}
-              height={16}
-              className="w-8 h-8 rounded-full"
-            />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="top" align="start">
-          <div className="p-2 flex gap-3 items-center">
-            <Image
-              src="https://avatars.githubusercontent.com/u/8291514?v=4"
-              alt="avatar"
-              width={16}
-              height={16}
-              className="w-8 h-8 rounded-full"
-            />
-            <div className="flex flex-col gap-0">
-              <span className="text-sm text-foreground-light truncate">Jonathan Summers-Muir</span>
-              <span className="text-xs text-foreground-lighter truncate">
-                jon.summers.muir@gmail.com
-              </span>
-            </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button>
+          <Image
+            src="https://avatars.githubusercontent.com/u/8291514?v=4"
+            alt="avatar"
+            width={15}
+            height={15}
+            className="w-7 h-7 rounded-full"
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" align="end">
+        <div className="p-2 flex gap-3 items-center">
+          <Image
+            src="https://avatars.githubusercontent.com/u/8291514?v=4"
+            alt="avatar"
+            width={16}
+            height={16}
+            className="w-8 h-8 rounded-full"
+          />
+          <div className="flex flex-col gap-0">
+            <span className="text-sm text-foreground-light truncate">Jonathan Summers-Muir</span>
+            <span className="text-xs text-foreground-lighter truncate">
+              jon.summers.muir@gmail.com
+            </span>
           </div>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Account settings</DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <span>Theme</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <ThemeSwitcher />
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Log out</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Account settings</DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span>Theme</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <ThemeSwitcher />
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

apps/studio-prototype/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { ThemeProvider } from './Providers'
 import SideNav from './[org]/side-nav'
+import TopHeader from './[org]/top-header'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -24,8 +25,9 @@ export default function RootLayout({
           defaultTheme="deep-dark"
           enableSystem
         >
-          <main className="h-screen w-screen flex">
-            <SideNav />
+          <main className="h-screen w-screen flex flex-col">
+            <TopHeader />
+            {/* <SideNav /> */}
             {children}
           </main>
         </ThemeProvider>

apps/studio-prototype/src/config/nav.tsx

@@ -37,12 +37,12 @@ const iconsClasses = cn(
 
 const SideNav = [
   [
-    {
-      name: 'projects',
-      label: 'Projects',
-      icon: <Boxes strokeWidth={STROKE_WIDTH} className={iconsClasses} size={ICON_SIZE} />,
-      href: '/projects',
-    },
+    // {
+    //   name: 'projects',
+    //   label: 'Projects',
+    //   icon: <Boxes strokeWidth={STROKE_WIDTH} className={iconsClasses} size={ICON_SIZE} />,
+    //   href: '/projects',
+    // },
     {
       name: 'table-editor',
       label: 'Table Editor',

package-lock.json

@@ -13306,9 +13306,9 @@
       }
     },
     "node_modules/@storybook/csf": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.8.tgz",
-      "integrity": "sha512-Ntab9o7LjBCbFIao5l42itFiaSh/Qu+l16l/r/9qmV9LnYZkO+JQ7tzhdlwpgJfhs+B5xeejpdAtftDRyXNajw==",
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.11.tgz",
+      "integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^2.19.0"
@@ -14006,9 +14006,9 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
-      "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==",
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.5.tgz",
+      "integrity": "sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==",
       "dev": true,
       "dependencies": {
         "@adobe/css-tools": "^4.3.2",
@@ -14017,7 +14017,7 @@
         "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.6.3",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.21",
         "redent": "^3.0.0"
       },
       "engines": {
@@ -14619,9 +14619,10 @@
       }
     },
     "node_modules/@types/express": {
-      "version": "4.17.18",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
+      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.33",
@@ -15381,6 +15382,19 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
+      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
+      "dependencies": {
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
+        "chai": "^4.3.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@vitest/runner": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
@@ -18034,6 +18048,11 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
+      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA=="
+    },
     "node_modules/config": {
       "resolved": "packages/config",
       "link": true
@@ -26062,6 +26081,7 @@
     },
     "node_modules/jsonc-parser": {
       "version": "3.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsonfile": {
@@ -26747,9 +26767,10 @@
       }
     },
     "node_modules/markdown-to-jsx": {
-      "version": "7.3.2",
+      "version": "7.4.7",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz",
+      "integrity": "sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 10"
       },
@@ -31031,14 +31052,14 @@
       "peer": true
     },
     "node_modules/mlly": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
-      "integrity": "sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
+      "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
       "dependencies": {
         "acorn": "^8.11.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.0.3",
-        "ufo": "^1.3.2"
+        "pkg-types": "^1.1.1",
+        "ufo": "^1.5.3"
       }
     },
     "node_modules/mobx": {
@@ -33229,8 +33250,9 @@
       "license": "MIT"
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "license": "ISC"
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -33290,13 +33312,13 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.3.tgz",
+      "integrity": "sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==",
       "dependencies": {
-        "jsonc-parser": "^3.2.0",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0"
+        "confbox": "^0.1.7",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2"
       }
     },
     "node_modules/playwright": {
@@ -40227,9 +40249,9 @@
       "license": "MIT"
     },
     "node_modules/ufo": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
-      "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ=="
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ=="
     },
     "node_modules/uglify-js": {
       "version": "3.17.4",
@@ -40616,12 +40638,6 @@
         "webpack-virtual-modules": "^0.6.1"
       }
     },
-    "node_modules/unplugin/node_modules/webpack-virtual-modules": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
-      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
-      "dev": true
-    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "dev": true,
@@ -41770,19 +41786,6 @@
         }
       }
     },
-    "node_modules/vitest/node_modules/@vitest/expect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
-      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
-      "dependencies": {
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "chai": "^4.3.10"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/vitest/node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -42112,6 +42115,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true
+    },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "license": "BSD-2-Clause",

packages/ui/build/css/themes/deep-dark.css

@@ -29,7 +29,7 @@
   --destructive-400: 6.7deg 60% 20.6%;
   --destructive-300: 7.5deg 51.3% 15.3%;
   --destructive-200: 10.9deg 23.4% 9.2%;
-  --border-stronger: 0deg 0% 22%;
+  --border-stronger: 0deg 0% 27.1%;
   --border-strong: 0deg 0% 21.2%;
   --border-alternative: 0deg 0% 26.7%;
   --border-control: 0deg 0% 22.4%;

packages/ui/build/css/tw-extend/color.js

@@ -493,7 +493,7 @@ module.exports = {
 },
 "border-DEFAULT": {
   cssVariable: "var(--border-default)",
-  value: "hsl(0, 0%, 16.1%)"
+  value: "hsl(0, 0%, 18%)"
 },
 "border-muted": {
   cssVariable: "var(--border-muted)",
@@ -521,7 +521,7 @@ module.exports = {
 },
 "border-stronger": {
   cssVariable: "var(--border-stronger)",
-  value: "hsl(0, 0%, 22%)"
+  value: "hsl(0, 0%, 27.1%)"
 },
 "border-button-DEFAULT": {
   cssVariable: "var(--border-button-default)",