` | Extracts the props type from a `ComponentFn`, or passes through if already a props object |
diff --git a/content/docs/create-zero/index.mdx b/docs/create-zero.md
similarity index 100%
rename from content/docs/create-zero/index.mdx
rename to docs/create-zero.md
diff --git a/content/docs/devtools/index.mdx b/docs/devtools.md
similarity index 100%
rename from content/docs/devtools/index.mdx
rename to docs/devtools.md
diff --git a/content/docs/document-primitives/index.mdx b/docs/document-primitives.md
similarity index 94%
rename from content/docs/document-primitives/index.mdx
rename to docs/document-primitives.md
index 801faa3..88db5a2 100644
--- a/content/docs/document-primitives/index.mdx
+++ b/docs/document-primitives.md
@@ -9,9 +9,20 @@ description: Rocketstyle document components that render in the browser and expo
## Installation
-```package-install
-@pyreon/document-primitives
+::: code-group
+```bash [npm]
+npm install @pyreon/document-primitives
```
+```bash [bun]
+bun add @pyreon/document-primitives
+```
+```bash [pnpm]
+pnpm add @pyreon/document-primitives
+```
+```bash [yarn]
+yarn add @pyreon/document-primitives
+```
+:::
## Overview
diff --git a/content/docs/document/index.mdx b/docs/document.md
similarity index 97%
rename from content/docs/document/index.mdx
rename to docs/document.md
index 684d6ab..3870884 100644
--- a/content/docs/document/index.mdx
+++ b/docs/document.md
@@ -9,9 +9,20 @@ description: Universal document rendering for Pyreon — one template, 14 output
## Installation
-```package-install
-@pyreon/document
+::: code-group
+```bash [npm]
+npm install @pyreon/document
```
+```bash [bun]
+bun add @pyreon/document
+```
+```bash [pnpm]
+pnpm add @pyreon/document
+```
+```bash [yarn]
+yarn add @pyreon/document
+```
+:::
## Quick Start — Builder Pattern
diff --git a/content/docs/elements/index.mdx b/docs/elements.md
similarity index 99%
rename from content/docs/elements/index.mdx
rename to docs/elements.md
index 228b1e7..96ed45e 100644
--- a/content/docs/elements/index.mdx
+++ b/docs/elements.md
@@ -9,9 +9,20 @@ description: Foundational layout components including Element, Text, List, Overl
## Installation
-```package-install
-@pyreon/elements
+::: code-group
+```bash [npm]
+npm install @pyreon/elements
```
+```bash [bun]
+bun add @pyreon/elements
+```
+```bash [pnpm]
+pnpm add @pyreon/elements
+```
+```bash [yarn]
+yarn add @pyreon/elements
+```
+:::
## Overview
diff --git a/content/docs/feature/index.mdx b/docs/feature.md
similarity index 98%
rename from content/docs/feature/index.mdx
rename to docs/feature.md
index bf581d1..c386657 100644
--- a/content/docs/feature/index.mdx
+++ b/docs/feature.md
@@ -9,9 +9,20 @@ description: Schema-driven CRUD primitives with auto-generated hooks for lists,
## Installation
-```package-install
-@pyreon/feature
+::: code-group
+```bash [npm]
+npm install @pyreon/feature
```
+```bash [bun]
+bun add @pyreon/feature
+```
+```bash [pnpm]
+pnpm add @pyreon/feature
+```
+```bash [yarn]
+yarn add @pyreon/feature
+```
+:::
## Quick Start
@@ -403,7 +414,7 @@ const TaskToggle = defineComponent((props: { task: Task }) => {
4. On success, the cache is replaced with the server's response (which may include server-computed fields).
5. On failure, the cache is rolled back to the previous state and the `error` signal is set.
-Optimistic updates are enabled by default for `useUpdate`. Pass `{ optimistic: false }` to disable them:
+Optimistic updates are enabled by default for `useUpdate`. Pass `{ optimistic: false }` to disable them:
```ts
const { mutate } = taskFeature.useUpdate({ optimistic: false })
@@ -501,7 +512,7 @@ const initial = defaultInitialValues(taskFeature.schema)
// { id: '', title: '', status: 'todo', assignee: undefined, dueDate: undefined }
```
-This is what `useForm({ mode: 'create' })` uses internally to populate the form's initial state.
+This is what `useForm({ mode: 'create' })` uses internally to populate the form's initial state.
## `useTable`
diff --git a/content/docs/flow/index.mdx b/docs/flow.md
similarity index 97%
rename from content/docs/flow/index.mdx
rename to docs/flow.md
index 54ccf5c..33ebd3a 100644
--- a/content/docs/flow/index.mdx
+++ b/docs/flow.md
@@ -9,9 +9,20 @@ description: Reactive flow diagrams for Pyreon — signal-native nodes, edges, p
## Installation
-```package-install
-@pyreon/flow
+::: code-group
+```bash [npm]
+npm install @pyreon/flow
```
+```bash [bun]
+bun add @pyreon/flow
+```
+```bash [pnpm]
+pnpm add @pyreon/flow
+```
+```bash [yarn]
+yarn add @pyreon/flow
+```
+:::
## Quick Start
@@ -67,7 +78,7 @@ const flow = createFlow({
| `snapToGrid` | `boolean` | `false` | Snap node positions to grid |
| `snapGrid` | `number` | `20` | Grid size in pixels |
| `connectionRules` | `Record` | — | Connection validation rules by node type |
-| `nodeExtent` | `{ x: [min, max], y: [min, max] }` | — | Constrain node positions within bounds |
+| `nodeExtent` | `{ x: [min, max], y: [min, max] }` | — | Constrain node positions within bounds |
| `minZoom` | `number` | `0.1` | Minimum zoom level |
| `maxZoom` | `number` | `4` | Maximum zoom level |
diff --git a/content/docs/form/index.mdx b/docs/form.md
similarity index 98%
rename from content/docs/form/index.mdx
rename to docs/form.md
index 7676725..cbedeb5 100644
--- a/content/docs/form/index.mdx
+++ b/docs/form.md
@@ -9,9 +9,20 @@ description: Signal-based form state management with validation, field arrays, a
## Installation
-```package-install
-@pyreon/form
+::: code-group
+```bash [npm]
+npm install @pyreon/form
```
+```bash [bun]
+bun add @pyreon/form
+```
+```bash [pnpm]
+pnpm add @pyreon/form
+```
+```bash [yarn]
+yarn add @pyreon/form
+```
+:::
## Basic Usage
@@ -227,7 +238,7 @@ const LoginForm = defineComponent(() => {
### Checkboxes
-Pass `{ type: 'checkbox' }` to `register()` to get a `checked` signal that tracks the boolean value. The `onInput` handler reads `e.target.checked` instead of `e.target.value`.
+Pass `{ type: 'checkbox' }` to `register()` to get a `checked` signal that tracks the boolean value. The `onInput` handler reads `e.target.checked` instead of `e.target.value`.
```tsx
@@ -235,7 +246,7 @@ Pass `{ type: 'checkbox' }` to `register()` to get a `checked` signal that track
### Number Inputs
-Pass `{ type: 'number' }` to `register()` to use `valueAsNumber` on the input event, so the field value stays a `number` rather than a string:
+Pass `{ type: 'number' }` to `register()` to use `valueAsNumber` on the input event, so the field value stays a `number` rather than a string:
```tsx
@@ -955,7 +966,7 @@ function SubmitButton() {
}
```
-`FormProvider` accepts `{ form, children }` props. `useFormContext()` throws if called outside a `FormProvider`.
+`FormProvider` accepts `{ form, children }` props. `useFormContext()` throws if called outside a `FormProvider`.
## Real-World Examples
diff --git a/content/docs/getting-started.mdx b/docs/getting-started.md
similarity index 77%
rename from content/docs/getting-started.mdx
rename to docs/getting-started.md
index e18fee7..aba0fc7 100644
--- a/content/docs/getting-started.mdx
+++ b/docs/getting-started.md
@@ -7,9 +7,20 @@ description: Install and configure Pyreon in your project.
Install the core packages:
-```package-install
-@pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+::: code-group
+```bash [npm]
+npm install @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
```
+```bash [bun]
+bun add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+```bash [pnpm]
+pnpm add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+```bash [yarn]
+yarn add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+:::
## Vite Setup
@@ -74,9 +85,20 @@ mount(App, document.getElementById('app')!)
For server-side rendering, install the server runtime:
-```package-install
-@pyreon/runtime-server
+::: code-group
+```bash [npm]
+npm install @pyreon/runtime-server
+```
+```bash [bun]
+bun add @pyreon/runtime-server
+```
+```bash [pnpm]
+pnpm add @pyreon/runtime-server
+```
+```bash [yarn]
+yarn add @pyreon/runtime-server
```
+:::
```tsx title="src/entry-server.tsx"
import { renderToString } from '@pyreon/runtime-server'
@@ -100,9 +122,20 @@ export function render(res: WritableStream) {
## Adding Routing
-```package-install
-@pyreon/router
+::: code-group
+```bash [npm]
+npm install @pyreon/router
```
+```bash [bun]
+bun add @pyreon/router
+```
+```bash [pnpm]
+pnpm add @pyreon/router
+```
+```bash [yarn]
+yarn add @pyreon/router
+```
+:::
```tsx title="src/router.ts"
import { createRouter } from '@pyreon/router'
@@ -138,9 +171,20 @@ export default defineComponent(() => {
If you're coming from React, you can use familiar hooks:
-```package-install
-@pyreon/react-compat
+::: code-group
+```bash [npm]
+npm install @pyreon/react-compat
+```
+```bash [bun]
+bun add @pyreon/react-compat
+```
+```bash [pnpm]
+pnpm add @pyreon/react-compat
+```
+```bash [yarn]
+yarn add @pyreon/react-compat
```
+:::
```tsx
import { useState, useEffect, memo } from '@pyreon/react-compat'
diff --git a/content/docs/head/index.mdx b/docs/head.md
similarity index 99%
rename from content/docs/head/index.mdx
rename to docs/head.md
index 7d029df..c197346 100644
--- a/content/docs/head/index.mdx
+++ b/docs/head.md
@@ -9,9 +9,20 @@ description: Declarative document head management for title, meta tags, scripts,
## Installation
-```package-install
-@pyreon/head
+::: code-group
+```bash [npm]
+npm install @pyreon/head
```
+```bash [bun]
+bun add @pyreon/head
+```
+```bash [pnpm]
+pnpm add @pyreon/head
+```
+```bash [yarn]
+yarn add @pyreon/head
+```
+:::
## Quick Start
diff --git a/content/docs/hooks/index.mdx b/docs/hooks.md
similarity index 96%
rename from content/docs/hooks/index.mdx
rename to docs/hooks.md
index 7a46a88..c5d7856 100644
--- a/content/docs/hooks/index.mdx
+++ b/docs/hooks.md
@@ -9,9 +9,20 @@ description: Collection of reactive hooks for DOM interactions, media queries, f
## Installation
-```package-install
-@pyreon/hooks
+::: code-group
+```bash [npm]
+npm install @pyreon/hooks
```
+```bash [bun]
+bun add @pyreon/hooks
+```
+```bash [pnpm]
+pnpm add @pyreon/hooks
+```
+```bash [yarn]
+yarn add @pyreon/hooks
+```
+:::
## useToggle
@@ -685,7 +696,7 @@ function useElementSize(getEl: () => HTMLElement | null): () => Size
### Returns
-`() => Size` where `Size` is `{ width: number; height: number }`. Returns `{ width: 0, height: 0 }` before mount or if the element is null.
+`() => Size` where `Size` is `{ width: number; height: number }`. Returns `{ width: 0, height: 0 }` before mount or if the element is null.
### Example
@@ -776,7 +787,7 @@ function useWindowResize(throttleMs?: number): () => WindowSize
### Returns
-`() => WindowSize` where `WindowSize` is `{ width: number; height: number }`. Initializes with the current window dimensions (or `{ width: 0, height: 0 }` on the server).
+`() => WindowSize` where `WindowSize` is `{ width: number; height: number }`. Initializes with the current window dimensions (or `{ width: 0, height: 0 }` on the server).
### Example
@@ -892,7 +903,7 @@ function useBreakpoint(breakpoints?: BreakpointMap): () => string
| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
-| `breakpoints` | `BreakpointMap` | `{ xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }` | Map of breakpoint names to minimum widths in pixels |
+| `breakpoints` | `BreakpointMap` | `{ xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }` | Map of breakpoint names to minimum widths in pixels |
### Returns
@@ -1427,16 +1438,16 @@ const SmartTooltip = defineComponent<{ text: string }>((props) => {
| `useBreakpoint` | `(breakpoints?) => () => string` | Get the active breakpoint name |
| `useColorScheme` | `() => () => 'light' \| 'dark'` | Detect light/dark mode preference |
| `useReducedMotion` | `() => () => boolean` | Detect reduced-motion preference |
-| `useScrollLock` | `() => { lock, unlock }` | Lock/unlock page scrolling |
+| `useScrollLock` | `() => { lock, unlock }` | Lock/unlock page scrolling |
| `useIntersection` | `(getEl, options?) => () => IntersectionObserverEntry \| null` | Observe element intersection |
## Type Exports
| Type | Description |
| --- | --- |
-| `UseToggleResult` | `{ value: () => boolean; toggle: () => void; setTrue: () => void; setFalse: () => void }` |
-| `UseHoverResult` | `{ hovered: () => boolean; props: { onMouseEnter, onMouseLeave } }` |
-| `UseFocusResult` | `{ focused: () => boolean; props: { onFocus, onBlur } }` |
-| `Size` | `{ width: number; height: number }` |
-| `WindowSize` | `{ width: number; height: number }` |
+| `UseToggleResult` | `{ value: () => boolean; toggle: () => void; setTrue: () => void; setFalse: () => void }` |
+| `UseHoverResult` | `{ hovered: () => boolean; props: { onMouseEnter, onMouseLeave } }` |
+| `UseFocusResult` | `{ focused: () => boolean; props: { onFocus, onBlur } }` |
+| `Size` | `{ width: number; height: number }` |
+| `WindowSize` | `{ width: number; height: number }` |
| `BreakpointMap` | `Record` |
diff --git a/content/docs/hotkeys/index.mdx b/docs/hotkeys.md
similarity index 96%
rename from content/docs/hotkeys/index.mdx
rename to docs/hotkeys.md
index 7916724..fe9ed89 100644
--- a/content/docs/hotkeys/index.mdx
+++ b/docs/hotkeys.md
@@ -9,9 +9,20 @@ Keyboard shortcut management with automatic lifecycle cleanup, scope-based activ
## Installation
-```bash
+::: code-group
+```bash [npm]
+npm install @pyreon/hotkeys
+```
+```bash [bun]
bun add @pyreon/hotkeys
```
+```bash [pnpm]
+pnpm add @pyreon/hotkeys
+```
+```bash [yarn]
+yarn add @pyreon/hotkeys
+```
+:::
Peer dependencies: `@pyreon/core`, `@pyreon/reactivity`
diff --git a/content/docs/i18n/index.mdx b/docs/i18n.md
similarity index 97%
rename from content/docs/i18n/index.mdx
rename to docs/i18n.md
index ea92280..f03c699 100644
--- a/content/docs/i18n/index.mdx
+++ b/docs/i18n.md
@@ -9,9 +9,20 @@ description: Reactive internationalization with interpolation, pluralization, an
## Installation
-```package-install
-@pyreon/i18n
+::: code-group
+```bash [npm]
+npm install @pyreon/i18n
```
+```bash [bun]
+bun add @pyreon/i18n
+```
+```bash [pnpm]
+pnpm add @pyreon/i18n
+```
+```bash [yarn]
+yarn add @pyreon/i18n
+```
+:::
## Basic Usage
@@ -69,7 +80,7 @@ function Greeting() {
}
```
-`I18nProvider` accepts `{ instance: I18nInstance, children }` props. `useI18n()` throws if called outside an `I18nProvider`. The `I18nContext` is also exported for advanced use cases.
+`I18nProvider` accepts `{ instance: I18nInstance, children }` props. `useI18n()` throws if called outside an `I18nProvider`. The `I18nContext` is also exported for advanced use cases.
## Trans Component
@@ -121,7 +132,7 @@ function Legal() {
## parseRichText
-The `parseRichText` function parses tagged translation strings into an array of strings and `{ tag, children }` objects. It is used internally by `Trans` but is exported for custom rendering scenarios.
+The `parseRichText` function parses tagged translation strings into an array of strings and `{ tag, children }` objects. It is used internally by `Trans` but is exported for custom rendering scenarios.
```ts
import { parseRichText } from '@pyreon/i18n'
@@ -130,7 +141,7 @@ parseRichText('Hello world, click here')
// → ["Hello ", { tag: "bold", children: "world" }, ", click ", { tag: "link", children: "here" }]
```
-Parses `content` patterns into an array of strings and `{ tag, children }` objects. Tags that do not have a matching closing tag are left as plain text.
+Parses `content` patterns into an array of strings and `{ tag, children }` objects. Tags that do not have a matching closing tag are left as plain text.
## createI18n Configuration
@@ -355,7 +366,7 @@ i18n.locale.set('de')
## Interpolation
-Use `{{key}}` placeholders in translation strings. Values can be strings or numbers. Whitespace inside the braces is allowed.
+Use `{{key}}` placeholders in translation strings. Values can be strings or numbers. Whitespace inside the braces is allowed.
```ts
const i18n = createI18n({
@@ -1293,7 +1304,7 @@ function Trans(props: TransProps): VNode
### `parseRichText(text)`
-Parse a tagged translation string into an array of strings and `{ tag, children }` objects.
+Parse a tagged translation string into an array of strings and `{ tag, children }` objects.
```ts
function parseRichText(
@@ -1303,7 +1314,7 @@ function parseRichText(
### `interpolate(template, values?)`
-Replace `{{key}}` placeholders in a string with values from the given record.
+Replace `{{key}}` placeholders in a string with values from the given record.
```ts
function interpolate(
diff --git a/content/docs/index.mdx b/docs/index.md
similarity index 93%
rename from content/docs/index.mdx
rename to docs/index.md
index 05844b7..0e45370 100644
--- a/content/docs/index.mdx
+++ b/docs/index.md
@@ -5,7 +5,7 @@ description: A signal-based UI framework with fine-grained reactivity and a rich
Pyreon is a signal-based UI framework that renders directly to the DOM without a virtual DOM. It provides fine-grained reactivity, streaming SSR, a JSX compiler, and compatibility layers for React, Vue, Solid, and Preact.
-
+
@@ -43,7 +43,7 @@ Use the API you already know, powered by Pyreon's signal engine.
| [@pyreon/vue-compat](/docs/vue-compat) | Vue 3 Composition API — ref, computed, reactive, watch |
## State & Data
@@ -132,9 +132,20 @@ Specialized packages for rich application features.
Install the core packages:
-```package-install
-@pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+::: code-group
+```bash [npm]
+npm install @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
```
+```bash [bun]
+bun add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+```bash [pnpm]
+pnpm add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+```bash [yarn]
+yarn add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin
+```
+:::
Create a component:
diff --git a/content/docs/kinetic-presets/index.mdx b/docs/kinetic-presets.md
similarity index 98%
rename from content/docs/kinetic-presets/index.mdx
rename to docs/kinetic-presets.md
index 739dc2b..1e1298e 100644
--- a/content/docs/kinetic-presets/index.mdx
+++ b/docs/kinetic-presets.md
@@ -9,9 +9,20 @@ description: Library of 90+ ready-made CSS transition presets and factories for
## Installation
-```package-install
-@pyreon/kinetic-presets
+::: code-group
+```bash [npm]
+npm install @pyreon/kinetic-presets
```
+```bash [bun]
+bun add @pyreon/kinetic-presets
+```
+```bash [pnpm]
+pnpm add @pyreon/kinetic-presets
+```
+```bash [yarn]
+yarn add @pyreon/kinetic-presets
+```
+:::
## Quick Start
@@ -343,8 +354,8 @@ const fancy = compose(fade, scaleIn, blurIn)
| Field | Merge Strategy |
|---|---|
-| `enterStyle` / `enterToStyle` | Shallow object merge: `{ ...a, ...b }` |
-| `leaveStyle` / `leaveToStyle` | Shallow object merge: `{ ...a, ...b }` |
+| `enterStyle` / `enterToStyle` | Shallow object merge: `{ ...a, ...b }` |
+| `leaveStyle` / `leaveToStyle` | Shallow object merge: `{ ...a, ...b }` |
| `enterTransition` / `leaveTransition` | Last preset wins |
| `enter` / `enterFrom` / `enterTo` | Class names concatenated with space |
| `leave` / `leaveFrom` / `leaveTo` | Class names concatenated with space |
diff --git a/content/docs/kinetic/index.mdx b/docs/kinetic.md
similarity index 96%
rename from content/docs/kinetic/index.mdx
rename to docs/kinetic.md
index c2cf373..dbd2291 100644
--- a/content/docs/kinetic/index.mdx
+++ b/docs/kinetic.md
@@ -9,9 +9,20 @@ description: CSS-transition-based animation components for enter/leave transitio
## Installation
-```package-install
-@pyreon/kinetic
+::: code-group
+```bash [npm]
+npm install @pyreon/kinetic
```
+```bash [bun]
+bun add @pyreon/kinetic
+```
+```bash [pnpm]
+pnpm add @pyreon/kinetic
+```
+```bash [yarn]
+yarn add @pyreon/kinetic
+```
+:::
## Overview
@@ -180,7 +191,7 @@ Every transition moves through four stages:
| Stage | Description |
|---|---|
-| `hidden` | Element is not mounted (or has `display: none` if `unmount={false}`) |
+| `hidden` | Element is not mounted (or has `display: none` if `unmount={false}`) |
| `entering` | Enter classes/styles applied, animation in progress |
| `entered` | Enter animation complete, element fully visible |
| `leaving` | Leave classes/styles applied, animation in progress |
diff --git a/content/docs/machine/index.mdx b/docs/machine.md
similarity index 98%
rename from content/docs/machine/index.mdx
rename to docs/machine.md
index 1410edd..89cbfb9 100644
--- a/content/docs/machine/index.mdx
+++ b/docs/machine.md
@@ -9,9 +9,20 @@ description: Reactive state machines for Pyreon — constrained signals with typ
## Installation
-```package-install
-@pyreon/machine
+::: code-group
+```bash [npm]
+npm install @pyreon/machine
```
+```bash [bun]
+bun add @pyreon/machine
+```
+```bash [pnpm]
+pnpm add @pyreon/machine
+```
+```bash [yarn]
+yarn add @pyreon/machine
+```
+:::
## Quick Start
diff --git a/content/docs/mcp/index.mdx b/docs/mcp.md
similarity index 96%
rename from content/docs/mcp/index.mdx
rename to docs/mcp.md
index 1f6c940..1c1f586 100644
--- a/content/docs/mcp/index.mdx
+++ b/docs/mcp.md
@@ -9,9 +9,20 @@ description: Model Context Protocol server that gives AI coding assistants deep
## Installation
-```package-install
-@pyreon/mcp
+::: code-group
+```bash [npm]
+npm install @pyreon/mcp
```
+```bash [bun]
+bun add @pyreon/mcp
+```
+```bash [pnpm]
+pnpm add @pyreon/mcp
+```
+```bash [yarn]
+yarn add @pyreon/mcp
+```
+:::
## Quick Start
@@ -117,7 +128,7 @@ Automatically convert React code to idiomatic Pyreon.
**Transforms:**
- `useState(x)` to `signal(x)`
- `useMemo(() => x, [deps])` to `computed(() => x)`
-- `useEffect(() => {...}, [deps])` to `effect(() => {...})`
+- `useEffect(() => {...}, [deps])` to `effect(() => {...})`
- `useCallback(fn, [deps])` to plain `fn` (no wrapper needed)
- `useRef(null)` to `createRef()`
- React imports to Pyreon imports
diff --git a/content/docs/meta/index.mdx b/docs/meta.md
similarity index 87%
rename from content/docs/meta/index.mdx
rename to docs/meta.md
index 3eedf1f..f9189e4 100644
--- a/content/docs/meta/index.mdx
+++ b/docs/meta.md
@@ -9,9 +9,20 @@ description: Barrel package re-exporting the full Pyreon fundamentals ecosystem
## Installation
-```package-install
-@pyreon/meta
+::: code-group
+```bash [npm]
+npm install @pyreon/meta
```
+```bash [bun]
+bun add @pyreon/meta
+```
+```bash [pnpm]
+pnpm add @pyreon/meta
+```
+```bash [yarn]
+yarn add @pyreon/meta
+```
+:::
## Overview
diff --git a/content/docs/permissions/index.mdx b/docs/permissions.md
similarity index 97%
rename from content/docs/permissions/index.mdx
rename to docs/permissions.md
index 53d30e9..67868b2 100644
--- a/content/docs/permissions/index.mdx
+++ b/docs/permissions.md
@@ -9,9 +9,20 @@ Reactive permissions primitive for Pyreon. A permission is either a boolean or a
## Installation
-```bash
+::: code-group
+```bash [npm]
+npm install @pyreon/permissions
+```
+```bash [bun]
bun add @pyreon/permissions
```
+```bash [pnpm]
+pnpm add @pyreon/permissions
+```
+```bash [yarn]
+yarn add @pyreon/permissions
+```
+:::
Peer dependencies: `@pyreon/reactivity`, `@pyreon/core`
@@ -57,7 +68,7 @@ const can = createPermissions({
### Checking Permissions
-`can()` returns a boolean. It's reactive when called inside effects, computeds, or JSX `{() => ...}` wrappers.
+`can()` returns a boolean. It's reactive when called inside effects, computeds, or JSX `{() => ...}` wrappers.
```tsx
// Static check
diff --git a/content/docs/preact-compat/index.mdx b/docs/preact-compat.md
similarity index 98%
rename from content/docs/preact-compat/index.mdx
rename to docs/preact-compat.md
index 60167ed..5907777 100644
--- a/content/docs/preact-compat/index.mdx
+++ b/docs/preact-compat.md
@@ -9,9 +9,20 @@ description: Preact-compatible API layer with hooks and signals, running on Pyre
## Installation
-```package-install
-@pyreon/preact-compat
+::: code-group
+```bash [npm]
+npm install @pyreon/preact-compat
```
+```bash [bun]
+bun add @pyreon/preact-compat
+```
+```bash [pnpm]
+pnpm add @pyreon/preact-compat
+```
+```bash [yarn]
+yarn add @pyreon/preact-compat
+```
+:::
## Quick Start
@@ -29,7 +40,7 @@ import { useState, useEffect } from '@pyreon/preact-compat/hooks'
import { signal, computed } from '@pyreon/preact-compat/signals'
```
-```tsx title="src/main.tsx"
+```tsx
import { h, render } from '@pyreon/preact-compat'
import { useState, useEffect } from '@pyreon/preact-compat/hooks'
@@ -595,7 +606,7 @@ Returns `fn` as-is. Components run once, so callbacks never go stale.
function useRef
(initial?: T): { current: T | null }
```
-Returns a `{ current }` object. If `initial` is provided, `current` is set to it; otherwise it defaults to `null`.
+Returns a `{ current }` object. If `initial` is provided, `current` is set to it; otherwise it defaults to `null`.
```tsx
// DOM ref
diff --git a/content/docs/query/index.mdx b/docs/query.md
similarity index 99%
rename from content/docs/query/index.mdx
rename to docs/query.md
index 3857f78..8e3f576 100644
--- a/content/docs/query/index.mdx
+++ b/docs/query.md
@@ -9,9 +9,20 @@ description: Reactive data fetching powered by TanStack Query with fine-grained
## Installation
-```package-install
-@pyreon/query
+::: code-group
+```bash [npm]
+npm install @pyreon/query
```
+```bash [bun]
+bun add @pyreon/query
+```
+```bash [pnpm]
+pnpm add @pyreon/query
+```
+```bash [yarn]
+yarn add @pyreon/query
+```
+:::
TanStack Query core is included as a dependency -- you do not need to install `@tanstack/query-core` separately.
@@ -1118,7 +1129,7 @@ const App = defineComponent(() => {
### useQueryErrorResetBoundary
-Returns `{ reset }` -- call `reset()` to refetch all errored queries in the nearest boundary. If called outside a boundary, falls back to resetting all errored queries on the `QueryClient`.
+Returns `{ reset }` -- call `reset()` to refetch all errored queries in the nearest boundary. If called outside a boundary, falls back to resetting all errored queries on the `QueryClient`.
```ts
const { reset } = useQueryErrorResetBoundary()
diff --git a/content/docs/react-compat/index.mdx b/docs/react-compat.md
similarity index 98%
rename from content/docs/react-compat/index.mdx
rename to docs/react-compat.md
index 5a25531..f51b539 100644
--- a/content/docs/react-compat/index.mdx
+++ b/docs/react-compat.md
@@ -9,9 +9,20 @@ description: React-compatible hook API that runs on Pyreon's fine-grained reacti
## Installation
-```package-install
-@pyreon/react-compat
+::: code-group
+```bash [npm]
+npm install @pyreon/react-compat
```
+```bash [bun]
+bun add @pyreon/react-compat
+```
+```bash [pnpm]
+pnpm add @pyreon/react-compat
+```
+```bash [yarn]
+yarn add @pyreon/react-compat
+```
+:::
## Quick Start
@@ -29,7 +40,7 @@ import { createRoot } from '@pyreon/react-compat/dom'
Then use hooks exactly as you would in React:
-```tsx title="src/main.tsx"
+```tsx
import { useState, useEffect, memo } from '@pyreon/react-compat'
import { createRoot } from '@pyreon/react-compat/dom'
@@ -96,7 +107,7 @@ useEffect(() => {
})
```
-The one exception is `useEffect(() => {...}, [])` with an **empty** array, which is treated as "run once on mount" -- the callback runs inside `runUntracked` so no signals are tracked.
+The one exception is `useEffect(() => {...}, [])` with an **empty** array, which is treated as "run once on mount" -- the callback runs inside `runUntracked` so no signals are tracked.
### No Hooks Rules
@@ -482,7 +493,7 @@ const MyComponent = (props: { name: string }) => {props.name}
function useRef(initial?: T): { current: T | null }
```
-Returns a mutable `{ current }` object, identical in shape to React's ref.
+Returns a mutable `{ current }` object, identical in shape to React's ref.
```tsx
const inputRef = useRef()
diff --git a/content/docs/reactivity/index.mdx b/docs/reactivity.md
similarity index 99%
rename from content/docs/reactivity/index.mdx
rename to docs/reactivity.md
index f055812..97df6dd 100644
--- a/content/docs/reactivity/index.mdx
+++ b/docs/reactivity.md
@@ -9,9 +9,20 @@ description: Signals-based reactive primitives powering Pyreon's fine-grained re
## Installation
-```package-install
-@pyreon/reactivity
+::: code-group
+```bash [npm]
+npm install @pyreon/reactivity
```
+```bash [bun]
+bun add @pyreon/reactivity
+```
+```bash [pnpm]
+pnpm add @pyreon/reactivity
+```
+```bash [yarn]
+yarn add @pyreon/reactivity
+```
+:::
## Signals
@@ -72,9 +83,9 @@ name.label = "currentUserName"
The `name` option sets a debug label that appears in devtools, `debug()` output, and signal tracing.
-
### Peeking Without Tracking
diff --git a/content/docs/rocketstyle/index.mdx b/docs/rocketstyle.md
similarity index 96%
rename from content/docs/rocketstyle/index.mdx
rename to docs/rocketstyle.md
index b4b6344..d4cee06 100644
--- a/content/docs/rocketstyle/index.mdx
+++ b/docs/rocketstyle.md
@@ -9,9 +9,20 @@ description: Multi-dimensional style composition for Pyreon components -- themes
## Installation
-```package-install
-@pyreon/rocketstyle
+::: code-group
+```bash [npm]
+npm install @pyreon/rocketstyle
```
+```bash [bun]
+bun add @pyreon/rocketstyle
+```
+```bash [pnpm]
+pnpm add @pyreon/rocketstyle
+```
+```bash [yarn]
+yarn add @pyreon/rocketstyle
+```
+:::
## Overview
diff --git a/content/docs/router/index.mdx b/docs/router.md
similarity index 99%
rename from content/docs/router/index.mdx
rename to docs/router.md
index f9bfc00..54251ad 100644
--- a/content/docs/router/index.mdx
+++ b/docs/router.md
@@ -9,9 +9,20 @@ description: Type-safe client-side router with nested routes, navigation guards,
## Installation
-```package-install
-@pyreon/router
+::: code-group
+```bash [npm]
+npm install @pyreon/router
```
+```bash [bun]
+bun add @pyreon/router
+```
+```bash [pnpm]
+pnpm add @pyreon/router
+```
+```bash [yarn]
+yarn add @pyreon/router
+```
+:::
## Quick Start
@@ -821,7 +832,7 @@ function Editor() {
}
```
-The blocker is automatically removed when the component unmounts. You can also remove it manually via the returned `{ remove }` object.
+The blocker is automatically removed when the component unmounts. You can also remove it manually via the returned `{ remove }` object.
### onBeforeRouteLeave
@@ -1950,7 +1961,7 @@ export async function handleRequest(req: Request): Promise {
### Components
-
+
diff --git a/content/docs/runtime-dom/index.mdx b/docs/runtime-dom.md
similarity index 95%
rename from content/docs/runtime-dom/index.mdx
rename to docs/runtime-dom.md
index f61182e..433b186 100644
--- a/content/docs/runtime-dom/index.mdx
+++ b/docs/runtime-dom.md
@@ -9,9 +9,20 @@ description: Surgical signal-to-DOM renderer with no virtual DOM diffing, hydrat
## Installation
-```package-install
-@pyreon/runtime-dom
+::: code-group
+```bash [npm]
+npm install @pyreon/runtime-dom
```
+```bash [bun]
+bun add @pyreon/runtime-dom
+```
+```bash [pnpm]
+pnpm add @pyreon/runtime-dom
+```
+```bash [yarn]
+yarn add @pyreon/runtime-dom
+```
+:::
## Core Concepts
@@ -799,13 +810,13 @@ function App() {
The class lifecycle follows a standard enter/leave pattern:
**Enter:**
-1. `{name}-enter-from` and `{name}-enter-active` are added.
-2. Next animation frame: `{name}-enter-from` is removed, `{name}-enter-to` is added.
-3. On `transitionend` or `animationend`: `{name}-enter-active` and `{name}-enter-to` are removed.
+1. `{name}-enter-from` and `{name}-enter-active` are added.
+2. Next animation frame: `{name}-enter-from` is removed, `{name}-enter-to` is added.
+3. On `transitionend` or `animationend`: `{name}-enter-active` and `{name}-enter-to` are removed.
**Leave:**
-1. `{name}-leave-from` and `{name}-leave-active` are added.
-2. Next animation frame: `{name}-leave-from` is removed, `{name}-leave-to` is added.
+1. `{name}-leave-from` and `{name}-leave-active` are added.
+2. Next animation frame: `{name}-leave-from` is removed, `{name}-leave-to` is added.
3. On `transitionend` or `animationend`: element is unmounted.
### CSS Transition Example
@@ -941,12 +952,12 @@ If `show` flips back to `true` during a leave animation, Transition cancels the
| `name` | `string` | `"pyreon"` | CSS class name prefix |
| `show` | `() => boolean` | required | Reactive boolean controlling visibility |
| `appear` | `boolean` | `false` | Run enter animation on initial mount |
-| `enterFrom` | `string` | `{name}-enter-from` | Override enter-from class |
-| `enterActive` | `string` | `{name}-enter-active` | Override enter-active class |
-| `enterTo` | `string` | `{name}-enter-to` | Override enter-to class |
-| `leaveFrom` | `string` | `{name}-leave-from` | Override leave-from class |
-| `leaveActive` | `string` | `{name}-leave-active` | Override leave-active class |
-| `leaveTo` | `string` | `{name}-leave-to` | Override leave-to class |
+| `enterFrom` | `string` | `{name}-enter-from` | Override enter-from class |
+| `enterActive` | `string` | `{name}-enter-active` | Override enter-active class |
+| `enterTo` | `string` | `{name}-enter-to` | Override enter-to class |
+| `leaveFrom` | `string` | `{name}-leave-from` | Override leave-from class |
+| `leaveActive` | `string` | `{name}-leave-active` | Override leave-active class |
+| `leaveTo` | `string` | `{name}-leave-to` | Override leave-to class |
| `onBeforeEnter` | `(el: HTMLElement) => void` | -- | Called before enter animation |
| `onAfterEnter` | `(el: HTMLElement) => void` | -- | Called after enter animation |
| `onBeforeLeave` | `(el: HTMLElement) => void` | -- | Called before leave animation |
@@ -1122,13 +1133,13 @@ function AnimatedTodoList() {
| `items` | `() => T[]` | required | Reactive list source |
| `keyFn` | `(item: T, index: number) => string \| number` | required | Stable key extractor |
| `render` | `(item: T, index: number) => VNode` | required | Render function for each item |
-| `moveClass` | `string` | `{name}-move` | Class applied during move animation |
-| `enterFrom` | `string` | `{name}-enter-from` | Override enter-from class |
-| `enterActive` | `string` | `{name}-enter-active` | Override enter-active class |
-| `enterTo` | `string` | `{name}-enter-to` | Override enter-to class |
-| `leaveFrom` | `string` | `{name}-leave-from` | Override leave-from class |
-| `leaveActive` | `string` | `{name}-leave-active` | Override leave-active class |
-| `leaveTo` | `string` | `{name}-leave-to` | Override leave-to class |
+| `moveClass` | `string` | `{name}-move` | Class applied during move animation |
+| `enterFrom` | `string` | `{name}-enter-from` | Override enter-from class |
+| `enterActive` | `string` | `{name}-enter-active` | Override enter-active class |
+| `enterTo` | `string` | `{name}-enter-to` | Override enter-to class |
+| `leaveFrom` | `string` | `{name}-leave-from` | Override leave-from class |
+| `leaveActive` | `string` | `{name}-leave-active` | Override leave-active class |
+| `leaveTo` | `string` | `{name}-leave-to` | Override leave-to class |
| `onBeforeEnter` | `(el: HTMLElement) => void` | -- | Called before enter animation |
| `onAfterEnter` | `(el: HTMLElement) => void` | -- | Called after enter animation |
| `onBeforeLeave` | `(el: HTMLElement) => void` | -- | Called before leave animation |
diff --git a/content/docs/runtime-server/index.mdx b/docs/runtime-server.md
similarity index 98%
rename from content/docs/runtime-server/index.mdx
rename to docs/runtime-server.md
index a065652..d0c9754 100644
--- a/content/docs/runtime-server/index.mdx
+++ b/docs/runtime-server.md
@@ -16,15 +16,37 @@ The package provides four exports:
## Installation
-```package-install
-@pyreon/runtime-server
+::: code-group
+```bash [npm]
+npm install @pyreon/runtime-server
```
+```bash [bun]
+bun add @pyreon/runtime-server
+```
+```bash [pnpm]
+pnpm add @pyreon/runtime-server
+```
+```bash [yarn]
+yarn add @pyreon/runtime-server
+```
+:::
You will also need `@pyreon/core` for creating VNodes:
-```package-install
-@pyreon/core
+::: code-group
+```bash [npm]
+npm install @pyreon/core
+```
+```bash [bun]
+bun add @pyreon/core
+```
+```bash [pnpm]
+pnpm add @pyreon/core
+```
+```bash [yarn]
+yarn add @pyreon/core
```
+:::
---
@@ -352,7 +374,7 @@ const stream = renderToStream(
The stream produces chunks in this order:
1. `Dashboard
` -- immediate
-2. `` -- swap helper (first Suspense)
+2. `` -- swap helper (first Suspense)
3. `
` -- fallback placeholder
4. `
Footer content
Alice
` -- resolved content
diff --git a/content/docs/server/index.mdx b/docs/server.md
similarity index 99%
rename from content/docs/server/index.mdx
rename to docs/server.md
index 6e580ef..f8b5b3b 100644
--- a/content/docs/server/index.mdx
+++ b/docs/server.md
@@ -22,9 +22,20 @@ The package has two entry points:
## Installation
-```package-install
-@pyreon/server
+::: code-group
+```bash [npm]
+npm install @pyreon/server
```
+```bash [bun]
+bun add @pyreon/server
+```
+```bash [pnpm]
+pnpm add @pyreon/server
+```
+```bash [yarn]
+yarn add @pyreon/server
+```
+:::
`@pyreon/server` depends on `@pyreon/core`, `@pyreon/reactivity`, `@pyreon/runtime-dom`, `@pyreon/runtime-server`, `@pyreon/router`, and `@pyreon/head` — all pulled automatically from the workspace.
diff --git a/content/docs/solid-compat/index.mdx b/docs/solid-compat.md
similarity index 99%
rename from content/docs/solid-compat/index.mdx
rename to docs/solid-compat.md
index 29cee74..4c16acd 100644
--- a/content/docs/solid-compat/index.mdx
+++ b/docs/solid-compat.md
@@ -9,9 +9,20 @@ description: SolidJS-compatible reactive API that runs on Pyreon's reactive engi
## Installation
-```package-install
-@pyreon/solid-compat
+::: code-group
+```bash [npm]
+npm install @pyreon/solid-compat
```
+```bash [bun]
+bun add @pyreon/solid-compat
+```
+```bash [pnpm]
+pnpm add @pyreon/solid-compat
+```
+```bash [yarn]
+yarn add @pyreon/solid-compat
+```
+:::
## Quick Start
@@ -25,7 +36,7 @@ import { createSignal, createEffect, createMemo, Show, For } from 'solid-js'
import { createSignal, createEffect, createMemo, Show, For } from '@pyreon/solid-compat'
```
-```tsx title="src/main.tsx"
+```tsx
import { createSignal, createEffect, Show } from '@pyreon/solid-compat'
const Counter = () => {
diff --git a/content/docs/state-tree/index.mdx b/docs/state-tree.md
similarity index 98%
rename from content/docs/state-tree/index.mdx
rename to docs/state-tree.md
index fc299fa..12a2eb5 100644
--- a/content/docs/state-tree/index.mdx
+++ b/docs/state-tree.md
@@ -9,9 +9,20 @@ description: MobX-State-Tree-inspired reactive models with snapshots, patches, a
## Installation
-```package-install
-@pyreon/state-tree
+::: code-group
+```bash [npm]
+npm install @pyreon/state-tree
```
+```bash [bun]
+bun add @pyreon/state-tree
+```
+```bash [pnpm]
+pnpm add @pyreon/state-tree
+```
+```bash [yarn]
+yarn add @pyreon/state-tree
+```
+:::
## Quick Start
@@ -1266,9 +1277,9 @@ Destroy all hook singletons.
| `ModelSelf` | The `self` type inside actions and views |
| `StateShape` | Constraint for state objects (`Record`) |
| `Snapshot` | Plain JS snapshot type (no signals, no model instances) |
-| `Patch` | JSON patch object (`{ op: 'replace', path, value }`) |
+| `Patch` | JSON patch object (`{ op: 'replace', path, value }`) |
| `PatchListener` | Callback for `onPatch`: `(patch: Patch) => void` |
-| `ActionCall` | Descriptor passed to middleware: `{ name, args, path }` |
+| `ActionCall` | Descriptor passed to middleware: `{ name, args, path }` |
| `MiddlewareFn` | Middleware function signature: `(call, next) => unknown` |
## Error Handling
diff --git a/content/docs/storage/index.mdx b/docs/storage.md
similarity index 96%
rename from content/docs/storage/index.mdx
rename to docs/storage.md
index 90957e7..7322447 100644
--- a/content/docs/storage/index.mdx
+++ b/docs/storage.md
@@ -9,9 +9,20 @@ Reactive signal-backed persistence across all client-side storage backends. Ever
## Installation
-```bash
+::: code-group
+```bash [npm]
+npm install @pyreon/storage
+```
+```bash [bun]
bun add @pyreon/storage
```
+```bash [pnpm]
+pnpm add @pyreon/storage
+```
+```bash [yarn]
+yarn add @pyreon/storage
+```
+:::
Peer dependencies: `@pyreon/reactivity`
@@ -43,7 +54,7 @@ const prefs = useStorage('prefs', { density: 'comfortable', lang: 'en' })
// Read reactively — works in effects, computeds, JSX
effect(() => {
- document.body.className = theme() === 'dark' ? 'dark-mode' : ''
+ document.body.class = theme() === 'dark' ? 'dark-mode' : ''
})
// Remove from storage, reset to default
diff --git a/content/docs/store/index.mdx b/docs/store.md
similarity index 99%
rename from content/docs/store/index.mdx
rename to docs/store.md
index 80a1393..7481e35 100644
--- a/content/docs/store/index.mdx
+++ b/docs/store.md
@@ -9,9 +9,20 @@ description: Global state management built on Pyreon's reactivity signals.
## Installation
-```package-install
-@pyreon/store
+::: code-group
+```bash [npm]
+npm install @pyreon/store
```
+```bash [bun]
+bun add @pyreon/store
+```
+```bash [pnpm]
+pnpm add @pyreon/store
+```
+```bash [yarn]
+yarn add @pyreon/store
+```
+:::
## Quick Start
diff --git a/content/docs/storybook/index.mdx b/docs/storybook.md
similarity index 100%
rename from content/docs/storybook/index.mdx
rename to docs/storybook.md
diff --git a/content/docs/styler/index.mdx b/docs/styler.md
similarity index 98%
rename from content/docs/styler/index.mdx
rename to docs/styler.md
index 1e91c90..30f6934 100644
--- a/content/docs/styler/index.mdx
+++ b/docs/styler.md
@@ -9,9 +9,20 @@ description: CSS-in-JS engine for Pyreon with tagged templates, theming, keyfram
## Installation
-```package-install
-@pyreon/styler
+::: code-group
+```bash [npm]
+npm install @pyreon/styler
```
+```bash [bun]
+bun add @pyreon/styler
+```
+```bash [pnpm]
+pnpm add @pyreon/styler
+```
+```bash [yarn]
+yarn add @pyreon/styler
+```
+:::
## Quick Start
@@ -303,7 +314,7 @@ const Box = styled('div')`display: flex;`
// class="ns-abc123 custom-class"
-
+
// class="ns-abc123 react-style"
```
@@ -520,7 +531,7 @@ const same = sheet.insert('color: red; font-size: 14px;')
// same === className
```
-The generated class name has the format `ns-{hash}` where the hash is a base-36 FNV-1a hash of the CSS string.
+The generated class name has the format `ns-{hash}` where the hash is a base-36 FNV-1a hash of the CSS string.
### Cache Eviction
diff --git a/content/docs/table/index.mdx b/docs/table.md
similarity index 99%
rename from content/docs/table/index.mdx
rename to docs/table.md
index de39f59..bfb5f38 100644
--- a/content/docs/table/index.mdx
+++ b/docs/table.md
@@ -9,9 +9,20 @@ description: Reactive TanStack Table adapter with fine-grained signal integratio
## Installation
-```package-install
-@pyreon/table
+::: code-group
+```bash [npm]
+npm install @pyreon/table
```
+```bash [bun]
+bun add @pyreon/table
+```
+```bash [pnpm]
+pnpm add @pyreon/table
+```
+```bash [yarn]
+yarn add @pyreon/table
+```
+:::
TanStack Table core is included as a dependency -- all exports from `@tanstack/table-core` are re-exported for convenience.
diff --git a/content/docs/typescript/index.mdx b/docs/typescript.md
similarity index 96%
rename from content/docs/typescript/index.mdx
rename to docs/typescript.md
index a0ded11..ce506ec 100644
--- a/content/docs/typescript/index.mdx
+++ b/docs/typescript.md
@@ -9,9 +9,20 @@ description: Shared TypeScript configuration presets for Pyreon applications and
## Installation
-```package-install
-@pyreon/typescript
+::: code-group
+```bash [npm]
+npm install @pyreon/typescript
```
+```bash [bun]
+bun add @pyreon/typescript
+```
+```bash [pnpm]
+pnpm add @pyreon/typescript
+```
+```bash [yarn]
+yarn add @pyreon/typescript
+```
+:::
---
diff --git a/content/docs/ui-core/index.mdx b/docs/ui-core.md
similarity index 94%
rename from content/docs/ui-core/index.mdx
rename to docs/ui-core.md
index acaf1da..1c46bd7 100644
--- a/content/docs/ui-core/index.mdx
+++ b/docs/ui-core.md
@@ -9,9 +9,20 @@ description: Core initialization, CSS engine connector, and shared utilities for
## Installation
-```package-install
-@pyreon/ui-core
+::: code-group
+```bash [npm]
+npm install @pyreon/ui-core
```
+```bash [bun]
+bun add @pyreon/ui-core
+```
+```bash [pnpm]
+pnpm add @pyreon/ui-core
+```
+```bash [yarn]
+yarn add @pyreon/ui-core
+```
+:::
## Overview
@@ -130,7 +141,7 @@ import { HTML_TAGS, HTML_TEXT_TAGS } from '@pyreon/ui-core'
| Type | Description |
|---|---|
| `CSSEngineConnector` | Interface for connecting a CSS engine to UI Core |
-| `Breakpoints` | Breakpoint size map (e.g., `{ sm: 576, md: 768 }`) |
+| `Breakpoints` | Breakpoint size map (e.g., `{ sm: 576, md: 768 }`) |
| `BreakpointKeys` | String union of breakpoint names |
| `HTMLTags` | Union type of all valid HTML tag names |
| `HTMLTextTags` | Union type of text-content HTML tags |
diff --git a/content/docs/unistyle/index.mdx b/docs/unistyle.md
similarity index 99%
rename from content/docs/unistyle/index.mdx
rename to docs/unistyle.md
index bdab1ab..c6a8d91 100644
--- a/content/docs/unistyle/index.mdx
+++ b/docs/unistyle.md
@@ -9,9 +9,20 @@ description: Responsive design utilities with breakpoints, media queries, unit c
## Installation
-```package-install
-@pyreon/unistyle
+::: code-group
+```bash [npm]
+npm install @pyreon/unistyle
```
+```bash [bun]
+bun add @pyreon/unistyle
+```
+```bash [pnpm]
+pnpm add @pyreon/unistyle
+```
+```bash [yarn]
+yarn add @pyreon/unistyle
+```
+:::
## Breakpoints
diff --git a/content/docs/validation/index.mdx b/docs/validation.md
similarity index 95%
rename from content/docs/validation/index.mdx
rename to docs/validation.md
index 1beff4a..7dddb5a 100644
--- a/content/docs/validation/index.mdx
+++ b/docs/validation.md
@@ -11,29 +11,84 @@ All adapters normalize library-specific validation errors into a common `Validat
## Installation
-```package-install
-@pyreon/validation
+::: code-group
+```bash [npm]
+npm install @pyreon/validation
```
+```bash [bun]
+bun add @pyreon/validation
+```
+```bash [pnpm]
+pnpm add @pyreon/validation
+```
+```bash [yarn]
+yarn add @pyreon/validation
+```
+:::
You also need at least one schema library installed:
-```package-install
-zod
+::: code-group
+```bash [npm]
+npm install zod
+```
+```bash [bun]
+bun add zod
```
+```bash [pnpm]
+pnpm add zod
+```
+```bash [yarn]
+yarn add zod
+```
+:::
-```package-install
-valibot
+::: code-group
+```bash [npm]
+npm install valibot
+```
+```bash [bun]
+bun add valibot
+```
+```bash [pnpm]
+pnpm add valibot
```
+```bash [yarn]
+yarn add valibot
+```
+:::
-```package-install
-arktype
+::: code-group
+```bash [npm]
+npm install arktype
+```
+```bash [bun]
+bun add arktype
+```
+```bash [pnpm]
+pnpm add arktype
+```
+```bash [yarn]
+yarn add arktype
```
+:::
And `@pyreon/form` for integration:
-```package-install
-@pyreon/form
+::: code-group
+```bash [npm]
+npm install @pyreon/form
+```
+```bash [bun]
+bun add @pyreon/form
+```
+```bash [pnpm]
+pnpm add @pyreon/form
+```
+```bash [yarn]
+yarn add @pyreon/form
```
+:::
---
@@ -110,7 +165,7 @@ const form = useForm({
})
```
-When validation passes, `zodSchema` returns an empty object `{}`. When it fails, it returns a record like:
+When validation passes, `zodSchema` returns an empty object `{}`. When it fails, it returns a record like:
```ts
{
@@ -239,7 +294,7 @@ const schema = z.discriminatedUnion("type", [
### How zodSchema Works Internally
1. Calls `schema.safeParseAsync(values)`
-2. If `result.success` is `true`, returns `{}`
+2. If `result.success` is `true`, returns `{}`
3. If `result.success` is `false`, maps each `ZodIssue` to a `ValidationIssue` by converting each `PropertyKey` in `issue.path` to a string and joining with `.` (e.g., `["address", "city"]` becomes `"address.city"`). Uses `PropertyKey[]` for path arrays to support both Zod v3 and v4.
4. Passes the `ValidationIssue[]` array to `issuesToRecord` to produce the flat field-error record
5. When multiple issues exist for the same path, the first error message wins
@@ -364,7 +419,7 @@ const schema = v.object({
### How valibotSchema Works Internally
1. Calls `safeParseFn(schema, values)` (either `safeParse` or `safeParseAsync`)
-2. If `result.success` is `true`, returns `{}`
+2. If `result.success` is `true`, returns `{}`
3. If `result.success` is `false`, maps each Valibot issue to a `ValidationIssue`:
- `issue.path` items are joined by `.` using each item's `key` property
- If `issue.path` is undefined, the path defaults to `""`
@@ -468,7 +523,7 @@ const schema = type({
1. Calls `schema(values)` -- ArkType schemas are callable functions
2. Checks if the result is an `ArkErrors` array (detected by the presence of a `summary` property on the array)
-3. If not an error, returns `{}`
+3. If not an error, returns `{}`
4. If an error, maps each `ArkError` to a `ValidationIssue` by converting each `PropertyKey` in `error.path` to a string and joining with `.`
5. Passes the issues to `issuesToRecord`
@@ -920,7 +975,7 @@ import type { SchemaValidateFn, ValidateFn, ValidationIssue } from "@pyreon/vali
- `SchemaValidateFn` -- `(values: TValues) => Promise>> | Partial>>`
- `ValidateFn` -- `(value: T, allValues: Record) => Promise | string | undefined`
-- `ValidationIssue` -- `{ path: string; message: string }`
+- `ValidationIssue` -- `{ path: string; message: string }`
### Schema Adapter Template
@@ -1018,7 +1073,7 @@ export function myLibraryField(schema: MyLibraryFieldSchema): ValidateFn` | `(values: TValues) => MaybePromise>>` | Form-level validator function type |
| `ValidateFn` | `(value: T, allValues: Record) => MaybePromise` | Per-field validator function type |
| `ValidationError` | `string \| undefined` | A single field's error value |
diff --git a/content/docs/virtual/index.mdx b/docs/virtual.md
similarity index 99%
rename from content/docs/virtual/index.mdx
rename to docs/virtual.md
index 455db8f..0acfbf2 100644
--- a/content/docs/virtual/index.mdx
+++ b/docs/virtual.md
@@ -16,9 +16,20 @@ Both hooks return reactive signals that update automatically when the user scrol
## Installation
-```package-install
-@pyreon/virtual
+::: code-group
+```bash [npm]
+npm install @pyreon/virtual
```
+```bash [bun]
+bun add @pyreon/virtual
+```
+```bash [pnpm]
+pnpm add @pyreon/virtual
+```
+```bash [yarn]
+yarn add @pyreon/virtual
+```
+:::
TanStack Virtual core is included as a dependency -- core utilities and types are re-exported from `@pyreon/virtual` for convenience, so you do not need to install `@tanstack/virtual-core` separately.
@@ -358,7 +369,7 @@ const VirtualList = defineComponent(() => {
Key points for dynamic measurement:
1. Pass `measureElement` in the options to enable dynamic measurement
-2. Set `data-index={item.index}` on each item element so the virtualizer can identify it
+2. Set `data-index={item.index}` on each item element so the virtualizer can identify it
3. Call `virtual.instance.measureElement(el)` via a `ref` callback on each item
4. Do **not** set a fixed `height` on items -- let them size naturally based on content
5. Provide a reasonable `estimateSize` as the initial guess -- the virtualizer uses this for items that have not been measured yet
diff --git a/content/docs/vite-plugin/index.mdx b/docs/vite-plugin.md
similarity index 98%
rename from content/docs/vite-plugin/index.mdx
rename to docs/vite-plugin.md
index e7ced4c..65f9aad 100644
--- a/content/docs/vite-plugin/index.mdx
+++ b/docs/vite-plugin.md
@@ -9,15 +9,37 @@ description: Vite integration that applies Pyreon's JSX reactive transform and c
## Installation
-```package-install
-@pyreon/vite-plugin
+::: code-group
+```bash [npm]
+npm install @pyreon/vite-plugin
```
+```bash [bun]
+bun add @pyreon/vite-plugin
+```
+```bash [pnpm]
+pnpm add @pyreon/vite-plugin
+```
+```bash [yarn]
+yarn add @pyreon/vite-plugin
+```
+:::
You also need `vite` and `@pyreon/compiler` as dependencies:
-```package-install
-vite @pyreon/compiler
+::: code-group
+```bash [npm]
+npm install vite @pyreon/compiler
+```
+```bash [bun]
+bun add vite @pyreon/compiler
+```
+```bash [pnpm]
+pnpm add vite @pyreon/compiler
+```
+```bash [yarn]
+yarn add vite @pyreon/compiler
```
+:::
---
diff --git a/content/docs/vue-compat/index.mdx b/docs/vue-compat.md
similarity index 98%
rename from content/docs/vue-compat/index.mdx
rename to docs/vue-compat.md
index b76ee29..21701e8 100644
--- a/content/docs/vue-compat/index.mdx
+++ b/docs/vue-compat.md
@@ -9,9 +9,20 @@ description: Vue 3 Composition API that runs on Pyreon's fine-grained reactive e
## Installation
-```package-install
-@pyreon/vue-compat
+::: code-group
+```bash [npm]
+npm install @pyreon/vue-compat
```
+```bash [bun]
+bun add @pyreon/vue-compat
+```
+```bash [pnpm]
+pnpm add @pyreon/vue-compat
+```
+```bash [yarn]
+yarn add @pyreon/vue-compat
+```
+:::
## Quick Start
@@ -27,7 +38,7 @@ import { ref, computed, watch, onMounted, defineComponent } from '@pyreon/vue-co
A complete counter component:
-```tsx title="src/Counter.tsx"
+```tsx
import { ref, computed, watch, onMounted, defineComponent, h } from '@pyreon/vue-compat'
import { createApp } from '@pyreon/vue-compat'
@@ -750,7 +761,7 @@ watchEffect(() => {
| Feature | `watch` | `watchEffect` |
|---------|---------|---------------|
| Source | Explicit ref or getter | Implicit -- tracks all reads |
-| Runs immediately | Only with `{ immediate: true }` | Always |
+| Runs immediately | Only with `{ immediate: true }` | Always |
| Old/new values | Yes | No |
| Use case | React to specific changes | Sync side effects with state |
@@ -1551,13 +1562,13 @@ const MyComp = defineComponent({
| Vue Directive | JSX Equivalent |
|---------------|----------------|
-| `v-if="cond"` | `{cond && }` |
-| `v-else` | Ternary: `{cond ? : }` |
-| `v-show="cond"` | `style={{ display: cond ? '' : 'none' }}` |
-| `v-for="item in items"` | `{items.map(item => )}` |
-| `v-model="val"` | `value={val.value} onInput={...}` |
-| `v-on:click="fn"` | `onClick={fn}` |
-| `v-bind:class="cls"` | `class={cls}` |
+| `v-if="cond"` | `{cond && }` |
+| `v-else` | Ternary: `{cond ? : }` |
+| `v-show="cond"` | `style={{ display: cond ? '' : 'none' }}` |
+| `v-for="item in items"` | `{items.map(item => )}` |
+| `v-model="val"` | `value={val.value} :onInput='...'` |
+| `v-on:click="fn"` | `onClick={fn}` |
+| `v-bind:class="cls"` | `class={cls}` |
**4. Replace Options API with Composition API:**
diff --git a/content/docs/zero/index.mdx b/docs/zero.md
similarity index 98%
rename from content/docs/zero/index.mdx
rename to docs/zero.md
index e52228f..6fca52f 100644
--- a/content/docs/zero/index.mdx
+++ b/docs/zero.md
@@ -9,9 +9,20 @@ description: Full-stack meta-framework for Pyreon applications.
## Installation
-```package-install
-@pyreon/zero
+::: code-group
+```bash [npm]
+npm install @pyreon/zero
```
+```bash [bun]
+bun add @pyreon/zero
+```
+```bash [pnpm]
+pnpm add @pyreon/zero
+```
+```bash [yarn]
+yarn add @pyreon/zero
+```
+:::
## Quick Start
@@ -63,7 +74,7 @@ const config = defineConfig({
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `mode` | `"ssr" \| "ssg" \| "spa" \| "isr"` | `"ssr"` | Global rendering mode |
-| `vite` | `Record` | `{}` | Vite configuration overrides |
+| `vite` | `Record` | `{}` | Vite configuration overrides |
| `ssr.mode` | `"stream" \| "string"` | `"string"` | SSR output mode |
| `ssg.paths` | `string[] \| (() => string[] \| Promise)` | `[]` | Paths to prerender during build |
| `isr.revalidate` | `number` | `60` | Seconds before revalidation for ISR pages |
@@ -856,7 +867,7 @@ export default {
| `display` | `FontDisplay` | `"swap"` | `font-display` strategy |
| `preload` | `boolean` | `true` | Whether to preload fonts |
| `selfHost` | `boolean` | `true` | Download and self-host at build time |
-| `fallbacks` | `Record` | `{}` | CLS-reducing fallback font metrics |
+| `fallbacks` | `Record` | `{}` | CLS-reducing fallback font metrics |
### Font CSS Variables
@@ -1066,7 +1077,7 @@ expect(handler.calls[0].params).toEqual({ id: "123" })
|--------|-----------|-------------|
| `defineConfig` | `(config: ZeroConfig) => ZeroConfig` | Type-safe configuration helper |
| `resolveConfig` | `(config?: ZeroConfig) => ResolvedConfig` | Merge user config with defaults |
-| `createApp` | `(options) => { App, router }` | Assembles router + head + layout into an app shell |
+| `createApp` | `(options) => { App, router }` | Assembles router + head + layout into an app shell |
| `createServer` | `(options) => RequestHandler` | Creates a production SSR request handler |
| `startClient` | `(options) => void` | Client-side hydration/mount (from `@pyreon/zero/client`) |
| `Image` | `(props: ImageProps) => JSX.Element` | Optimized image component |
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..77fbf9e
--- /dev/null
+++ b/index.md
@@ -0,0 +1,35 @@
+---
+layout: home
+
+hero:
+ name: Pyreon
+ text: Build UIs with signals
+ tagline: Fine-grained reactivity, no virtual DOM, streaming SSR, and 50+ packages — with compatibility layers for React, Vue, Solid, and Preact.
+ actions:
+ - theme: brand
+ text: Get Started
+ link: /docs/getting-started
+ - theme: alt
+ text: Browse Docs
+ link: /docs/
+
+features:
+ - icon: ~>
+ title: Signal-Based Reactivity
+ details: Fine-grained signals with automatic dependency tracking. No virtual DOM — updates go directly to the DOM nodes that changed.
+ - icon: <>
+ title: Use Any API You Know
+ details: Compatibility layers for React, Preact, Vue 3, and SolidJS. Migrate gradually or pick the API style you prefer.
+ - icon: "{}"
+ title: Type-Safe Throughout
+ details: Generic inference, strict prop validation, typed routes, and typed stores. TypeScript is a first-class citizen.
+ - icon: ">>"
+ title: Streaming SSR
+ details: Server-side rendering with streaming Suspense, async components, and automatic store isolation per request.
+ - icon: //
+ title: Compiled for Speed
+ details: JSX compiler with static hoisting, reactivity wrapping, and optimal code generation. Zero runtime overhead for static content.
+ - icon: "[]"
+ title: Batteries Included
+ details: Router, forms, i18n, data fetching, state management, virtual scrolling, styling, and animations — all built for signals.
+---
diff --git a/mdx-components.tsx b/mdx-components.tsx
deleted file mode 100644
index c3ebf2a..0000000
--- a/mdx-components.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import defaultComponents from 'fumadocs-ui/mdx'
-import type { MDXComponents } from 'mdx/types'
-import { APICard } from '@/components/api-card'
-import { CompatMatrix } from '@/components/compat-matrix'
-import { PackageBadge } from '@/components/package-badge'
-import { PropTable } from '@/components/prop-table'
-import { Since } from '@/components/since'
-
-export function getMDXComponents(components?: MDXComponents): MDXComponents {
- return {
- ...defaultComponents,
- APICard,
- CompatMatrix,
- PackageBadge,
- PropTable,
- Since,
- ...components,
- }
-}
diff --git a/next-env.d.ts b/next-env.d.ts
deleted file mode 100644
index 9edff1c..0000000
--- a/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-///
-///
-import "./.next/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
deleted file mode 100644
index 9561b9e..0000000
--- a/next.config.mjs
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createMDX } from 'fumadocs-mdx/next'
-
-/** @type {import('next').NextConfig} */
-const config = {
- reactStrictMode: true,
- output: 'export',
-}
-
-const withMDX = createMDX()
-
-export default withMDX(config)
diff --git a/package.json b/package.json
index c0b9939..1dfcbad 100644
--- a/package.json
+++ b/package.json
@@ -7,34 +7,17 @@
"license": "CC-BY-3.0",
"type": "module",
"scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start",
- "postinstall": "fumadocs-mdx",
- "typecheck": "tsc --noEmit",
+ "dev": "vitepress dev",
+ "build": "vitepress build",
+ "preview": "vitepress preview",
"lint": "biome check .",
"lint:fix": "biome check . --write",
"format": "biome format . --write",
- "audit": "bun pm audit",
- "check": "bun run typecheck && bun run lint && bun run build"
- },
- "dependencies": {
- "fumadocs-core": "^16.7.4",
- "fumadocs-mdx": "^14.2.11",
- "fumadocs-ui": "^16.7.4",
- "next": "^16.2.1",
- "react": "^19.2.4",
- "react-dom": "^19.2.4"
+ "check": "bun run lint && bun run build"
},
"devDependencies": {
- "@tailwindcss/postcss": "^4.2.2",
- "@types/mdx": "^2.0.13",
- "@types/node": "^25.5.0",
- "@types/react": "^19.2.14",
- "@types/react-dom": "^19.2.3",
- "@vitus-labs/tools-lint": "^1.15.4",
- "fumadocs-docgen": "^3.0.8",
- "tailwindcss": "^4.2.2",
- "typescript": "^6.0.2"
+ "@biomejs/biome": "^2.4.8",
+ "vitepress": "^1.6.4",
+ "vue": "^3.5.16"
}
}
diff --git a/postcss.config.mjs b/postcss.config.mjs
deleted file mode 100644
index a7f73a2..0000000
--- a/postcss.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
- plugins: {
- '@tailwindcss/postcss': {},
- },
-}
diff --git a/source.config.ts b/source.config.ts
deleted file mode 100644
index bc4c324..0000000
--- a/source.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { remarkInstall } from 'fumadocs-docgen'
-import { defineConfig, defineDocs } from 'fumadocs-mdx/config'
-
-export const docs = defineDocs({
- dir: 'content/docs',
-})
-
-export default defineConfig({
- mdxOptions: {
- remarkPlugins: [remarkInstall],
- },
-})
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
deleted file mode 100644
index 45ec0eb..0000000
--- a/src/app/(home)/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { HomeLayout } from 'fumadocs-ui/layouts/home'
-import type { ReactNode } from 'react'
-import { baseOptions } from '@/lib/layout.shared'
-
-export default function Layout({ children }: { children: ReactNode }) {
- return {children}
-}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
deleted file mode 100644
index 0b0fa22..0000000
--- a/src/app/(home)/page.tsx
+++ /dev/null
@@ -1,576 +0,0 @@
-import { Card, Cards } from 'fumadocs-ui/components/card'
-import Link from 'next/link'
-
-const corePackages = [
- {
- title: 'Reactivity',
- description:
- 'Signals, computed values, effects, stores, and resources — fine-grained reactive primitives.',
- href: '/docs/reactivity',
- },
- {
- title: 'Core',
- description:
- 'Component model, JSX runtime, lifecycle hooks, control flow, context, and error boundaries.',
- href: '/docs/core',
- },
- {
- title: 'Compiler',
- description:
- 'JSX compiler with smart reactivity wrapping and static hoisting.',
- href: '/docs/compiler',
- },
- {
- title: 'Runtime DOM',
- description:
- 'Direct DOM renderer — mount, hydrate, transitions, keep-alive, and directives.',
- href: '/docs/runtime-dom',
- },
- {
- title: 'Runtime Server',
- description:
- 'SSR/SSG renderer with streaming Suspense support and store isolation.',
- href: '/docs/runtime-server',
- },
- {
- title: 'Router',
- description:
- 'Type-safe client-side routing with nested routes, guards, loaders, and prefetching.',
- href: '/docs/router',
- },
- {
- title: 'Head',
- description:
- 'Reactive document head management (title, meta, link) with SSR support.',
- href: '/docs/head',
- },
- {
- title: 'Vite Plugin',
- description:
- 'Vite integration with JSX transform, .pyreon SFC support, and HMR.',
- href: '/docs/vite-plugin',
- },
-]
-
-const compatPackages = [
- {
- title: 'React Compat',
- description:
- 'React-style hooks API (useState, useEffect, etc.) running on Pyreon reactivity.',
- href: '/docs/react-compat',
- },
- {
- title: 'Preact Compat',
- description:
- 'Preact API compatibility — h(), Component class, signals integration.',
- href: '/docs/preact-compat',
- },
- {
- title: 'Solid Compat',
- description:
- 'SolidJS-style API — createSignal, createEffect, control flow components.',
- href: '/docs/solid-compat',
- },
- {
- title: 'Vue Compat',
- description:
- 'Vue 3 Composition API — ref, computed, reactive, watch, and lifecycle hooks.',
- href: '/docs/vue-compat',
- },
-]
-
-const fundamentalsPackages = [
- {
- title: 'Store',
- description:
- 'Pinia-inspired composition stores with SSR isolation support.',
- href: '/docs/store',
- },
- {
- title: 'State Tree',
- description:
- 'Structured reactive state tree with snapshots, patches, and middleware.',
- href: '/docs/state-tree',
- },
- {
- title: 'Form',
- description:
- 'Signal-based form management with field arrays and validation.',
- href: '/docs/form',
- },
- {
- title: 'Validation',
- description: 'Schema validation adapters for Zod, Valibot, and ArkType.',
- href: '/docs/validation',
- },
- {
- title: 'I18n',
- description:
- 'Reactive internationalization with async namespace loading and plurals.',
- href: '/docs/i18n',
- },
- {
- title: 'Query',
- description:
- 'TanStack Query adapter with Suspense support and SSR dehydration.',
- href: '/docs/query',
- },
- {
- title: 'Table',
- description: 'TanStack Table adapter for reactive table state management.',
- href: '/docs/table',
- },
- {
- title: 'Virtual',
- description: 'TanStack Virtual adapter for efficient virtual scrolling.',
- href: '/docs/virtual',
- },
- {
- title: 'Machine',
- description: 'Reactive state machines with type-safe transitions.',
- href: '/docs/machine',
- },
- {
- title: 'Storage',
- description:
- 'Reactive client-side storage — localStorage, sessionStorage, cookies, IndexedDB.',
- href: '/docs/storage',
- },
- {
- title: 'Permissions',
- description: 'Type-safe reactive permissions — RBAC, ABAC, feature flags.',
- href: '/docs/permissions',
- },
- {
- title: 'Hotkeys',
- description: 'Keyboard shortcut management with scopes and modifier keys.',
- href: '/docs/hotkeys',
- },
-]
-
-const ecosystemPackages = [
- {
- title: 'Document',
- description:
- 'Universal document rendering — one template, 14+ output formats.',
- href: '/docs/document',
- },
- {
- title: 'Charts',
- description:
- 'Reactive ECharts bridge with lazy loading and signal-driven updates.',
- href: '/docs/charts',
- },
- {
- title: 'Code',
- description:
- 'Reactive CodeMirror 6 code editor with signals, minimap, and diff editor.',
- href: '/docs/code',
- },
- {
- title: 'Flow',
- description:
- 'Reactive flow diagrams with signal-native nodes, pan/zoom, and auto-layout.',
- href: '/docs/flow',
- },
- {
- title: 'Feature',
- description: 'Schema-driven CRUD primitives with auto-generated hooks.',
- href: '/docs/feature',
- },
-]
-
-const uiPackages = [
- {
- title: 'Styler',
- description:
- 'Lightweight CSS-in-JS engine with theme support and dynamic styles.',
- href: '/docs/styler',
- },
- {
- title: 'Unistyle',
- description: 'Responsive theming, breakpoints, and media query utilities.',
- href: '/docs/unistyle',
- },
- {
- title: 'Hooks',
- description:
- '16 signal-based hooks — breakpoints, click outside, focus trap, intersection, and more.',
- href: '/docs/hooks',
- },
- {
- title: 'Elements',
- description:
- 'Foundational UI components — Element, List, Overlay, Portal, Text.',
- href: '/docs/elements',
- },
- {
- title: 'Coolgrid',
- description: 'Responsive CSS grid system with Container, Row, and Col.',
- href: '/docs/coolgrid',
- },
- {
- title: 'Kinetic Presets',
- description:
- '120+ animation presets and composition utilities for transitions.',
- href: '/docs/kinetic-presets',
- },
- {
- title: 'Kinetic',
- description:
- 'CSS-transition animation components — Transition, Stagger, Collapse.',
- href: '/docs/kinetic',
- },
- {
- title: 'Attrs',
- description:
- 'Chainable component factory for composing default props and behaviors.',
- href: '/docs/attrs',
- },
- {
- title: 'Rocketstyle',
- description:
- 'Multi-dimensional style composition — themes, sizes, variants, states.',
- href: '/docs/rocketstyle',
- },
-]
-
-const features = [
- {
- icon: '~>',
- title: 'Signal-Based Reactivity',
- description:
- 'Fine-grained signals with automatic dependency tracking. No virtual DOM — updates go directly to the DOM nodes that changed.',
- },
- {
- icon: '<>',
- title: 'Use Any API You Know',
- description:
- 'Compatibility layers for React, Preact, Vue 3, and SolidJS. Migrate gradually or pick the API style you prefer.',
- },
- {
- icon: '{}',
- title: 'Type-Safe Throughout',
- description:
- 'Generic inference, strict prop validation, typed routes, and typed stores. TypeScript is a first-class citizen.',
- },
- {
- icon: '>>',
- title: 'Streaming SSR',
- description:
- 'Server-side rendering with streaming Suspense, async components, and automatic store isolation per request.',
- },
- {
- icon: '//',
- title: 'Compiled for Speed',
- description:
- 'JSX compiler with static hoisting, reactivity wrapping, and optimal code generation. Zero runtime overhead for static content.',
- },
- {
- icon: '[]',
- title: 'Batteries Included',
- description:
- 'Router, forms, i18n, data fetching, state management, virtual scrolling, styling, and animations — all built for signals.',
- },
-]
-
-const codeExample = `import { signal, computed } from '@pyreon/reactivity'
-import { defineComponent, Show, For } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-
-const count = signal(0)
-const doubled = computed(() => count() * 2)
-
-const App = defineComponent(() => {
- return () => (
-
-
-
count() > 5}>
- Count is greater than 5!
-
-
-
- actively developed
-
-
-
- Build UIs with{' '}
-
- signals
-
-
-
-
- A signal-based UI framework with fine-grained reactivity, no virtual
- DOM, streaming SSR, and compatibility layers for React, Vue, Solid,
- and Preact — plus a full ecosystem of 50+ packages.
-
-
-
-
- Get Started
-
-
- Browse Docs
-
-
- GitHub
-
-
-
- {/* Stats */}
-
-
- 50+
- Packages
-
-
- 0
- Virtual DOM
-
-
- 4
- Compat Layers
-
-
- 120+
- Animation Presets
-
-
- 16
- Hooks
-
-
-
-
-
-
-
- app.tsx
-
-
-
- {codeExample}
-
-
- Why Pyreon?
-
-
- Fine-grained reactivity meets a complete framework. Every package is
- designed to work together — or standalone.
-
-
- {features.map((feature) => (
-
-
- {feature.icon}
-
-
{feature.title}
-
- {feature.description}
-
-
- ))}
-
-
- @pyreon/*
-
-
- Core Framework
-
-
- Reactivity engine, component model, DOM renderer, SSR, router, and
- build tooling.
-
-
-
- @pyreon/*-compat
-
-
- Compatibility Layers
-
-
- Use the API you already know — React, Preact, Vue, or Solid —
- powered by Pyreon's signal engine.
-
-
-
- @pyreon/*
-
-
- State & Data
-
-
- State management, forms, i18n, data fetching, permissions, storage,
- and more — all signal-native.
-
-
-
- @pyreon/*
-
-
- UI System
-
-
- Styling, theming, layout, components, hooks, and animations.
-
-
-
- @pyreon/*
-
-
- Ecosystem
-
-
- Documents, charts, code editors, flow diagrams, and schema-driven
- CRUD — specialized packages for rich applications.
-
-
-
Ready to start?
-
- Get up and running in minutes. Install the core packages, set up
- Vite, and build your first signal-powered component.
-
-
-
-
-
- npm i @pyreon/core @pyreon/reactivity @pyreon/runtime-dom
- @pyreon/vite-plugin
-
-
-
-
-
- Read the Guide
-
-
-
-
- {typeInfo.label}
-
- {name}
-
- {signature && (
-
- )}
- {description && (
-
- {description}
-
- )}
- {children &&
{children}
}
-
-
-
-
- | Feature |
- {layers.map((layer) => (
-
- {layer.name}
- |
- ))}
-
-
-
- {features.map((feature, i) => (
-
- | {feature} |
- {layers.map((layer) => {
- const level = layer.support[i] ?? 'none'
- const info = supportIcons[level]
- return (
-
- {info.icon}
- |
- )
- })}
-
- ))}
-
-
-
- {title && (
-
- {title}
-
- )}
-
-
-
- | Prop |
- Type |
- Default |
- Description |
-
-
-
- {props.map((prop, i) => (
-
-
- {prop.name}
- {prop.required && (
-
- *
-
- )}
- |
-
-
- {prop.type}
-
- |
-
- {prop.default ? (
- {prop.default}
- ) : (
- '\u2014'
- )}
- |
-
- {prop.description}
- |
-
- ))}
-
-
-