### Install VanJS JSX and Core Libraries

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

Adds the necessary `vanjs-jsx` and `vanjs-core` packages to your project, enabling JSX syntax and core VanJS functionalities.

```Shell
yarn add vanjs-jsx vanjs-core
```

--------------------------------

### Install VanUI via NPM

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Instructions for installing the VanUI library using npm, including the installation command and how to import components into a JavaScript script.

```shell
npm install vanjs-ui
```

```javascript
import { <components you want to import> } from "vanjs-ui"
```

--------------------------------

### Bun Fullstack Rendering Example Dependencies

Source: https://github.com/vanjs-org/van/blob/main/bun-examples/hydration/README.md

This JSON snippet lists the `dependencies` and `devDependencies` required for the Bun-based fullstack rendering example. It highlights the minimal external dependencies needed due to Bun's built-in capabilities, including `mini-van-plate` and `vanjs-core` for core functionality, and `bun` and `bun-types` for development.

```JSON
  "dependencies": {
    "mini-van-plate": "^0.6.3",
    "vanjs-core": "^1.5.5"
  },
  "devDependencies": {
    "bun": "^1.0.0",
    "bun-types": "^1.0.1"
  }
```

--------------------------------

### Create a New Vite Project with Vanilla TS Template

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

This command initializes a new Vite project using the vanilla-ts template, suitable for starting a VanJS application.

```Shell
yarn create vite my-van-jsx --template vanilla-ts
```

--------------------------------

### TypeScript examples for MessageBoard

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Provides practical TypeScript examples demonstrating how to create a MessageBoard, show various types of messages (plain text, HTML content), and control message visibility using a VanJS state object.

```ts
const board = new MessageBoard({top: "20px"})

const example1 = () => board.show({message: "Hi!", durationSec: 1})
const example2 = () => board.show(
  {message: ["Welcome to ", a({href: "https://vanjs.org/", style: "color: #0099FF"}, "🍦VanJS"), "!"], closer: "❌"})

const closed = van.state(false)
const example3 = () => {
  closed.val = false
  board.show({message: "Press ESC to close this message", closed})
}
document.addEventListener("keydown", e => e.key === "Escape" && (closed.val = true))
```

--------------------------------

### Include van_dml Scripts from CDN

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Shows how to load `van_dml.js` and `van` from a CDN, providing a convenient way to integrate the libraries into web projects without local hosting.

```HTML
<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-latest.nomodule.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/addons/van_dml/src/van_dml.js"></script>
```

--------------------------------

### Include van_dml Scripts Locally

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Demonstrates how to include `van_dml.js` after `van-latest.nomodule-min.js` for local development, ensuring `van_dml` extends the `van` object correctly.

```HTML
<script src="van-latest.nomodule-min.js"></script>
<script src="van_dml.js"></script>
```

--------------------------------

### Apply Dynamic CSS with van_dml.css()

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Demonstrates how to use the `css()` function from `van_dml` to dynamically add or replace style definitions on the page. This allows for responsive designs by applying CSS based on JavaScript logic.

