polen 0.8.2-next.1 → 0.9.0-next.2

package/src/lib/kit-temp.ts

@@ -59,3 +59,39 @@ export interface ImportEvent {
   specifier: string
   context: ResolveHookContext
 }
+
+export const ObjPick = <T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K> => {
+  return keys.reduce((acc, key) => {
+    if (key in obj) {
+      acc[key] = obj[key]
+    }
+    return acc
+  }, {} as Pick<T, K>)
+}
+
+export const ObjOmit = <T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Omit<T, K> => {
+  return keys.reduce((acc, key) => {
+    if (key in acc) {
+      // @ts-expect-error omitted already at type level
+      delete acc[key]
+    }
+    return acc
+  }, { ...obj } as Omit<T, K>)
+}
+
+export const ObjPartition = <T extends object, K extends keyof T>(
+  obj: T,
+  keys: readonly K[],
+): { omitted: Omit<T, K>; picked: Pick<T, K> } => {
+  return keys.reduce((acc, key) => {
+    if (key in acc.omitted) {
+      // @ts-expect-error omitted already at type level
+      delete acc.omitted[key]
+      acc.picked[key] = obj[key]
+    }
+    return acc
+  }, {
+    omitted: { ...obj } as Omit<T, K>,
+    picked: {} as Pick<T, K>,
+  })
+}

package/src/template/components/Link.tsx

@@ -1,15 +1,62 @@
 import type { FC } from 'react'
 import type { LinkProps as LinkPropsReactRouter } from 'react-router'
-import { Link as LinkReactRouter } from 'react-router'
+import { Link as LinkReactRouter, useLocation } from 'react-router'
+// todo: #lib/kit-temp does not work as import
+import { ObjPartition } from '../../lib/kit-temp.js'
 import type { LinkPropsRadix } from './RadixLink.jsx'
 import { LinkRadix } from './RadixLink.jsx'
 
