### Install Dependencies and Run Deft Development Server

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Installs project dependencies using npm and starts the development server for live previewing. This command is typically run after initializing the project and its Android components.

```bash
npm install
npm run dev
```

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

### Install deft-cli and HarmonyOS Targets (Bash)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/harmony/quick-start.md

Installs necessary HarmonyOS targets for Rust and the deft-cli toolkit. Requires rustup and Cargo.

```bash
rustup target add aarch64-unknown-linux-ohos
rustup target add x86_64-unknown-linux-ohos
cargo install deft-cli
```

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

### Set HarmonyOS SDK and DevEco Home Environment Variables (Windows)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/harmony/quick-start.md

Sets the OHOS_SDK_HOME and DEVECO_HOME environment variables on Windows. Replace paths with your actual installation locations.

```bash
set OHOS_SDK_HOME=C:\Users\dev\AppData\Local\OpenHarmony\Sdk\15
set DEVECO_HOME=C:\Program Files\Huawei\DevEco Studio
```

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

### Install Deft CLI and Android Targets

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Installs the deft-cli toolkit globally using Cargo and adds the necessary Android cross-compilation targets for Rust. This command assumes you have Rust and Cargo installed and configured.

```bash
cargo install deft-cli
rustup target add aarch64-linux-android
rustup target add x86_64-linux-android
```

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

### Set HarmonyOS SDK and DevEco Home Environment Variables (macOS)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/harmony/quick-start.md

Sets the OHOS_SDK_HOME and DEVECO_HOME environment variables on macOS. Replace paths with your actual installation locations.

```bash
export OHOS_SDK_HOME=/Users/dev/Library/OpenHarmony/Sdk/15
export DEVECO_HOME=/Applications/DevEco-Studio.app/Contents
```

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

### Create and Initialize Deft UI Project (Bash)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/harmony/quick-start.md

Creates a new Deft UI project named 'demo' and initializes it for HarmonyOS development. Requires Node.js and npm.

```bash
npm create deft@0.7 demo
cd demo
deft init ohos
```

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

### Create a New Deft Project

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Initializes a new Deft UI project named 'demo' using npm. After creation, you will be prompted to select a language and framework. This command sets up the basic project structure.

```bash
npm create deft demo
```

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

### Build Release Version of Deft UI for Android

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Compiles the Deft UI project into a release-ready library for Android. After execution, the `android` directory can be opened in Android Studio for further packaging into a standard Android application.

```bash
npm run build:android
```

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

### Build Release Version for HarmonyOS (Bash)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/harmony/quick-start.md

Builds the release version of the HarmonyOS shared library. This can then be packaged into a Harmony application using DevEco Studio.

```bash
npm run build:ohos
```

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

### Install Rust using rustup

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/prerequisites.md

Installs the Rust programming language toolchain using rustup. This command is suitable for Linux and MacOS environments and does not require root privileges.

```bash
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```

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

### Install NodeJS on Debian

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/prerequisites.md

Installs NodeJS on Debian-based Linux systems using the apt package manager. It first updates the package list and then installs the NodeJS package.

```bash
sudo apt update
sudo apt install nodejs
```

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

### Configure MacOS Environment Variables for Android NDK

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Sets the ANDROID_HOME and ANDROID_NDK_HOME environment variables for MacOS systems. Verify that the paths match your actual Android SDK and NDK installation directories. NDK version 26 is currently supported.

```bash
export ANDROID_HOME="$HOME/Library/Android/sdk"
export ANDROID_NDK_HOME="$ANDROID_HOME/ndk/26.3.11579264"
```

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

### Configure Linux Environment Variables for Android NDK

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Sets the ANDROID_HOME and ANDROID_NDK_HOME environment variables for Linux systems. Ensure the paths are updated to reflect your actual Android SDK and NDK installation locations. NDK version 26 is currently supported.

```bash
export ANDROID_HOME="$HOME/Android/Sdk"
export ANDROID_NDK_HOME="$ANDROID_HOME/ndk/26.3.11579264"
```

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

### Start Deft Development Server (npm)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Command to start the development server for a Deft project using npm. It also includes shortcuts for previewing the application on desktop or Android.

```bash
npm run dev

# Press 'r' to start desktop preview
# Press 'a' to start Android preview (requires USB debugging enabled)
```

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

### Initialize Android Project within Deft

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/android/quick-start.md

Initializes the Android project files within an existing Deft project directory. This command should be run after navigating into the project directory. You will be prompted to enter an AppID.

```bash
cd demo
deft init android
```

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

### Install Linux Dependencies for Deft-UI

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/prerequisites.md

Installs essential build tools and libraries required for Deft-UI on Debian-based Linux systems. This command assumes a Debian 12 environment and may vary for other distributions.

```bash
sudo apt install build-essential libssl-dev libclang-dev libc++-dev \
       xorg-dev libxcb-xfixes0-dev libxcb-shape0-dev libdbus-1-dev \
       libasound2-dev libegl-dev libgles-dev librust-wayland-egl-dev
```

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

### Create Astro Starlight Project

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/README.md

This command initializes a new Astro project using the Starlight template. It requires Node.js and npm to be installed. The output is a new project directory configured for Starlight documentation.

