Dinou


$3

---

Support for React Server Components (RSC), Server-Side Rendering (SSR), Static Generation (SSG), Incremental Static Generation (ISG), and Incremental Static Regeneration (ISR).

Key Features

- React Server Components: Built on the React 19 core, leveraging Suspense and Streaming for optimal performance without client-side waterfalls.
- Server Functions: Type-safe RPC actions. Execute server-side logic directly from your components without creating manual API endpoints.
- Automatic Static Bailout: Static by default (SSG). Automatically switches to Dynamic Rendering (SSR) when request-specific data (cookies, headers, search params) is detected.
- Full-Featured Router: Client-side soft navigation including push, replace, back, forward, and refresh (soft reload).
- Generation Strategies: Comprehensive support for Incremental Static Regeneration (ISR) and Incremental Static Generation (ISG).
- Bundler Agnostic: The only framework that lets you choose your build engine. Switch between Webpack, Rollup, or Esbuild via configuration.
- Smart Navigation: component with automatic prefetching and opt-in fresh data fetching for volatile states.
- File-System Routing: Intuitive routing based on page.{jsx,tsx} files located within the src directory structure.

Table of contents

- Getting Started
- Quick Start (CLI)
- Manual Setup
- Routing
- Basic & Dynamic Routes
- Important: Optional Segments Rules
- Advanced Routing
- Navigation
- Layouts & Hierarchical Rendering
- Layouts (layout.jsx)
- Error Handling (error.jsx)
- Not Found (not_found.jsx)
- Advanced Layout Control (Flags)
- Data Fetching & Rendering
- Server Components (Async Data)
- Hybrid Rendering Engine
- Incremental Static Regeneration (ISR)
- Client Components
- Server Functions ("use server") & Enhanced Suspense
- Usage in Client Components (Reactive)
- Usage in Server Components (Streaming)
- Server Actions (Form Mutations)
- Advanced Patterns: The "Dinou Pattern"
- The Concept
- Implementation
- Page Configuration (page_functions.ts)
- 1. getProps (Static/Layout Data Injection)
- 2. getStaticPaths (Static Generation)
- 3. revalidate (ISR)
- 4. dynamic (Force SSR)
- ⚡ React Compiler & Automatic Optimizations
- Integration Strategy
- Code Example
- 📚 API Reference
- 1. Components (dinou)
- 2. Hooks & Utilities (dinou)
- 3. Server-Only Utilities (dinou)
- 4. Page Configuration (page_functions.ts)
- 5. File Conventions Cheatsheet
- 🎨 Favicons
- 🔐 Environment Variables (.env)
- 💅 Styles (Tailwind, CSS Modules, & Global CSS)
- 1. Link the Stylesheet
- 2. Full Example (Layout + Global CSS + Modules)
- 🖼️ Assets & Media
- 🔗 Import Aliases (@/)
- ⚡ Bundlers & Running the App
- Development
- Production Build
- Start Production Server
- ⏏️ Eject Dinou
- 🚀 Deployment
- 📦 Changelog
- 📄 License

Getting Started

$3

The fastest way to scaffold a new application is using the CLI generator:

``bash
npx create-dinou@latest my-app
cd my-app
npm run dev
`

$3

Alternatively, you can set up a project manually:

1. Install dependencies:

`bash
npm install react react-dom dinou
`

2. Create the structure:
Create a src directory in the root of your project and add an entry page.jsx file:

`jsx
// src/page.jsx
export default function Page() {
return

Hello, Dinou!

;
}
`

3. Start the server:

`bash
npx dinou dev
`

Routing

Dinou uses a file-system based router. Files named page.{jsx,tsx,js,ts} inside the src directory automatically become routes.

$3

| Pattern | File Path | URL Example | Params (params) |
| :--------------------- | :------------------------------ | :------------ | :-------------------------- |
| Static | src/page.jsx | / | {} |
| Dynamic | src/blog/[slug]/page.jsx | /blog/hello | { slug: "hello" } |
| Optional Dynamic | src/blog/[[slug]]/page.jsx | /blog | { slug: undefined } |
| Catch-all | src/blog/[...slug]/page.jsx | /blog/a/b/c | { slug: ["a", "b", "c"] } |
| Optional Catch-all | src/blog/[[...slug]]/page.jsx | /blog | { slug: [] } |

> Note: To access query parameters (e.g. ?q=hello), use the useSearchParams() hook. They are NOT passed as props.

$3

Dinou supports deep nesting of optional segments ([[...]] or [[slug]]), but it enforces a strict No-Gap Rule.

> The Rule: You cannot skip an intermediate optional segment. You can only omit parameters if they are at the end of the URL.

#### ✅ Allowed: "Trailing Omission"

You can leave optional segments undefined, but only if they are the last ones in the structure.

- Structure: src/inventory/[[warehouse]]/[[aisle]]/page.tsx

| URL | Result (params) | Status |
| :------------------- | :------------------------------------------- | :------------------------------ |
| /inventory/main/a1 | { warehouse: "main", aisle: "a1" } | ✅ Full |
| /inventory/main | { warehouse: "main", aisle: undefined } | ✅ Valid (Last one omitted) |
| /inventory | { warehouse: undefined, aisle: undefined } | ✅ Valid (All omitted) |

#### ❌ Forbidden: "Intercalated Undefined" (Gaps)

It is not possible to define a later segment while skipping an earlier one.

- Structure: src/inventory/[[warehouse]]/[[aisle]]/page.tsx

| Goal | Result |
| :-------------------------------------- | :------------------------------------------------------------------------------------- |
| Skip warehouse but define aisle | ❌ Forbidden: You cannot provide an aisle without providing a warehouse first. |

#### Catch-all Constraints

Due to their "greedy" nature (consuming the rest of the URL), Catch-all segments ([...] and [[...]]) must always be the terminal (last) segment of a route definition. You cannot place other static or dynamic folders inside a Catch-all folder.

---

$3

#### Route Groups (folder)

Folders wrapped in parentheses are omitted from the URL path. This is useful for organizational purposes.

- src/(auth)/login/page.jsx → /login
- src/(marketing)/about/page.jsx → /about
- src/(marketing)/(nested)/about/page.jsx → /about

Why use them?
Route Groups allow you to keep your project structure logical without affecting the public URL structure. For example, grouping all authentication-related routes together.

#### Parallel Routes @slot

You can define slots (e.g., @sidebar, @header) to render multiple pages in the same layout simultaneously.

- src/dashboard/@sidebar/page.jsx
- src/dashboard/(group-a)/@bottom/page.jsx
- src/dashboard/layout.jsx → Receives sidebar and bottom as props.

> Note: Slots must be located in the same logical folder as the layout they serve.

Why use them?
Parallel routes allow independent UI sections and Error Containment:

1. Server Component with error.jsx: If the slot fails, only that specific slot renders the error UI.
2. Server Component without error.jsx: If the slot fails, it renders null safely.
3. Client Component: Without an explicit React Error Boundary, an unhandled error here will crash the entire page.

$3

#### Using (Recommended)

The component provides optimized client-side transitions with automatic prefetching.

`jsx
"use client";
import { Link } from "dinou";