-export const Link: FC<LinkPropsReactRouter & LinkPropsRadix> = props => {
-  const { underline, color, m, mt, mb, ml, mr, my, mx } = props
-  const radixProps = { underline, color, m, mt, mb, ml, mr, my, mx }
+const reactRouterPropKeys = [
+  'discover',
+  'prefetch',
+  'reloadDocument',
+  'replace',
+  'state',
+  'preventScrollReset',
+  'relative',
+  'to',
+  'viewTransition',
+  'children',
+] as const
+
+export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> = props => {
+  const location = useLocation()
+  const toPathExp = typeof props.to === 'string' ? props.to : props.to.pathname || ''
+  const active = getPathActiveReport(toPathExp, location.pathname)
+
+  const { picked: reactRouterProps, omitted: radixProps } = ObjPartition(props, reactRouterPropKeys)
+
   return (
-    <LinkRadix asChild {...radixProps}>
-      <LinkReactRouter {...props}></LinkReactRouter>
+    <LinkRadix
+      asChild
+      {...radixProps}
+      data-active={active.is || undefined}
+      data-active-direct={active.isDirect || undefined}
+      data-active-descendant={active.isdescendant || undefined}
+    >
+      <LinkReactRouter {...reactRouterProps} />
     </LinkRadix>
   )
 }
+
+export interface PathActiveReport {
+  is: boolean
+  isDirect: boolean
+  isdescendant: boolean
+}
+
+export const getPathActiveReport = (
+  pathExp: string,
+  currentPathExp: string,
+): PathActiveReport => {
+  // Normalize paths for comparison - remove leading slash if present
+  const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
+  const isDirect = normalizedCurrentPath === pathExp
+  const isdescendant = normalizedCurrentPath.startsWith(pathExp)
+  const is = isDirect || isdescendant
+  return {
+    is,
+    isDirect,
+    isdescendant,
+  }
+}

package/src/template/components/Texts/MinorHeading.tsx

@@ -0,0 +1,18 @@
+import type { React } from '#dep/react/index'
+import { Text, type TextProps } from '@radix-ui/themes'
+
+export const MinorHeading: React.FC<TextProps> = (props) => {
+  return (
+    <Text
+      {...props}
+      weight='bold'
+      style={{
+        ...props.style,
+        color: 'var(--accent-10)',
+        fontSize: '0.6rem',
+        letterSpacing: '0.025rem',
+        textTransform: 'uppercase',
+      }}
+    />
+  )
+}

package/src/template/components/Texts/index.ts

@@ -0,0 +1 @@
+export * as Texts from './texts.ts'

package/src/template/components/Texts/texts.ts

@@ -0,0 +1 @@
+export * from './MinorHeading.tsx'

package/src/template/components/sidebar/Sidebar.tsx

@@ -0,0 +1,26 @@
+import type { FileRouter } from '#lib/file-router/index'
+import { Box } from '@radix-ui/themes'
+import { Items } from './SidebarItem.tsx'
+
+interface SidebarProps {
+  items: FileRouter.Sidebar.Item[]
+}
+
+export const Sidebar = ({ items }: SidebarProps) => {
+  return (
+    <Box
+      data-testid='sidebar'
+      role='Sidebar'
+      flexShrink='0'
+    >
+      <style>
+        {`
+          div[role="Sidebar"] a:not([data-active]):hover {
+            background-color: var(--iris-2) !important;
+          }
+        `}
+      </style>
+      <Items items={items} />
+    </Box>
+  )
+}

package/src/template/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,156 @@
+import type { React } from '#dep/react/index'
+import type { FileRouter } from '#lib/file-router/index'
+import { Texts } from '#template/components/Texts/index'
+import { Box, Flex, Text } from '@radix-ui/themes'
+import { useLocation } from 'react-router'
+import { getPathActiveReport, Link } from '../Link.tsx'
+
+export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items }) => {
+  return (
+    <Flex direction='column' gap='2px'>
+      {items.map((item) => (
+        <Item
+          key={item.pathExp}
+          item={item}
+        />
+      ))}
+    </Flex>
+  )
+}
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • SidebarItem
+//
+//
+
+export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
+  if (item.type === `ItemLink`) {
+    return <SBLink link={item} />
+  }
+
+  if (item.type === 'ItemSection' && item.isLinkToo) {
+    return <LinkedSection section={item} />
+  }
+
+  return <Section section={item} />
+}
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • SidebarItemLink
+//
+//
+
+const SBLink: React.FC<{
+  link: FileRouter.Sidebar.ItemLink | FileRouter.Sidebar.ItemSection
+}> = ({ link }) => {
+  const location = useLocation()
+  const currentPathExp = location.pathname
+  const active = getPathActiveReport(link.pathExp, currentPathExp)
+
+  return (
+    <Link
+      role='Sidebar Link'
+      color={active.is ? `iris` : `gray`}
+      data-testid={`sidebar-link-${link.pathExp}`}
+      to={`/${link.pathExp}`}
+      style={{
+        display: `block`,
+        textDecoration: `none`,
+        color: active.is ? `var(--accent-12)` : undefined,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
+        borderRadius: `var(--radius-2)`,
+      }}
+    >
+      <Box py='2' px='4'>{link.title}</Box>
+    </Link>
+  )
+}
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Section
+//
+//
+
+const Section: React.FC<{
+  section: FileRouter.Sidebar.ItemSection
+}> = ({ section }) => {
+  return (
+    <Box mt='8'>
+      <Box ml='4' mb='2'>
+        <Texts.MinorHeading color='gray'>
+          {section.title}
+        </Texts.MinorHeading>
+      </Box>
+      <Items items={section.links} />
+    </Box>
+  )
+}
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • LinkedSection
+//
+//
+
+const LinkedSection: React.FC<{
+  section: FileRouter.Sidebar.ItemSection
+}> = ({ section }) => {
+  return (
+    <Box>
+      <SBLink link={section} />
+      {
+        <Flex
+          direction='column'
+          gap='2'
+          id={`section-${section.pathExp.replace(/\//g, '-')}`}
+          role='group'
+          ml='5'
+          py='2px'
+          style={{
+            borderLeft: `1px solid var(--gray-5)`,
+          }}
+        >
+          {section.links.map((link) => (
+            <SectionLink
+              key={link.pathExp}
+              link={link}
+            />
+          ))}
+        </Flex>
+      }
+    </Box>
+  )
+}
+
+const SectionLink: React.FC<{ link: FileRouter.Sidebar.ItemLink }> = ({ link }) => {
+  const location = useLocation()
+  const active = getPathActiveReport(link.pathExp, location.pathname)
+
+  return (
+    <Link
+      role='Sidebar Link'
+      to={'/' + link.pathExp}
+      color={active.is ? `iris` : `gray`}
+      style={{
+        textDecoration: `none`,
+        color: active.is ? `var(--accent-12)` : undefined,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
+        borderBottomRightRadius: `var(--radius-2)`,
+        borderTopRightRadius: `var(--radius-2)`,
+      }}
+    >
+      <Box py='2' px='4'>{link.title}</Box>
+    </Link>
+  )
+}