```bash
npm create astro@latest -- --template starlight
```

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

### Box Model Styling Example (JSX)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Provides a JSX example of applying Deft UI's box model properties, including width, height, margin, padding, border, and borderRadius. Deft's box model follows the 'border-box' standard.

```jsx
<Container style={{
    width: 100,
    height: 100,
    margin: 10,
    padding: 10,
    border: '1 #ccc',
    borderRadius: 5,
}} które...</Container>
```

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

### Webpack CSS Import Configuration

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Illustrates a Webpack configuration for using 'deft-style-loader', 'css-loader', and 'postcss-loader' to import and hot-load CSS files. This setup is similar to the standard 'style-loader' approach.

```javascript
module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.css$/,
                use: [ 'deft-style-loader', 'css-loader', 'postcss-loader']
            }
        ],
    }
};
```

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

### Astro Project Commands

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/README.md

Lists essential npm commands for managing an Astro project, including dependency installation, running a local development server, building for production, and previewing the build. These commands are executed from the project's root directory.

```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```

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

### Basic TextInput Usage in React

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/text-input.md

Demonstrates how to import and use the TextInput component from deft-react in a React application. This example shows basic instantiation with an initial text value.

```javascript
import {TextInput} from 'deft-react';
function App() {
    return <TextInput text="Hello" />
}
```

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

### CSS: Style Custom Component

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Provides basic CSS rules to style a custom component with the tag 'hello'. This example sets dimensions and background color for the component.

```css
body {
    justify-content: center;
    align-items: center;
}
hello {
    width: 100px;
    height: 100px;
    background: #ccc;
}
```

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

### Flexbox Layout System Example (React)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates using Deft's React components and CSS-like flexbox layout system to build a multi-pane application interface. It includes a header, sidebar, main content area, and footer, showcasing layout properties like flexDirection, alignItems, and justifyContent.

```javascript
import { Container, Button, Label } from 'deft-react';

function LayoutDemo() {
    return (
        <Container style={{
            width: '100%',
            height: '100%',
            flexDirection: 'column'
        }}>
            {/* Header */}
            <Container style={{
                height: 60,
                backgroundColor: '#333',
                flexDirection: 'row',
                alignItems: 'center',
                paddingLeft: 20,
                paddingRight: 20,
                justifyContent: 'space-between'
            }}>
                <Label text="App Title" style={{ color: 'white', fontSize: 18 }} />
                <Button>Settings</Button>
            </Container>

            {/* Main content area */}
            <Container style={{
                flex: 1,
                flexDirection: 'row'
            }}>
                {/* Sidebar */}
                <Container style={{
                    width: 200,
                    backgroundColor: '#f5f5f5',
                    padding: 10,
                    flexDirection: 'column',
                    gap: 5
                }}>
                    <Button>Menu 1</Button>
                    <Button>Menu 2</Button>
                    <Button>Menu 3</Button>
                </Container>

                {/* Content */}
                <Container style={{
                    flex: 1,
                    padding: 20,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Label text="Main Content Area" />
                </Container>
            </Container>

            {/* Footer */}
            <Container style={{
                height: 40,
                backgroundColor: '#eee',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Label text="Footer" style={{ fontSize: 12 }} />
            </Container>
        </Container>
    );
}
```

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

### Deft HTTP Fetch API (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Shows how to make HTTP requests using a Web-standard fetch interface in Deft. Supports simple GET requests and POST requests with JSON bodies, including response handling.

```javascript
// Simple GET request
const response = await fetch("https://deft-ui.github.io");
const data = await response.json();
console.log(data);

// POST request with JSON body
const postResponse = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        name: "John Doe",
        email: "john@example.com"
    })
});

if (postResponse.ok) {
    const result = await postResponse.json();
    console.log("User created:", result);
} else {
    console.error("Request failed:", postResponse.status);
}
```

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

### JavaScript: Manage System Tray Icons with Deft UI System Tray API

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This example uses the Deft UI System Tray API to create and manage system tray icons on PC platforms (Linux, Windows, macOS). It covers setting the icon, title, binding click events, and defining context menu items with handlers. It requires a GUI environment.

```javascript
const tray = new SystemTray();
tray.title = "My Deft App";
tray.icon = "assets/icon.png";

tray.bindActivate(() => {
    console.log("Tray icon clicked");
    window.show();
});

tray.setMenus([
    {
        id: "show",
        label: "Show Window",
        handler() {
            console.log("Show menu clicked");
            window.show();
        }
    },
    {
        id: "settings",
        label: "Settings",
        handler() {
            console.log("Opening settings...");
        }
    },
    {
        id: "exit",
        label: "Exit",
        handler() {
            process.exit(0);
        }
    }
]);
```

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

### LocalStorage Usage in JavaScript

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/api/localstorage.md

Demonstrates basic LocalStorage operations in JavaScript. Includes examples for storing key-value pairs using `setItem` and retrieving values using `getItem`. This allows for client-side data persistence.

```javascript
// Store data
localStorage.setItem("name", "测试");
// Read data
const value = localStorage.getItem("name");
```

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

