@vanijs/vani 0.1.0

package/DOCS.md

@@ -0,0 +1,373 @@
+# Vani Documentation
+
+Vani is a small, dependency‑free UI runtime built around a simple idea:
+
+> Rendering should be explicit, local, and predictable.
+
+Vani is **not** a Virtual DOM, not reactive‑by‑default, and not compiler‑driven. Components own a
+DOM subtree delimited by anchors and only update when you explicitly ask them to.
+
+---
+
+## Install
+
+```bash
+pnpm add vani
+```
+
+---
+
+## Quick Start (SPA)
+
+```ts
+import { component, div, button, renderToDOM, type Handle } from '@vanijs/vani'
+
+const Counter = component((_, handle: Handle) => {
+  let count = 0
+  return () =>
+    div(
+      `Count: ${count}`,
+      button(
+        {
+          onclick: () => {
+            count += 1
+            handle.update()
+          },
+        },
+        'Inc',
+      ),
+    )
+})
+
+const appRoot = document.getElementById('app')
+if (!appRoot) throw new Error('#app not found')
+
+renderToDOM([Counter()], appRoot)
+```
+
+---
+
+## Core Concepts
+
+### 1) Components are functions
+
+Components are functions that return a render function:
+
+```ts
+import { component, div } from '@vanijs/vani'
+
+const Hello = component(() => {
+  return () => div('Hello Vani')
+})
+```
+
+### 2) Explicit updates
+
+Nothing re‑renders unless you call `handle.update()`:
+
+```ts
+import { component, div, button, type Handle } from '@vanijs/vani'
+
+const Clicker = component((_, handle: Handle) => {
+  let clicks = 0
+  return () =>
+    div(
+      `Clicks: ${clicks}`,
+      button(
+        {
+          onclick: () => {
+            clicks += 1
+            handle.update()
+          },
+        },
+        'Click',
+      ),
+    )
+})
+```
+
+### 3) Subtree ownership (anchors)
+
+Each component owns a DOM range delimited by anchors:
+
+```html
+<!--vani:start-->
+... subtree ...
+<!--vani:end-->
+```
+
+Updates replace only the DOM between anchors.
+
+---
+
+## API Reference (with examples)
+
+### `component(fn)`
+
+Creates a component factory. The `fn` receives `props` and a `handle`.
+
+```ts
+import { component, div, type Handle } from '@vanijs/vani'
+
+const Card = component<{ title: string }>((props, handle: Handle) => {
+  handle.effect(() => {
+    console.log('Mounted:', props.title)
+  })
+
+  return () => div(props.title)
+})
+```
+
+Components can return other component instances directly:
+
+```ts
+import { component } from '@vanijs/vani'
+import * as h from 'vani/html'
+
+const Hero = component(() => {
+  return () => h.h1('Hello')
+})
+
+const Page = component(() => {
+  return () => Hero()
+})
+```
+
+### `renderToDOM(components, root)`
+
+Mounts components to the DOM immediately.
+
+```ts
+import { renderToDOM, component, div } from '@vanijs/vani'
+
+const App = component(() => () => div('App'))
+renderToDOM([App()], document.getElementById('app')!)
+```
+
+### `hydrateToDOM(components, root)`
+
+Binds handles to existing DOM (SSR/SSG) without rendering. You must call `handle.update()` to
+activate.
+
+```ts
+import { hydrateToDOM } from '@vanijs/vani'
+import { App } from './app'
+
+const root = document.getElementById('app')!
+const handles = hydrateToDOM([App()], root)
+handles.forEach((handle) => handle.update())
+```
+
+### `renderToString(components)`
+
+Server‑side render to HTML with anchors. Import from `vani/ssr`.
+
+```ts
+import { component } from '@vanijs/vani'
+import { renderToString } from 'vani/ssr'
+
+const App = component(() => () => 'Hello SSR')
+const html = await renderToString([App()])
+```
+
+### `mount(component, props)`
+
+Low‑level helper for embedding raw component functions in the middle of a render tree. Use it when
+you have an unwrapped component function.
+
+```ts
+import { component, mount, div, type Component } from '@vanijs/vani'
+
+const Footer: Component = () => () => div('Footer')
+
+const Page = component(() => () => div('Body', mount(Footer, {})))
+```
+
+### `fragment(...children)`
+
+Returns a fragment node. Useful for returning multiple siblings.
+
+```ts
+import { fragment, div, component } from '@vanijs/vani'
+
+const App = component(() => () => fragment(div('One'), div('Two')))
+```
+
+### Element helpers
+
+Vani ships helpers for common elements:
+
+```ts
+import { div, span, button, input } from '@vanijs/vani'
+
+div(span('Label'), input({ type: 'text' }), button({ onclick: () => {} }, 'Submit'))
+```
+
+### `classNames(...classes)`
+
+Utility for composing class names:
+
+```ts
+import { classNames, div } from '@vanijs/vani'
+
+div({
+  className: classNames('base', { active: true }, ['p-2', 'rounded']),
+})
+```
+
+### Refs
+
+DOM refs and component refs are supported:
+
+```ts
+import { component, input, type DomRef, type ComponentRef } from '@vanijs/vani'
+
+const Child = component((_, handle) => () => input({ ref: { current: null } }))
+
+const Parent = component(() => {
+  const childRef: ComponentRef = { current: null }
+  return () => Child({ ref: childRef })
+})
+```
+
+### Cleanup and effects
+
+Effects are explicit and can return a cleanup function.
+
+If you plan to use vani for a SSR/SSG application, you should use effects to run client-only code
+such as accessing the window object, accessing the DOM, etc.
+
+Effects are very simple, they don't have dependencies and are run once on mount and once on update.
+
+```ts
+import { component, div } from '@vanijs/vani'
+
+const Timer = component((_, handle) => {
+  handle.effect(() => {
+    const id = setInterval(() => console.log('tick'), 1000)
+    return () => clearInterval(id)
+  })
+  return () => div('Timer running…')
+})
+```
+
+### Transitions
+
+`startTransition` marks a group of updates as non-urgent, so they are deferred and batched
+separately.
+
+This is useful to avoid blocking the UI while expensive work happens, e.g. if you are filtering a
+large list.
+
+```ts
+import { component, button, div, startTransition, type Handle } from '@vanijs/vani'
+
+const List = component((_, handle: Handle) => {
+  let items = [1, 2, 3]
+  return () =>
+    div(
+      button(
+        {
+          onclick: () => {
+            startTransition(() => {
+              items = items.slice().reverse()
+              handle.update()
+            })
+          },
+        },
+        'Reverse',
+      ),
+    )
+})
+```
+
+---
+
+## Async Components
+
+Components may return a Promise of a render function. You can provide a `fallback`:
+
+```ts
+import { component, div } from '@vanijs/vani'
+
+const AsyncCard = component(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  return () => div('Loaded')
+})
+
+const App = component(
+  () => () =>
+    AsyncCard({
+      fallback: () => div('Loading…'),
+    }),
+)
+```
+
+They are awaited and the fallback is rendered until the component is ready.
+
+---
+
+## clientOnly Islands
+
+Use `clientOnly: true` to skip SSR of a component and render it only on the client:
+
+```ts
+import { component, div } from '@vanijs/vani'
+
+const ClientWidget = component(() => () => div('Client‑only'))
+
+const App = component(
+  () => () =>
+    ClientWidget({
+      clientOnly: true,
+    }),
+)
+```
+
+---
+
+## SSR, SSG, and SPA
+
+Vani supports all three patterns:
+
+### SPA
+
+Use `renderToDOM()` to mount immediately on the client.
+
+### SSR
+
+Use `renderToString()` on the server, then `hydrateToDOM()` on the client.
+
+### SSG
+
+Use `renderToString()` at build time to generate a static `index.html`, then hydrate on the client.
+
+**Important:** Hydration only binds to anchors. It does not render or start effects. Call
+`handle.update()` to activate the UI.
+
+---
+
+## Hydration Warnings
+
+In dev mode, Vani warns about structural mismatches only:
+
+- Missing `<!--vani:start-->` or `<!--vani:end-->`
+- Anchor order mismatch (end before start)
+- Unused anchors after hydration
+
+This avoids slow DOM diffing and keeps behavior explicit.
+
+---
+
+## Philosophy Summary
+
+- Explicit updates only (`handle.update()`)
+- Localized DOM updates (subtree‑only)
+- No virtual DOM, no diffing, no magic
+- Hydration is binding, not execution
+
+---
+
+## License
+
+MIT

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Javier Aguilar (itsjavi.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,268 @@
+# Vani
+
+**Vani** is a small, dependency-free UI runtime built around a simple idea:
+
+> **Rendering should be explicit, local, and predictable.**
+
+Vani is not a Virtual DOM, not reactive-by-default, and not compiler-driven.  
+It is a **runtime-first**, **DOM-anchored**, **subtree-based** rendering system designed for
+clarity, performance, and long-term maintainability.
+
+Docs: [DOCS.md](https://github.com/itsjavi/vani/blob/main/DOCS.md)
+
+---
+
+## Philosophy
+
+### 1. Explicit intent over implicit magic
+
+In Vani, **nothing re-renders unless you explicitly ask for it**.
+
+```ts
+handle.update()
+```
+
+That single call is the only thing that triggers a re-render.
+
+There are:
+
+- no dependency graphs
+- no signals auto-tracking
+- no state subscriptions
+- no implicit invalidation
+
+This makes performance characteristics **obvious and predictable**.
+
+---
+
+### 2. Subtree ownership, not tree reconciliation
+
+Each component owns **exactly one DOM range**, delimited by stable anchors:
+
+```html
+<!--vani:start-->
+subtree
+<!--vani:end-->
+```
+
+Updates replace **only that subtree**, never parents or siblings.
+
+This guarantees:
+
+- leaf-only updates
+- O(size of subtree) cost
+- no accidental cascades
+
+---
+
+### 3. Runtime-first, not compiler-first
+
+Vani requires:
+
+- no JSX
+- no compiler
+- no build-time transforms
+- no generated code
+
+Components are plain TypeScript functions.
+
+This keeps:
+
+- debugging straightforward
+- stack traces readable
+- behavior inspectable at runtime
+
+---
+
+### 4. Hydration is binding, not execution
+
+During SSR hydration:
+
+- **no setup runs**
+- **no effects start**
+- **no DOM is mutated**
+
+Hydration only **binds runtime handles to existing DOM**. Actual execution happens on the first
+explicit update.
+
+This avoids:
+
+- double subscriptions
+- zombie timers
+- mismatched server/client behavior
+
+---
+
+### 5. Scheduling, not reactivity, handles performance
+
+Performance is handled by:
+
+- batching
+- microtask queues
+- transition scheduling
+
+Not by reactive graphs or heuristics.
+
+```ts
+startTransition(() => {
+  handle.update()
+})
+```
+
+This separates:
+
+- **what** updates
+- from **when** updates happen
+
+---
+
+## Core Design Principles
+
+| Principle         | Meaning                                   |
+| ----------------- | ----------------------------------------- |
+| Explicit updates  | Only `handle.update()` triggers rendering |
+| Locality          | Updates affect only the owning subtree    |
+| Determinism       | Same inputs → same DOM mutations          |
+| No hidden work    | No background tracking or diffing         |
+| Runtime clarity   | Debuggable without tooling                |
+| Opt-in complexity | Advanced features are explicit            |
+
+---
+
+## Goals
+
+- Predictable performance at scale
+- Leaf-only updates by default
+- Zero runtime dependencies
+- SSR without hydration heuristics
+- Clear mental model for developers
+- Long-term maintainability over convenience
+- Web-standards-first
+- ESM-first and designed to run in any modern environment
+- Good and intuitive developer experience
+- Reduce magic and complexity, give freedom back to the developers
+
+---
+
+## Ergonomic features
+
+- Vani uses real HTML attribute names, with a small set of library-specific exceptions (`ref`,
+  `key`, `fallback`, `clientOnly`)
+- Async components are supported, including fallbacks
+- `className` accepts string, array, and object forms for ergonomic composition
+- ESM-first and designed to run in any modern environment
+
+---
+
+## SSR (experimental)
+
+Vani SSR is explicit and anchor-based. You call `renderToString`, and the output includes the same
+`<!--vani:start-->` / `<!--vani:end-->` anchors used by the client runtime.
+
+```ts
+import { renderToString } from './vani/ssr'
+import { hydrateToDOM } from './vani/runtime'
+import { getHydrationChildren } from './demos/hydration-app'
+
+const html = await renderToString(getHydrationChildren())
+// inject `html` into <div id="app"> on the server
+
+// On the client
+const root = document.getElementById('app')
+const handles = hydrateToDOM(getHydrationChildren(), root!)
+handles.forEach((handle) => handle.update())
+```
+
+Notes:
+
+- SSR does not use a virtual DOM or heuristics.
+- Hydration binds to anchors only; it does not render.
+- If SSR output does not match the client component tree, Vani warns (dev only).
+
+---
+
+## What Vani is NOT
+
+- ❌ Not a Virtual DOM
+- ❌ Not reactive-by-default
+- ❌ Not JSX-based
+- ❌ Not compiler-driven
+- ❌ Not a template language
+- ❌ Not a framework that guesses intent
+
+---
+
+## Comparison with Popular Frameworks
+
+| Feature / Framework    | Vani | React | Vue | Svelte | Solid |
+| ---------------------- | ---- | ----- | --- | ------ | ----- |
+| Virtual DOM            | ❌   | ✅    | ✅  | ❌     | ❌    |
+| Implicit reactivity    | ❌   | ⚠️    | ✅  | ✅     | ✅    |
+| Compiler required      | ❌   | ❌    | ❌  | ✅     | ❌    |
+| JSX required           | ❌   | ✅    | ❌  | ❌     | ❌    |
+| Explicit updates       | ✅   | ❌    | ❌  | ❌     | ❌    |
+| Leaf-only updates      | ✅   | ❌    | ❌  | ❌     | ❌    |
+| Runtime-only           | ✅   | ⚠️    | ⚠️  | ❌     | ⚠️    |
+| SSR without heuristics | ✅   | ❌    | ❌  | ❌     | ❌    |
+| Dependency-free core   | ✅   | ❌    | ❌  | ❌     | ❌    |
+
+⚠️ = partially / indirectly supported
+
+---
+
+## Mental Model
+
+Think of Vani as:
+
+> **“Manually invalidated, DOM-owned UI subtrees.”**
+
+You decide:
+
+- when something updates
+- how much updates
+- and why it updates
+
+Nothing else happens behind your back.
+
+---
+
+## Who Vani is for
+
+Vani is a good fit if you value:
+
+- full control over rendering
+- predictable performance
+- small runtimes
+- explicit data flow
+- SSR without complexity
+- understanding your tools deeply
+
+It is **not** optimized for:
+
+- rapid prototyping
+- beginners
+- implicit magic
+- large teams that rely on conventions
+
+---
+
+## Status
+
+Vani is experimental and evolving. The core architecture is intentionally small and stable.
+
+Expect:
+
+- iteration
+- refinement
+- careful additions
+
+Not:
+
+- rapid feature creep
+- breaking conceptual changes
+
+---
+
+## License
+
+MIT

package/dist/lib/index.d.mts

@@ -0,0 +1,240 @@
+//#region src/vani/runtime.d.ts
+type SSRNode = {
+  type: 'element';
+  tag: string;
+  props: Record<string, any>;
+  children: SSRNode[];
+} | {
+  type: 'text';
+  text: string;
+} | {
+  type: 'comment';
+  text: string;
+} | {
+  type: 'fragment';
+  children: SSRNode[];
+} | {
+  type: 'component';
+  instance: ComponentInstance<any>;
+};
+type VNode = Node | SSRNode;
+interface Handle {
+  /**
+   * Schedules a render for the component.
+   * This triggers a re-render on the next microtask.
+   */
+  update(): void;
+  /**
+   * Flushes the component render.
+   * This triggers a re-render immediately.
+   */
+  updateSync(): void;
+  /**
+   * Disposes the component: removes the component from the DOM and runs all cleanup functions.
+   */
+  dispose(): void;
+  /**
+   * Adds a cleanup function that is called when the component is disposed.
+   */
+  onCleanup(fn: () => void): void;
+  /**
+   * This is purely syntatic sugar, as it is basically the same as running the function
+   * on the setup phase and calling onCleanup to add a cleanup function.
+   *
+   * Using effects is necessary in SSR mode, for side effects to not run on the server
+   * (e.g. timers, subscriptions, DOM usage, etc.)
+   *
+   * Runs a side effect function when the component is mounted.
+   * The returning function may be a cleanup function that is called when the component is disposed.
+   *
+   */
+  effect(fn: () => void | (() => void)): void;
+}
+type RenderFn = () => VChild;
+type Component<Props = any> = (props: Props, handle: Handle) => RenderFn | Promise<RenderFn>;
+type ComponentInstance<Props = any> = {
+  $$vani: 'component';
+  component: Component<Props>;
+  props: Props;
+  /**
+   * A key is used to identify the component when it is re-rendered.
+   * If a key is provided, the component will be re-rendered only if the key changes.
+   */
+  key?: string | number;
+  /**
+   * A ref is used to get a reference to the component instance.
+   * The ref is set to the component instance when the component is mounted.
+   * The ref is set to null when the component is disposed.
+   */
+  ref?: ComponentRef;
+  clientOnly?: boolean;
+};
+type ComponentInput<Props> = Props & {
+  key?: string | number;
+  ref?: ComponentRef;
+};
+type ComponentMetaProps = {
+  key?: string | number;
+  ref?: ComponentRef;
+  fallback?: RenderFn;
+  clientOnly?: boolean;
+};
+type VChild = VNode | ComponentInstance<any> | string | number | null | undefined | false;
+type DataAttribute = `data-${string}`;
+type HtmlProps<T extends keyof HTMLElementTagNameMap> = Partial<Omit<HTMLElementTagNameMap[T], 'children' | 'className' | 'style'>> & {
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElementTagNameMap[T]>;
+} & { [key in DataAttribute]?: string | number | boolean | undefined | null };
+type ClassName = string | undefined | null | {
+  [key: string]: boolean | undefined | null;
+} | ClassName[];
+type ComponentRef = {
+  current: Handle | null;
+};
+type DomRef<T extends HTMLElement = HTMLElement> = {
+  current: T | null;
+};
+type RenderMode = 'dom' | 'ssr';
+declare function component(fn: Component<void>): (props?: ComponentMetaProps) => ComponentInstance<void>;
+declare function component<Props>(fn: Component<Props>): (props: Props & ComponentMetaProps) => ComponentInstance<Props>;
+declare function withRenderMode<T>(mode: RenderMode, fn: () => T): T;
+declare function getRenderMode(): RenderMode;
+declare function renderToDOM(components: Array<Component<any> | ComponentInstance<any>>, root: HTMLElement): Handle[];
+declare function isComponentInstance(child: VChild): child is ComponentInstance<any>;
+declare function classNames(...classes: ClassName[]): string;
+declare function el<E extends keyof HTMLElementTagNameMap>(tag: E, props?: HtmlProps<E> | VChild | null, ...children: VChild[]): VNode;
+declare const fragment: (...children: VChild[]) => {
+  type: "fragment";
+  children: SSRNode[];
+} | DocumentFragment;
+declare function mount<Props>(component: Component<Props>, props: Props): VNode;
+/**
+ * Marks all updates triggered inside the callback as a "transition".
+ *
+ * A transition represents non-urgent UI work that can be deferred
+ * to keep the application responsive.
+ *
+ * Updates scheduled inside `startTransition`:
+ * - do NOT block user interactions
+ * - are batched separately from urgent updates
+ * - may be flushed later (e.g. after the current event or during idle time)
+ *
+ * Transitions are NOT animations.
+ * They do not control how updates look, only *when* they are applied.
+ *
+ * Typical use cases:
+ * - Filtering or sorting large lists
+ * - Rendering expensive subtrees
+ * - Applying async results that are not immediately visible
+ *
+ * Example:
+ * ```ts
+ * button({
+ *   onclick: () => {
+ *     // urgent update
+ *     setOpen(true)
+ *     handle.update()
+ *
+ *     // non-urgent update
+ *     startTransition(() => {
+ *       setItems(filter(items))
+ *       handle.update()
+ *     })
+ *   },
+ * })
+ * ```
+ *
+ * If multiple transitions are triggered, they are automatically batched.
+ * Transition updates never interrupt urgent updates.
+ */
+declare function startTransition(fn: () => void): void;
+declare function hydrateToDOM(components: Array<Component<any> | ComponentInstance<any>>, root: HTMLElement): Handle[];
+declare function isDevMode(): boolean;
+//#endregion
+//#region src/vani/html.d.ts
+declare const div: (propsOrChild?: VChild | HtmlProps<"div">, ...children: VChild[]) => VNode;
+declare const span: (propsOrChild?: VChild | HtmlProps<"span">, ...children: VChild[]) => VNode;
+declare const ul: (propsOrChild?: VChild | HtmlProps<"ul">, ...children: VChild[]) => VNode;
+declare const li: (propsOrChild?: VChild | HtmlProps<"li">, ...children: VChild[]) => VNode;
+declare const ol: (propsOrChild?: VChild | HtmlProps<"ol">, ...children: VChild[]) => VNode;
+declare const dl: (propsOrChild?: VChild | HtmlProps<"dl">, ...children: VChild[]) => VNode;
+declare const dt: (propsOrChild?: VChild | HtmlProps<"dt">, ...children: VChild[]) => VNode;
+declare const dd: (propsOrChild?: VChild | HtmlProps<"dd">, ...children: VChild[]) => VNode;
+declare const main: (propsOrChild?: VChild | HtmlProps<"main">, ...children: VChild[]) => VNode;
+declare const header: (propsOrChild?: VChild | HtmlProps<"header">, ...children: VChild[]) => VNode;
+declare const footer: (propsOrChild?: VChild | HtmlProps<"footer">, ...children: VChild[]) => VNode;
+declare const section: (propsOrChild?: VChild | HtmlProps<"section">, ...children: VChild[]) => VNode;
+declare const article: (propsOrChild?: VChild | HtmlProps<"article">, ...children: VChild[]) => VNode;
+declare const aside: (propsOrChild?: VChild | HtmlProps<"aside">, ...children: VChild[]) => VNode;
+declare const nav: (propsOrChild?: VChild | HtmlProps<"nav">, ...children: VChild[]) => VNode;
+declare const details: (propsOrChild?: VChild | HtmlProps<"details">, ...children: VChild[]) => VNode;
+declare const summary: (propsOrChild?: VChild | HtmlProps<"summary">, ...children: VChild[]) => VNode;
+declare const a: (propsOrChild?: VChild | HtmlProps<"a">, ...children: VChild[]) => VNode;
+declare const button: (propsOrChild?: VChild | HtmlProps<"button">, ...children: VChild[]) => VNode;
+declare const input: (propsOrChild?: VChild | HtmlProps<"input">, ...children: VChild[]) => VNode;
+declare const output: (propsOrChild?: VChild | HtmlProps<"output">, ...children: VChild[]) => VNode;
+declare const textarea: (propsOrChild?: VChild | HtmlProps<"textarea">, ...children: VChild[]) => VNode;
+declare const select: (propsOrChild?: VChild | HtmlProps<"select">, ...children: VChild[]) => VNode;
+declare const option: (propsOrChild?: VChild | HtmlProps<"option">, ...children: VChild[]) => VNode;
+declare const optgroup: (propsOrChild?: VChild | HtmlProps<"optgroup">, ...children: VChild[]) => VNode;
+declare const label: (propsOrChild?: VChild | HtmlProps<"label">, ...children: VChild[]) => VNode;
+declare const form: (propsOrChild?: VChild | HtmlProps<"form">, ...children: VChild[]) => VNode;
+declare const progress: (propsOrChild?: VChild | HtmlProps<"progress">, ...children: VChild[]) => VNode;
+declare const meter: (propsOrChild?: VChild | HtmlProps<"meter">, ...children: VChild[]) => VNode;
+declare const fieldset: (propsOrChild?: VChild | HtmlProps<"fieldset">, ...children: VChild[]) => VNode;
+declare const legend: (propsOrChild?: VChild | HtmlProps<"legend">, ...children: VChild[]) => VNode;
+declare const datalist: (propsOrChild?: VChild | HtmlProps<"datalist">, ...children: VChild[]) => VNode;
+declare const figure: (propsOrChild?: VChild | HtmlProps<"figure">, ...children: VChild[]) => VNode;
+declare const figcaption: (propsOrChild?: VChild | HtmlProps<"figcaption">, ...children: VChild[]) => VNode;
+declare const img: (propsOrChild?: VChild | HtmlProps<"img">, ...children: VChild[]) => VNode;
+declare const picture: (propsOrChild?: VChild | HtmlProps<"picture">, ...children: VChild[]) => VNode;
+declare const source: (propsOrChild?: VChild | HtmlProps<"source">, ...children: VChild[]) => VNode;
+declare const video: (propsOrChild?: VChild | HtmlProps<"video">, ...children: VChild[]) => VNode;
+declare const audio: (propsOrChild?: VChild | HtmlProps<"audio">, ...children: VChild[]) => VNode;
+declare const iframe: (propsOrChild?: VChild | HtmlProps<"iframe">, ...children: VChild[]) => VNode;
+declare const embed: (propsOrChild?: VChild | HtmlProps<"embed">, ...children: VChild[]) => VNode;
+declare const time: (propsOrChild?: VChild | HtmlProps<"time">, ...children: VChild[]) => VNode;
+declare const mark: (propsOrChild?: VChild | HtmlProps<"mark">, ...children: VChild[]) => VNode;
+declare const p: (propsOrChild?: VChild | HtmlProps<"p">, ...children: VChild[]) => VNode;
+declare const h1: (propsOrChild?: VChild | HtmlProps<"h1">, ...children: VChild[]) => VNode;
+declare const h2: (propsOrChild?: VChild | HtmlProps<"h2">, ...children: VChild[]) => VNode;
+declare const h3: (propsOrChild?: VChild | HtmlProps<"h3">, ...children: VChild[]) => VNode;
+declare const h4: (propsOrChild?: VChild | HtmlProps<"h4">, ...children: VChild[]) => VNode;
+declare const h5: (propsOrChild?: VChild | HtmlProps<"h5">, ...children: VChild[]) => VNode;
+declare const h6: (propsOrChild?: VChild | HtmlProps<"h6">, ...children: VChild[]) => VNode;
+declare const code: (propsOrChild?: VChild | HtmlProps<"code">, ...children: VChild[]) => VNode;
+declare const pre: (propsOrChild?: VChild | HtmlProps<"pre">, ...children: VChild[]) => VNode;
+declare const blockquote: (propsOrChild?: VChild | HtmlProps<"blockquote">, ...children: VChild[]) => VNode;
+declare const var_: (propsOrChild?: VChild | HtmlProps<"var">, ...children: VChild[]) => VNode;
+declare const kbd: (propsOrChild?: VChild | HtmlProps<"kbd">, ...children: VChild[]) => VNode;
+declare const samp: (propsOrChild?: VChild | HtmlProps<"samp">, ...children: VChild[]) => VNode;
+declare const cite: (propsOrChild?: VChild | HtmlProps<"cite">, ...children: VChild[]) => VNode;
+declare const dfn: (propsOrChild?: VChild | HtmlProps<"dfn">, ...children: VChild[]) => VNode;
+declare const abbr: (propsOrChild?: VChild | HtmlProps<"abbr">, ...children: VChild[]) => VNode;
+declare const small: (propsOrChild?: VChild | HtmlProps<"small">, ...children: VChild[]) => VNode;
+declare const strong: (propsOrChild?: VChild | HtmlProps<"strong">, ...children: VChild[]) => VNode;
+declare const em: (propsOrChild?: VChild | HtmlProps<"em">, ...children: VChild[]) => VNode;
+declare const br: (propsOrChild?: VChild | HtmlProps<"br">, ...children: VChild[]) => VNode;
+declare const hr: (propsOrChild?: VChild | HtmlProps<"hr">, ...children: VChild[]) => VNode;
+declare const table: (propsOrChild?: VChild | HtmlProps<"table">, ...children: VChild[]) => VNode;
+declare const caption: (propsOrChild?: VChild | HtmlProps<"caption">, ...children: VChild[]) => VNode;
+declare const colgroup: (propsOrChild?: VChild | HtmlProps<"colgroup">, ...children: VChild[]) => VNode;
+declare const col: (propsOrChild?: VChild | HtmlProps<"col">, ...children: VChild[]) => VNode;
+declare const tbody: (propsOrChild?: VChild | HtmlProps<"tbody">, ...children: VChild[]) => VNode;
+declare const thead: (propsOrChild?: VChild | HtmlProps<"thead">, ...children: VChild[]) => VNode;
+declare const tfoot: (propsOrChild?: VChild | HtmlProps<"tfoot">, ...children: VChild[]) => VNode;
+declare const tr: (propsOrChild?: VChild | HtmlProps<"tr">, ...children: VChild[]) => VNode;
+declare const td: (propsOrChild?: VChild | HtmlProps<"td">, ...children: VChild[]) => VNode;
+declare const th: (propsOrChild?: VChild | HtmlProps<"th">, ...children: VChild[]) => VNode;
+declare const style: (propsOrChild?: VChild | HtmlProps<"style">, ...children: VChild[]) => VNode;
+declare const script: (propsOrChild?: VChild | HtmlProps<"script">, ...children: VChild[]) => VNode;
+declare const noscript: (propsOrChild?: VChild | HtmlProps<"noscript">, ...children: VChild[]) => VNode;
+declare const template: (propsOrChild?: VChild | HtmlProps<"template">, ...children: VChild[]) => VNode;
+declare const slot: (propsOrChild?: VChild | HtmlProps<"slot">, ...children: VChild[]) => VNode;
+//#endregion
+//#region src/vani/ssr.d.ts
+type Renderable = Component<any> | ComponentInstance<any>;
+declare function renderToString(components: Renderable[]): Promise<string>;
+//#endregion
+export { ClassName, Component, ComponentInput, ComponentInstance, ComponentRef, DataAttribute, DomRef, Handle, HtmlProps, RenderFn, SSRNode, VChild, VNode, a, abbr, article, aside, audio, blockquote, br, button, caption, cite, classNames, code, col, colgroup, component, datalist, dd, details, dfn, div, dl, dt, el, em, embed, fieldset, figcaption, figure, footer, form, fragment, getRenderMode, h1, h2, h3, h4, h5, h6, header, hr, hydrateToDOM, iframe, img, input, isComponentInstance, isDevMode, kbd, label, legend, li, main, mark, meter, mount, nav, noscript, ol, optgroup, option, output, p, picture, pre, progress, renderToDOM, renderToString, samp, script, section, select, slot, small, source, span, startTransition, strong, style, summary, table, tbody, td, template, textarea, tfoot, th, thead, time, tr, ul, var_, video, withRenderMode };

package/dist/lib/index.mjs

@@ -0,0 +1 @@
+function e(e){let t=e;return t.__vaniKeyed||=new Map,t.__vaniKeyed}function t(e){return t=>{let n,r,i=!1,a=t;if(t&&typeof t==`object`){let e=t;if(n=e.key,r=e.ref,i=e.clientOnly,`key`in e||`ref`in e){let{key:t,ref:n,clientOnly:r,...i}=e;a=i}}return{$$vani:`component`,component:e,props:a,key:n,ref:r,clientOnly:i}}}let n=`dom`;function r(e,t){let r=n;n=e;let i=t();return i&&typeof i.finally==`function`?i.finally(()=>{n=r}):(n=r,i)}function i(){return n}function a(e){return typeof e==`object`&&!!e&&`type`in e}function o(e){return a(e)&&e.type===`element`}function s(e){return a(e)&&e.type===`fragment`}function c(e){return n===`dom`?document.createElement(e):{type:`element`,tag:e,props:{},children:[]}}function l(e){return n===`dom`?document.createTextNode(e):{type:`text`,text:e}}function u(e,t){if(n===`dom`){e.appendChild(t);return}(o(e)||s(e))&&e.children.push(t)}function d(e,t){let n=e.nextSibling;for(;n&&n!==t;){let e=n.nextSibling,t=n;t.__vaniDomRef&&(t.__vaniDomRef.current=null),n.remove(),n=e}}function ee(e){if(e==null||e===!1)return document.createComment(`vani:empty`);if(m(e)){let t=document.createDocumentFragment(),n=f(e.component,h(e),t);return e.ref&&(e.ref.current=n),t}if(typeof e==`string`||typeof e==`number`)return document.createTextNode(String(e));if(e instanceof Node)return e;throw Error(`[vani] render returned an unsupported node type in DOM mode`)}function f(e,t,n){let r=[],i=!1,a,o,s=t?.clientOnly===!0;if(O){let e=A;A+=1,a=M(n,e),o=N(a,e)}else a=document.createComment(`vani:start`),o=document.createComment(`vani:end`),n.appendChild(a),n.appendChild(o);let c,l={update(){i||(S?w.has(l)||(T.add(l),D()):(T.delete(l),w.add(l),re()))},updateSync(){if(i)return;let e=a.parentNode;if(!e)return;d(a,o);let t=ee(c());e.insertBefore(t,o)},onCleanup(e){r.push(e)},dispose(){if(!i){i=!0,w.delete(l),T.delete(l);for(let e of r)e();r.length=0,d(a,o),a.remove(),o.remove(),c=(()=>document.createComment(`disposed`))}},effect(e){let t=e();typeof t==`function`&&r.push(t)}};if(O&&!s){let n=!1;return c=()=>{if(!n){n=!0;let r=e(t,l);c=r instanceof Promise?()=>document.createComment(`async`):r}return c()},l}let u=e(t,l);return u instanceof Promise?(c=t?.fallback||(()=>document.createComment(`vani:async`)),(!O||s)&&l.update(),u.then(e=>{i||(c=e,l.update())}),l):(c=u,(!O||s)&&l.update(),l)}function p(e,t){if(!t)throw Error(`[vani] root element not found`);let n=[];for(let r of e){if(typeof r==`function`){let e=f(r,{},t);n.push(e);continue}let e=f(r.component,h(r),t);n.push(e)}return n}function m(e){let t=typeof Node<`u`&&e instanceof Node;if(typeof e!=`object`||t)return!1;let n=e;return n.$$vani===`component`&&typeof n.component==`function`}function te(e){let t=typeof Node<`u`&&e instanceof Node;return typeof e==`object`&&!!e&&!t&&!m(e)}function h(e){return e.clientOnly?{...e.props??{},clientOnly:!0}:e.props}function g(t,r){if(n===`ssr`){for(let e of r)if(!(e==null||e===!1||e===void 0)){if(m(e)){u(t,{type:`component`,instance:e});continue}if(typeof e==`string`||typeof e==`number`){u(t,l(String(e)));continue}if(a(e)){u(t,e);continue}}return}let i=t;for(let t of r)if(!(t==null||t===!1||t===void 0)){if(m(t)){if(t.key!=null){let n=e(i),r=i.__vaniUsedKeys??=new Set,a=n.get(t.key);if(!a){let e=document.createDocumentFragment(),r=f(t.component,h(t),e);t.ref&&(t.ref.current=r),a={fragment:e,handle:r,ref:t.ref},n.set(t.key,a),t.ref&&(t.ref.current=r)}r.add(t.key),i.appendChild(a.fragment);continue}let n=document.createDocumentFragment(),r=f(t.component,h(t),n);t.ref&&(t.ref.current=r),i.appendChild(n);continue}if(typeof t==`string`||typeof t==`number`){i.appendChild(document.createTextNode(String(t)));continue}i.appendChild(t)}let o=i.__vaniKeyed,s=i.__vaniUsedKeys;if(o&&s){for(let[e,t]of o)s.has(e)||(t.handle.dispose(),t.ref&&(t.ref.current=null),o.delete(e));s.clear()}}function _(e,t){for(let n in t){let r=t[n];if(![`key`,`ref`].includes(n)){if(n===`className`){let t=v(r);o(e)?e.props.class=t:e.className=t;continue}if(n.startsWith(`on`)&&typeof r==`function`)o(e)||(e[n.toLowerCase()]=r);else if(r===!0)o(e)?e.props[n]=!0:e.setAttribute(n,``);else if(r===!1||r==null)continue;else o(e)?e.props[n]=String(r):e.setAttribute(n,String(r))}}}function v(...e){return e.map(e=>{if(!(e==null||e===``))return typeof e==`string`?e.trim():Array.isArray(e)?v(...e):Object.entries(e).filter(([e,t])=>t).map(([e])=>e.trim()).join(` `).trim()}).filter(Boolean).join(` `)}function y(e,t,...n){let r=c(e);return te(t)?(t.ref&&(o(r)?t.ref.current=null:(t.ref.current=r,r.__vaniDomRef=t.ref)),_(r,t),g(r,n),r):(g(r,[t,...n]),r)}const ne=(...e)=>{if(n===`ssr`){let t={type:`fragment`,children:[]};return g(t,e),t}let t=document.createDocumentFragment();return g(t,e),t};function b(e,t){if(n===`ssr`)return{type:`component`,instance:{$$vani:`component`,component:e,props:t}};let r=document.createDocumentFragment();return f(e,t,r),r}let x=!1,S=!1,C=!1;const w=new Set,T=new Set;function E(e){let t=S;S=!0;try{e()}finally{S=t,D()}}function D(){C||(C=!0,setTimeout(()=>{C=!1,ie()},0))}function re(){x||(x=!0,queueMicrotask(()=>{x=!1;for(let e of w)e.updateSync();w.clear()}))}function ie(){for(let e of T)e.updateSync();T.clear(),T.size>0&&D()}let O=!1,k=null,A=0;function j(e){F()&&console.warn(`[vani] hydration warning: ${e}`)}function M(e,t){let n=k;(!n||!e.contains(n))&&(n=e.firstChild);let r=!1;for(;n;){if(n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:start`)return r&&j(`Found <!--vani:end--> before <!--vani:start--> for component #${t}. This usually means the server HTML anchor order is incorrect.`),n;n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:end`&&(r=!0),n=n.nextSibling}throw j(`Expected <!--vani:start--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: start anchor not found`)}function N(e,t){let n=e.nextSibling,r=0;for(;n;){if(n.nodeType===Node.COMMENT_NODE){if(n.nodeValue===`vani:start`)r+=1;else if(n.nodeValue===`vani:end`){if(r===0)return k=n.nextSibling,n;--r}}n=n.nextSibling}throw j(`Expected <!--vani:end--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: end anchor not found`)}function P(e,t){let n=[];O=!0,k=t.firstChild,A=0;try{n=p(e,t)}catch(e){console.error(`[vani] hydration failed:`,e)}finally{if(F()&&k){let e=k,t=!1;for(;e;){if(e.nodeType===Node.COMMENT_NODE){let n=e.nodeValue;if(n===`vani:start`||n===`vani:end`){t=!0;break}}e=e.nextSibling}t&&j(`Unused SSR anchors detected after hydration. Some server-rendered DOM was not claimed by the client runtime.`)}O=!1,k=null,A=0}return n}function F(){return`__vaniDevMode`in globalThis?globalThis.__vaniDevMode===!0:import.meta.env?import.meta.env.DEV:typeof process<`u`&&process.env!==void 0?process.env.NODE_ENV===`development`:!1}function I(e){return(t,...n)=>y(e,t,...n)}const L=I(`div`),R=I(`span`),z=I(`ul`),B=I(`li`),V=I(`ol`),H=I(`dl`),U=I(`dt`),W=I(`dd`),G=I(`main`),K=I(`header`),q=I(`footer`),J=I(`section`),Y=I(`article`),ae=I(`aside`),oe=I(`nav`),se=I(`details`),ce=I(`summary`),le=I(`a`),ue=I(`button`),de=I(`input`),fe=I(`output`),pe=I(`textarea`),me=I(`select`),he=I(`option`),ge=I(`optgroup`),_e=I(`label`),ve=I(`form`),ye=I(`progress`),be=I(`meter`),xe=I(`fieldset`),Se=I(`legend`),Ce=I(`datalist`),we=I(`figure`),Te=I(`figcaption`),Ee=I(`img`),De=I(`picture`),Oe=I(`source`),ke=I(`video`),Ae=I(`audio`),je=I(`iframe`),Me=I(`embed`),Ne=I(`time`),Pe=I(`mark`),Fe=I(`p`),Ie=I(`h1`),Le=I(`h2`),Re=I(`h3`),ze=I(`h4`),Be=I(`h5`),Ve=I(`h6`),He=I(`code`),Ue=I(`pre`),We=I(`blockquote`),Ge=I(`var`),Ke=I(`kbd`),qe=I(`samp`),Je=I(`cite`),Ye=I(`dfn`),Xe=I(`abbr`),Ze=I(`small`),Qe=I(`strong`),$e=I(`em`),et=I(`br`),tt=I(`hr`),nt=I(`table`),rt=I(`caption`),it=I(`colgroup`),at=I(`col`),ot=I(`tbody`),st=I(`thead`),ct=I(`tfoot`),lt=I(`tr`),ut=I(`td`),dt=I(`th`),ft=I(`style`),pt=I(`script`),mt=I(`noscript`),ht=I(`template`),X=I(`slot`),gt=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function _t(){return{update(){},updateSync(){},dispose(){},onCleanup(){},effect(){}}}function vt(e){return typeof e==`function`?{$$vani:`component`,component:e,props:{}}:e}function Z(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`).replace(/'/g,`&#39;`)}function yt(e){let t=[];for(let n of Object.keys(e)){let r=e[n];r==null||r===!1||n.startsWith(`on`)&&typeof r==`function`||(r===!0?t.push(n):t.push(`${n}="${Z(String(r))}"`))}return t.length>0?` ${t.join(` `)}`:``}function Q(e){if(e==null||e===!1)return{type:`fragment`,children:[]};if(typeof e==`string`||typeof e==`number`)return{type:`text`,text:String(e)};if(m(e))return{type:`component`,instance:e};if(typeof e==`object`&&`type`in e)return e;throw Error(`[vani] SSR received a DOM node. This is not supported.`)}async function bt(e){let t=`<!--vani:start-->`,n=`<!--vani:end-->`;if(e.clientOnly){let r=e.props?.fallback;return r?`${t}${await $(Q(r()))}${n}`:`${t}${n}`}let r=e.component(e.props,_t());return`${t}${await $(Q((r instanceof Promise?await r:r)()))}${n}`}async function $(e){switch(e.type){case`text`:return Z(e.text);case`comment`:return`<!--${e.text}-->`;case`fragment`:return(await Promise.all(e.children.map($))).join(``);case`component`:return bt(e.instance);case`element`:{let t=yt(e.props);if(gt.has(e.tag))return`<${e.tag}${t}>`;let n=(await Promise.all(e.children.map($))).join(``);return`<${e.tag}${t}>${n}</${e.tag}>`}}}async function xt(e){return r(`ssr`,async()=>{if(i()!==`ssr`)throw Error(`[vani] renderToString failed to set SSR render mode.`);let t=e.map(e=>({type:`component`,instance:vt(e)}));return(await Promise.all(t.map($))).join(``)})}export{le as a,Xe as abbr,Y as article,ae as aside,Ae as audio,We as blockquote,et as br,ue as button,rt as caption,Je as cite,v as classNames,He as code,at as col,it as colgroup,t as component,Ce as datalist,W as dd,se as details,Ye as dfn,L as div,H as dl,U as dt,y as el,$e as em,Me as embed,xe as fieldset,Te as figcaption,we as figure,q as footer,ve as form,ne as fragment,i as getRenderMode,Ie as h1,Le as h2,Re as h3,ze as h4,Be as h5,Ve as h6,K as header,tt as hr,P as hydrateToDOM,je as iframe,Ee as img,de as input,m as isComponentInstance,F as isDevMode,Ke as kbd,_e as label,Se as legend,B as li,G as main,Pe as mark,be as meter,b as mount,oe as nav,mt as noscript,V as ol,ge as optgroup,he as option,fe as output,Fe as p,De as picture,Ue as pre,ye as progress,p as renderToDOM,xt as renderToString,qe as samp,pt as script,J as section,me as select,X as slot,Ze as small,Oe as source,R as span,E as startTransition,Qe as strong,ft as style,ce as summary,nt as table,ot as tbody,ut as td,ht as template,pe as textarea,ct as tfoot,dt as th,st as thead,Ne as time,lt as tr,z as ul,Ge as var_,ke as video,r as withRenderMode};

package/llms.txt

@@ -0,0 +1,8 @@
+# Vani project agent guide
+
+Vani (from Vanilla) is a Web Standards-first framework for building web applications.
+
+A fine-grained reactive open source framework for building lightning-fast apps — no virtual DOM, no
+compiler, no JSX, no transpilation, zero dependencies, SSR support, imperative reactivity.
+
+Check the DOCS.md and README.md files for more information.

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@vanijs/vani",
+  "version": "0.1.0",
+  "description": "Web-standards-first UI runtime with explicit updates, fine-grained DOM ownership, and zero dependencies. No Virtual DOM, no JSX, no compiler. Built for SPA, SSR, and SSG.",
+  "keywords": [
+    "ui",
+    "frontend",
+    "framework",
+    "web-standards",
+    "dom",
+    "fine-grained",
+    "explicit-rendering",
+    "no-virtual-dom",
+    "no-jsx",
+    "no-compiler",
+    "ssr",
+    "ssg",
+    "hydration",
+    "signals",
+    "vanilla",
+    "vanilla-js",
+    "typescript",
+    "zero-dependencies"
+  ],
+  "homepage": "https://itsjavi.com/vani",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itsjavi/vani.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Javier Aguilar"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.mts",
+      "default": "./dist/lib/index.mjs"
+    }
+  },
+  "module": "./dist/lib/index.mjs",
+  "types": "./dist/lib/index.d.mts",
+  "files": [
+    "dist/lib/**/*",
+    "package.json",
+    "llms.txt",
+    "DOCS.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@shikijs/langs": "^3.21.0",
+    "@shikijs/themes": "^3.21.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/bun": "^1.3.6",
+    "@types/node": "^25.0.9",
+    "eslint": "^9.39.2",
+    "globals": "^17.0.0",
+    "lucide-react": "^0.562.0",
+    "prettier": "^3.8.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.16",
+    "shiki": "^3.21.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tsdown": "0.20.0-beta.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "npm:rolldown-vite@7.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && vite build && pnpm run build:lib",
+    "build:lib": "pnpm tsdown src/vani/index.ts --minify --out-dir dist/lib --dts",
+    "dev": "vite",
+    "format": "prettier --write . && pnpm dlx sort-package-json",
+    "lint": "pnpm run typecheck && pnpm run lint:eslint && pnpm run lint:circular",
+    "lint:circular": "pnpm dlx madge --circular --extensions ts src/",
+    "lint:eslint": "eslint .",
+    "lint:unused": "pnpm dlx knip --exclude exports",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  }
+}