export default function Menu() {
return (

);
}
`

> Note: Standard HTML tags also trigger client-side soft navigation via global event delegation in Dinou, but they lack the smart features (prefetching, fresh prop) provided by the component.

#### Programmatic Navigation

Use the useRouter hook inside Client Components ("use client").

`jsx
"use client";
import { useRouter } from "dinou";

export default function Controls() {
const router = useRouter();

return (

router.push("/home")}>Push
router.replace("/home")}>Replace
router.back()}>Go Back
router.forward()}>Go Forward

{/ Soft Reload: Refetches server data without a browser refresh /}
router.refresh()}>Refresh Data

);
}
`

Layouts & Hierarchical Rendering

Dinou uses a nested routing system. Layouts, Error pages, and Not Found pages cascade down the directory hierarchy.

$3

Layouts wrap pages and child layouts. They persist across navigation, preserving state and preventing unnecessary re-renders.

A layout component receives a children prop, params (route parameters), and any parallel slot (e.g., sidebar) defined in the same folder scope.

> Note: searchParams are NOT passed to layouts.

`jsx
// src/dashboard/layout.jsx
export default async function Layout({ children, params, sidebar }) {
return (

Dashboard for {params.teamId}

{children}

);
}
`

Layouts are nested by default. A page at src/dashboard/settings/page.jsx will be wrapped by:

1. src/layout.jsx (Root Layout)
2. src/dashboard/layout.jsx (Dashboard Layout)
3. src/dashboard/settings/page.jsx (The Page)

Fetching data in Layouts:
The Root Layout that applies to a specific page can receive additional props by defining a getProps function in a page_functions.ts file located alongside the page:

`typescript
// src/foo/bar/page_functions.ts
export async function getProps({ params }) {
// fetch data using route params
const data = await fetchData(params.id);
// 'layout' props are injected into the Root Layout for this page
return { page: { data }, layout: { title: data.name } };
}
`

$3

Create an error.jsx file to define an error page for a route segment. If a page throws an error (Server or Client not controlled by an Error Boundary), Dinou looks for the closest error.jsx in the directory hierarchy (bubbling up).

error.jsx receives error (object) and params as props.

`jsx
// Error pages can be Client Components or Server Components
"use client";

export default function Page({ error, params }) {
return (


Something went wrong in {params.slug}!

{${error.name}: ${error.message}}

{/ error.stack is only defined in development, not in production /}
{error.stack && (

{error.stack}

)}


);
}
`

$3

Create a not_found.jsx file to customize the 404 UI. Like errors, Dinou renders the closest not_found.jsx found traversing up from the requested URL.

not_found.jsx receives params as a prop. To access search parameters, use useSearchParams().

$3

Sometimes you need to break out of the standard nested hierarchy (e.g., a Landing Page that shouldn't share the App Layout). Dinou uses "Flag Files" (empty files with no extension) to control this behavior.

Place these files in the same directory as your component to activate the behavior.

| Flag File | Applies To | Description |
| :-------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
| reset_layout | layout.jsx | Resets the layout tree. This layout becomes the new Root, ignoring all parent layouts. Perfect for separating Marketing pages from App pages. |
| no_layout | page.jsx, error.jsx, not_found.jsx | Prevents the component from being wrapped by _any_ layout in the hierarchy. |
| no_layout_error | error.jsx | Specifically prevents layouts only for the Error page. |
| no_layout_not_found | not_found.jsx | Specifically prevents layouts only for the Not Found page. |

#### Example: Isolate a Landing Page

If you have a marketing page at src/marketing/page.jsx and you don't want it to inherit the Root Layout:

1. Create src/marketing/layout.jsx (Your marketing layout).
2. Create an empty file named reset_layout inside src/marketing/.
3. Result: src/marketing/page.jsx will only use the marketing layout, ignoring the global root layout.

Data Fetching & Rendering

Dinou leverages React 19 Server Components to allow direct data access on the server without sending that logic to the client.

$3

You can define a React Server Component by using an async function.

`jsx
// src/blog/page.jsx
import db from "@/lib/db";

export default async function Page() {
const posts = await db.query("SELECT * FROM posts");

return (

{posts.map((post) => (

• {post.title}

))}

);
}
`

$3

Dinou employs a Zero-Config Hybrid Model. You do not need to configure pages as "Static" or "Dynamic" manually. The framework decides at runtime:

1. Static (SSG): Pages are pre-rendered at start time by default.
2. Dynamic (SSR): If a page utilizes request-specific APIs (Cookies, Headers, Search Params), it automatically opts out of static generation and renders on demand.

`jsx
import { getContext } from "dinou";

export default async function Profile() {
const ctx = getContext();
if (!ctx) return null;

// accessing cookies automatically switches this page to Dynamic Rendering (SSR)
const token = ctx.req.cookies.session_token;

const user = await fetchUser(token);
return

Hello, {user.name}

;
}
`

$3

You can enable ISR to update static pages in the background without rebuilding the entire site. Export a revalidate function from your page_functions.ts.

`typescript
// src/blog/page_functions.ts

// This page will regenerate at most once every 60 seconds
export function revalidate() {
return 60000; // time in milliseconds
}
`

$3

To add interactivity (useState, useEffect, event listeners), place the "use client" directive at the top of your file.

`jsx
"use client";

import { useState } from "react";

export default function Counter() {
const [count, setCount] = useState(0);
return setCount((c) => c + 1)}>{count};
}
`



Server Functions ("use server") & Enhanced Suspense



Dinou supports Server Functions, allowing you to call server-side logic directly from your Client Components like a Remote Procedure Call (RPC). A unique feature of Dinou is that Server Functions can return rendered Components (both Server or Client Components), not just JSON data.

1. Define a function with "use server" at the top of the file.
2. Import and call it from any component.

`jsx
// src/server-functions/get-post.jsx
"use server";
import db from "./db";
import Post from "@/components/post.jsx";

export async function getPost(postId) {
const data = await db.query("SELECT * FROM posts WHERE id = ?", [postId]);

return ;
}
`

$3

When used in a Client Component, you can use react-enhanced-suspense to automatically re-fetch the Server Function when a key changes.

`jsx
// src/[id]/page.jsx
"use client";
import { getPost } from "@/server-functions/get-post";
import Suspense from "react-enhanced-suspense";

export default function Page({ params: { id } }) {
return (
get-post-${id}}>
{() => getPost(id)}

);
}
`

How react-enhanced-suspense works:

- Standard Mode: If only children (as React Nodes) and fallback are passed, it behaves exactly like React's native .
- Enhanced Mode: If you provide a resourceId prop and children is a function, the promise returned by that function is automatically re-evaluated whenever resourceId changes. This is perfect for handling data dependencies without useEffect.

$3

In Server Components, you can simply wrap the async call to stream the result to the client as soon as it is ready.

`jsx
// src/[id]/page.jsx
import { getPost } from "@/server-functions/get-post";
import Suspense from "react-enhanced-suspense";