### Import CSS Stylesheets (JavaScript)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Demonstrates how to import CSS stylesheets directly using JavaScript by creating a CSS string and appending it to the document's stylesheet. This method is native and does not rely on bundlers.

```javascript
const css = `
.btn {
    color: #F00;   
}
`
navigator.stylesheet.append(css);
```

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

### Deft UI Combinators

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/selector.md

Provides an example of using combinators in Deft UI to select elements based on their relationship to other elements. This enables complex selector patterns.

```css
.title .name {
    color: #F00;
}
```

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

### Element Base Class: Component Interaction and Properties (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates how to utilize the base Element class from 'deft-react' to interact with UI components. This example shows accessing properties like ID and size, getting bounding rectangle information, focusing elements, and handling common events like click and hover.

```javascript
import { Element } from 'deft-react';

// Using base Element properties
function CustomComponent() {
    const elementRef = React.useRef(null);

    React.useEffect(() => {
        const element = elementRef.current;

        // Access element properties
        console.log("Element ID:", element.id);
        console.log("Element size:", element.size);
        console.log("Scroll height:", element.scrollHeight);

        // Get element bounding rectangle
        const rect = element.getBoundingClientRect();
        console.log("Position:", rect.x, rect.y);
        console.log("Dimensions:", rect.width, rect.height);

        // Set focus
        element.focus();

        // Bind events
        element.addEventListener('click', (e) => {
            console.log("Clicked at:", e.offsetX, e.offsetY);
        });

        element.addEventListener('mouseenter', () => {
            element.cursor = 'pointer';
        });

        element.addEventListener('mouseleave', () => {
            element.cursor = 'default';
        });

        element.addEventListener('sizechanged', () => {
            console.log("New size:", element.size);
        });
    }, []);

    return (
        <Container
            ref={elementRef}
            style={{ width: 200, height: 100 }}
            hoverStyle={{ backgroundColor: '#e0e0e0' }}
        >
            Interactive Element
        </Container>
    );
}
```

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

### Transform Rotation Example (JSX)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Illustrates applying a CSS transform to rotate an element clockwise by 45 degrees using inline styles in Deft UI with JSX. Other transform functions like translate and scale are also supported.

```jsx
// 顺时针旋转45度
<Container style={{
    transform: 'rotate(45deg)',
}}>...</Container>
```

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

### Container Component: Layout with Flexbox (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Illustrates the use of the Container component from 'deft-react' for creating flexible layouts using flexbox properties. This example shows how to arrange elements vertically and horizontally, and apply background colors and spacing.

```javascript
import { Container, Button, Label } from 'deft-react';

function App() {
    return (
        <Container style={{
            width: '100%',
            height: '100%',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#f0f0f0'
        }}>
            <Label
                text="Welcome to Deft"
                style={{
                    fontSize: 24,
                    fontWeight: 'bold',
                    marginBottom: 20
                }}
            />

            <Container style={{
                flexDirection: 'row',
                gap: 10
            }}>
                <Button>Confirm</Button>
                <Button>Cancel</Button>
            </Container>
        </Container>
    );
}
```

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

### Inline Styles for Centered Layout (JSX)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Shows how to apply inline styles in Deft UI using JSX. This example demonstrates setting justifyContent and alignItems to center elements within a Container component, utilizing camel case for style property names.

```jsx
<Container
  style={{
    justifyContent: 'center',
    alignItems: 'center',  
  }}>
  Some contents
</Container>
```

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

### JavaScript: Interact with Clipboard Content using Clipboard API

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This snippet demonstrates how to read from and write to the system clipboard using the Deft UI Clipboard API. It uses `async/await` syntax and requires browser or Node.js environment with clipboard access permissions. Examples include writing text, reading text, and a button click handler.

```javascript
await navigator.clipboard.writeText("Hello, Deft!");
console.log("Text copied to clipboard");

const clipboardContent = await navigator.clipboard.readText();
console.log("Clipboard content:", clipboardContent);

button.addEventListener('click', async () => {
    await navigator.clipboard.writeText(textInput.text);
    console.log("Copied:", textInput.text);
});
```

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

### Background Color Styling (JSX)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/style.md

Demonstrates how to set the background color of an element using inline styles in Deft UI with JSX. Currently, it only supports single color values.

```jsx
<Container style={{
    backgroundColor: '#0006'
}}>...</Container>
```

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

### TextEdit Component Usage in React

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/text-edit.md

This snippet demonstrates how to import and use the TextEdit component within a React application. It shows basic usage with an initial text value. Ensure 'deft-react' is installed as a dependency.

```javascript
import {TextEdit} from 'deft-react';
function App() {
    return <TextEdit text="Hello" />
}
```

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

### Apply Box Model Styles (JSX)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/overview.md

Shows an example of using Deft UI's box model properties like `width`, `height`, `margin`, `padding`, `border`, and `borderRadius` within a `Container` component. It follows the `border-box` model where dimensions include padding and border.

```jsx
<Container style={{
    width: 100,
    height: 100,
    margin: 10,
    padding: 10,
    border: '1 #ccc',
    borderRadius: 5,
}}>...</Container>
```

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

### Use Deft UI Checkbox Component in React

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/checkbox.md

