duto 0.261001.0 → 0.261012.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "duto",
   "description": "All-in-one serverless framework for web artisans",
-  "version": "0.261001.0",
+  "version": "0.261012.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
@@ -25,46 +25,42 @@
     "./length": "./src/server/utils/length.ts"
   },
   "dependencies": {
-    "@inquirer/confirm": "^5.1.8",
-    "@inquirer/input": "^4.1.8",
-    "@inquirer/select": "^4.1.0",
+    "@inquirer/confirm": "^5.1.21",
+    "@inquirer/input": "^4.3.1",
+    "@inquirer/select": "^4.4.2",
     "nanospinner": "^1.2.2",
-    "@hono/node-server": "^1.19.11",
-    "@hono/standard-validator": "^0.2.2",
+    "@hono/node-server": "^1.19.17",
+    "@hono/standard-validator": "^0.2.3",
     "@hono/zod-validator": "^0.7.6",
-    "@scalar/hono-api-reference": "^0.12.0",
+    "@scalar/hono-api-reference": "^0.12.11",
     "@minify-html/node": "^0.18.1",
-    "@preact/signals": "^2.9.2",
-    "@swc/core": "^1.15.21",
-    "chokidar": "^3.5.2",
+    "@preact/signals": "^2.11.3",
+    "bun-plugin-tailwind": "^0.1.2",
+    "chokidar": "^3.6.0",
     "citty": "^0.2.2",
     "consola": "^3.4.2",
     "cripta": "0.x",
-    "dotenv": "^16.5.0",
-    "esbuild": "^0.25.2",
+    "dotenv": "^16.6.1",
+    "esbuild": "^0.25.12",
     "forj": "0.x",
-    "hono": "^4.13.7",
-    "hono-openapi": "^1.3.0",
+    "hono": "^4.13.13",
+    "hono-openapi": "^1.3.5",
     "localflare-api": "^0.5.0",
     "localflare-core": "^0.5.0",
     "miniflare": "^4.20260730.0",
-    "pathe": "^2.0",
-    "preact": "^10.29.7",
-    "preact-render-to-string": "^6.6.6",
+    "pathe": "^2.0.3",
+    "preact": "^11.0.1",
+    "preact-render-to-string": "^6.8.0",
     "quansync": "^0.2.11",
     "t0n": "0.x",
-    "vite": "^8.0.0",
-    "wouter-preact": "^3.10.0",
-    "wrangler": "^4.128.0",
-    "zod": "^4.3.6",
+    "wouter-preact": "^3.13.0",
+    "wrangler": "^4.149.0",
+    "zod": "^4.6.6",
     "zod-openapi": "^5.4.6"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20260113.0",
-    "@minify-html/node": "^0.18.1",
-    "@preact/preset-vite": "^2.10.5",
-    "@tailwindcss/vite": "^4.3.1",
-    "bun-types": "^1.4.0",
+    "@cloudflare/workers-types": "^4.20260702.1",
+    "bun-types": "^1.4.3",
     "typescript": "^5.9.3"
   },
   "resolutions": {

package/src/commands/templates/pages/components/html.tsx

@@ -0,0 +1,55 @@
+import { t } from 'duto'
+
+export type Props = {
+  children?: preact.ComponentChildren
+  class?: string
+
+	locale?: string
+  name?: string
+  title: string
+  description?: string
+}
+
+export function Html({
+  children,
+  class: className,
+
+	locale = 'en',
+	name = 'Duto',
+	title,
+	description = '',
+  ...props
+}: Props) {
+  const _class = [
+    'bg-gradient-to-br from-zinc-200 to-zinc-150 dark:from-zinc-800 dark:to-zinc-950 text-gray-600 dark:text-gray-300',
+    className,
+  ].filter(Boolean).join(' ')
+
+  const _title = [name, t(title ?? '')].filter(Boolean).join(' › ')
+  const _description = t(description || title || '')
+
+  return (
+    <html class={_class} {...props}>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="icon" type="image/x-icon" sizes="48x48" href="/favicon.ico" />
+        <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+
+        <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
+        <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+
+        {/* <link rel="sitemap" href="/sitemap-index.xml" /> */}
+
+        <title dangerouslySetInnerHTML={{ __html: _title }} />
+        {_description && <meta name="description" content={_description} />}
+      </head>
+
+      <body class="flex flex-col min-h-svh max-w-screen overflow-x-clip relative z-10 ">
+        {children}
+      </body>
+    </html>
+  )
+}

package/src/commands/templates/pages/components/theme-select.tsx

@@ -0,0 +1,60 @@
+import { useSignal } from '@preact/signals'
+import { useLayoutEffect } from 'preact/hooks'
+import { t, getTheme, setTheme, onThemeChange } from 'duto'
+
+import Select from './select'
+
+function ThemeIcon(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={[props.class || '', props.className || ''].filter(Boolean).join(' ')}><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/></svg>
+  )
+}
+
+export default function ThemeSelect({ class: className = '' }) {
+  const options = [['auto', t`auto`], ['dark', t`dark`], ['light', t`light`]].map(([value, label]) => ({ value, label, selected: false }))
+  const selectedValue = useSignal(getTheme())
+  let unsubscribe: (() => void)[] = []
+  const handle = (e: any, theme?: string) => {
+    theme ??= getTheme()
+    selectedValue.value = theme
+  }
+
+  useLayoutEffect(() => {
+    unsubscribe = onThemeChange(handle)
+    selectedValue.value = getTheme()
+
+    window.addEventListener('popstate', handle)
+    return () => {
+      window.removeEventListener('popstate', handle)
+      unsubscribe.forEach(unsub => unsub?.())
+    }
+  }, [])
+
+  const handleChange = async (e: Event) => {
+    const target = e.target as HTMLSelectElement
+    if (target) {
+      setTheme(target.value)
+      selectedValue.value = target.value
+    }
+  }
+
+  const containerClasses = [
+    'locale-select overflow-hidden text-ellipsis p-1 rounded-lg hover:bg-neutral-200 hover:text-zinc-900',
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <Select
+      Icon={ThemeIcon}
+      options={options}
+      value={selectedValue.value}
+      width="6.25em"
+      class="theme-select outline-none text-ellipsis absolute inset-0 opacity-0 cursor-pointer"
+      containerClass={containerClasses}
+      id="theme-select"
+      onchange={handleChange}
+      width="6.25em"
+      id="theme-select"
+    />
+  )
+}

