### Complete Tauri Application Setup

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Integrate the Tauri Plugin Decorum into your Tauri v2 application. This example demonstrates initializing the plugin and setting up platform-specific window customizations.

```rust
// src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();

            // Create overlay titlebar for all platforms
            main_window.create_overlay_titlebar().unwrap();

            // macOS-specific customizations
            #[cfg(target_os = "macos")]
            {
                // Position traffic lights to align with custom titlebar
                main_window.set_traffic_lights_inset(12.0, 16.0).unwrap();

                // Enable transparent background for custom styling
                main_window.make_transparent().unwrap();

                // Optional: Set window to float above others
                // main_window.set_window_level(3).unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

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

### Install tauri-plugin-decorum with Cargo

Source: https://github.com/clearlysid/tauri-plugin-decorum/blob/main/README.md

Add the plugin to your project's dependencies using Cargo.

```bash
cargo add tauri-plugin-decorum
```

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

### Initialize and Use Decorum Plugin in Tauri App

Source: https://github.com/clearlysid/tauri-plugin-decorum/blob/main/README.md

Initialize the plugin and create custom titlebars in your Tauri application's setup.

```rust
use tauri::Manager;

use tauri_plugin_decorum::WebviewWindowExt; // adds helper methods to WebviewWindow

fn main() {
	tauri::Builder::default()
		.plugin(tauri_plugin_decorum::init()) // initialize the decorum plugin
		.setup(|app| {
			// Create a custom titlebar for main window
			// On Windows this hides decoration and creates custom window controls
			// On macOS it needs hiddenTitle: true and titleBarStyle: overlay
			let main_window = app.get_webview_window("main").unwrap();
			main_window.create_overlay_titlebar().unwrap();

			// Some macOS-specific helpers
			#[cfg(target_os = "macos")] {
				// Set a custom inset to the traffic lights
				main_window.set_traffic_lights_inset(12.0, 16.0).unwrap();

				// Make window transparent without privateApi
				main_window.make_transparent().unwrap()

				// Set window level
				// NSWindowLevel: https://developer.apple.com/documentation/appkit/nswindowlevel
				main_window.set_window_level(25).unwrap()
			}

			Ok(())
		})
		.run(tauri::generate_context!())
		.expect("error while running tauri application");
}
```

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

### Initialize Plugin in Tauri App

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Initialize the decorum plugin within your Tauri application builder to enable its window decoration features. This setup ensures the overlay titlebar is created for the main window.

```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

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

### Custom Titlebar HTML Structure

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Provides an example of an HTML structure for a custom titlebar. The `data-tauri-decorum-tb` attribute designates the titlebar element, and `data-tauri-drag-region` defines the draggable area.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        [data-tauri-decorum-tb] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
            z-index: 100;
        }

        .titlebar-title {
            padding-left: 80px; /* Space for macOS traffic lights */
            font-size: 13px;
            font-weight: 500;
        }

        /* Draggable area - required for window dragging */
        [data-tauri-drag-region] {
            flex: 1;
            height: 100%;
            -webkit-app-region: drag;
        }
    </style>
</head>
<body>
    <!-- Custom titlebar with your own content -->
    <div data-tauri-decorum-tb>
        <span class="titlebar-title">My Application</span>
        <div data-tauri-drag-region></div>
        <!-- Window controls will be injected here automatically on Windows/Linux -->
    </div>

    <main style="padding-top: 32px;">
        <!-- Your app content -->
    </main>
</body>
</html>
```

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

### Configure Permissions for Window Controls

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Define necessary permissions in `src-tauri/capabilities/default.json` to allow window control operations and snap overlay features.

```json
{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:window:allow-close",
    "core:window:allow-center",
    "core:window:allow-minimize",
    "core:window:allow-maximize",
    "core:window:allow-set-size",
    "core:window:allow-set-focus",
    "core:window:allow-is-maximized",
    "core:window:allow-start-dragging",
    "core:window:allow-toggle-maximize",
    "decorum:allow-show-snap-overlay"
  ]
}
```

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

### Configure Tauri Permissions for Decorum

Source: https://github.com/clearlysid/tauri-plugin-decorum/blob/main/README.md

Ensure necessary window permissions are set in `src-tauri/capabilities/default.json` and `tauri.conf.json`.

```json
"core:window:allow-close",
"core:window:allow-center",
"core:window:allow-minimize",
"core:window:allow-maximize",
"core:window:allow-set-size",
"core:window:allow-set-focus",
"core:window:allow-is-maximized",
"core:window:allow-start-dragging",
"core:window:allow-toggle-maximize",
"decorum:allow-show-snap-overlay"
```

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

### create_overlay_titlebar

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Initializes a custom titlebar overlay for the specified window, handling platform-specific decoration logic.

```APIDOC
## create_overlay_titlebar