This JavaScript example demonstrates how to import and use the Checkbox component from the 'deft-react' library. It shows how to attach refs to checkboxes to access their state and how to handle the onChange event to log the selection status of multiple checkboxes.

```javascript
import {Checkbox} from 'deft-react';

function App() {
    const javascriptRef = useRef();
    const rustRef = useRef();

    function onCheckChange(e) {
        console.log('is javascript checked', javascriptRef.current.value);
        console.log('is rust checked', rustRef.current.value);
    }

    return <Container>
        <Checkbox ref={javascriptRef} label="JavaScript" onChange={onCheckChange}/>
        <Checkbox ref={rustRef} label="Rust" onChange={onCheckChange}/>
    </Container>
}
```

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

### JavaScript: Background Task Processing with Worker API

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This example shows how to use the Deft UI Worker API to create background threads for CPU-intensive tasks. It includes code for the main thread (creating a worker, sending/receiving messages) and the worker script itself (receiving/processing messages, sending results back).

```javascript
// Main thread: Create worker
const worker = new Worker("worker-script.js");

// Send message to worker
worker.postMessage({ action: "process", data: [1, 2, 3, 4, 5] });

// Receive messages from worker
worker.bindMessage((e) => {
    console.log("Worker result:", e.data);
});

// worker-script.js file content:
// Receive messages from main thread
bindMessage((e) => {
    const { action, data } = e.data;

    if (action === "process") {
        // Perform CPU-intensive calculation
        const result = data.reduce((sum, val) => sum + val, 0);

        // Send result back to main thread
        postMessage({ result });
    }
});
```

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

### Astro Starlight Project Structure

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/README.md

Illustrates the typical file and directory structure of an Astro project integrated with Starlight. Key directories include `public/` for static assets, `src/content/docs/` for markdown content, and configuration files like `astro.config.mjs`.

```tree
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   ├── docs/\n│   └── content.config.ts\n├── astro.config.mjs\n├── package.json\n└── tsconfig.json
```

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

### Deft Window API (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates how to create and control application windows in the Deft UI Framework using JavaScript. Includes setting titles, binding resize events, resizing windows (PC only), and configuring preferred renderers.

```javascript
// Create a new window
const window = new Window();

// Set window title
window.title = "My Deft App";

// Bind resize event handler
window.bindResize((e) => {
    console.log("Window dimensions:", e.width, e.height);
});

// Resize window (PC only)
window.resize({
    width: 800,
    height: 600
});

// Configure preferred renderers
const customWindow = new Window({
    preferredRenderers: ["GL", "SoftBuffer"]
});
```

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

### Create New Deft Project (npm, pnpm, yarn)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Instructions for creating a new Deft project using different package managers (npm, pnpm, yarn). This is the initial step for any new Deft application development.

```bash
# Using npm
npm create deft@latest

# Using pnpm
pnpm create deft@latest

# Using yarn
yarn create deft
```

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

### Build Production Deft Application (npm)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Command to build a production-ready application for the Deft UI Framework using npm. This command compiles and bundles the project for deployment.

```bash
npm run build
```

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

### Create and Configure System Tray Icon (JavaScript)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/api/tray.md

This snippet demonstrates how to create a new SystemTray instance, set its title and icon, bind a click event handler, and define context menus. It requires the SystemTray library.

```javascript
const tray = new SystemTray();
tray.title = "My Deft App";
tray.icon = "path/to/icon.png";
// Bind click event
tray.bindActivate(() => {
    console.log("clicked");
});
// Set menus
tray.setMenus([
    {
        id: "show",
        label: "Show",
        handler() {
            console.log("show menu is clicked");
        }
    },
    {
        id: "exit",
        label: "Exit",
        handler() {
            process.exit(0);
        }
    },
]);
```

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

### 使用 deft-react Entry 组件

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/entry.md

展示如何在 deft-react 应用中使用 Entry 组件。此代码片段演示了导入 Entry 组件并将其渲染到应用中，初始文本设置为 "Hello"。

```jsx
import {Entry} from 'deft-react';

function App() {
    return <Entry text="Hello" />
}
```

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

### Deft WebSocket API (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Illustrates how to establish and manage WebSocket connections for persistent communication in Deft. Covers connection opening, sending messages, receiving messages, error handling, and connection closure.

```javascript
// Create WebSocket connection
const ws = new WebSocket("wss://echo.websocket.org");

// Connection opened handler
ws.onopen = () => {
    console.log("WebSocket connection established");
    ws.send("Hello Server!");
};

// Message received handler
ws.onmessage = (e) => {
    console.log("Received message:", e.data);
};

// Error handler
ws.onerror = (e) => {
    console.error("WebSocket error:", e);
};

// Connection closed handler
ws.onclose = (e) => {
    console.log("Connection closed:", e.code, e.reason);
};
```

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

### Deft SQLite Database API (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates local database storage and querying using SQLite in Deft applications. Includes opening/creating database files, creating tables, inserting data with parameterized queries, querying data, updating, and deleting records.