package/src/commands/templates/pages/i18n/en.ts

@@ -5,6 +5,9 @@ export default {
     notfound: 'not-found',
   },
   messages: {
+    auto: 'System default',
+    dark: 'Dark theme',
+    light: 'Light theme',
     title: 'Welcome to Duto',
     description: 'A fast, lightweight framework that keeps things simple!',
     gotodocs: 'Go to docs',
@@ -13,5 +16,8 @@ export default {
     backhome: 'Back to homepage',
     about: 'About',
     shop: 'Shop',
+
+    blog: 'Blog',
+    b1: 'This page is also static, the data was loaded via',
   },
 }

package/src/commands/templates/pages/i18n/pt-br.ts

@@ -5,6 +5,9 @@ export default {
     notfound: 'pagina-desconhecida',
   },
   messages: {
+    auto: 'Padrão do sistema',
+    dark: 'Escuro',
+    light: 'Claro',
     title: 'Bem-vindo ao Duto',
     description: 'Um framework rápido e leve que mantém as coisas simples!',
     gotodocs: 'Documentação',
@@ -13,5 +16,8 @@ export default {
     backhome: 'Ir para página inicial',
     about: 'Sobre',
     shop: 'Loja',
+
+    blog: 'Blog',
+    b1: 'Esta página também é estática, os dados foram carregados via',
   },
 }

package/src/commands/templates/pages/pages/404.tsx

