polen 0.9.1-next.1 → 0.10.0-next.10

package/src/template/components/Link.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { LinkProps as LinkPropsReactRouter } 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 { ObjPartition } from '../../lib/kit-temp.ts'
 import type { LinkPropsRadix } from './RadixLink.jsx'
 import { LinkRadix } from './RadixLink.jsx'
 

package/src/template/components/Logo.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, Text } from '@radix-ui/themes'
+
+interface Props {
+  src: string
+  title?: string
+  height?: number
+  showTitle?: boolean
+}
+
+export const Logo: React.FC<Props> = ({ src, title, height = 30, showTitle = true }) => {
+  return (
+    <Flex align='center' gap='2'>
+      <Box style={{ height, display: 'flex', alignItems: 'center' }}>
+        <img
+          src={src}
+          alt={title}
+          height={height}
+          className='polen-logo'
+          style={{
+            height: '100%',
+            width: 'auto',
+            transition: 'filter 0.2s ease-in-out',
+          }}
+        />
+      </Box>
+      {showTitle && (
+        <Text size='3' weight='medium'>
+          {title}
+        </Text>
+      )}
+      <style>
+        {`
+          .polen-logo {
+            filter: none;
+          }
+          
+          @media (prefers-color-scheme: dark) {
+            .polen-logo {
+              filter: invert(1);
+            }
+          }
+        `}
+      </style>
+    </Flex>
+  )
+}

package/src/template/components/NotFound.tsx

@@ -0,0 +1,28 @@
+import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes'
+import { Link as LinkReactRouter } from 'react-router'
+
+export const NotFound: React.FC = () => {
+  return (
+    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
+      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
+      <Box>
+        <Heading size='5' mb='2'>Page Not Found</Heading>
+        <Text size='3' color='gray'>
+          The page you're looking for doesn't exist or has been moved.
+        </Text>
+      </Box>
+      <Flex gap='3'>
+        <LinkReactRouter to='/'>
+          <Button variant='soft' size='3'>
+            Go Home
+          </Button>
+        </LinkReactRouter>
+        <LinkReactRouter to='/reference'>
+          <Button variant='outline' size='3'>
+            View API Reference
+          </Button>
+        </LinkReactRouter>
+      </Flex>
+    </Flex>
+  )
+}

package/src/template/components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+import type { React } from '#dep/react/index'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { IconButton } from '@radix-ui/themes'
+import { useTheme } from '../contexts/ThemeContext.tsx'
+
+export const ThemeToggle: React.FC = () => {
+  const { appearance, toggleTheme } = useTheme()
+
+  return (
+    <IconButton
+      size='2'
+      variant='ghost'
+      color='gray'
+      onClick={toggleTheme}
+      aria-label={`Switch to ${appearance === 'light' ? 'dark' : 'light'} theme`}
+      style={{ cursor: 'pointer' }}
+    >
+      {appearance === 'light' ? <MoonIcon width='18' height='18' /> : <SunIcon width='18' height='18' />}
+    </IconButton>
+  )
+}

package/src/template/components/content/$$.ts

@@ -0,0 +1 @@
+export { Callout, Tabs } from '@radix-ui/themes'

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

@@ -1,10 +1,10 @@
-import type { FileRouter } from '#lib/file-router/index'
+import type { Content } from '#api/content/$'
 import { Box } from '@radix-ui/themes'
 import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
 import { Items } from './SidebarItem.tsx'
 
 interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
-  data: FileRouter.Sidebar.Item[]
+  data: Content.Item[]
   style?: React.CSSProperties
 }
 

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