```javascript
// Open or create database file
const conn = await Sqlite.open("/path/to/app.db");

// Create table
await conn.execute(
    'CREATE TABLE IF NOT EXISTS "users" ("id" INTEGER PRIMARY KEY, "name" TEXT, "email" TEXT)',
    []
);

// Insert data with parameterized queries
await conn.execute(
    "INSERT INTO users(id, name, email) VALUES(?, ?, ?)",
    [1, "Tom", "tom@example.com"]
);

await conn.execute(
    "INSERT INTO users(id, name, email) VALUES(?, ?, ?)",
    [2, "Alice", "alice@example.com"]
);

// Query data
const rows = await conn.query("SELECT * FROM users WHERE name LIKE 'T%'");
console.log("Query results:", rows);

// Update data
await conn.execute(
    "UPDATE users SET email = ? WHERE id = ?",
    ["newemail@example.com", 1]
);

// Delete data
await conn.execute("DELETE FROM users WHERE id = ?", [2]);
```

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

### Basic Select Component Usage in React

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/select.md

Demonstrates the basic usage of the Deft UI Select component in a React application. It shows how to import the component and provide an array of options for selection. This requires the 'deft-react' library.

```javascript
import {Select} from 'deft-react';

function App() {
    const options = [
        {label: "Rust", value: "rust"},
        {label: "JavaScript", value: "javascript"},
    ]
    return <Select options={options} />
}
```

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

### Configure Deft Features (TOML)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Shows how to configure Deft features in a TOML file. This includes disabling default features and enabling specific ones like http, websocket, and clipboard. It also demonstrates enabling all available features and a minimal configuration for mobile with gl and http.

```toml
deft = {
    version = "0.7.1",
    default-features = false,
    features = ["http", "websocket", "clipboard", "sqlite"]
}

# Available features:
# - gl: GPU rendering (required for mobile)
# - http: HTTP network requests
# - websocket: WebSocket support
# - tray: System tray icons
# - audio: Audio playback
# - clipboard: Clipboard operations
# - dialog: File dialogs (PC only)
# - sqlite: SQLite database

# Enable all features
deft = { version = "0.7.1", features = ["audio", "clipboard", "dialog", "sqlite"] }

# Minimal configuration for mobile
deft = {
    version = "0.7.1",
    default-features = false,
    features = ["gl", "http"]
}
```

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

### JavaScript: Control Audio Playback with Deft UI Audio API

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This snippet demonstrates how to use the Deft UI Audio API to create an audio player, monitor playback progress, and control playback (play, pause, stop). It requires the Audio constructor and event binding methods.

```javascript
const audio = new Audio({
    sources: ["https://example.com/music.mp3", "local/path/bgm.mp3"],
    autoLoop: true
});

audio.bindTimeUpdate((e) => {
    const { currentTime, duration } = e.detail;
    console.log(`Progress: ${currentTime}/${duration} seconds`);
    console.log(`Percentage: ${(currentTime / duration * 100).toFixed(2)}%`);
});

audio.play();
audio.pause();
audio.stop();
```

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

### Rust: Register Custom Component

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Shows how to register a custom component with a specific tag (e.g., "hello") during the JavaScript engine's initialization. This makes the component available for use in the application.

```rust
impl IApp for AppImpl {
    
    fn init_js_engine(&mut self, _js_engine: &mut JsEngine) {
        // Register our custom component with the tag "hello"
        register_component::<HelloBackend>("hello");
    }
    ...
}
```

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

### Rust: Implement Custom Component Backend

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Defines a custom component structure and implements the mandatory 'create' method from the ElementBackend trait. This is the foundational step for creating any custom Deft UI component.

```rust
pub struct HelloBackend {
    element_weak: ElementWeak,
}

impl ElementBackend for HelloBackend {
    fn create(element: &mut Element) -> Self where Self: Sized {
        Self {
            // Save a weak reference to the element, which will be used later
            element_weak: element.as_weak(),
        }
    }
}
```

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

### Import CSS Stylesheet Natively (JavaScript)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/overview.md

Demonstrates importing CSS styles directly into the application using a JavaScript string and the `navigator.stylesheet.append()` method. This approach is suitable for simple CSS injection without build tools.

```javascript
const css = `
.btn {
    color: #F00;   
}
`
avigator.stylesheet.append(css);
```

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

### JavaScript: Instantiate and Add Custom Component

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Demonstrates how to instantiate a custom component (HelloElement) using its JavaScript binding and add it to the document's flow. This makes the component visible in the UI.

```javascript
const helloElement = new HelloElement();
window.body.addChild(helloElement);
```

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

### Create and Apply CSS Animations in JavaScript

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Defines and applies CSS-like animations to HTML elements using JavaScript. It leverages `animation_create` to define animation keyframes and applies them to components via style properties like `animationName` and `animationDuration`. Supports infinite loops and single-run animations.