package/src/template/components/sidebar/ToggleButton.tsx

@@ -0,0 +1,12 @@
+import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { Button } from '@radix-ui/themes'
+
+export const ToggleButton = ({ isExpanded, toggleExpanded }: { isExpanded: boolean; toggleExpanded: () => void }) => (
+  <Button
+    variant='ghost'
+    onClick={toggleExpanded}
+    aria-expanded={isExpanded}
+  >
+    {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+  </Button>
+)

package/src/template/routes/root.tsx

@@ -11,7 +11,7 @@ import { PROJECT_DATA } from 'virtual:polen/project/data'
 import { pages } from 'virtual:polen/project/pages.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
 import { Link } from '../components/Link.jsx'
-import { Sidebar } from '../components/Sidebar.jsx'
+import { Sidebar } from '../components/sidebar/Sidebar.tsx'
 import entryClientUrl from '../entry.client.jsx?url'
 import { changelog } from './changelog.jsx'
 import { index } from './index.jsx'
@@ -74,7 +74,6 @@ const Layout = () => {
   const currentNavPathExp = getCurrentNavPathExp()
   const sidebar = currentNavPathExp && PROJECT_DATA.sidebarIndex[currentNavPathExp]
   const showSidebar = sidebar && sidebar.items.length > 0
-
   return (
     <Theme asChild>
       <Box m='8'>

package/build/template/components/Sidebar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMxD,UAAU,YAAY;IACpB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,GAAI,WAAW,YAAY,gCA+C9C,CAAA"}

package/build/template/components/Sidebar.jsx

@@ -1,115 +0,0 @@
-import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';
-import { Box, Flex, Text } from '@radix-ui/themes';
-import { useState } from 'react';
-import { Link, useLocation } from 'react-router';
-export const Sidebar = ({ items }) => {
-    const location = useLocation();
-    return (<Box data-testid='sidebar' style={{
-            width: `240px`,
-            minWidth: `240px`,
-            flexShrink: 0,
-            borderRight: `1px solid var(--gray-3)`,
-            height: `100%`,
-            paddingRight: `var(--space-4)`,
-        }}>
-      <style>
-        {`
-          /* Using data attributes - more idiomatic for Radix UI */
-          .sidebar-nav-item:hover:not([data-active]) {
-            background-color: var(--gray-2) !important;
-          }
-          .sidebar-section:hover:not([data-active]):not([data-active-child]) {
-            background-color: var(--gray-2) !important;
-          }
-
-          /* Alternative with class names (current approach) */
-          /*
-          .sidebar-nav-item:hover:not(.active) {
-            background-color: var(--gray-2) !important;
-          }
-          .sidebar-section:hover:not(.active):not(.has-active-child) {
-            background-color: var(--gray-2) !important;
-          }
-          */
-        `}
-      </style>
-      <Flex direction='column' gap='1'>
-        {items.map((item) => (<SidebarItem key={item.pathExp} item={item} currentPathExp={location.pathname}/>))}
-      </Flex>
-    </Box>);
-};
-const SidebarItem = ({ item, currentPathExp, level = 0 }) => {
-    if (item.type === `ItemLink`) {
-        return <SidebarItemLink nav={item} currentPathExp={currentPathExp} level={level}/>;
-    }
-    return <SidebarItemSection section={item} currentPathExp={currentPathExp} level={level}/>;
-};
-const SidebarItemLink = ({ nav, currentPathExp, level }) => {
-    // Normalize paths for comparison - remove leading slash if present
-    const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp;
-    const isActive = normalizedCurrentPath === nav.pathExp;
-    return (<Link to={`/${nav.pathExp}`} data-active={isActive || undefined} className='sidebar-nav-item' style={{
-            textDecoration: `none`,
-            color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
-            padding: `var(--space-2) var(--space-3)`,
-            paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
-            borderRadius: `var(--radius-2)`,
-            display: `block`,
-            backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
-            transition: `background-color 0.2s ease, color 0.2s ease`,
-        }}>
-      <Text size='2' weight={isActive ? `medium` : `regular`}>
-        {nav.title}
-      </Text>
-    </Link>);
-};
-const SidebarItemSection = ({ section, currentPathExp, level }) => {
-    const [isExpanded, setIsExpanded] = useState(true);
-    // Normalize paths for comparison - remove leading slash if present
-    const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp;
-    const isDirectlyActive = normalizedCurrentPath === section.pathExp;
-    const hasActiveChild = section.navs.some(nav => normalizedCurrentPath === nav.pathExp);
-    const isActiveGroup = isDirectlyActive || hasActiveChild;
-    return (<>
-      <Flex align='center' data-active={isDirectlyActive || undefined} data-active-child={hasActiveChild || undefined} className='sidebar-section' style={{
-            padding: `var(--space-2) var(--space-3)`,
-            paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
-            borderRadius: `var(--radius-2)`,
-            backgroundColor: isDirectlyActive ? `var(--accent-3)` : hasActiveChild ? `var(--accent-2)` : `transparent`,
-            transition: `background-color 0.2s ease`,
-        }}>
-        <Box onClick={() => {
-            setIsExpanded(!isExpanded);
-        }} style={{
-            display: `flex`,
-            alignItems: `center`,
-            cursor: `pointer`,
-            padding: `4px`,
-            marginRight: `4px`,
-            marginLeft: `-4px`,
-        }}>
-          {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
-        </Box>
-        {section.isNavToo
-            ? (<Link to={`/${section.pathExp}`} style={{
-                    textDecoration: `none`,
-                    color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
-                    flex: 1,
-                }}>
-              <Text size='2' weight={isDirectlyActive ? `bold` : `medium`}>
-                {section.title}
-              </Text>
-            </Link>)
-            : (<Text size='2' weight={isDirectlyActive ? `bold` : `medium`} style={{
-                    flex: 1,
-                    color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
-                }}>
-              {section.title}
-            </Text>)}
-      </Flex>
-      {isExpanded && (<Flex direction='column' gap='1'>
-          {section.navs.map((nav) => (<SidebarItemLink key={nav.pathExp} nav={nav} currentPathExp={currentPathExp} level={level + 1}/>))}
-        </Flex>)}
-    </>);
-};
-//# sourceMappingURL=Sidebar.jsx.map

package/build/template/components/Sidebar.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Sidebar.jsx","sourceRoot":"","sources":["../../../src/template/components/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACzE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAMhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAE,EAAE;IACjD,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,SAAS,CACrB,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,CAAC;YACb,WAAW,EAAE,yBAAyB;YACtC,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,gBAAgB;SAC/B,CAAC,CAEF;MAAA,CAAC,KAAK,CACJ;QAAA,CAAC;;;;;;;;;;;;;;;;;;SAkBA,CACH;MAAA,EAAE,KAAK,CACP;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAC9B;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAClB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,cAAc,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAClC,CACH,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAG,CAAC,EAAoB,EAAE,EAAE;IAC5E,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QAC7B,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAA;IACrF,CAAC;IAED,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAA;AAC5F,CAAC,CAAA;AAQD,MAAM,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,cAAc,EAAE,KAAK,EAAwB,EAAE,EAAE;IAC/E,mEAAmE;IACnE,MAAM,qBAAqB,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA;IACvG,MAAM,QAAQ,GAAG,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAA;IAEtD,OAAO,CACL,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC,CACtB,WAAW,CAAC,CAAC,QAAQ,IAAI,SAAS,CAAC,CACnC,SAAS,CAAC,kBAAkB,CAC5B,KAAK,CAAC,CAAC;YACL,cAAc,EAAE,MAAM;YACtB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB;YACvD,OAAO,EAAE,+BAA+B;YACxC,WAAW,EAAE,yBAAyB,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK;YAClE,YAAY,EAAE,iBAAiB;YAC/B,OAAO,EAAE,OAAO;YAChB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;YAC7D,UAAU,EAAE,6CAA6C;SAC1D,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CACrD;QAAA,CAAC,GAAG,CAAC,KAAK,CACZ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,kBAAkB,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAA2B,EAAE,EAAE;IACzF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClD,mEAAmE;IACnE,MAAM,qBAAqB,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA;IACvG,MAAM,gBAAgB,GAAG,qBAAqB,KAAK,OAAO,CAAC,OAAO,CAAA;IAClE,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC,CAAA;IACtF,MAAM,aAAa,GAAG,gBAAgB,IAAI,cAAc,CAAA;IAExD,OAAO,CACL,EACE;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,QAAQ,CACd,WAAW,CAAC,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAC3C,iBAAiB,CAAC,CAAC,cAAc,IAAI,SAAS,CAAC,CAC/C,SAAS,CAAC,iBAAiB,CAC3B,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,+BAA+B;YACxC,WAAW,EAAE,yBAAyB,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK;YAClE,YAAY,EAAE,iBAAiB;YAC/B,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;YAC1G,UAAU,EAAE,4BAA4B;SACzC,CAAC,CAEF;QAAA,CAAC,GAAG,CACF,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;QAC5B,CAAC,CAAC,CACF,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,MAAM;SACnB,CAAC,CAEF;UAAA,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,AAAD,EAAG,CAC1D;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,OAAO,CAAC,QAAQ;YACf,CAAC,CAAC,CACA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC,CAC1B,KAAK,CAAC,CAAC;oBACL,cAAc,EAAE,MAAM;oBACtB,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB;oBAC/D,IAAI,EAAE,CAAC;iBACR,CAAC,CAEF;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC1D;gBAAA,CAAC,OAAO,CAAC,KAAK,CAChB;cAAA,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CAAC,CACR;YACD,CAAC,CAAC,CACA,CAAC,IAAI,CACH,IAAI,CAAC,GAAG,CACR,MAAM,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC7C,KAAK,CAAC,CAAC;oBACL,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB;iBAChE,CAAC,CAEF;cAAA,CAAC,OAAO,CAAC,KAAK,CAChB;YAAA,EAAE,IAAI,CAAC,CACR,CACL;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,UAAU,IAAI,CACb,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAC9B;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzB,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CACjB,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,EACjB,CACH,CAAC,CACJ;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"}

package/src/template/components/Sidebar.tsx

@@ -1,194 +0,0 @@
-import type { FileRouter } from '#lib/file-router/index'
-import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import { Box, Flex, Text } from '@radix-ui/themes'
-import { useState } from 'react'
-import { Link, useLocation } from 'react-router'
-
-interface SidebarProps {
-  items: FileRouter.Sidebar.Item[]
-}
-
-export const Sidebar = ({ items }: SidebarProps) => {
-  const location = useLocation()
-
-  return (
-    <Box
-      data-testid='sidebar'
-      style={{
-        width: `240px`,
-        minWidth: `240px`,
-        flexShrink: 0,
-        borderRight: `1px solid var(--gray-3)`,
-        height: `100%`,
-        paddingRight: `var(--space-4)`,
-      }}
-    >
-      <style>
-        {`
-          /* Using data attributes - more idiomatic for Radix UI */
-          .sidebar-nav-item:hover:not([data-active]) {
-            background-color: var(--gray-2) !important;
-          }
-          .sidebar-section:hover:not([data-active]):not([data-active-child]) {
-            background-color: var(--gray-2) !important;
-          }
-
-          /* Alternative with class names (current approach) */
-          /*
-          .sidebar-nav-item:hover:not(.active) {
-            background-color: var(--gray-2) !important;
-          }
-          .sidebar-section:hover:not(.active):not(.has-active-child) {
-            background-color: var(--gray-2) !important;
-          }
-          */
-        `}
-      </style>
-      <Flex direction='column' gap='1'>
-        {items.map((item) => (
-          <SidebarItem
-            key={item.pathExp}
-            item={item}
-            currentPathExp={location.pathname}
-          />
-        ))}
-      </Flex>
-    </Box>
-  )
-}
-
-interface SidebarItemProps {
-  item: FileRouter.Sidebar.Item
-  currentPathExp: string
-  level?: number
-}
-
-const SidebarItem = ({ item, currentPathExp, level = 0 }: SidebarItemProps) => {
-  if (item.type === `ItemLink`) {
-    return <SidebarItemLink nav={item} currentPathExp={currentPathExp} level={level} />
-  }
-
-  return <SidebarItemSection section={item} currentPathExp={currentPathExp} level={level} />
-}
-
-interface SidebarItemLinkProps {
-  nav: FileRouter.Sidebar.ItemLink
-  currentPathExp: string
-  level: number
-}
-
-const SidebarItemLink = ({ nav, currentPathExp, level }: SidebarItemLinkProps) => {
-  // Normalize paths for comparison - remove leading slash if present
-  const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
-  const isActive = normalizedCurrentPath === nav.pathExp
-
-  return (
-    <Link
-      to={`/${nav.pathExp}`}
-      data-active={isActive || undefined}
-      className='sidebar-nav-item'
-      style={{
-        textDecoration: `none`,
-        color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
-        padding: `var(--space-2) var(--space-3)`,
-        paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
-        borderRadius: `var(--radius-2)`,
-        display: `block`,
-        backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
-        transition: `background-color 0.2s ease, color 0.2s ease`,
-      }}
-    >
-      <Text size='2' weight={isActive ? `medium` : `regular`}>
-        {nav.title}
-      </Text>
-    </Link>
-  )
-}
-
-interface SidebarItemSectionProps {
-  section: FileRouter.Sidebar.ItemSection
-  currentPathExp: string
-  level: number
-}
-
-const SidebarItemSection = ({ section, currentPathExp, level }: SidebarItemSectionProps) => {
-  const [isExpanded, setIsExpanded] = useState(true)
-  // Normalize paths for comparison - remove leading slash if present
-  const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
-  const isDirectlyActive = normalizedCurrentPath === section.pathExp
-  const hasActiveChild = section.navs.some(nav => normalizedCurrentPath === nav.pathExp)
-  const isActiveGroup = isDirectlyActive || hasActiveChild
-
-  return (
-    <>
-      <Flex
-        align='center'
-        data-active={isDirectlyActive || undefined}
-        data-active-child={hasActiveChild || undefined}
-        className='sidebar-section'
-        style={{
-          padding: `var(--space-2) var(--space-3)`,
-          paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
-          borderRadius: `var(--radius-2)`,
-          backgroundColor: isDirectlyActive ? `var(--accent-3)` : hasActiveChild ? `var(--accent-2)` : `transparent`,
-          transition: `background-color 0.2s ease`,
-        }}
-      >
-        <Box
-          onClick={() => {
-            setIsExpanded(!isExpanded)
-          }}
-          style={{
-            display: `flex`,
-            alignItems: `center`,
-            cursor: `pointer`,
-            padding: `4px`,
-            marginRight: `4px`,
-            marginLeft: `-4px`,
-          }}
-        >
-          {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
-        </Box>
-        {section.isNavToo
-          ? (
-            <Link
-              to={`/${section.pathExp}`}
-              style={{
-                textDecoration: `none`,
-                color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
-                flex: 1,
-              }}
-            >
-              <Text size='2' weight={isDirectlyActive ? `bold` : `medium`}>
-                {section.title}
-              </Text>
-            </Link>
-          )
-          : (
-            <Text
-              size='2'
-              weight={isDirectlyActive ? `bold` : `medium`}
-              style={{
-                flex: 1,
-                color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
-              }}
-            >
-              {section.title}
-            </Text>
-          )}
-      </Flex>
-      {isExpanded && (
-        <Flex direction='column' gap='1'>
-          {section.navs.map((nav) => (
-            <SidebarItemLink
-              key={nav.pathExp}
-              nav={nav}
-              currentPathExp={currentPathExp}
-              level={level + 1}
-            />
-          ))}
-        </Flex>
-      )}
-    </>
-  )
-}