@@ -1,11 +1,11 @@
+import type { Content } from '#api/content/$'
 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 { Box, Flex } 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 }) => {
+export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
   return (
     <Flex direction='column' gap='2px'>
       {items.map((item) => (
@@ -26,7 +26,7 @@ export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items })
 //
 //
 
-export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
+export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
   if (item.type === `ItemLink`) {
     return <SBLink link={item} />
   }
@@ -47,7 +47,7 @@ export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
 //
 
 const SBLink: React.FC<{
-  link: FileRouter.Sidebar.ItemLink | FileRouter.Sidebar.ItemSection
+  link: Content.ItemLink | Content.ItemSection
 }> = ({ link }) => {
   const location = useLocation()
   const currentPathExp = location.pathname
@@ -81,7 +81,7 @@ const SBLink: React.FC<{
 //
 
 const Section: React.FC<{
-  section: FileRouter.Sidebar.ItemSection
+  section: Content.ItemSection
 }> = ({ section }) => {
   return (
     <Box mt='8'>
@@ -104,7 +104,7 @@ const Section: React.FC<{
 //
 
 const LinkedSection: React.FC<{
-  section: FileRouter.Sidebar.ItemSection
+  section: Content.ItemSection
 }> = ({ section }) => {
   return (
     <Box>
@@ -133,7 +133,7 @@ const LinkedSection: React.FC<{
   )
 }
 
-const SectionLink: React.FC<{ link: FileRouter.Sidebar.ItemLink }> = ({ link }) => {
+const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
   const location = useLocation()
   const active = getPathActiveReport(link.pathExp, location.pathname)
 

package/src/template/contexts/ThemeContext.tsx

@@ -0,0 +1,60 @@
+import type { React } from '#dep/react/index'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type ThemeAppearance = 'light' | 'dark'
+
+interface ThemeContextValue {
+  appearance: ThemeAppearance
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'polen-theme-preference'
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [appearance, setAppearance] = useState<ThemeAppearance>(() => {
+    // Check if we're in the browser
+    if (typeof window === 'undefined') {
+      return 'light'
+    }
+
+    // Check localStorage first
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark') {
+      return stored
+    }
+
+    // Check system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+
+    return 'light'
+  })
+
+  useEffect(() => {
+    // Persist to localStorage
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(THEME_STORAGE_KEY, appearance)
+    }
+  }, [appearance])
+
+  const toggleTheme = () => {
+    setAppearance(prev => prev === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <ThemeContext.Provider value={{ appearance, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/template/routes/root.tsx

@@ -1,24 +1,29 @@
-import { assetUrl, faviconUrl } from '#api/utils/asset-url/index'
 import type { ReactRouter } from '#dep/react-router/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
-import { GitHubLogoIcon } from '@radix-ui/react-icons'
-import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes'
+import { Box, Grid } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
 import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Arr } from '@wollybeard/kit'
+import { useEffect, useState } from 'react'
 import { Link as LinkReactRouter } from 'react-router'
 import { Outlet, ScrollRestoration, useLocation } from 'react-router'
+import logoSrc from 'virtual:polen/project/assets/logo.svg'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import projectDataNavbar from 'virtual:polen/project/data/navbar.jsonsuper'
-import projectDataPages from 'virtual:polen/project/data/pages.jsonsuper'
-import { pages } from 'virtual:polen/project/pages.jsx'
+import projectPagesCatalog from 'virtual:polen/project/data/pages-catalog.jsonsuper'
+import { routes } from 'virtual:polen/project/routes.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
-import { Link } from '../components/Link.jsx'
+import { HamburgerMenu } from '../components/HamburgerMenu.tsx'
+import { Link } from '../components/Link.tsx'
+import { Logo } from '../components/Logo.tsx'
+import { NotFound } from '../components/NotFound.tsx'
 import { Sidebar } from '../components/sidebar/Sidebar.tsx'
+import { ThemeToggle } from '../components/ThemeToggle.tsx'
+import { ThemeProvider, useTheme } from '../contexts/ThemeContext.tsx'
 import entryClientUrl from '../entry.client.jsx?url'
-import { changelog } from './changelog.jsx'
-import { index } from './index.jsx'
-import { reference } from './reference.jsx'
+import { changelog } from './changelog.tsx'
+import { index } from './index.tsx'
+import { reference } from './reference.tsx'
 
 // todo: not needed anymore because not using hono dev vite plugin right?
 const reactRefreshPreamble = `
@@ -39,20 +44,14 @@ export const Component = () => {
         <meta name='viewport' content='width=device-width, initial-scale=1' />
         <title>{templateVariables.title}</title>
         {import.meta.env.DEV && <link rel='stylesheet' href={radixStylesUrl} />}
-        <link
-          rel='icon'
-          href={faviconUrl(PROJECT_DATA.faviconPath.replace(`.svg`, `.ico`) + `?v=1`, PROJECT_DATA.basePath)}
-          sizes='256 x 256'
-        />
-        <link
-          rel='icon'
-          href={faviconUrl(PROJECT_DATA.faviconPath + `?v=1`, PROJECT_DATA.basePath)}
-          sizes='any'
-          type='image/svg+xml'
-        />
+        {/* <link rel='icon' type='image/svg+xml' href={assetUrl('/favicon.svg', PROJECT_DATA.basePath)} /> */}
+        {/* <link rel='manifest' href={assetUrl('/manifest.json', PROJECT_DATA.basePath)} /> */}
+        {/* <meta name='theme-color' content='#000000' /> */}
       </head>
       <body style={{ margin: 0 }}>
-        <Layout />
+        <ThemeProvider>
+          <Layout />
+        </ThemeProvider>
         <ScrollRestoration />
         {import.meta.env.DEV && <script type='module' src={entryClientUrl}></script>}
       </body>
@@ -62,6 +61,13 @@ export const Component = () => {
 
 const Layout = () => {
   const location = useLocation()
+  const { appearance } = useTheme()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
 
   // Determine if we should show sidebar based on current path
   const getCurrentNavPathExp = (): string | null => {
@@ -75,54 +81,82 @@ const Layout = () => {
   }
 
   const currentNavPathExp = getCurrentNavPathExp()
-  const sidebar = currentNavPathExp && projectDataPages.sidebarIndex[currentNavPathExp]
+  const sidebar = currentNavPathExp && projectPagesCatalog.sidebarIndex[currentNavPathExp]
   const isShowSidebar = sidebar && sidebar.items.length > 0
 
   const header = (
     <Flex
       gridArea={'header'}
       align='center'
-      gap='8'
+      gap={{ initial: '4', md: '8' }}
       pb='4'
-      mb='8'
+      mb={{ initial: '4', md: '8' }}
       style={{
         borderBottom: `1px solid var(--gray-3)`,
       }}
     >
+      {/* Mobile menu - only show when sidebar exists */}
+      {isShowSidebar && (
+        <HamburgerMenu
+          isOpen={mobileMenuOpen}
+          onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
+          onClose={() => setMobileMenuOpen(false)}
+          sidebarData={sidebar.items}
+        />
+      )}
+
       <LinkReactRouter
         to='/'
         style={{ color: `inherit`, textDecoration: `none` }}
       >
-        <Flex align='center' gap='2'>
-          <GitHubLogoIcon style={{ width: 30, height: 30 }} />
-          <Text size='3' weight='medium'>
-            {templateVariables.title}
-          </Text>
-        </Flex>
+        <Box display={{ initial: 'block', md: 'block' }}>
+          <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
+        </Box>
       </LinkReactRouter>
-      <Flex direction='row' gap='4'>
+      <Flex direction='row' gap='4' style={{ flex: 1 }}>
         {projectDataNavbar.map((item, key) => (
           <Link key={key} color='gray' to={item.pathExp}>
             {item.title}
           </Link>
         ))}
       </Flex>
+      <ThemeToggle />
     </Flex>
   )
 
   return (
-    <Theme asChild>
+    <Theme asChild appearance={appearance}>
       <Grid
-        width={{ initial: 'var(--container-4)' }}
-        areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'"
+        width={{ initial: '100%', sm: '100%', md: 'var(--container-4)' }}
+        maxWidth='100vw'
+        areas={{
+          initial: "'header' 'content'",
+          sm: "'header' 'content'",
+          md:
+            "'header header header header header header header header' 'sidebar sidebar . content content content content content'",
+        }}
         rows='min-content auto'
-        columns='repeat(8, 1fr)'
-        gapX='2'
-        my='8'
+        columns={{ initial: '1fr', sm: '1fr', md: 'repeat(8, 1fr)' }}
+        gapX={{ initial: '0', sm: '0', md: '2' }}
+        my={{ initial: '0', sm: '0', md: '8' }}
         mx='auto'
+        px={{ initial: '4', sm: '4', md: '0' }}
+        py={{ initial: '4', sm: '4', md: '0' }}
       >
         <style>
           {`
+          /* Responsive container fixes */
+          @media (max-width: 768px) {
+            body {
+              overflow-x: hidden;
+            }
+          }
+          
+          /* Ensure proper centering on all screen sizes */
+          .rt-Grid {
+            box-sizing: border-box;
+          }
+
           /* Shiki code blocks */
           pre.shiki {
             margin: 1rem 0;
@@ -133,21 +167,21 @@ const Layout = () => {
             line-height: 1.6;
             background-color: #f6f8fa;
           }
-          
+
           /* Light mode: use --shiki-light CSS variables from inline styles */
           pre.shiki span {
             color: var(--shiki-light);
           }
-          
+
           /* Dark mode - Radix Themes uses [data-is-root-theme="dark"] */
           [data-is-root-theme="dark"] pre.shiki {
             background-color: #1a1b26;
           }
-          
+
           [data-is-root-theme="dark"] pre.shiki span {
             color: var(--shiki-dark);
           }
-          
+
           pre.shiki code {
             font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
             background: transparent;
@@ -156,15 +190,18 @@ const Layout = () => {
         `}
         </style>
         {header}
+
+        {/* Desktop Sidebar */}
         {isShowSidebar && (
-          <Sidebar
+          <Box
+            display={{ initial: 'none', xs: 'none', sm: 'none', md: 'block' }}
             gridColumn='1 / 3'
             gridRow='2 / auto'
-            data={sidebar.items}
-            // ml='-100px'
-            // style={{ transform: 'translate(calc(-100% - var(--space-8)))' }}
-          />
+          >
+            <Sidebar data={sidebar.items} />
+          </Box>
         )}
+
         <Box gridArea='content / content / auto / 8'>
           <Outlet />
         </Box>
@@ -175,7 +212,7 @@ const Layout = () => {
 
 const children: ReactRouter.RouteObject[] = [
   index,
-  ...pages,
+  ...routes,
 ]
 
 //
@@ -201,36 +238,10 @@ if (PROJECT_DATA.schema) {
 //
 //
 
-const NotFoundComponent = () => {
-  return (
-    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
-      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
-      <Box>
-        <Heading size='5' mb='2'>Page Not Found</Heading>
-        <Text size='3' color='gray'>
-          The page you're looking for doesn't exist or has been moved.
-        </Text>
-      </Box>
-      <Flex gap='3'>
-        <LinkReactRouter to='/'>
-          <Button variant='soft' size='3'>
-            Go Home
-          </Button>
-        </LinkReactRouter>
-        <LinkReactRouter to='/reference'>
-          <Button variant='outline' size='3'>
-            View API Reference
-          </Button>
-        </LinkReactRouter>
-      </Flex>
-    </Flex>
-  )
-}
-
 const notFoundRoute = createRoute({
   id: `*_not_found`,
   path: `*`,
-  Component: NotFoundComponent,
+  Component: NotFound,
   handle: {
     statusCode: 404,
   },

package/src/template/server/app.ts

@@ -1,10 +1,8 @@
 import { Hono } from '#dep/hono/index'
-// import { Hono } from '../../dep/hono/index.ts'
-
 import { AppleTouchIcon } from '#lib/apple-touch-icon/index'
 import { Favicon } from '#lib/favicon/index'
 import { serveStatic } from '@hono/node-server/serve-static'
-import { Fs, Http, Path } from '@wollybeard/kit'
+import { Http } from '@wollybeard/kit'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { renderPage } from './render-page.jsx'
 import { view } from './view.ts'
@@ -18,36 +16,13 @@ if (__BUILDING__) {
   )
 }
 
-app.get(`*`, async (ctx) => {
+app.all(`*`, async (ctx) => {
   const staticHandlerContext = await view.query(ctx.req.raw)
 
   if (staticHandlerContext instanceof Response) {
     return staticHandlerContext
   }
 
-  if (
-    ctx.req.path.includes(PROJECT_DATA.faviconPath)
-    || ctx.req.path.includes(PROJECT_DATA.faviconPath.replace(`.svg`, `.ico`))
-  ) {
-    const path = ctx.req.path === PROJECT_DATA.faviconPath
-      ? PROJECT_DATA.faviconPath
-      : PROJECT_DATA.faviconPath.replace(`.svg`, `.ico`)
-    const faviconPath = Path.join(import.meta.dirname, `../../assets`, path)
-    const favicon = await Fs.read(faviconPath)
-    return new Response(favicon, {
-      headers: [
-        Http.Headers.contentType(
-          path.endsWith(`.ico`) ? `image/x-icon` : `image/svg+xml`,
-        ),
-        Http.Headers.responseCacheControl({
-          visibility: `public`,
-          maxAge: 31536000,
-          immutable: true,
-        }),
-      ],
-    })
-  }
-
   if (Favicon.fileNamePattern.test(ctx.req.path)) {
     return Http.Response.notFound
   }

package/build/lib/debug/debug.d.ts

@@ -1,13 +0,0 @@
-type DebugParameters = [event: string, payload?: unknown];
-export interface Debug {
-    (...args: DebugParameters): void;
-    toggle: (isEnabled: boolean) => void;
-    sub: (subNamespace: string | string[]) => Debug;
-}
-interface State {
-    isEnabled: boolean;
-}
-export declare const create: (namespaceInput?: string | string[], initialState?: State) => Debug;
-export declare const debugGlobal: Debug;
-export {};
-//# sourceMappingURL=debug.d.ts.map

package/build/lib/debug/debug.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../src/lib/debug/debug.ts"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,KAAK;IACpB,CAAC,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,CAAA;IAChC,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,GAAG,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,KAAK,CAAA;CAChD;AAED,UAAU,KAAK;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAgCD,eAAO,MAAM,MAAM,GAAI,iBAAiB,MAAM,GAAG,MAAM,EAAE,EAAE,eAAe,KAAK,KAAG,KA0DjF,CAAA;AAcD,eAAO,MAAM,WAAW,OAAW,CAAA"}

package/build/lib/debug/debug.js

@@ -1,86 +0,0 @@
-import { Arr, Str } from '@wollybeard/kit';
-import { colorize } from 'consola/utils';
-import { inspect } from 'node:util';
-import { calcIsEnabledFromEnv } from "./environment-variable.js";
-// todo:
-// const Option = {
-//   else:
-//     <alternative>(alternative: alternative) => <value>(value: value): value extends undefined ? alternative : value => {
-//       if (value === undefined || value === null) {
-//         return alternative as any
-//       }
-//       return value as any
-//     },
-// }
-// const namespaceToString = (namespace: string[] = []): string => {
-//   return formatNamespaceSegment(namespace.join(`_`))
-//   // todo:
-//   // const x = Option.else([] as string[])
-//   // const y = x(namespace)
-//   // const z = Fn.pipe(
-//   //   namespace,
-//   //   x,
-//   //   // Option.else([]),
-//   //   // (_) => Array.is(_) ? _ : [],
-//   //   // Str.joinWith(`_`),
-//   //   // Str.Case.upper,
-//   // )
-// }
-const formatNamespaceSegment = (segment) => {
-    return Str.Case.snake(segment).toUpperCase();
-};
-export const create = (namespaceInput, initialState) => {
-    const namespace = Arr.sure(namespaceInput ?? []);
-    const isDebugEnabledFromEnv = calcIsEnabledFromEnv(process.env, namespace);
-    const state = initialState ?? {
-        isEnabled: isDebugEnabledFromEnv,
-    };
-    const debug = (...args) => {
-        const isPayloadPassed = args.length === 2;
-        const [event, payload] = args;
-        if (state.isEnabled) {
-            // If a payload is an array then default depth to 1 so that we see its _contents_
-            const isPayloadArray = Array.isArray(payload);
-            const depthBoost = isPayloadArray ? 1 : 0;
-            const defaultDepth = 3;
-            const debugDepth = parseNumberOr(process.env[`DEBUG_DEPTH`], defaultDepth) + depthBoost;
-            const isPayloadDisabled = debugDepth < 0;
-            const payloadRendered = isPayloadPassed && !isPayloadDisabled
-                ? inspect(payload, {
-                    colors: true,
-                    depth: debugDepth,
-                    // compact: true,
-                    maxStringLength: 1000,
-                })
-                : ``;
-            const formatNamespaceSegmentAnsi = (segment) => {
-                return colorize(`bold`, colorize(`bgYellowBright`, ` ` + formatNamespaceSegment(segment) + ` `));
-            };
-            const namespaceRendered = namespace.map(formatNamespaceSegmentAnsi).join(` `);
-            const eventRendered = colorize(`bold`, colorize(`bgMagentaBright`, ` ` + formatNamespaceSegment(event) + ` `));
-            const prefixRendered = `${namespaceRendered} ${eventRendered}`;
-            console.debug(prefixRendered, payloadRendered);
-        }
-    };
-    debug.toggle = (isEnabled) => {
-        state.isEnabled = isEnabled;
-    };
-    debug.sub = (subNamespace) => {
-        const s = Arr.sure(subNamespace);
-        const stateCopy = structuredClone(state);
-        return create([...namespace, ...s], stateCopy);
-    };
-    return debug;
-};
-const parseNumberOr = (str, defaultValue) => {
-    if (str === ``)
-        return defaultValue;
-    const parsed = Number(str);
-    if (Number.isNaN(parsed)) {
-        return defaultValue;
-    }
-    return parsed;
-};
-// initialize root debug
-export const debugGlobal = create();
-//# sourceMappingURL=debug.js.map