```javascript
import { Button } from 'deft-react';

// Define rotation animation
animation_create("rotate-360", {
    "0": { transform: 'rotate(0deg)' },
    "1": { transform: 'rotate(360deg)' }
});

// Define scale pulse animation
animation_create("pulse-scale", {
    "0": { transform: 'scale(1, 1)' },
    "0.5": { transform: 'scale(1.2, 1.2)' },
    "1": { transform: 'scale(1, 1)' }
});

// Define slide animation
animation_create("slide-right", {
    "0": { transform: 'translate(0, 0)' },
    "1": { transform: 'translate(100, 0)' }
});

function AnimatedApp() {
    return (
        <Container style={{
            flexDirection: 'column',
            gap: 20,
            padding: 20
        }}>
            <Button style={{
                animationName: 'rotate-360',
                animationDuration: 2000,
                animationIterationCount: -1  // Infinite loop
            }}>
                Rotating Button
            </Button>

            <Button style={{
                animationName: 'pulse-scale',
                animationDuration: 1000,
                animationIterationCount: -1
            }}>
                Pulsing Button
            </Button>

            <Button style={{
                animationName: 'slide-right',
                animationDuration: 1500,
                animationIterationCount: 1
            }}>
                Sliding Button
            </Button>
        </Container>
    );
}
```

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

### JavaScript Calling Rust FFI with Sync/Async

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates how to call Rust functions from JavaScript, supporting both synchronous and asynchronous operations. Rust functions are exposed to the JavaScript environment using `#[deft_macros::js_func]` and registered with the `JsEngine`. JavaScript can then invoke these functions directly.

```rust
// Rust side: Define synchronous function
#[deft_macros::js_func]
pub fn calculate_sum(a: i32, b: i32) -> i32 {
    a + b
}

// Define asynchronous function
#[deft_macros::js_func]
pub async fn fetch_user_data(user_id: String) -> String {
    // Simulate async operation
    format!("User data for: {}", user_id)
}

// Register functions with JavaScript engine
impl IApp for MyApp {
    fn init_js_engine(&mut self, js_engine: &mut JsEngine) {
        js_engine.add_global_func(calculate_sum::new());
        js_engine.add_global_func(fetch_user_data::new());
    }
}
```

```javascript
// JavaScript side: Call Rust functions
// Synchronous call
const result = calculate_sum(10, 20);
console.log("Sum:", result);  // Output: Sum: 30

// Asynchronous call
const userData = await fetch_user_data("user123");
console.log("Data:", userData);  // Output: Data: User data for: user123

// Error handling
try {
    const value = await fetch_user_data("invalid");
    console.log(value);
} catch (error) {
    console.error("Rust function error:", error);
}
```

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

### Configure Optional Features in Cargo.toml

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Configures optional features for Rust projects in the `Cargo.toml` file. This allows developers to control which features are compiled into the final binary, helping to reduce the overall size of the application binary by excluding unused functionality.

```toml
[dependencies]

```

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

### TextInput Component: Create Text and Password Inputs (JavaScript)

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Demonstrates the usage of the TextInput component from 'deft-react' for creating both standard text input fields and password fields. It shows how to manage state for user input and apply basic styling.

```javascript
import { TextInput, Container, Label } from 'deft-react';

function LoginForm() {
    const [username, setUsername] = React.useState("");
    const [password, setPassword] = React.useState("");

    return (
        <Container style={{
            flexDirection: 'column',
            padding: 20,
            gap: 10
        }}>
            <Label text="Username:" />
            <TextInput
                text={username}
                placeholder="Enter your username"
                onTextChange={(e) => setUsername(e.detail)}
                style={{
                    width: 300,
                    padding: 8,
                    borderRadius: 4,
                    border: '1px #ccc'
                }}
            />

            <Label text="Password:" />
            <TextInput
                type="password"
                text={password}
                placeholder="Enter your password"
                onTextChange={(e) => setPassword(e.detail)}
                style={{
                    width: 300,
                    padding: 8,
                    borderRadius: 4,
                    border: '1px #ccc'
                }}
            />

            <Button onClick={() => console.log("Login:", username, password)}>
                Login
            </Button>
        </Container>
    );
}
```

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

### JavaScript: Persistent Data Storage with LocalStorage API

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This code demonstrates the use of the Deft UI LocalStorage API for persistent key-value data storage. It shows how to store, retrieve, remove, and clear data. Note that LocalStorage must be manually enabled during JS engine initialization and stores data as strings.

```javascript
localStorage.setItem("username", "john_doe");
localStorage.setItem("theme", "dark");
localStorage.setItem("settings", JSON.stringify({
    notifications: true,
    autoSave: false
}));

const username = localStorage.getItem("username");
const theme = localStorage.getItem("theme");
const settings = JSON.parse(localStorage.getItem("settings"));

console.log("Username:", username);
console.log("Theme:", theme);
console.log("Settings:", settings);

localStorage.removeItem("username");

localStorage.clear();
```

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

### Deft UI Pseudo-class Selectors

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/selector.md

Illustrates the application of pseudo-class selectors in Deft UI, such as ':hover', to style elements based on their state. These selectors are dynamic.

```css
button:hover {
    color: #F00;
}
```

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

### Deft UI Class Selectors

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/selector.md

Demonstrates the use of class selectors in Deft UI to style elements with a specific class. This is a fundamental CSS concept for applying styles.

```css
.title {
    color: #FFF;
}
```

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

### Deft UI Attribute Selectors

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/selector.md

Shows how to use attribute selectors in Deft UI to target elements based on their attributes and values. Useful for specific element targeting.

```css
[name="my-name"] {
    color: #FFF;
}
```

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