export default async function Page({ params: { id } }) {
return (

{/ Behaves like native Suspense (Streaming) /}
{getPost(id)}

);
}
`

$3

Server Functions can also be used as Server Actions by passing them to the action prop of a

. This allows you to handle form submissions and data mutations directly on the server without creating API endpoints manually.

1. Automatic FormData: The function receives a FormData object containing the input values.
2. Progressive Enhancement: Forms work even before JavaScript loads.
3. Redirects: Use getContext to redirect after a successful mutation.

`javascript
// src/actions/create-post.js
"use server";
import { getContext } from "dinou";
import { addPost } from "@/db/posts.js";

export async function createPost(formData) {
const context = getContext();
const title = formData.get("title");
const content = formData.get("content");

await addPost({ title, content });

context?.res?.redirect("/posts");
}
`

#### Usage in Components

You can import the function and use it directly in your JSX. You can also use the useFormStatus hook (from React 19) to show loading states while the action is executing.

`jsx
// src/new-post/page.jsx
"use client";
import { useFormStatus } from "react-dom";
import { createPost } from "@/actions/create-post";

function SubmitButton() {
const { pending } = useFormStatus();
return (

{pending ? "Saving..." : "Create Post"}

);
}

export default function Page() {
return (

{/ The 'name' attribute is required for FormData extraction /}

<br /> <br /> <SubmitButton /> <br /> </form> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Advanced Patterns: The "Dinou Pattern"</h2> <br /> <br />Dinou introduces a powerful pattern for handling mutations and list updates without full page reloads. By combining <strong>Server Functions</strong>, <strong>Global State</strong> (e.g., </code>jotai-wrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), and <strong></code>react-enhanced-suspense<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>, you can achieve granular reactivity. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />In Dinou, <strong>Server Functions can return Client Components</strong>. We leverage this to return a "Headless State Updater" component after a mutation. This component renders nothing but updates a global </code>resourceId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> atom (key), triggering a re-fetch of specific data. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### 1. The Global Store <br /> <br />Define an atom to hold the </code>resourceId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> key. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />// src/atoms.js <br />import { atom } from "jotai"; <br />import getAPIFromAtoms from "jotai-wrapper"; <br /> <br />export const { useAtom, useSetAtom, useAtomValue, getAtom, selectAtom } = <br /> getAPIFromAtoms({ <br /> tasksListKey: atom(0), <br /> isAddTask: atom(false), <br /> // rest of atoms... <br /> }); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### 2. The Headless Updater (Client Component) <br /> <br />A tiny component whose only job is to update the atoms when it mounts. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />"use client"; <br />import { useEffect } from "react"; <br />import { useSetAtom } from "@/atoms"; <br /> <br />export default function AddTaskUpdater() { <br /> const setTasksListKey = useSetAtom("tasksListKey"); <br /> const setIsAddTask = useSetAtom("isAddTask"); <br /> <br /> useEffect(() => { <br /> // Update the key to force a re-fetch <br /> setTasksListKey((k) => k + 1); <br /> setIsAddTask(false); <br /> }, [setTasksListKey, setIsAddTask]); <br /> <br /> return null; // It renders nothing visually <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### 3. The Server Function (Mutation) <br /> <br />Performs the database operation and <strong>returns the Client Component</strong>. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />"use server"; <br />import AddTaskUpdater from "../components/add-task-updater"; <br />import { tasks } from "./db"; <br /> <br />export async function addTask(text) { <br /> // Perform DB mutation <br /> tasks.push(text); <br /> <br /> // 🪄 Magic: Return the updater to run logic on the client <br /> return <AddTaskUpdater />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### 4. The Page (Consuming the Pattern) <br /> <br />Use </code>react-enhanced-suspense<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with the </code>resourceId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop. When the </code>resourceId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (in this case </code>tasksListKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) changes, the Server Function (</code>tasksList<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) is re-evaluated. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />"use client"; <br />import Suspense from "react-enhanced-suspense"; <br />import { useAtomValue, useAtom } from "@/atoms"; <br />import { addTask } from "./server-functions/add-task"; <br />import { tasksList } from "./server-functions/tasks-list"; <br />import { useState } from "react"; <br /> <br />export default function Page() { <br /> const tasksListKey = useAtomValue("tasksListKey"); <br /> const [isAddTask, setIsAddTask] = useAtom("isAddTask"); <br /> const [text, setText] = useState(""); <br /> <br /> return ( <br /> <div> <br /> {/<em> The Mutation Form </em>/} <br /> <input type="text" onChange={(e) => setText(e.target.value)} /> <br /> <button onClick={() => setIsAddTask(true)}>Add Task</button> <br /> <br /> {/<em> Conditionally render the mutation suspense </em>/} <br /> {isAddTask && ( <br /> <Suspense fallback="Adding task..." resourceId="add-task"> <br /> {() => addTask(text)} <br /> </Suspense> <br /> )} <br /> <br /> {/<em> The Reactive List </em>/} <br /> {/<em> Changing resourceId forces Suspense to re-fetch tasksList </em>/} <br /> <Suspense <br /> fallback={<div>Loading tasks...</div>} <br /> resourceId={</code>tasks-list-${tasksListKey}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">} <br /> > <br /> {() => tasksList()} <br /> </Suspense> <br /> </div> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### 5. The Data Fetching Components <br /> <br />The Server Function responsible for fetching data: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />// src/server-functions/tasks-list.jsx <br />"use server"; <br />import { tasks } from "./db"; <br />import TasksListDisplay from "../components/tasks-list-display"; <br /> <br />export async function tasksList() { <br /> return <TasksListDisplay tasks={tasks} />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />The Client Component responsible for rendering the list: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />// src/components/tasks-list-display.jsx <br />"use client"; <br /> <br />export default function TasksListDisplay({ tasks }) { <br /> return ( <br /> <div> <br /> {tasks.map((t, index) => ( <br /> <div key={index}>{t}</div> <br /> ))} <br /> </div> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Page Configuration (</code>page_functions.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</h2> <br /> <br />For advanced control over rendering behavior, data fetching, and static generation, you can create a </code>page_functions.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (or </code>.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) file next to your </code>page.jsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Use this function to fetch data based on the <strong>route parameters</strong> and inject it into your Page and Layout. <br /> <br />> <strong>Design Note:</strong> </code>getProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> only receives </code>params<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. To use request-specific data like </code>searchParams<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>cookies<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, fetch data directly inside your Server Components using </code>Suspense<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or Hooks to avoid blocking the initial HTML render. <br /> <br />- <strong>Arguments:</strong> </code>{ params }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (The dynamic route parameters). <br />- <strong>Returns:</strong> An object with </code>page<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>layout<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> keys containing the props. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/blog/[slug]/page_functions.ts <br /> <br />export async function getProps({ params }) { <br /> // 1. Fetch data based on the URL path (e.g., /blog/my-post) <br /> const post = await db.getPost(params.slug); <br /> <br /> // 2. Return data. <br /> // 'page' props go to page.jsx <br /> // 'layout' props go to layout.jsx (useful for setting document titles dynamically) <br /> return { <br /> page: { post }, <br /> layout: { title: post.title }, <br /> }; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Defines which dynamic paths should be pre-rendered at server start (SSG). <br /> <br />- <strong>ISG (Incremental Static Generation):</strong> Paths not returned here will be generated on-demand when requested for the first time. <br /> <br /><strong>Return Format:</strong> <br /> <br />Dinou is flexible with the return format depending on the complexity of your route: <br /> <br />| Route Type | Best Format | Example Return | <br />| :-------------------------- | :--------------------- | :-------------------------------- | <br />| <strong>Simple</strong> (</code>[id]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) | </code>Array<string><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>["1", "2"]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <br />| <strong>Catch-all</strong> (</code>[...slug]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) | </code>Array<Array<string>><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>[["a", "b"], ["c"]]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <br />| <strong>Nested / Complex</strong> | </code>Array<Object><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>[{ id: "1", category: "tech" }]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <br /> <br />#### Simple Dynamic Routes <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/blog/[id]/page_functions.ts <br />export function getStaticPaths() { <br /> return ["1", "2", "hello"]; <br /> // Generates: /blog/1, /blog/2, /blog/hello <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Catch-all Routes <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/docs/[...slug]/page_functions.ts <br />export function getStaticPaths() { <br /> return [ <br /> ["intro"], // /docs/intro <br /> ["api", "v1", "auth"], // /docs/api/v1/auth <br /> ]; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Automatic Route Propagation (Recursion) <br /> <br />One of Dinou's most powerful features is that <strong>static parameters propagate downwards</strong>. If you define values for a segment, Dinou will automatically generate all static sub-pages nested within that segment. <br /> <br /><strong>Example Structure:</strong> <br /> <br />- </code>src/blog/[slug]/page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (+ </code>page_functions.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) <br />- </code>src/blog/[slug]/details/page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Nested static page) <br /> <br />If </code>getStaticPaths<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in </code>blog/[slug]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> returns </code>["post-a", "post-b"]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, Dinou generates <strong>4 pages</strong>: <br /> <br />1. </code>/blog/post-a<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />2. </code>/blog/post-a/details<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />3. </code>/blog/post-b<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />4. </code>/blog/post-b/details<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Nested Pages & The "Chain of Responsibility" <br /> <br />When nesting routes, <strong>dependency flows downwards</strong>. If an intermediate segment (whether static or dynamic) contains a </code>page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it becomes a required step in the generation chain. <br /> <br />If a parent page fails to define its own paths (e.g., returns an empty array), <strong>the generator stops there</strong>. It will never reach the child pages, regardless of whether the children have valid </code>getStaticPaths<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> defined. <br /> <br /><strong>Scenario:</strong> <br /> <br />- </code>src/case3/[slug]/page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Parent Page) <br />- </code>src/case3/[slug]/[id]/page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Child Page) <br /> <br />In this structure, </code>[id]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> depends physically on </code>[slug]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> existing first. <br /> <br /><strong>❌ Broken Chain:</strong> <br />If </code>src/case3/[slug]/page_functions.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> returns </code>[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (no paths): <br /> <br />1. Dinou tries to build </code>/case3/[slug]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />2. No paths are returned. No folders are created. <br />3. <strong>Result:</strong> The build process never attempts to generate </code>[id]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, because the parent directory </code>/case3/foo/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> was never created. <br /> <br /><strong>✅ Functional Chain:</strong> <br />The parent must resolve its own level for the children to run. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/case3/[slug]/page_functions.ts <br />export function getStaticPaths() { <br /> // 1. Defines the parent folders <br /> return ["foo", "bar"]; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/case3/[slug]/[id]/page_functions.ts <br />export function getStaticPaths() { <br /> // 2. Now runs inside /case3/foo/ and /case3/bar/ <br /> return ["100", "200"]; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />> <strong>Rule of Thumb:</strong> Every </code>page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the hierarchy is responsible for "opening the door" to its children. <br /> <br />#### Nested & Complex Routes (Pass-through Segments) <br /> <br />When you have multiple dynamic segments in a path <strong>without intermediate pages</strong>, you must return an <strong>Object</strong> to map values to all parameter names involved. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// Structure: src/shop/[category]/[...specs]/[[brand]]/page_functions.ts <br />// (Assuming [category] and [...specs] do NOT have their own page.tsx) <br /> <br />export function getStaticPaths() { <br /> return [ <br /> { <br /> category: "electronics", <br /> specs: ["m3", "16gb"], <br /> brand: "apple", <br /> }, <br /> { <br /> category: "clothing", <br /> specs: ["cotton", "white"], <br /> brand: undefined, // Valid: optional and at the end of the route <br /> }, <br /> ]; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />> <strong>Reminder:</strong> According to the <strong>No-Gap Rule</strong>, you can use </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for an intermediate optional segment <strong>only if all subsequent segments are also </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>. You cannot leave a "gap" (an undefined segment followed by a defined one). <br /> <br />#### Normalization Guarantee <br /> <br />Dinou ensures that </code>params<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are consistent between SSG and SSR: <br /> <br />- <strong>Catch-all</strong> segments will always be an </code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (e.g., </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>"val"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes </code>["val"]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). <br />- <strong>Optional Single</strong> segments remain </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if omitted. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Enables Incremental Static Regeneration. Defines the cache lifetime of a static page in milliseconds. <br /> <br />- <strong>Returns:</strong> </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (milliseconds). <br />- If it returns </code>0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (or is not defined), the page remains static indefinitely (unless rebuilt). <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/dashboard/page_functions.ts <br />export function revalidate() { <br /> return 60000; // Regenerate at most once every 60 seconds <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Forces a page to be rendered dynamically (Server-Side Rendering) on every request, bypassing static generation. <br /> <br />- <strong>Returns:</strong> </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/profile/page_functions.ts <br />export function dynamic() { <br /> return true; // Always render on demand (SSR) <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">⚡ React Compiler & Automatic Optimizations</h2> <br /> <br />Dinou integrates the <strong>React Compiler</strong> (React 19+) out of the box. It analyzes your code and automatically applies fine-grained memoization to values and functions. <br /> <br />This means you can stop manually writing </code>useMemo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>useCallback<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>React.memo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Just write clean, idiomatic JavaScript, and Dinou ensures maximum performance at build time. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Dinou uses a sophisticated hybrid strategy to balance <strong>Developer Experience (DX)</strong> with <strong>Production Performance</strong>: <br /> <br />| Bundler | Development | Production | Status | <br />| :---------- | :-----------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------- | <br />| <strong>Webpack</strong> | ✅ Enabled | ✅ Enabled | Full optimization. | <br />| <strong>Rollup</strong> | ✅ Enabled | ✅ Enabled | Full optimization. | <br />| <strong>Esbuild</strong> | ⚡ <strong>Native Speed</strong> | ✅ Enabled | <strong>Hybrid Mode:</strong> Dev prioritizes instant HMR (Hot Module Replacement), while Prod injects the compiler for maximum optimization. | <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /><strong>The Old Way (Manual Optimization):</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />function ExpensiveComponent({ data }) { <br /> // Manual dependency management required <br /> const processed = useMemo(() => heavyMath(data), [data]); <br /> <br /> const handleClick = useCallback(() => { <br /> console.log(processed); <br /> }, [processed]); <br /> <br /> return <Child onAction={handleClick} />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>The Dinou Way:</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />function ExpensiveComponent({ data }) { <br /> // ✨ Automatically memoized by Dinou <br /> const processed = heavyMath(data); <br /> <br /> // ✨ Automatically stable reference <br /> const handleClick = () => { <br /> console.log(processed); <br /> }; <br /> <br /> return <Child onAction={handleClick} />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">📚 API Reference</h2> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### </code><Link><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />The primary way to navigate between pages. Enables client-side navigation (SPA transition) without full page reloads. <br /> <br />- <strong>Props:</strong> <br /> - </code>href<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (string): The target path. Supports both <strong>absolute</strong> and <strong>relative</strong> paths. <br /> - </code>prefetch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (boolean): If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, preloads the code and data for the destination route when the user hovers over the link. Defaults to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> - </code>fresh<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (boolean): If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, bypasses the client-side router cache and forces a fetch of the latest data from the server. Defaults to </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> - </code>...props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Standard HTML anchor attributes (</code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>target<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, etc.). <br /> <br /><strong>Path Resolution:</strong> <br />Dinou resolves paths similar to a file system: <br /> <br />| Type | Syntax | Example | Description | <br />| :--------------------- | :---------------- | :----------- | :------------------------------------------------------------------- | <br />| <strong>Absolute</strong> | Starts with </code>/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>/about<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Navigates from the root of the app. | <br />| <strong>Relative (Child)</strong> | No slash or </code>./<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>team<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Appends to the current path (e.g., </code>/about<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>/about/team<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). | <br />| <strong>Relative (Sibling)</strong> | Starts with </code>../<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>../contact<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Go up one level, then down (e.g., </code>/about/team<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>/about/contact<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). | <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />import { Link } from "dinou"; <br /> <br />// Absolute path <br /><Link href="/dashboard">Home</Link> <br /> <br />// Relative path (Go deeper) <br /><Link href="./settings">Settings</Link> <br /> <br />// Relative path (Go up/Sibling) <br /><Link href="../profile">Profile</Link> <br /> <br />// With options <br /><Link href="/volatile-data" fresh={true} prefetch={false}> <br /> Live Status <br /></Link> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### </code><ClientRedirect><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />A utility component that triggers an immediate client-side navigation when rendered. <br /> <br />- <strong>Props:</strong> </code>to<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (string) - The destination URL. <br />- <strong>Usage:</strong> While you can use this directly, it is recommended to use the </code>redirect()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> helper function instead for better server-side handling. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx <br />import { ClientRedirect } from "dinou"; <br />// Forces navigation to home <br />return <ClientRedirect to="/" />; <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />--- <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Functions available in <strong>both</strong> Server and Client environments. <br /> <br />#### </code>redirect(destination)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Stops execution and redirects the user. <br /> <br />- <strong>Server:</strong> Sets HTTP 307 header (if headers not sent). <br />- <strong>Client:</strong> Renders </code><ClientRedirect /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />- <strong>Usage:</strong> Use with </code>return<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to halt rendering. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { redirect } from "dinou"; <br />if (!user) return redirect("/login"); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### </code>useSearchParams()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Returns a standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>URLSearchParams<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> object to read the query string. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { useSearchParams } from "dinou"; <br /> <br />export default function SearchPage() { <br /> const searchParams = useSearchParams(); <br /> const query = searchParams.get("q"); <br /> return <div>Result: {query}</div>; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Behavior & Static Generation (Bailout):</strong> <br /> <br />| Component Type | Behavior during Build | Result | <br />| :------------------- | :------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- | <br />| <strong>Server Component</strong> | Accessing this hook triggers a <strong>Static Bailout</strong>. | The page opts out of SSG and switches to <strong>Dynamic Rendering</strong> (SSR) on demand. | <br />| <strong>Client Component</strong> | Does <strong>NOT</strong> trigger a bailout. | The page remains <strong>Static (SSG)</strong>. The initial HTML renders with empty params, and the browser updates values upon hydration. | <br /> <br />> <strong>⚠️ Client Component Warning:</strong> <br />> If used in a Client Component on a static page, be aware of <strong>Hydration Mismatches</strong>. The server renders with empty params (since they don't exist at build time), but the browser renders with the real URL. <br />> <strong>Recommendation:</strong> If the initial UI depends heavily on params, pass them as props from a Server Component to force Dynamic Rendering. <br /> <br /><strong>Common Methods:</strong> <br /> <br />- </code>.get(name)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Returns the first value. <br />- </code>.getAll(name)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Returns all values (useful for </code>?id=1&id=2<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). <br />- </code>.has(name)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Checks existence. <br />- </code>.toString()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Returns the query string. <br /> <br />#### </code>usePathname()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Returns the current URL pathname as a </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (e.g., </code>/blog/post-1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). <br /> <br />#### </code>useRouter()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Client Only) <br /> <br />Provides programmatic navigation methods. <br /> <br />- <strong>Methods:</strong> </code>.push(href)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.replace(href)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.back()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.forward()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.refresh()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />- <strong>Note:</strong> Only works inside Client Components (</code>"use client"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). <br /> <br />#### </code>useNavigationLoading()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Client Only) <br /> <br />Returns a </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> indicating if a client-side navigation is in progress. <br /> <br />--- <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### </code>getContext()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Retrieves the request/response context. <strong>Server Components Only</strong>. <br /> <br />- <strong>Returns:</strong> </code>{ req, res }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />- <strong>req:</strong> </code>headers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>cookies<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>query<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>path<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>method<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />- <strong>res:</strong> </code>status()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>setHeader()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>redirect()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>cookie()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>clearCookie()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />#### ⚠️ Security Warning: </code>getContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in Client Components <br /> <br />While </code>getContext()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> technically works during the Server-Side Rendering (SSR) phase of Client Components, <strong>using it directly inside a Client Component is strongly discouraged</strong>. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />"use client"; <br />import { getContext } from "dinou"; <br /> <br />// ❌ DANGEROUS PATTERN <br />export default function UserProfile() { <br /> const ctx = getContext(); // Runs on server during SSR <br /> return <div>{ctx.req.headers["authorization"]}</div>; <br /> // ⚠️ The sensitive header is now baked into the public HTML source code! <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Risks:</strong> <br /> <br />1. <strong>Data Leak:</strong> Any data read from </code>getContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> during SSR is serialized into the initial HTML. If you mistakenly render sensitive data (like tokens or internal headers), it will be visible in the page source (</code>View Source<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), even if React hydration fails later. <br />2. <strong>Hydration Mismatch:</strong> The browser execution will fail because </code>getContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is not available in the browser, causing the UI to break or flicker. <br /> <br /><strong>✅ Correct Pattern:</strong> <br />Fetch sensitive data in a <strong>Server Component</strong> and pass only the necessary, safe fields as props. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />// src/profile/page.tsx (Server Component) <br />import { getContext } from "dinou"; <br />import ClientProfile from "./client-profile"; <br /> <br />export default function Page() { <br /> const ctx = getContext(); <br /> // Extract ONLY what is safe for the client <br /> const safeUser = { name: ctx.req.cookies.username }; <br /> <br /> return <ClientProfile user={safeUser} />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />--- <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Export these functions from </code>page_functions.{ts,js}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to configure the associated </code>page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />#### </code>getStaticPaths()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Defines paths for Static Site Generation (SSG). <br /> <br />- <strong>Returns:</strong> </code>Array<string | string[] | Object><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />export function getStaticPaths() { <br /> return [{ slug: "foo", id: "bar" }]; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### </code>getProps({ params })<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Async</strong> function to fetch data on the server and pass it as props to the Page component and to the Root Layout (if exists). <br /> <br />- <strong>Receives:</strong> Object with resolved </code>params<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br />- <strong>Returns:</strong> Object with the props. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />export async function getProps({ params }) { <br /> const data = await db.getItem(params.id); <br /> return { page: { item: data }, layout: { title: data.title } }; // Available as props in page.tsx and Root Layout of this particular page. <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### </code>revalidate()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Sets the Incremental Static Regeneration (ISR) time in <strong>milliseconds</strong>. <br /> <br />- <strong>Returns:</strong> Number (ms). </code>0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> means no revalidate (always the same static page). <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />export function revalidate() { <br /> return 60000; <br />} // Regenerate static page every 1 minute <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### </code>dynamic()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Whether to bypass static generation or not (e.g. use dynamic rendering). <br /> <br />- <strong>Returns:</strong> </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />export function dynamic() { <br /> return true; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />--- <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Dinou recognizes specific filenames to build the routing hierarchy. <br /> <br />#### Route Components <br /> <br />| Filename | Environment | Description | <br />| :-------------------------- | :--------------- | :--------------------------------------------- | <br />| </code>page.{jsx,tsx,js,ts}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Server or Client | The unique UI for a route. | <br />| </code>layout.{jsx,tsx,js,ts}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Server or Client | Wraps the page and children segments. | <br />| </code>error.{jsx,tsx,js,ts}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Server or Client | UI for 500 errors within the segment. | <br />| </code>not_found.{jsx,tsx,js,ts}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Server or Client | UI for 404 not found pages within the segment. | <br /> <br />#### Layout Control Flags (Empty Files) <br /> <br />Create these empty files to alter how layouts apply to a specific route directory. <br /> <br />| Filename | Effect | <br />| :-------------------- | :--------------------------------------------------------------------------------------------------- | <br />| </code>no_layout<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The </code>page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in this folder will <strong>NOT</strong> be applied any layout. | <br />| </code>reset_layout<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Resets the layout hierarchy. The first layout found from within this folder becomes the Root Layout. | <br />| </code>no_layout_error<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The </code>error.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in this folder will render without any layout. | <br />| </code>no_layout_not_found<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The </code>not-found.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in this folder will render without any layout. | <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">🎨 Favicons</h2> <br /> <br />To add a favicon to your application: <br /> <br />1. Generate your assets using a tool like <a href="https://favicon.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">favicon.io</a>. <br />2. Unzip the downloaded folder. <br />3. Rename the folder to </code>favicons<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and place it in the <strong>root</strong> of your project. <br />4. Update your root </code>layout.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (or </code>page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) to include the references in the </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />"use client"; <br /> <br />import type { ReactNode } from "react"; <br /> <br />export default function Layout({ children }: { children: ReactNode }) { <br /> return ( <br /> <html lang="en"> <br /> <head> <br /> <title>Dinou App</title> <br /> <link rel="icon" type="image/png" href="/favicon.ico" /> <br /> <link <br /> rel="apple-touch-icon" <br /> sizes="180x180" <br /> href="/apple-touch-icon.png" <br /> /> <br /> <link <br /> rel="icon" <br /> type="image/png" <br /> sizes="32x32" <br /> href="/favicon-32x32.png" <br /> /> <br /> <link <br /> rel="icon" <br /> type="image/png" <br /> sizes="16x16" <br /> href="/favicon-16x16.png" <br /> /> <br /> <link rel="manifest" href="/site.webmanifest" /> <br /> </head> <br /> <body>{children}</body> <br /> </html> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">🔐 Environment Variables (</code>.env<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</h2> <br /> <br />Dinou automatically loads environment variables for server-side code (Server Components, Server Functions, and </code>getProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). <br /> <br />1. Create a </code>.env<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file in the root of your project. <br />2. Add </code>.env<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to your </code>.gitignore<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to prevent exposing sensitive keys. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br /><h1 class="text-2xl font-bold mt-6 mb-4">.env</h1> <br />API_SECRET=my_secret_value <br />DB_HOST=localhost <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">💅 Styles (Tailwind, CSS Modules, & Global CSS)</h2> <br /> <br />Dinou supports <strong>Tailwind CSS</strong>, <strong>CSS Modules</strong> (</code>.module.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), and standard <strong>Global CSS</strong> (</code>.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) out of the box. <br /> <br />Dinou bundles all your styles into a single file served at </code>/styles.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. You <strong>must</strong> manually link this file in your root layout or page. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Add the link tag to the </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> of your root component: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br /><link href="/styles.css" rel="stylesheet" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /><strong></code>src/layout.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> (Client Component example): <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />"use client"; <br /> <br />import type { ReactNode } from "react"; <br />import "./globals.css"; // Import global styles here <br /> <br />export default function Layout({ children }: { children: ReactNode }) { <br /> return ( <br /> <html lang="en"> <br /> <head> <br /> <title>Dinou App</title> <br /> {/<em> Favicons omitted for brevity </em>/} <br /> <link href="/styles.css" rel="stylesheet" /> <br /> </head> <br /> <body>{children}</body> <br /> </html> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong></code>src/globals.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> (Tailwind setup): <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css <br />@import "tailwindcss"; <br /> <br />.custom-bg { <br /> background-color: purple; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong></code>src/page.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> (Using CSS Modules): <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />"use client"; <br /> <br />import styles from "./page.module.css"; <br /> <br />export default function Page() { <br /> return ( <br /> <div className={</code>text-red-500 custom-bg ${styles.underlined}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}> <br /> Hello World! <br /> </div> <br /> ); <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong></code>src/page.module.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css <br />.underlined { <br /> text-decoration: underline; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong></code>src/css.d.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> (TypeScript support for modules): <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />declare module "*.module.css" { <br /> const classes: { [key: string]: string }; <br /> export default classes; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">🖼️ Assets & Media</h2> <br /> <br />You can import media files directly into your components. Dinou supports a wide range of extensions: <br /> <br />- <strong>Images:</strong> </code>.png<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.jpg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.jpeg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.gif<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.svg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.webp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.avif<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.ico<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.mjpeg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.mjpg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />- <strong>Audio/Video:</strong> </code>.mp4<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.webm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.ogg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.mov<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.avi<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.mkv<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.mp3<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.wav<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.flac<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.m4a<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.aac<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Usage:</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// src/component.tsx <br />"use client"; <br />import logo from "./logo.png"; <br /> <br />export default function Component() { <br /> return <img src={logo} alt="Logo" />; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>TypeScript Configuration:</strong> <br />To avoid type errors, create a declaration file (e.g., </code>src/assets.d.ts<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">): <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />declare module "*.png" { <br /> const value: string; <br /> export default value; <br />} <br />// Repeat for other extensions used (jpg, svg, mp4, etc.) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />> <strong>Customization:</strong> If you need to support additional extensions, you can <a href="#-eject-dinou" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">eject</a> Dinou and modify </code>dinou/core/asset-extensions.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">🔗 Import Aliases (</code>@/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</h2> <br /> <br />Dinou supports import aliases (e.g., </code>import Button from "@/components/Button"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Configure paths in your </code>tsconfig.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /><strong></code>tsconfig.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (TypeScript):</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json <br />{ <br /> "compilerOptions": { <br /> "baseUrl": ".", <br /> "paths": { <br /> "@/<em>": ["src/</em>"] <br /> }, <br /> "allowJs": true, <br /> "noEmit": true, <br /> "jsx": "react-jsx", <br /> "strict": true <br /> }, <br /> "include": ["src"] <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">⚡ Bundlers & Running the App</h2> <br /> <br />Dinou is flexible and integrates with three major bundlers: <strong>esbuild</strong> (default), <strong>Rollup</strong>, and <strong>Webpack</strong>. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Starts the development server with hot reloading. Files are emitted to the </code>public<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder. <br /> <br />| Command | Bundler | Description | <br />| :-------------------- | :---------- | :------------------------- | <br />| </code>npm run dev<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>esbuild</strong> | Default. Fastest startup. | <br />| </code>npm run dev:esbuild<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>esbuild</strong> | Explicit esbuild command. | <br />| </code>npm run dev:rollup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Rollup</strong> | Uses Rollup for bundling. | <br />| </code>npm run dev:webpack<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Webpack</strong> | Uses Webpack for bundling. | <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Compiles the application for production. Files are emitted to the </code>dist3<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder. <br /> <br />| Command | Bundler | <br />| :---------------------- | :--------------------- | <br />| </code>npm run build<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>esbuild</strong> (Default) | <br />| </code>npm run build:esbuild<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>esbuild</strong> (Explicit) | <br />| </code>npm run build:rollup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Rollup</strong> | <br />| </code>npm run build:webpack<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Webpack</strong> | <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Runs the built application from the </code>dist3<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder. <br /> <br />| Command | Description | <br />| :---------------------- | :---------------------------------- | <br />| </code>npm start<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Same as </code>npm run start:esbuild<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>npm run start:esbuild<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Use it after building with esbuild. | <br />| </code>npm run start:rollup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Use it after building with Rollup. | <br />| </code>npm run start:webpack<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Use it after building with Webpack. | <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">⏏️ Eject Dinou</h2> <br /> <br />If you need full control over the configuration or internal logic, you can "eject" the framework. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br />npm run eject <br /><h1 class="text-2xl font-bold mt-6 mb-4">or</h1> <br />npx dinou eject <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />This will copy the entire Dinou core into a </code>dinou/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder in your project root, allowing you to modify build scripts, server logic, and configuration files directly. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">🚀 Deployment</h2> <br /> <br />Dinou apps can be deployed to any platform supporting Node.js, provided you can pass custom flags. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Dinou works seamlessly on DigitalOcean. It allows full control over the runtime command, essential for the required </code>--conditions react-server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> flag. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Netlify is currently incompatible because it does not support passing custom Node.js flags (</code>--conditions react-server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) during runtime. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />Ensure your platform allows customization of the start command. Your start command should look like: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br />node --conditions react-server ... <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />_(Or use </code>npm start` if your package.json scripts are configured correctly)._ <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">📦 Changelog</h2> <br /> <br />For a detailed list of changes, enhancements, and bug fixes across versions, see the <a href="./CHANGELOG.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CHANGELOG.md</a>. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">📄 License</h2> <br /> <br />Dinou is licensed under the <a href="./LICENSE.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</a>. <br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><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="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.10.4\"}]\n2e:[\"$\",\"$L5\",\"@babel/plugin-transform-modules-commonjs\",{\"href\":\"/package/%40babel%2Fplugin-transform-modules-commonjs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/plugin-transform-modules-commonjs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.27.1\"}]]}]\n2f:[\"$\",\"$L5\",\"@babel/preset-react\",{\"href\":\"/package/%40babel%2Fpreset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.27.1\"}]]}]\n30:[\"$\",\"$L5\",\"@babel/preset-typescript\",{\"href\":\"/package/%40babel%2Fpreset-typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.27.1\"}]]}]\n31:[\"$\",\"$L5\",\"@babel/register\",{\"href\":\"/package/%40babel%2Fregister\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/register\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.27.1\"}]]}]\n32:[\"$\",\"$L5\",\"@babel/traverse\",{\"href\":\"/package/%40babel%2Ftraverse\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,"])</script><script>self.__next_f.push([1,"\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/traverse\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.28.3\"}]]}]\n33:[\"$\",\"$L5\",\"@esbuild-plugins/tsconfig-paths\",{\"href\":\"/package/%40esbuild-plugins%2Ftsconfig-paths\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@esbuild-plugins/tsconfig-paths\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.1.2\"}]]}]\n34:[\"$\",\"$L5\",\"@pmmmwh/react-refresh-webpack-plugin\",{\"href\":\"/package/%40pmmmwh%2Freact-refresh-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@pmmmwh/react-refresh-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.2\"}]]}]\n35:[\"$\",\"$L5\",\"@roggc/react-server-dom-esm\",{\"href\":\"/package/%40roggc%2Freact-server-dom-esm\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@roggc/react-server-dom-esm\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.0.0-b061b597-20251212\"}]]}]\n36:[\"$\",\"$L5\",\"@rollup/plugin-babel\",{\"href\":\"/package/%40rollup%2Fplugin-babel\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-babel\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.4\"}]]}]\n37:[\"$\",\"$L5\",\"@rollu"])</script><script>self.__next_f.push([1,"p/plugin-commonjs\",{\"href\":\"/package/%40rollup%2Fplugin-commonjs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-commonjs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^28.0.6\"}]]}]\n38:[\"$\",\"$L5\",\"@rollup/plugin-json\",{\"href\":\"/package/%40rollup%2Fplugin-json\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-json\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.1.0\"}]]}]\n39:[\"$\",\"$L5\",\"@rollup/plugin-node-resolve\",{\"href\":\"/package/%40rollup%2Fplugin-node-resolve\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-node-resolve\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.0.1\"}]]}]\n3a:[\"$\",\"$L5\",\"@rollup/plugin-replace\",{\"href\":\"/package/%40rollup%2Fplugin-replace\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-replace\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.2\"}]]}]\n3b:[\"$\",\"$L5\",\"@swc/core\",{\"href\":\"/package/%40swc%2Fcore\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity"])</script><script>self.__next_f.push([1,"-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@swc/core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.15.10\"}]]}]\n3c:[\"$\",\"$L5\",\"@tailwindcss/postcss\",{\"href\":\"/package/%40tailwindcss%2Fpostcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@tailwindcss/postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.10\"}]]}]\n3d:[\"$\",\"$L5\",\"autoprefixer\",{\"href\":\"/package/autoprefixer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"autoprefixer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^10.4.21\"}]]}]\n3e:[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^10.0.0\"}]]}]\n3f:[\"$\",\"$L5\",\"babel-plugin-react-compiler\",{\"href\":\"/package/babel-plugin-react-compiler\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-plugin-react-compiler\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n40:[\"$\",\"$L5\",\"chokidar\",{\"href\":\"/package/chokidar\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\""])</script><script>self.__next_f.push([1,"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"chokidar\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.3\"}]]}]\n41:[\"$\",\"$L5\",\"commander\",{\"href\":\"/package/commander\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"commander\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^14.0.0\"}]]}]\n42:[\"$\",\"$L5\",\"concurrently\",{\"href\":\"/package/concurrently\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"concurrently\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.2.0\"}]]}]\n43:[\"$\",\"$L5\",\"cookie-parser\",{\"href\":\"/package/cookie-parser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cookie-parser\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.7\"}]]}]\n44:[\"$\",\"$L5\",\"copy-webpack-plugin\",{\"href\":\"/package/copy-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"copy-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^13.0.1\"}]]}]\n45:[\"$\",\"$L5\",\"cross-env\",{\"href\":\"/package/cross-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-"])</script><script>self.__next_f.push([1,"foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cross-env\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.3\"}]]}]\n46:[\"$\",\"$L5\",\"css-loader\",{\"href\":\"/package/css-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.1.2\"}]]}]\n47:[\"$\",\"$L5\",\"css-modules-require-hook\",{\"href\":\"/package/css-modules-require-hook\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-modules-require-hook\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.3\"}]]}]\n48:[\"$\",\"$L5\",\"dotenv\",{\"href\":\"/package/dotenv\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"dotenv\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.5.0\"}]]}]\n49:[\"$\",\"$L5\",\"esbuild\",{\"href\":\"/package/esbuild\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"esbuild\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.27.0\"}]]}]\n4a:[\"$\",\"$L5\",\"esbuild-copy-static-files\",{\"href\":\"/package/esbuild-copy-static-files\",\"className\":\"group flex items-center justify-between rounded-md px"])</script><script>self.__next_f.push([1,"-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"esbuild-copy-static-files\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.1.0\"}]]}]\n4b:[\"$\",\"$L5\",\"express\",{\"href\":\"/package/express\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"express\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.0\"}]]}]\n4c:[\"$\",\"$L5\",\"generic-names\",{\"href\":\"/package/generic-names\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"generic-names\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.0\"}]]}]\n4d:[\"$\",\"$L5\",\"loader-utils\",{\"href\":\"/package/loader-utils\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"loader-utils\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.3.1\"}]]}]\n4e:[\"$\",\"$L5\",\"mini-css-extract-plugin\",{\"href\":\"/package/mini-css-extract-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mini-css-extract-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foregr"])</script><script>self.__next_f.push([1,"ound\",\"children\":\"^2.9.4\"}]]}]\n4f:[\"$\",\"$L5\",\"multer\",{\"href\":\"/package/multer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"multer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.2\"}]]}]\n50:[\"$\",\"$L5\",\"postcss\",{\"href\":\"/package/postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.5.5\"}]]}]\n51:[\"$\",\"$L5\",\"postcss-import\",{\"href\":\"/package/postcss-import\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-import\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.1.1\"}]]}]\n52:[\"$\",\"$L5\",\"postcss-loader\",{\"href\":\"/package/postcss-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.2.0\"}]]}]\n53:[\"$\",\"$L5\",\"postcss-modules\",{\"href\":\"/package/postcss-modules\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$un"])</script><script>self.__next_f.push([1,"defined\"]}],\"postcss-modules\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.1\"}]]}]\n54:[\"$\",\"$L5\",\"react-refresh\",{\"href\":\"/package/react-refresh\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-refresh\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.17.0\"}]]}]\n55:[\"$\",\"$L5\",\"react-server-dom-webpack\",{\"href\":\"/package/react-server-dom-webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-server-dom-webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.3\"}]]}]\n56:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.46.2\"}]]}]\n57:[\"$\",\"$L5\",\"rollup-plugin-copy\",{\"href\":\"/package/rollup-plugin-copy\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-copy\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.5.0\"}]]}]\n58:[\"$\",\"$L5\",\"rollup-plugin-delete\",{\"href\":\"/package/rollup-plugin-delete\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\","])</script><script>self.__next_f.push([1,"\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-delete\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.1\"}]]}]\n59:[\"$\",\"$L5\",\"rollup-plugin-postcss\",{\"href\":\"/package/rollup-plugin-postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n5a:[\"$\",\"$L5\",\"rollup-plugin-tsconfig-paths\",{\"href\":\"/package/rollup-plugin-tsconfig-paths\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-tsconfig-paths\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.5.2\"}]]}]\n5b:[\"$\",\"$L5\",\"tailwindcss\",{\"href\":\"/package/tailwindcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tailwindcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.10\"}]]}]\n5c:[\"$\",\"$L5\",\"tsconfig-paths\",{\"href\":\"/package/tsconfig-paths\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsconfig-paths\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.0\"}]]}]\n5d:[\"$\",\"$L5\",\"tsconfig-paths-webpack-plugin\",{\"href\":\"/package/tsconfig-paths-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-"])</script><script>self.__next_f.push([1,"foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsconfig-paths-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.0\"}]]}]\n5e:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.103.0\"}]]}]\n5f:[\"$\",\"$L5\",\"webpack-cli\",{\"href\":\"/package/webpack-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.1\"}]]}]\n60:[\"$\",\"$L5\",\"webpack-dev-server\",{\"href\":\"/package/webpack-dev-server\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-dev-server\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.2\"}]]}]\n61:[\"$\",\"$L5\",\"ws\",{\"href\":\"/package/ws\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ws\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.18.3\"}]]}]\n"])</script><script>self.__next_f.push([1,"62:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=19.2.3\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=19.2.3\"}]]}]]}]}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>