@@ -3,7 +3,7 @@ import { t, Link } from 'duto'
 export default function NotFound() {
   return (
     <div class="flex flex-col items-center justify-center text-center w-full text-lg py-16">
-      <h1 class="text-sky-gratient text-mono text-7xl lg:text-8xl">404</h1>
+      <h1 class="text-sky-gradient font-mono text-7xl lg:text-8xl">404</h1>
       <p class="body-large mb-2 mt-4 text-3xl lg:text-4xl">{t`notfound`}</p>
       <p class="body lg:body-large">{t`sorry404`}</p>
       <Link to="/" class="border-b border-current mt-8">{t`backhome`}</Link>

package/src/commands/templates/pages/pages/blog/[slug].tsx

@@ -0,0 +1,88 @@
+
+import { t, Link } from 'duto'
+import type { Post, Posts } from '@/types'
+import { JSJSON } from '../../../../packages/t0n/src/json'
+import NotFound from '../404'
+
+// Mock data
+const ALL_POSTS: Posts = [
+  {
+    id: "hello-world",
+    title: "Hello World",
+    body:
+      "Welcome to my blog! This post was statically generated at build time using `getStaticProps`. When navigating here via the SPA router, `getProps` fetches the same data dynamically.",
+  },
+  {
+    id: "getting-started",
+    title: "Getting Started with SSG",
+    body:
+      "Static site generation combines the best of both worlds: fast initial loads with the flexibility of dynamic data fetching.",
+  },
+  {
+    id: "signals-islands",
+    title: "Signals & Islands",
+    body:
+      "Preact Signals give us fine-grained reactivity. Combined with the islands architecture, we can ship near-zero JS by default.",
+  },
+]
+
+
+export { Html } from '@/components/html'
+
+/**
+ * Returns one entry per post.
+ * Each entry MUST include the route param (`slug`) plus any page props.
+ * The build script uses `slug` to compute the output path.
+ */
+export function getStaticProps() {
+  return ALL_POSTS.map((post) => ({
+    slug: post.id, // required: matches [slug] in the filename
+    post,
+  }))
+}
+
+// ── Browser-time data ─────────────────────────────────────────────────────────
+
+/**
+ * Called during SPA navigation. Receives route params from wouter.
+ */
+export async function getProps({ slug }: { slug?: string }) {
+  const post = (await (await fetch('https://jsonplaceholder.typicode.com/posts/'+ slug)).json())
+  return { post }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+type Props = {
+  post?: Post | null,
+  slug?: string,
+}
+
+export default function BlogPost({ post, slug }: Props) {
+  if (!post?.title)
+    return <NotFound />
+
+  return (
+    <>
+      <article class="mt-6 max-w-2xl">
+        <div>
+          <Link href="/blog">
+            ←
+            <span class="ml-2">{t`blog`}</span>
+          </Link>
+        </div>
+        <h1 class="mt-2 text-4xl font-black text-sky-gradient">{post.title}</h1>
+        <p class="mt-6 leading-relaxed">{post.body}</p>
+      </article>
+
+      <div class="mt-12 p-4 rounded-lg text-sm bg-sky-50 text-sky-700 dark:bg-zinc-700 dark:text-white/80">
+        {[
+          ['Route', window.$duto?.route?.pattern],
+          ['Route path', window.$duto?.route?.path],
+          ['Route params', JSJSON(window?.$duto?.route?.params || {})],
+          ['Route search params', window?.$duto?.search?.toString()],
+        ].map(([label, info]) => ( <div><b>{label}:</b> {info || 'n/a'}</div>))}
+      </div>
+    </>
+  )
+}

package/src/commands/templates/pages/pages/blog/index.tsx

@@ -0,0 +1,74 @@
+// 'use client'
+import { t, Link } from 'duto'
+import type { Posts } from '@/types'
+// import { Counter } from '@/components/counter2'
+
+type Props = {
+  posts?: Posts,
+}
+
+export { Html } from '@/components/html'
+
+export async function getStaticProps() {
+  const posts = (await (await fetch('https://jsonplaceholder.typicode.com/posts')).json())
+    ?.sort(() => 0.5 - Math.random())
+    .slice(0, 10)
+
+  return { posts }
+}
+
+export default function Blog({ posts }: Props) {
+  return (
+    <>
+      <h1 class="title">Blog</h1>
+
+      <div class="highlight">
+        {t`b1`}&nbsp;<b><i>getStaticProps()</i></b> (SSG)
+      </div>
+
+      {!posts?.length && (
+        <p class="mt-8">No posts found.</p>
+      )}
+
+      <div class="mt-8 flex flex-col">
+        {posts?.map((post) => (
+          <Link to={`/blog/${post.id}`} key={post.id}
+            class="group block relative p-4 border-b border-gray-200 dark:border-zinc-700/70 transition-all duration-300 ease-out"
+          >
+            <div class="flex items-start gap-4">
+              <span class="text-sm font-mono text-gray-400 group-hover:text-sky-gradient mt-0.5 min-w-[24px]">
+                #{post.id}
+              </span>
+
+              <div class="flex-1 min-w-0">
+                <h2 class="text-base font-medium group-hover:text-sky-gradient">
+                  {post.title}
+                </h2>
+                <p class="mt-1 text-sm text-gray-500 group-hover:text-gray-800 dark:group-hover:text-gray-400 line-clamp-2 pr-6">
+                  {post.body}
+                </p>
+              </div>
+
+              <div class="absolute right-0 top-[35%] flex-shrink-0 bg-indigo-50 group-hover:bg-gray-100 dark:bg-gray-600/90 dark:group-hover:bg-gray-500 rounded-full p-1 transition-all duration-300 group-hover:translate-x-1">
+                <svg
+                  class="size-5 text-gray-400 group-hover:text-sky-500 dark:group-hover:text-gray-300"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </div>
+            </div>
+
+          </Link>
+        ))}
+</div>
+    </>
+  )
+}

package/src/commands/templates/pages/pages/index.tsx

@@ -1,15 +1,25 @@
 import { t, Link } from 'duto'
 
+export { Html } from '@/components/html'
+
 export default function Index() {
   return (
-    <div class="relative">
-      <h1 class="title text-sky-gratient mt-10 lg:mt-2">{t`title`}</h1>
+    <div class="relative space-y-8">
+      <h1 class="title text-sky-gradient lg:mt-2">{t`title`}</h1>
       <p class="sub-title">{t`description`}</p>
-      <div class="flex flex-row gap-8 mt-10">
-
-        <Link href="https://hub.bi/docs/duto" class="group inline-flex shrink-0 items-center justify-center leading-6 font-medium select-none focus:outline-0 gap-2 px-4 py-2.5 text-base rounded-lg bg-white hover:bg-neutral-200 border border-gray-700 text-zinc-900">
-          {t`gotodocs`}<span class="ml-0.5 inline-block transition-transform group-hover:translate-x-1">→</span>
-        </Link>
+      <div class="divide-y divide-gray-300 dark:divide-zinc-700/70">
+        {[
+          ['https://hub.bi/docs/duto', t`gotodocs`],
+          ['/blog', t`Blog`],
+        ].map(([href, label]) => (
+          <Link
+            href={href}
+            class="group flex items-center justify-between gap-4 py-4 px-2.5"
+          >
+            <span class="font-semibold group-hover:text-sky-gradient">{label}</span>
+            <span class="text-lg mr-3 transition-transform group-hover:text-sky-600 dark:group-hover:text-sky-300 group-hover:translate-x-1">→</span>
+          </Link>
+        ))}
       </div>
     </div>
   )

package/src/commands/templates/pages/pages/layout.tsx

@@ -1,15 +1,17 @@
 import type { ComponentChildren } from 'preact'
 
 import LocaleSelect from '@/components/locale-select'
+import ThemeSelect from '@/components/theme-select'
 
 export default function Layout({ children }: { children: ComponentChildren }) {
   return (
-    <div class="relative w-full max-w-full min-h-svh overflow-hidden flex flex-col flex-1 justify-center items-center bg-gradient-to-br from-zinc-800 to-zinc-950 text-gray-300 select-none">
+    <>
       <div class='absolute top-10 right-10'>
+        <ThemeSelect class='mr-5' />
         <LocaleSelect />
       </div>
 
-      <main class="flex justify-center items-center px-6 py-16 min-h-[calc(100vh-3.75rem)]" children={children} />
+      <main class="flex flex-col justify-center items-center px-6 py-16 min-h-[calc(100vh-3.75rem)]" children={children} />
 
       <footer class="py-[1.1rem] relative text-base lex flex-row items-center mx-auto">
         <a href="https://hub.bi?ref=duto" class="no-underline group flex items-center justify-center" target="_blank" rel="noopener noreferrer">
@@ -19,6 +21,6 @@ export default function Layout({ children }: { children: ComponentChildren }) {
             HUB</span>
         </a>
       </footer>
-    </div>
+    </>
   )
 }

package/src/commands/templates/pages/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="840" height="840" viewBox="0 0 840 840" fill="none"><style>path{color:black}@media (prefers-color-scheme: dark){path{color:#c6c6c6}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M832.965 446.25C837.573 438.269 839.999 429.216 839.999 420C839.999 410.784 837.573 401.731 832.965 393.75L645.173 78.75C640.565 70.7692 633.938 64.1418 625.957 59.534C617.976 54.9262 608.923 52.5002 599.708 52.5H240.293C231.077 52.5002 222.024 54.9262 214.043 59.534C206.063 64.1418 199.435 70.7692 194.828 78.75L7.03518 393.75C2.42735 401.731 0.001544 410.784 0.001544 420C0.001544 429.216 2.42735 438.269 7.03518 446.25L194.828 761.25C199.435 769.231 206.063 775.858 214.043 780.466C222.024 785.074 231.077 787.5 240.293 787.5H599.708C608.923 787.5 617.976 785.074 625.957 780.466C633.938 775.858 640.565 769.231 645.173 761.25L832.965 446.25Z" fill="currentColor"></path></svg>

package/src/commands/templates/pages/style.css

@@ -1,19 +1,122 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {@apply border-border}
+  /* body {@apply bg-background text-foreground} */
+}
+
+@utility s {
+  @apply w-[--value] h-[--value];
+}
+
+@variant children (& > *);
+
+
+@theme {
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla",
+    sans-serif;
+  --font-mono:
+    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-serif:
+    Georgia, Garamond, Cambria, "Times New Roman", Times, ui-serif, serif;
+
+  --font-pixel: PixAntiqua, ui-sans-serif, system-ui, sans-serif;
+  /* Medium headers*/
+  /* sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; */
+
+  --color-black: #0D0F14;
+  --color-white: #fff;
+  --color-text: #F041FF;
+
+  --color-accent: var(--color-gray-100);
+  /* --color-primary: #3F224D; */
+  --color-muted: #545864;
+
+  --color-border: var(--color-gray-200);
+  --color-grid: #e5e5e5;
+
+  --color-blue: #3245FF;
+  --color-purple: #BC52EE;
+  --color-purple-dark: #3F224D;
+  --color-red: #D83333;
+  --color-pink: #F041FF;
+  --color-pink-light: #E8C4F9;
+  --color-orange: #F8E42E;
+  --color-yellow: #FF7D54;
+  --color-hover: #E8C4F9;
+  --color-green: #4AF2C8;
+
+  --color-dark-100: #858B98;
+  --color-dark-300: #343841;
+  --color-dark-400: #18191E;
+  --color-dark-500: #4B4B4B;
+  --color-dark-600: #2C2C2C;
+  --color-dark-700: #11172A;
+  --color-dark-800: #0C0F19;
+  --color-dark-900: #060913;
+
+
+  --sky-grad-1: rgb(2, 132, 199);
+  --sky-grad-2: rgb(14, 165, 233);
+  --sky-grad-3: rgb(56, 189, 248);
+}
+
+.dark {
+  --color-white: #F2F6FA;
+
+  --color-accent: #17191E;
+  --color-primary: #BC52EE;
+  --color-muted: #BFC1C9;
+
+  --color-border: color-mix(in oklab, var(--color-gray-100) 10%, transparent);
+
+
+  --sky-grad-1: rgb(112, 209, 255);
+  --sky-grad-2: rgb(173, 228, 255);
+  --sky-grad-3: rgb(219, 243, 255);
+}
+
+/* App styles */
+
 html, body {
-  @apply overscroll-none
+  @apply overscroll-y-none;
+  /* font-size-adjust: ex-height 0.5; */
+
+  /* Standardize line height across different system fonts */
+  /* line-height: 1.5; */
+  /* Consider setting letter-spacing for more consistent text blocks */
+  /* letter-spacing: 0.01em; */
+
+  /* Advanced font metric overrides (modern browsers only) */
+  /* ascent-override: 90%;
+  descent-override: 25%;
+  line-gap-override: 0%; */
 }
 
-.text-mono {
-  font-family: ui-monospace,SFMono-Regular,monospace;
-  --tw-font-weight: 300;
-  font-weight: 300
+.text-sky-gradient,
+.group-hover\:text-sky-gradient:is(:where(.group):hover *),
+.hover\:text-sky-gradient:hover {
+  @apply bg-clip-text text-transparent;
+  background-image: radial-gradient(
+    138.06% 1036.51% at 95.25% -2.54%,
+    var(--sky-grad-1) 14.06%,
+    var(--sky-grad-2) 51.02%,
+    var(--sky-grad-3) 79.09%
+  );
 }
 
-.text-sky-gratient {
+/* .text-sky-gradient,
+.group-hover\:text-sky-gradient:is(:where(.group):hover *),
+.hover\:text-sky-gradient:hover
+{
   @apply bg-clip-text text-transparent;
   background-image: radial-gradient(138.06% 1036.51% at 95.25% -2.54%, rgb(112, 209, 255) 14.06%, rgb(173, 228, 255) 51.02%, rgb(219, 243, 255) 79.09%);
-}
+} */
 
 .title {
   @apply text-4xl lg:text-[3.5rem] leading-[1.1] font-semibold tracking-tight text-balance

package/src/commands/templates/pages/tsconfig.json

@@ -39,7 +39,9 @@
     "enums",
     "libs",
     "i18n",
+    "layouts",
     "pages",
+    "public",
     "tests/**/*",
     "utils",
     "i18n.ts",

package/src/pages/cli/commands/build.ts

@@ -1,9 +1,8 @@
-import { build } from 'vite'
 import { setEnv } from 't0n'
 import { command } from 't0n/cli'
 import { dim, underline } from 't0n/color'
 import { wait, error, rn, event } from 't0n/log'
-import { meta } from '#/compiler/vite-plugin'
+import { meta, build } from '#/compiler/bun-plugin'
 import type { SummaryMetadata } from '#/compiler/types'
 import { getConfig } from '../utils'
 import { filesize } from '@/utils'

package/src/pages/cli/utils.ts

@@ -1,17 +1,16 @@
 import { IMPORT, Datte } from 't0n'
 import { join } from 'pathe'
 import { gray, green, yellow, red, cyan } from 't0n/color'
-import type { UserConfig } from 'vite'
 
 import { resolveExtension } from '#/compiler/file'
-import config from '#/compiler/vite-plugin'
+import config, { type DutoOptions } from '#/compiler/bun-plugin'
 import { _root } from '@/utils'
 import { match, match404 } from '#/compiler/routes'
 import type { Metadata, PluginOptions } from '#/compiler/types'
-import { EXTENSIONS_LIST } from '#/compiler/constants'
+import { EXTENSIONS_LIST, NF_NAMES } from '#/compiler/constants'
 
-export async function getConfig(name = 'config'): Promise<UserConfig & PluginOptions> {
-  let opts = {} as UserConfig
+export async function getConfig(name = 'config'): Promise<DutoOptions> {
+  let opts = {} as DutoOptions
   const file = resolveExtension(name)
   if (file) opts = await IMPORT(join(_root, file), 'default')
   return config(opts)
@@ -85,17 +84,20 @@ export function preview(
           res = new Response(file)
         } else {
           matched = match(path)
-          route = matched?.name || match404(meta, path)
+          const r404 = match404(meta, path) || '404'
+          route = matched?.name || r404
           res = new Response(null, { status: 404 })
 
           for (const asset of [
             path,
             join(path, 'index'),
+            r404,
             'index',
           ]) {
             file = Bun.file(join(_root, dist, asset +'.html'))
 
             if (await file.exists()) {
+              NF_NAMES.includes(asset.split('/').pop()!) && (route = r404)
               res = new Response(file)
               break
             }