### Rust Calling JavaScript FFI

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Enables Rust code to execute JavaScript code and invoke JavaScript functions. This is achieved through a `JsEngine` instance, which can evaluate JavaScript modules and provide callbacks to JavaScript functions. Rust functions can be exposed to JavaScript to receive results.

```rust
// Execute JavaScript code globally
let mut js_engine = JsEngine::get();
js_engine.eval_module("console.log('Hello from Rust!')", "rust-caller.js");

// Call JavaScript function via callback
#[deft_macros::js_func]
pub fn process_data(data: Vec<i32>, callback: JsValue) {
    // Perform Rust processing
    let sum: i32 = data.iter().sum();
    let avg = sum as f64 / data.len() as f64;

    // Call JavaScript callback with results
    callback.call_as_function(vec![
        JsValue::Int(sum),
        JsValue::Float(avg)
    ]);
}

// Register function
impl IApp for MyApp {
    fn init_js_engine(&mut self, js_engine: &mut JsEngine) {
        js_engine.add_global_func(process_data::new());
    }
}
```

```javascript
// JavaScript side: Pass callback to Rust
process_data([10, 20, 30, 40, 50], (sum, avg) => {
    console.log("Sum:", sum);      // Output: Sum: 150
    console.log("Average:", avg);  // Output: Average: 30
});
```

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

### Dynamically Add Stylesheets in JavaScript

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

Allows for dynamic creation and application of CSS stylesheets globally using JavaScript. A CSS string is defined and then appended to the document's stylesheets using `navigator.stylesheet.append()`. This enables applying styles to components via class names.

```javascript
// Define global styles
const css = `
.primary-button {
    width: 120px;
    height: 40px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-size: 14px;
}

.danger-button {
    width: 120px;
    height: 40px;
    background-color: #dc3545;
    color: white;
    border-radius: 5px;
    font-size: 14px;
}