```JS
css(`body {
      background-image: linear-gradient(0deg, #6ac 0%, #eff 100%);
      background-attachment: fixed;
      background-size: 100% 100vh;
      padding: 20px;
      text-align: center;
      font-family: helvetica;
    }`)
```

--------------------------------

### Update index.html for VanJS JSX Application

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

Adjusts the `index.html` file to include the main application entry point (`main.tsx`) as a module script, ensuring the VanJS application loads correctly.

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vanjs-jsx</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- change script src -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

--------------------------------

### Install VanGraph NPM Package

Source: https://github.com/vanjs-org/van/blob/main/graph/README.md

This command installs the `vanjs-graph` library from the npm registry. It is the recommended way to integrate VanGraph into modern JavaScript projects using a package manager.

```shell
npm install vanjs-graph
```

--------------------------------

### Define a Simple VanJS JSX Component

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

Creates a `Hello.tsx` component that accepts a `name` prop and renders a simple greeting, illustrating basic VanJS component structure and JSX usage.

```tsx
interface IProps {
  name: string;
}

const Hello = (props: IProps) => {
  const { name } = props;
  return <div>Hello {name}</div>;
};

export default Hello;
```

--------------------------------

### Example of property bag for style overrides (CSS properties with camelCase)

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Another example of a property bag for style overrides, demonstrating `border-radius`, `padding`, and `background-color`, including a mix of string and unquoted keys.

```JavaScript
{
  "border-radius": "0.2rem",
  padding: "0.8rem",
  "background-color": "yellow",
}
```

--------------------------------

### Integrate VanJS Component into main.tsx

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

Modifies `main.tsx` to import a custom `Hello` component and adds it to the DOM, demonstrating how to mount VanJS components.

```tsx
import van from "vanjs-core";

import Hello from "./Hello";

van.add(document.getElementById("app")!, <Hello name={"your name"} />);
```

--------------------------------

### VanJS Toggle Component Basic Usage

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Provides a simple example of how to initialize and display a VanJS Toggle component with custom properties for its initial state, size, and color.

```ts
van.add(document.body, Toggle({
  on: true,
  size: 2,
  onColor: "#4CAF50"
}))
```

--------------------------------

### OptionGroup Component Usage Example (TypeScript)

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

This example demonstrates how to implement and use the VanJS OptionGroup component in a TypeScript application. It shows how to bind the selected option to a VanJS state object and dynamically display the user's selection.

```ts
const selected = van.state("")
const options = ["Water", "Coffee", "Juice"]

van.add(document.body,
  p("What would you like to drink?"),
  OptionGroup({selected}, options),
  p(() => options.includes(selected.val) ?
    span(b("You selected:"), " ", selected) : b("You haven't selected anything.")),
)
```

--------------------------------

### Configure TypeScript for VanJS JSX

Source: https://github.com/vanjs-org/van/blob/main/addons/van_jsx/README.md

Updates the `tsconfig.json` file to enable JSX support with `vanjs-jsx` as the import source, and sets other necessary TypeScript compiler options for a modern web project.

```JSON
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* For vanjs-jsx */
    "jsx": "react-jsx",
    "jsxImportSource": "vanjs-jsx"
  },
  "include": ["src"]
}
```

--------------------------------

### Creating Custom Helper Functions with begin()

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/README.md

This example demonstrates how to encapsulate the `begin()` functionality within a custom helper function, `bdiv`. This allows for more concise and reusable patterns for creating elements and immediately entering auto-append mode for their children.

```JavaScript
const bdiv = (...args) => begin(div(...args))

bdiv() // Create a div and open for append
    h1()
end()
```

--------------------------------

### Destructure van.tags and van_dml Functions

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Illustrates how to destructure common HTML tags from `van.tags` and new functions (`begin`, `end`, `base`, `sp`, `css`) introduced by `van_dml` for easier access and cleaner code.

```JS
const { h1, h2, div, p, button } = van.tags; // some HTML-tags
const { begin, end, base, sp, css } = van    // new functions introduced by van_dml
```

--------------------------------

### Basic DOM Appending with begin() and end()

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Shows the fundamental usage of `begin(el)` to open a DOM element for writing, automatically appending subsequent elements created by `van` as children. `end()` closes the append mode, returning to the previous element or finishing the append process.

```JS
begin(document.body)
// some tag functions here
end()
```

--------------------------------

### VanJS Banner Component Usage Examples

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Illustrates how to integrate the `Banner` component into a VanJS application, showcasing both sticky and non-sticky behaviors within scrollable `div` elements. It demonstrates passing content and configuration options.

```TypeScript
van.add(document.body,
  h2("Sticky Banner"),
  div({style: "width: 300px; height: 200px; overflow-y: auto; border: 1px solid #000;"},
    Banner({sticky: true}, "👋Hello 🗺️World"),
    div({style: "padding: 0 10px"}, Array.from({length: 10}).map((_, i) => p("Line ", i))),
  ),
  h2("Non-sticky Banner"),
  div({style: "width: 300px; height: 200px; overflow-y: auto; border: 1px solid #000;"},
    Banner({sticky: false}, "👋Hello ", a({href: "https://vanjs.org/"}, "🍦VanJS")),
    div({style: "padding: 0 10px"}, Array.from({length: 10}).map((_, i) => p("Line ", i))),
  ),
)
```

--------------------------------

### Functional Component with Inline Event Handler

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Demonstrates an alternative way to define and use the `rbutton` component, where the `onclick` event handler is passed directly as an attribute during component creation, providing a more declarative approach.

```JS
rbutton({ style: "margin: 3px;", onclick: "() => alert(`Button ${i} pressed`)" }, `Button ${i}`)
```

--------------------------------

### CSS Styling for Interactive List Elements

Source: https://github.com/vanjs-org/van/blob/main/x/examples/list-advanced/index.html

This CSS snippet applies a 'pointer' cursor style to anchor elements. This is a common practice to visually indicate that an element is clickable or interactive, enhancing user experience within the advanced list example.

```CSS
a { cursor: pointer; }
```

--------------------------------

### VanJS Tooltip Component Usage Examples

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Illustrates various ways to use the VanJS Tooltip component, including basic display, dynamic text updates based on state changes, and custom fade-in animations. It also emphasizes the requirement for the parent element to have `position: relative` for correct tooltip positioning.

```ts
const tooltip1Show = van.state(false)
const tooltip2Show = van.state(false)
const count = van.state(0)
const tooltip2Text = van.derive(() => `Count: ${count.val}`)
const tooltip3Show = van.state(false)

van.add(document.body,
  button({
    style: "position: relative;",
    onmouseenter: () => tooltip1Show.val = true,
    onmouseleave: () => tooltip1Show.val = false,
  }, "Normal Tooltip", Tooltip({text: "Hi!", show: tooltip1Show})), " ",
  button({
    style: "position: relative;",
    onmouseenter: () => tooltip2Show.val = true,
    onmouseleave: () => tooltip2Show.val = false,
    onclick: () => ++count.val
  }, "Increment Counter", Tooltip({text: tooltip2Text, show: tooltip2Show})), " ",
  button({
    style: "position: relative;",
    onmouseenter: () => tooltip3Show.val = true,
    onmouseleave: () => tooltip3Show.val = false,
  }, "Slow Fade-in", Tooltip({text: "Hi from the sloth!", show: tooltip3Show, fadeInSec: 5})),
)
```

--------------------------------

### Visualize State Dependencies with VanGraph

Source: https://github.com/vanjs-org/van/blob/main/graph/README.md

This example demonstrates how to use `vanGraph.show` to visualize the dependency graph of `van.state` and `van.derive` objects. It takes a collection of state objects and renders their relationships, including any derived states or DOM nodes.

```js
const firstName = van.state("Tao"), lastName = van.state("Xin")
const fullName = van.derive(() => `${firstName.val} ${lastName.val}`)

// Build the DOM tree...

// To visualize the dependency graph among `firstName`, `lastName`, `fullName`, and all the
// derived states and DOM nodes from them.
vanGraph.show({firstName, lastName, fullName})
```

--------------------------------

### VanJS Dynamic DOM and CSS Manipulation

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/index.html

This snippet demonstrates how to use VanJS to create HTML elements (h1, h2, div, p, button), apply dynamic CSS rules using `van.css`, and handle click events to update element content. It also shows how to manage the DOM stack with `begin` and `end` for appending elements.

```JavaScript
"use strict"; const { h1, h2, div, p, button } = van.tags; const { begin, end, base, sp, css } = van
const rbutton = (...args) => { let b = button(...args); b.style.borderRadius = "50vh"; return b; }
// Apply a new CSS-rule dynamically. Same as a static definition here
css(`body { background-image: linear-gradient(0deg, #6ac 0%, #eff 100%); background-attachment: fixed; background-size: 100% 100vh; padding: 20px; text-align: center; font-family: helvetica; } button:hover { background-color: silver; box-shadow: 3px 3px 4px gray; transform: translate(-2px, -2px); } button:active { background-color: gray; box-shadow: 1px 1px 2px gray; transform: translate(0px, 0px); }`)
begin(document.body) // Open document for append
h2({ style: "color: #fc0;" }, "This is the DML style")
// create a div() and open for append
begin(div({ style: "border: 2px solid black; border-radius: 15px; width: 500px; margin: auto; background-color: #fff;" }, ""))
let headline = h1({ style: "color: red;" }, "Create 100 buttons")
for (let i = 0; i < 100; i++) rbutton({ style: "margin: 3px;" }, `Button ${i}`).onclick = () => headline.textContent = `Button ${i} pressed`
end(2); // close all open appends
if (sp() !== 0) alert("SP-Error") // check the stack pointer, should be zero at the end
```

--------------------------------

### Example of property bag for style overrides (CSS properties)

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Illustrates a sample property bag object used to override CSS styles, showing `z-index` and `background-color` with string keys.

```JavaScript
{
  "z-index": 1000,
  "background-color": "rgba(0,0,0,.8)",
}
```

--------------------------------

### Create Floating Window with Integrated Close Button

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Shows a basic FloatingWindow with the default integrated close button. This example also sets custom initial `x`, `y` coordinates and a `headerColor`.

```TypeScript
van.add(document.body, FloatingWindow(
  {title: "Example Window 2", x: 150, y: 150, headerColor: "lightblue"},
  div({style: "display: flex; justify-content: center;"},
    p("This is another floating window!"),
  ),
))
```

--------------------------------

### Create a Reusable Functional Component with van.js

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Defines `rbutton`, a functional component that creates a rounded button and applies inline styles. The component returns the DOM element, allowing external assignment of event handlers like `onclick` for flexible interaction.

```JS
const rbutton = (...args) => {
      let b = button(...args)
      b.style.borderRadius = "50vh"
      return b
    }

rbutton({ style: "margin: 3px;" }, `Button ${i}`).onclick = () => alert(`Button ${i} pressed`)
```

--------------------------------

### CSS Styling for Pointer Cursor

Source: https://github.com/vanjs-org/van/blob/main/graph/examples/basic/index.html

This CSS rule targets anchor (`<a>`) elements and sets their cursor property to `pointer`. This visual cue informs users that the element is clickable, enhancing user experience.

```CSS
a { cursor: pointer; }
```

--------------------------------

### Import VanGraph Module (NPM)

Source: https://github.com/vanjs-org/van/blob/main/graph/README.md

After installing VanGraph via NPM, this line imports the library as `vanGraph` into your JavaScript module. This allows you to access its functionalities, such as `vanGraph.show`, within your application.

```js
import * as vanGraph from "vanjs-graph"
```

--------------------------------

### Example Usage of Tabs Component

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Demonstrates how to use the Tabs component to create a tabbed interface with different content sections, including styling overrides for the tab buttons and rows. It shows how to embed various VanJS elements like paragraphs, bold text, and links within tab contents.

```ts
van.add(document.body, Tabs(
  {
    style: "max-width: 500px;",
    tabButtonActiveColor: "white",
    tabButtonBorderStyle: "none",
    tabButtonRowStyleOverrides: {
      "padding-left": "12px",
    },
  },
  {
    Home: p(
      "Welcome to ", b("VanJS"), " - the smallest reactive UI framework in the world.",
    ),
    "Getting Started": [
      p("To install the ", b("VanJS"), " NPM package, run the line below:"),
      pre(code("npm install vanjs-core")),
    ],
    About: p(
      "The author of ", b("VanJS"), " is ",
      a({href: "https://github.com/Tao-VanJS"}, " Tao Xin"), "."
    ),
  },
))
```

--------------------------------

### Advanced usage of choose component with custom options and styles

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Illustrates a more complex usage of the `choose` component, including text filtering, cyclical navigation, custom modal properties, and style overrides for selected options. It provides an example with a long list of options.

```TypeScript
  const choice = await choose({
    label: "Choose a South American country:",
    options: [
      "🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
      "🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
    ],
    showTextFilter: true,
    selectedColor: "blue",
    cyclicalNav: true,
    customModalProps: {
      blurBackground: true,
      modalStyleOverrides: {height: "300px"},
      clickBackgroundToClose: true,
    },
    selectedStyleOverrides: {color: "white"},
  })
  choice && van.add(document.body, div("You chose: ", b(choice)))
```

--------------------------------

### Managing reactive state with a VanJS counter component

Source: https://github.com/vanjs-org/van/blob/main/README.md

This example illustrates how VanJS handles reactive states and UI bindings. It uses `van.state(0)` to create a reactive counter variable and updates the UI automatically when the counter's value changes via button clicks.

```javascript
const Counter = () => {
  const counter = van.state(0)
  return div(
    "❤️ ", counter, " ",
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

van.add(document.body, Counter())
```

--------------------------------

### Styling Clickable Elements in VanX TODO List

Source: https://github.com/vanjs-org/van/blob/main/x/examples/todo-app/index.html

This CSS snippet defines a style for anchor tags, setting the cursor to a pointer to indicate interactivity. This is a common practice for clickable elements in web applications, including those built with VanX, to provide visual feedback to the user.

```css
a { cursor: pointer; }
```

--------------------------------

### Run VanJS Web Terminal Server with Deno

Source: https://github.com/vanjs-org/van/blob/main/demo/terminal/README.md

Command to start the Deno-based server for the web terminal application. It requires network access (`--allow-net`), permission to run subprocesses (`--allow-run`), and read access (`--allow-read`) to connect to the local shell and serve the client. By default, the server runs on port 8000, which can be customized via the `--port` flag.

```shell
deno run --allow-net --allow-run --allow-read demo/terminal/server.ts
```

--------------------------------

### Dynamically Adding Multiple CSS Rules with css() (Template String)

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/README.md

This example demonstrates using `css()` with a template string to add multiple CSS rules at once. This allows for more organized and readable definitions of several related styles that are applied dynamically.

```JavaScript
css(`
        .myClass { color: red; }
        .myClass: hover { color: green }
    `)
```

--------------------------------

### Embed Tabs Component in Floating Window

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Demonstrates embedding a `Tabs` component within a FloatingWindow. This example includes custom styling for the window's children container and the tabs themselves, along with a custom close button implemented outside the header.

```TypeScript
const closed = van.state(false)

van.add(document.body, FloatingWindow(
  {
    closed, x: 200, y: 200, width: 500, height: 300,
    childrenContainerStyleOverrides: { padding: 0 },
  },
  div(
    span({
      class: "vanui-window-cross",
      style: "position: absolute; top: 8px; right: 8px;cursor: pointer;",
      onclick: () => closed.val = true,
    }, "×"),
    Tabs(
      {
        style: "width: 100%;",
        tabButtonActiveColor: "white",
        tabButtonBorderStyle: "none",
        tabButtonRowColor: "lightblue",
        tabButtonRowStyleOverrides: {height: "2.5rem"},
        tabButtonStyleOverrides: {height: "100%"},
      },
      {
        Home: p(
          "Welcome to ", b("VanJS"), " - the smallest reactive UI framework in the world.",
        ),
        "Getting Started": [
          p("To install the ", b("VanJS"), " NPM package, run the line below:"),
          pre(code("npm install vanjs-core")),
        ],
        About: p(
          "The author of ", b("VanJS"), " is ",
          a({href: "https://github.com/Tao-VanJS"}, " Tao Xin"), "."
        ),
      },
    )
  )
))
```

--------------------------------

### Style Anchor Cursor in VanX

Source: https://github.com/vanjs-org/van/blob/main/x/examples/list-basic/index.html

This CSS rule sets the cursor to a pointer when hovering over anchor (`<a>`) elements. It's a common UI pattern to visually indicate clickable items, enhancing user experience in web applications, including those built with frameworks like VanX.

```CSS
a { cursor: pointer; }
```

--------------------------------

### Nested DOM Appending and Stack Pointer Check

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/example/README.md

Illustrates nesting `begin()` and `end()` calls for complex DOM structures. `end(n)` can close multiple levels of append modes, and `sp()` returns the current stack pointer, which should be zero at the end of JavaScript execution to indicate balanced `begin`/`end` calls.

```JS
begin(document.body) // open document
...
  	begin(div(...))  // create div and open for append
...

end(2);  // close all open appends
if (sp() !== 0) alert("SP-Error") // check the stack pointer, should be zero at the end
```

--------------------------------

### CSS Styling for Text Input Width

Source: https://github.com/vanjs-org/van/blob/main/x/examples/reactive/index.html

This CSS snippet defines a basic style rule for HTML text input fields. It targets all 'input' elements specifically with 'type="text"' and sets their visual width to 90 pixels, which can be useful for consistent sizing in forms or reactive components.

```css
input[type=text] { width: 90px; }
```

--------------------------------

### Basic usage of choose component in TypeScript

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Demonstrates how to use the `choose` component with a simple label and a list of options. It shows how to await the user's choice and display it on the page.

```TypeScript
const choice = await choose({
  label: "Choose a color:",
  options: ["Red", "Green", "Blue"],
})
choice && van.add(document.body, div("You chose: ", b(choice)))
```

--------------------------------

### VanJS Window Component Property Reference

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Comprehensive reference for configuring VanJS window components, including properties for visual appearance, behavior, and styling overrides.

```APIDOC
Property Reference:
  title:
    Type: ChildDom | Array<ChildDom>
    Optional: true
    Description: One ChildDom or multiple ChildDom as an Array for the title of the created window. If not specified, the window won't have a title.
  closed:
    Type: State<boolean>
    Optional: true
    Description: If specified, the created window can be closed via the `closed` State object with `closed.val = true`. You can also subscribe the closing event of the created window via van.derive.
  x:
    Type: number | State<number>
    Default: 100
    Optional: true
    Description: The x-coordinate of the created window, in pixels.
  y:
    Type: number | State<number>
    Default: 100
    Optional: true
    Description: The y-coordinate of the created window, in pixels.
  width:
    Type: number | State<number>
    Default: 300
    Optional: true
    Description: The width of the created window, in pixels.
  height:
    Type: number | State<number>
    Default: 200
    Optional: true
    Description: The height of the created window, in pixels.
  closeCross:
    Type: ChildDom | Array<ChildDom>
    Default: "×"
    Optional: true
    Description: One ChildDom or multiple ChildDom as an Array for the close button of the created window. If its value is `null`, there won't be a close button. If `title` property is not specified, this property will be ignored and there won't be a close button.
  customStacking:
    Type: boolean
    Default: false
    Optional: true
    Description: If `true`, default `z-index` stacking rule won't be triggered. Users are expected to manually set the `z-index` property of the created window via the `State` object for `z-index` property below.
  zIndex:
    Type: number | State<number>
    Optional: true
    Description: If a `State` object is specified, you can use the `State` object to track the change of `z-index` property via van.derive. If `customTracking` is `true`, you can use this property to manually set the `z-index` property of the created window.
  disableMove:
    Type: boolean
    Default: false
    Optional: true
    Description: If `true`, the created window can't be moved.
  disableResize:
    Type: boolean
    Default: false
    Optional: true
    Description: If `true`, the created window can't be resized.
  headerColor:
    Type: string
    Default: "lightgray"
    Optional: true
    Description: The background color of the window header (title bar).
  windowClass:
    Type: string
    Default: ""
    Optional: true
    Description: The `class` attribute of the created window. You can specify multiple CSS classes separated by " ".
  windowStyleOverrides:
    Type: Record<string, string | number>
    Default: {}
    Optional: true
    Description: A property bag for the styles you want to override for the created window.
  headerClass:
    Type: string
    Default: ""
    Optional: true
    Description: The `class` attribute of the window header (title bar). You can specify multiple CSS classes separated by " ".
  headerStyleOverrides:
    Type: Record<string, string | number>
    Default: {}
    Optional: true
    Description: A property bag for the styles you want to override for the window header (title bar).
  childrenContainerClass:
    Type: string
    Default: ""
    Optional: true
    Description: The `class` attribute of the container for `children` DOM nodes. You can specify multiple CSS classes separated by " ".
  childrenContainerStyleOverrides:
    Type: Record<string, string | number>
    Default: {}
    Optional: true
    Description: A property bag for the styles you want to override for the container of `children` DOM nodes.
  crossClass:
    Type: string
    Default: ""
    Optional: true
    Description: The `class` attribute of the close button. You can specify multiple CSS classes separated by " ".
  crossStyleOverrides:
    Type: Record<string, string | number>
    Default: {}
    Optional: true
    Description: A property bag for the styles you want to override for the close button.
  crossHoverClass:
    Type: string
    Default: ""
    Optional: true
    Description: The `class` attribute of the close button when it's hovered over. You can specify multiple CSS classes separated by " ".
  crossStyleOverrides (hover):
    Type: Record<string, string | number>
    Default: {}
    Optional: true
    Description: A property bag for the styles you want to override for the close button when it's hovered over.
```

--------------------------------

### VanJS Tooltip Component Property Reference

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Comprehensive API documentation for the VanJS Tooltip component, detailing all available properties, their types, default values, and descriptions for customization.

```APIDOC
text:
  Type: string | State<string>
  Required: true
  Description: The text shown in the tooltip. If a State object is specified, you can set the text with text.val = .... 
show:
  Type: State<boolean>
  Required: true
  Description: The State object to control whether to show the tooltip or not.
width:
  Type: string
  Default: "200px"
  Required: false
  Description: The width of the tooltip.
backgroundColor:
  Type: string
  Default: "#333D"
  Required: false
  Description: The background color of the tooltip.
fontColor:
  Type: string
  Default: "white"
  Required: false
  Description: The font color of the tooltip.
fadeInSec:
  Type: number
  Default: 0.3
  Required: false
  Description: The duration of the fade-in animation.
tooltipClass:
  Type: string
  Default: ""
  Required: false
  Description: The class attribute of the tooltip. You can specify multiple CSS classes separated by " ".
tooltipStyleOverrides:
  Type: Record<string, string | number>
  Default: {}
  Required: false
  Description: A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the tooltip.
triangleClass:
  Type: string
  Default: ""
  Required: false
  Description: The class attribute of the triangle in the bottom. You can specify multiple CSS classes separated by " ".
triangleStyleOverrides:
  Type: Record<string, string | number>
  Default: {}
  Required: false
  Description: A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the triangle in the bottom.
```

--------------------------------

### MessageBoard and Message Properties API Reference

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Comprehensive API documentation for all configurable properties of the MessageBoard component and the individual messages displayed on it. Includes types, defaults, and descriptions for each property.

```APIDOC
MessageBoard Properties:
- top: Type `string`. Optional. The `top` CSS property of the message board.
- bottom: Type `string`. Optional. The `bottom` CSS property of the message board. Exactly one of `top` and `bottom` should be specified.
- backgroundColor: Type `string`. Default `"#333D"`. Optional. The background color of the messages shown on the message board.
- fontColor: Type `string`. Default `"white"`. Optional. The font color of the messages shown on the message board.
- fadeOutSec: Type `number`. Default `0.3`. Optional. The duration of the fade out animation when messages are being closed.
- boardClass: Type `string`. Default `""`. Optional. The `class` attribute of the message board. You can specify multiple CSS classes separated by `" "`.
- boardStyleOverrides: Type `Record<string, string | number>`. Default `{}`. Optional. A property bag for the styles you want to override for the message board.
- messageClass: Type `string`. Default `""`. Optional. The `class` attribute of the message shown on the message board. You can specify multiple CSS classes separated by `" "`.
- messageStyleOverrides: Type `Record<string, string | number>`. Default `{}`. Optional. A property bag for the styles you want to override for the message shown on the message board.
- closerClass: Type `string`. Default `""`. Optional. The `class` attribute of the message closer. You can specify multiple CSS classes separated by `" "`.
- closerStyleOverrides: Type `Record<string, string | number>`. Default `{}`. Optional. A property bag for the styles you want to override for the message closer.

Message Properties:
- message: Type `ChildDom`. Required. One `ChildDom` or multiple `ChildDom` as an `Array` for the message we want to show.
- closer: Type `ChildDom`. Optional. If specified, we will render a closer DOM node with one `ChildDom` or multiple `ChildDom`s as an `Array` which can be clicked to close the shown message.
- durationSec: Type `number`. Optional. If specified, the shown message will be automatically closed after `durationSec` seconds.
- closed: Type `State<boolean>`. Optional. If specified, the shown message can be closed via the `closed` `State` object with `closed.val = true`. You can also subscribe the closing event of the message via `van.derive`.
```

--------------------------------

### Create MessageBoard instance

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Initializes a new MessageBoard component. It accepts a property bag for configuration, allowing customization of its appearance and behavior.

```js
const board = new MessageBoard({...props})
```

--------------------------------

### choose component property reference

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Detailed reference for all configurable properties of the `choose` component, including their types, default values, and descriptions. This section covers options for labels, choices, filtering, navigation, and various style overrides.

```APIDOC
label: Type ChildDom. Required. One ChildDom or multiple ChildDom as an Array for the label you want to show.
options: Type string[]. Required. The options of the choice.
showTextFilter: Type boolean. Default false. Optional. Whether to show a text filter for the options.
selectedColor: Type string. Default "#f5f5f5". Optional. The background color of the currently selected option.
cyclicalNav: Type boolean. Default false. Optional. Whether to navigate through the options via arrow keys in a cyclical manner. That is, if cyclicalNav is on, when you reach the end of the list, pressing the down arrow key will take you back to the beginning, and vice versa for going up the list with the up arrow key.
customModalProps: Type: property bags for the Modal component (except the closed field). Default {}. Optional. The custom properties for the Modal component you want to specify.
textFilterClass: Type string. Default "". Optional. The class attribute of the text filter. You can specify multiple CSS classes separated by " ".
textFilterStyleOverrides: Type Record<string, string | number>. Default {}. Optional. A property bag for the styles you want to override for the text filter.
optionsContainerClass: Type string. Default "". Optional. The class attribute of the container of all options. You can specify multiple CSS classes separated by " ".
optionsContainerStyleOverrides: Type Record<string, string | number>. Default {}. Optional. A property bag for the styles you want to override for the container of all options.
optionClass: Type string. Default "". Optional. The class attribute of an individual option. You can specify multiple CSS classes separated by " ".
optionStyleOverrides: Type Record<string, string | number>. Default {}. Optional. A property bag for the styles you want to override for an individual option.
selectedClass: Type string. Default "". Optional. The class attribute of the currently selected option. You can specify multiple CSS classes separated by " ".
selectedStyleOverrides: Type Record<string, string | number>. Default {}. Optional. A property bag for the styles you want to override for the currently selected option.
```

--------------------------------

### Import VanUI via Script Tag

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Instructions for importing the VanUI library directly from a CDN using a script tag in HTML. Note that VanJS must also be imported this way for VanUI to function.

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.12/dist/van-ui.nomodule.min.js"></script>
```

--------------------------------

### Creating a basic 'Hello World' component with VanJS

Source: https://github.com/vanjs-org/van/blob/main/README.md

This snippet demonstrates how to define a reusable UI component using pure JavaScript functions and VanJS's `div`, `p`, `ul`, `li`, and `a` tag functions. It shows how to append the component to the document body using `van.add`.

```javascript
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello = () => div(
  p("👋Hello"),
  ul(
    li("🗺️World"),
    li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
  ),
)

van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())
```

--------------------------------

### Await Component: Fetching GitHub Stars

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Demonstrates how to use the `Await` component to display asynchronous data, such as fetching GitHub star counts. It includes handling loading and error states, and a refetch mechanism.

```ts
const Example1 = () => {
  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

  const fetchWithDelay = (url: string, waitMs: number) =>
    sleep(waitMs).then(() => fetch(url)).then(r => r.json())

  const fetchStar = () =>
    fetchWithDelay("https://api.github.com/repos/vanjs-org/van", 1000)
      .then(data => data.stargazers_count)

  const data = van.state(fetchStar())

  return [
    () => h2(
      "GitHub Stars: ",
      Await({
        value: data.val, container: span,
        Loading: () => "🌀 Loading...",
        Error: () => "🙀 Request failed.",
      }, starNumber => `⭐️ ${starNumber}!`)
    ),
    () => Await({
      value: data.val,
      Loading: () => '',
    }, () => button({onclick: () => (data.val = fetchStar())}, "Refetch")),
  ]
}
```

--------------------------------

### Await Component API Signature

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

API documentation for the `Await` utility component, which helps build UI components based on asynchronous JavaScript Promises. It defines parameters for value, container, loading state, error handling, and a children function for rendering resolved data.

```APIDOC
Await({
  value,  // A `Promise` object for asynchronous data
  container,  // The container of the result. Default `div`
  Loading,  // What to render when the data is being loaded
  Error  // What to render when error occurs
}, children) => <The created UI element>

The `children` parameter (type: `(data: T) => ValidChildDomValue`) is a function that takes the resolved data as input and returns a valid child DOM value (`Node`, primitives, `null` or `undefined`), used to indicate what to render after the data is loaded.
```

--------------------------------

### Modal Component: Basic Usage

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Shows a simple implementation of the `Modal` component with basic content and a close button. It demonstrates how to control the modal's visibility using a state variable.

```ts
const closed = van.state(false)
van.add(document.body, Modal({closed},
  p("Hello, World!"),
  div({style: "display: flex; justify-content: center;"},
    button({onclick: () => closed.val = true}, "Ok"),
  ),
))
```

--------------------------------

### Terminal Application Initialization

Source: https://github.com/vanjs-org/van/blob/main/demo/terminal/client.html

Fetches the current working directory from the server and initializes the VanJS terminal application, appending it to the document body and setting focus to the first input field.

```JavaScript
fetch("/cwd").then(r => r.text()).then(cwd => document.body.appendChild(Terminal({cwd})).querySelector("input").focus())
```

--------------------------------

### Modal Component: Signature

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Provides the function signature for creating a modal window using the `Modal` component, indicating its parameters and return type.

```APIDOC
Modal({...props}, ...children) => <The created modal window>
```

--------------------------------

### Changing CSS Rules Dynamically with Event Handlers using css()

Source: https://github.com/vanjs-org/van/blob/main/addons/van_dml/README.md

This example shows how `css()` can be used within event handlers to dynamically change CSS rules in response to user interaction. Clicking buttons will instantly update the background color of elements with 'class1', demonstrating real-time CSS modification.

```JavaScript
const { button } = van.tags
const { add, css } = van
    add(document.body,
    button({onclick: () => css(".class1 {background-color: red;}")},"set class1 red"),
    button({onclick: () => css(".class1 {background-color: green;}")},"set class1 green")
);
```

--------------------------------

### Implement Custom Stacking for Floating Window

Source: https://github.com/vanjs-org/van/blob/main/components/README.md

Demonstrates a FloatingWindow with `customStacking: true`, allowing manual control over its z-index. Includes buttons to increment/decrement z-index and bring the window to the front using the `topMostZIndex()` utility function.

```TypeScript
const zIndex = van.state(1)

van.add(document.body, FloatingWindow(
  {title: "Custom stacking", x: 300, y: 300, customStacking: true, zIndex},
  div({style: "display: flex; justify-content: space-between;"},
    button({onclick: () => zIndex.val++}, "+"),
    p("z-index: ", zIndex),
    button({onclick: () => zIndex.val--}, "-"),
  ),
  div({style: "display: flex; justify-content: center;"},
    button({onclick: () => zIndex.val = topMostZIndex()}, "Bring to Front"),
  ),
))
```

--------------------------------

### Initialize and Run VanX Test Suite

Source: https://github.com/vanjs-org/van/blob/main/x/test/van-x.test.html

This asynchronous JavaScript immediately invokes a function to initialize the VanX test environment. It runs tests from both `van-x.nomodule.js` and `van-x.nomodule.min.js`, then updates the UI with the total number of tests and reveals the end message upon completion.

```JavaScript
vanXDev = vanX (async () => { await runTests(van, vanXDev, "van-x.nomodule.js") await runTests(van, vanX, "van-x.nomodule.min.js") document.getElementById("numTests").innerText = window.numTests document.getElementById("endMsg").style.display = "" })()
```