# Windows

Windows are the core containers of the NidamJS desktop environment.
They provide draggable, focusable, resizable, tileable, and dynamically loaded UI panels — fully managed by the internal WindowManager.

The system is declarative and attribute-driven, requiring little to no manual JavaScript wiring.

A basic window structure looks like this:

<div nd-window nd-window-endpoint="examples/shared/page-one.html">
  <div nd-window-header>
    <span>Page One</span>
    <button nd-window-button="maximize" title="Maximize">[ ]</button>
    <button nd-window-button="close" title="Close">X</button>
  </div>

  <div nd-window-content>
    <!-- Your window content here -->
  </div>
</div>

To open it from anywhere:

<button data-modal="examples/shared/page-one.html">Open Page One</button>

The WindowManager automatically detects the data-modal attribute and loads the window content.

The window system is powered by declarative nd- attributes.

Applied to the root element of a window.

If no size is specified, the default is 768x480.

Required for dynamic loading & lifecycle management.

• Identifies the window content source.
• Used internally as the unique key in the WindowManager.
• Matches the data-modal trigger.

<div nd-window nd-window-endpoint="settings/profile.html"></div>

Defines the draggable top bar.

• Dragging starts only from this element.
• Automatically handles focus on interaction.
• Buttons must live inside the header.

Control window actions.

Example:

<button nd-window-button="maximize">[ ]</button> <button nd-window-button="close">X</button>

The scrollable inner content container.

<div nd-window-content>
  <!-- your app content -->
</div>

Padding and styling are applied automatically.

• Clicking a window brings it to the front.
• Z-index is managed internally.
• The focused window receives the .focused class.

• Drag starts from nd-window-header
• Automatically restores from maximized when dragging
• Saves position ratios for responsive resizing
• Snap detection is built-in

When dragging near screen edges:

• Left → Tile left
• Right → Tile right
• Top → Maximize
• Corners → Quadrant tiling (if enabled in config)

A .snap-indicator overlay appears to preview placement.

Handled via:

manager.toggleMaximize(winElement);

CSS class applied:

.maximized

This sets:

• top: 0
• left: 0
• width: 100%
• height: 100%

• Escape closes the topmost window.

Two appearance states are supported:

Animations use scale + opacity transitions.

The root container dispatches CustomEvents:

Example:

root.addEventListener('window:opened', (e) => {
  console.log('Opened:', e.detail.endpoint);
});

• Required for dynamic windows.

Like Icons, Windows use Design Tokens (CSS Variables).

All tokens are defined under :root.

<div nd-window nd-variant="glass"></div>

Uses backdrop blur + transparency.

The WindowManager orchestrates:

• Lifecycle (WindowLifecycle)
• Dragging (WindowDrag)
• Tiling (WindowTiling)
• State persistence (WindowState)
• Dynamic loading (WindowLoader)

You typically do not interact with these directly — use the public API:

manager.open(endpoint);
manager.close(win);
manager.toggleMaximize(win);
manager.focus(win);
manager.getWindows();

The NidamJS Window system provides:

✔ Declarative HTML structure ✔ Built-in drag & snap ✔ Focus & stacking management ✔ Dynamic content loading ✔ Persistent responsive positioning ✔ Design token theming

It behaves like a real desktop OS — inside the browser.