.input-field {
    width: 300px;
    height: 35px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
`;

// Apply stylesheet
navigator.stylesheet.append(css);

// Use classes in components
function App() {
    return (
        <Container>
            <Button className="primary-button">Save</Button>
            <Button className="danger-button">Delete</Button>
            <TextInput className="input-field" placeholder="Enter text" />
        </Container>
    );
}
```

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

### Display Image using Deft UI React Component

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/image.md

This snippet demonstrates how to import and use the Image component from the 'deft-react' library to display an image. The 'src' property specifies the path to the image file.

```javascript
import {Image} from 'deft-react';
function App() {
    return <Image src="path/to/image.png" />
}
```

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

### Deft UI Pseudo-element Selectors

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/styles/selector.md

Explains how to utilize pseudo-element selectors in Deft UI, like '::scrollbar' and '::scrollbar-thumb', for styling specific parts of elements. These allow deeper customization.

```css
/* Set scroll bar style */
scroll::scrollbar {
    background: #E1E1E1;
}

scroll::scrollbar-thumb {
    background: #C1C1C1;
}
```

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

### React: Create Clickable Buttons with Deft UI Button Component

Source: https://context7.com/deft-ui/deft-ui.github.io/llms.txt

This snippet shows how to use the Deft UI Button component within a React application. It demonstrates basic button usage with an onClick handler and how to implement a disabled state. It requires `deft-react` and `React` to be imported.

```javascript
import { Button, Container } from 'deft-react';

function App() {
    const [disabled, setDisabled] = React.useState(false);

    return (
        <Container style={{
            flexDirection: 'column',
            padding: 20,
            gap: 10
        }}>
            <Button
                onClick={() => console.log("Button clicked!")}
                style={{
                    backgroundColor: '#007bff',
                    color: 'white',
                    padding: 10,
                    borderRadius: 5
                }}
            >
                Click Me
            </Button>

            <Button
                disabled={disabled}
                onClick={() => setDisabled(true)}
            >
                {disabled ? "Disabled" : "Click to Disable"}
            </Button>
        </Container>
    );
}
```

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

### Rust: Implement Custom Component Rendering

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Implements the 'render' method for a custom component's backend. This method defines the drawing logic, returning a RenderFn that draws a circle within the component's bounds.

```rust
impl ElementBackend for HelloBackend {
    ...
    fn render(&mut self) -> RenderFn {
        // Upgrade the weak reference to the element to a strong reference
        let element = self.element_weak.upgrade_mut().unwrap();
        // Get the element's size information
        let bounds = element.get_bounds();
        // Get the center coordinates of the element
        let center = (bounds.width / 2.0, bounds.height / 2.0);
        // Calculate the radius
        let radius = f32::min(center.0, center.1);
        RenderFn::new(move |painter| {
            let mut paint = Paint::default();
            // Use fill style
            paint.set_style(PaintStyle::Fill);
            paint.set_color(Color::from_rgb(0, 80, 0));
            // Draw a circle
            painter.canvas.draw_circle(center, radius, &paint);
        })
    }
}
```

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

### JavaScript Calling Rust Functions

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/ffi.md

This snippet demonstrates how to expose Rust functions (both synchronous and asynchronous) to be called from JavaScript. It involves defining Rust functions with the `#[deft_macros::js_func]` attribute and registering them with the `JsEngine`. JavaScript can then invoke these functions directly.

```rust
#[deft_macros::js_func]
pub fn hello(message: String) -> String {
    println("value from js: ", message);
    "Hi, I am Rust".to_string()
}

#[deft_macros::js_func]
pub async fn hello_async(message: String) -> String {
    println("value from js: ", message);
    "Hi, I am Rust".to_string()
}

impl IApp for YourApp {
   fn init_js_engine(&mut self, js_engine: &mut JsEngine) {
      js_engine.add_global_func(hello::new());
      js_engine.add_global_func(hello_async::new());
   }
   ...
}
```

```javascript
// Call sync function
const value = hello("Hello, I am JavaScript");
console.log('value from rust', value);

// Call async function
const value = await hello_async("Hello, I am JavaScript");
console.log('value from rust', value);
```

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

### Rust Executing JavaScript Code

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/ffi.md

This snippet shows how Rust can directly execute JavaScript code using the `JsEngine`. The `eval_module` function allows for the execution of JavaScript code strings or modules within the Rust environment, useful for scripting or dynamic behavior.

```rust
let mut js_engine = JsEngine::get();
js_engine.eval_module("console.log(111)", "test.js");
```

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

### Enable LocalStorage in Rust

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/api/localstorage.md

Manually enables LocalStorage for the JavaScript engine. It specifies a directory for storing data, defaulting to a 'localstorage' subdirectory in the current executable's path. This is crucial for persistence.

```rust
impl IApp for AppImpl {
    ...
    fn init_js_engine(&mut self, _js_engine: &mut JsEngine) {
        // Enable localstorage, the data will be saved in the specified dir directory.
        let dir = env::current_exe().unwrap().parent().unwrap().join("localstorage");
        js_engine.enable_localstorage(dir);
    }
}
```

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

### Radio Component Usage with RadioGroup (React)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/radio.md

Demonstrates how to import and use the Radio and RadioGroup components from 'deft-react' to create a selectable list. The RadioGroup manages the selection state for its child Radio components. Requires the 'deft-react' library.

```javascript
import {Radio, RadioGroup} from 'deft-react';

function App() {
    return <RadioGroup>
        <Radio label="JavaScript" />
        <Radio label="Rust" />
    </RadioGroup>
}
```

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

### Displaying Formatted Text with RichText Component (JavaScript)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/rich-text.md

Demonstrates how to use the RichText component from 'deft-react' to display text with custom formatting. It initializes the component and dynamically adds a line with various text segments, each having specific color, weight, and style attributes. This snippet requires 'react' and 'deft-react' as dependencies.

```javascript
import {RichText} from 'deft-react';
import { useRef, useEffect } from 'react';

function App() {
    const richTextRef = useRef();
    useEffect(() => {
        richTextRef.current.addLine([
            {
                type: "text",
                text: "R",
                color: "#F00",
                weight: 'bold',
            },
            {
                type: "text",
                text: "ich",
                weight: 'bold',
            },
            {
                type: "text",
                text: "T",
                color: "#F00",
                style: 'italic',
            },
            {
                type: "text",
                text: "ext",
                style: 'italic',
            }
        ]);
    }, []);
    
    return <RichText ref={richTextRef} />
}
```

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

### Configure Deft Dependency with Specific Features (TOML)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/guides/features.md

This configuration snippet demonstrates how to modify the Deft dependency in Cargo.toml to disable default features and explicitly enable only the 'http' and 'websocket' features. This is useful for reducing binary size by including only necessary functionalities.

```toml
[dependencies]
deft = { version = "0.7.1", default-features = false, features = ["http", "websocket"] }
```

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

### Define Animation with animation_create (JavaScript)

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/animation.md

Defines a new animation by specifying keyframes for the 'transform' property. The animation is given a unique name. Currently, only 'transform' is supported.

```javascript
animation_create("my-rotate", {
    "0": {
        transform: 'rotate(0deg)'
    },
    "1": {
        transform: 'rotate(360deg)'
    }
});
```

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

### 使用 deft-react 滚动容器组件

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/components/scroll.md

展示如何导入并使用 deft-react 的 Scroll 组件来包裹内容，实现可滚动区域。该组件主要用于展示超出视口的大尺寸内容。

```javascript
import {Scroll} from 'deft-react';
function App() {
    return <Scroll>
        Some contents
    </Scroll>
}
```

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

### Set Preferred Renderers in JavaScript

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/renderers.md

This snippet demonstrates how to specify a preferred order of renderers when creating a Deft UI window in JavaScript. It allows developers to prioritize specific rendering backends like 'GL' or 'SoftBuffer'.

```javascript
const window = new Window({
    // prioritize use GL renderers
    preferredRenderers: ["GL", "SoftBuffer"]
});
```

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

### JavaScript: Create Custom Component Binding

Source: https://github.com/deft-ui/deft-ui.github.io/blob/main/src/content/docs/en/advanced/custom-component.mdx

Creates a JavaScript binding for a custom Deft UI component. This class inherits from the base Element class and must specify the tag name that matches the one used during registration.

```javascript
class HelloElement extends Element {
    constructor() {
        // "hello" is the element's tag, which must match the tag declared during registration
        super("hello");
    }
}
```