### Description
Creates a custom titlebar overlay for the window. On Windows, this hides the default decoration and creates custom window controls. On macOS, it requires `hiddenTitle: true` and `titleBarStyle: overlay` in the window configuration. On Linux, it uses system icon themes for window control buttons.

### Method
Rust Method (WebviewWindowExt)

### Request Example
```rust
let main_window = app.get_webview_window("main").unwrap();
main_window.create_overlay_titlebar().unwrap();
```
```

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

### Make Window Transparent (macOS)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Makes the window and webview backgrounds transparent on macOS without using private APIs. This requires the `tauri-plugin-decorum` to be initialized.

```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();

            #[cfg(target_os = "macos")]
            {
                // Make both window and webview backgrounds transparent
                // Does not use macOS Private APIs
                main_window.make_transparent().unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

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

### show_snap_overlay (Windows only)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Invokes the Windows Snap Layout overlay (Win+Z) from JavaScript. This allows users to access the native snap layout feature from custom window controls. The function is automatically triggered when hovering over the maximize button for 620ms.

```APIDOC
## show_snap_overlay (Windows only)

### Description
Invokes the Windows Snap Layout overlay (Win+Z) from JavaScript. This allows users to access the native snap layout feature from custom window controls. The function is automatically triggered when hovering over the maximize button for 620ms.

### Method
POST

### Endpoint
/plugin:decorum/show_snap_overlay

### Parameters
No parameters are required for this endpoint.

### Request Example
```typescript
import { invoke } from "@tauri-apps/api/core";

// Show Windows Snap Layout overlay programmatically
export async function show_snap_overlay() {
    await invoke("plugin:decorum|show_snap_overlay");
}

// Example usage in a custom maximize button
const maximizeButton = document.getElementById("maximize-btn");
let hoverTimer: number;

maximizeButton.addEventListener("mouseenter", () => {
    hoverTimer = setTimeout(async () => {
        await show_snap_overlay();
    }, 620);
});

maximizeButton.addEventListener("mouseleave", () => {
    clearTimeout(hoverTimer);
});
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### make_transparent (macOS only)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Makes the window background transparent without using macOS Private APIs. This is different from Tauri's built-in transparent flag and provides a cleaner implementation by directly manipulating the NSWindow and WebView background colors.

```APIDOC
## make_transparent (macOS only)

### Description
Makes the window background transparent without using macOS Private APIs. This is different from Tauri's built-in transparent flag and provides a cleaner implementation by directly manipulating the NSWindow and WebView background colors.

### Method
POST

### Endpoint
/plugin:decorum/make_transparent

### Parameters
#### Query Parameters
- **webview_window** (WebviewWindow) - Required - The webview window to make transparent.

### Request Example
```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();

            #[cfg(target_os = "macos")]
            {
                // Make both window and webview backgrounds transparent
                // Does not use macOS Private APIs
                main_window.make_transparent().unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Set Window Level (macOS)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Sets the window level on macOS to control its z-order. Common levels include 0 (normal), 3 (floating), and 25 (status bar). Ensure the plugin is initialized.

```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();

            #[cfg(target_os = "macos")]
            {
                // Set window to float above normal windows (level 3 = floating)
                main_window.set_window_level(3).unwrap();

                // Or set to status bar level (always on top)
                // main_window.set_window_level(25).unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

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

### Style Custom Window Controls with CSS

Source: https://github.com/clearlysid/tauri-plugin-decorum/blob/main/README.md

Use provided CSS class names and IDs to style custom window control buttons.

```css
button.decorum-tb-btn,
button#decorum-tb-minimize,
button#decorum-tb-maximize,
button#decorum-tb-close,
div[data-tauri-decorum-tb] {}
```

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

### Fullscreen Event Handling in Frontend

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Listen for fullscreen state change events emitted by the plugin on macOS. Adapt your frontend UI based on these events by adding or removing CSS classes.

```typescript
import { listen } from "@tauri-apps/api/event";

// Listen for fullscreen events
await listen("will-enter-fullscreen", () => {
    console.log("Window will enter fullscreen");
    document.body.classList.add("fullscreen-entering");
});

await listen("did-enter-fullscreen", () => {
    console.log("Window entered fullscreen");
    document.body.classList.add("fullscreen");
    document.body.classList.remove("fullscreen-entering");
});

await listen("will-exit-fullscreen", () => {
    console.log("Window will exit fullscreen");
});

await listen("did-exit-fullscreen", () => {
    console.log("Window exited fullscreen");
    document.body.classList.remove("fullscreen");
});
```

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

### Show Windows Snap Overlay (JavaScript)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Invokes the Windows Snap Layout overlay (Win+Z) from JavaScript. This function is automatically triggered on hover over the maximize button for 620ms, but can be called programmatically.

```typescript
import { invoke } from "@tauri-apps/api/core";

// Show Windows Snap Layout overlay programmatically
export async function show_snap_overlay() {
    await invoke("plugin:decorum|show_snap_overlay");
}

// Example usage in a custom maximize button
const maximizeButton = document.getElementById("maximize-btn");
let hoverTimer: number;

maximizeButton.addEventListener("mouseenter", () => {
    hoverTimer = setTimeout(async () => {
        await show_snap_overlay();
    }, 620);
});

maximizeButton.addEventListener("mouseleave", () => {
    clearTimeout(hoverTimer);
});
```

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

### Create Custom Titlebar Overlay

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

This function creates a custom titlebar overlay, automatically handling platform-specific behaviors for Windows, macOS, and Linux. Ensure your Tauri window configuration includes `titleBarStyle: "Overlay"` and `decorations: false`.

```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();

            // Create overlay titlebar - handles all platforms automatically
            // Windows: Removes decorations, adds custom minimize/maximize/close buttons
            // macOS: Works with overlay titlebar style
            // Linux: Uses system icon theme for controls
            main_window.create_overlay_titlebar().unwrap();

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

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

### Permission Table

Source: https://github.com/clearlysid/tauri-plugin-decorum/blob/main/permissions/autogenerated/reference.md

This table lists the available permissions for the tauri-plugin-decorum and their descriptions.

```APIDOC
## Permission Table

This table lists the available permissions for the tauri-plugin-decorum and their descriptions.

### `decorum:allow-show-snap-overlay`

**Description:** Enables the `show_snap_overlay` command without any pre-configured scope.

### `decorum:deny-show-snap-overlay`

**Description:** Denies the `show_snap_overlay` command without any pre-configured scope.
```

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

### Tauri Window Configuration for Overlay Titlebar

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Configure your window in `tauri.conf.json` with `titleBarStyle: "Overlay"`, `hiddenTitle: true`, and `decorations: false` to enable the custom titlebar overlay.

```json
{
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "title": "My App",
        "width": 800,
        "height": 600,
        "resizable": true,
        "titleBarStyle": "Overlay",
        "hiddenTitle": true,
        "decorations": false
      }
    ]
  }
}
```

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

### set_window_level (macOS only)

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Sets the window level using NSWindowLevel values. This controls the window's z-order relative to other windows. Common values include: 0 (normal), 3 (floating), 8 (modal panel), 24 (main menu), 25 (status), 101 (popover).

```APIDOC
## set_window_level (macOS only)

### Description
Sets the window level using NSWindowLevel values. This controls the window's z-order relative to other windows. Common values include: 0 (normal), 3 (floating), 8 (modal panel), 24 (main menu), 25 (status), 101 (popover).

### Method
POST

### Endpoint
/plugin:decorum/set_window_level

### Parameters
#### Path Parameters
- **level** (number) - Required - The NSWindowLevel value to set for the window.

#### Query Parameters
- **webview_window** (WebviewWindow) - Required - The webview window to set the level for.

### Request Example
```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();

            #[cfg(target_os = "macos")]
            {
                // Set window to float above normal windows (level 3 = floating)
                main_window.set_window_level(3).unwrap();

                // Or set to status bar level (always on top)
                // main_window.set_window_level(25).unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Custom CSS for Window Controls

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Apply custom CSS to style the automatically generated window control buttons and titlebar container. These selectors are effective on Windows and Linux.

```css
/* Style all titlebar buttons */
button.decorum-tb-btn {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    transition: background 0.15s ease;
}

/* Individual button styling */
button#decorum-tb-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
}

button#decorum-tb-maximize:hover {
    background: rgba(255, 255, 255, 0.1);
}

button#decorum-tb-close:hover {
    background: #e81123;
    color: white;
}

/* Titlebar container */
div[data-tauri-decorum-tb] {
    background: #1a1a1a;
    -webkit-app-region: drag;
}

/* Make buttons clickable (not draggable) */
button.decorum-tb-btn {
    -webkit-app-region: no-drag;
}
```

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

### Custom Titlebar HTML Element

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

The plugin automatically creates a titlebar element if one doesn't exist. You can provide your own element with the `data-tauri-decorum-tb` attribute for custom styling and content placement.

```APIDOC
## Custom Titlebar HTML Element

### Description
The plugin automatically creates a titlebar element if one doesn't exist. You can provide your own element with the `data-tauri-decorum-tb` attribute for custom styling and content placement.

### Usage
Add an element with the `data-tauri-decorum-tb` attribute to your HTML. The plugin will detect this element and use it as the custom titlebar. You can place your own content within this element. For draggable areas, use the `data-tauri-drag-region` attribute.

### Example HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
    <style>
        [data-tauri-decorum-tb] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
            z-index: 100;
        }

        .titlebar-title {
            padding-left: 80px; /* Space for macOS traffic lights */
            font-size: 13px;
            font-weight: 500;
        }

        /* Draggable area - required for window dragging */
        [data-tauri-drag-region] {
            flex: 1;
            height: 100%;
            -webkit-app-region: drag;
        }
    </style>
</head>
<body>
    <!-- Custom titlebar with your own content -->
    <div data-tauri-decorum-tb>
        <span class="titlebar-title">My Application</span>
        <div data-tauri-drag-region></div>
        <!-- Window controls will be injected here automatically on Windows/Linux -->
    </div>

    <main style="padding-top: 32px;">
        <!-- Your app content -->
    </main>
</body>
</html>
```

### Notes
- On Windows and Linux, window controls (minimize, maximize, close) will be automatically injected into the titlebar element if they are not present.
- Ensure that a `div` with `data-tauri-drag-region` is included within your custom titlebar element to allow the window to be dragged.
```

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

### set_traffic_lights_inset

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Configures the positioning of macOS traffic light buttons (close, minimize, zoom) relative to the window frame.

```APIDOC
## set_traffic_lights_inset

### Description
Sets the horizontal (x) and vertical (y) inset for macOS traffic light buttons. This allows precise positioning to align with custom titlebar designs.

### Method
Rust Method (WebviewWindowExt)

### Parameters
- **x** (f64) - Required - Horizontal inset in pixels
- **y** (f64) - Required - Vertical inset in pixels

### Request Example
```rust
#[cfg(target_os = "macos")]
{
    main_window.set_traffic_lights_inset(16.0, 20.0).unwrap();
}
```
```

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

### Set macOS Traffic Lights Inset

Source: https://context7.com/clearlysid/tauri-plugin-decorum/llms.txt

Conditionally sets the horizontal and vertical inset for macOS traffic light buttons. This allows precise positioning to align with custom titlebar designs and maintains position during window resizing.

```rust
use tauri::Manager;
use tauri_plugin_decorum::WebviewWindowExt;

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_decorum::init())
        .setup(|app| {
            let main_window = app.get_webview_window("main").unwrap();
            main_window.create_overlay_titlebar().unwrap();

            #[cfg(target_os = "macos")]
            {
                // Set traffic lights position: x=16px from left, y=20px from top
                main_window.set_traffic_lights_inset(16.0, 20.0).unwrap();
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.