@light-web/windowing-ui

Shadow-DOM window chrome over @light-web/windowing-core. Good defaults, customizable, framework-less.

• Slotted content keeps your page styles (Tailwind works inside windows); only the chrome is isolated.
• WindowManager.attachToBody() floats above any page — clicks pass through empty areas.
• Hideable controls per window (minimizable, maximizable, closable).

Install

npm i @light-web/windowing-ui

Use

Floating overlay (script-injection style)

<script type="module">
  import { WindowManager } from "@light-web/windowing-ui";
  const wm = WindowManager.attachToBody();
  wm.create({ title: "Notes", content: "<p class='flex'>Tailwind works here</p>" });
  wm.create({ title: "Close-only", minimizable: false, maximizable: false, content: "…" });
  console.log(wm.list()); // build your own taskbar from this
</script>

Contained desktop

<light-rt-desktop id="desk" style="height: 480px"></light-rt-desktop>
<script type="module">
  import { WindowManager } from "@light-web/windowing-ui";
  const wm = new WindowManager(document.getElementById("desk"));
  wm.create({ title: "Contained", x: 24, y: 24 });
</script>

Theming

Chrome is styled via CSS variables and parts:

light-rt-desktop { --titlebar-bg: #24304d; }

Variables: --win-bg, --win-fg, --win-border, --titlebar-bg, --titlebar-fg, --win-radius, --desktop-bg, --win-active-border. Parts: ::part(window titlebar title content controls resize-handle).

Behavior

• Drag via titlebar, resize via bottom-right corner (pointer + touch).
• Minimize is hidden-only; minimized windows stay in wm.list() for custom taskbars.
• Any pointerdown inside a window focuses it.

License

MIT