@gustavolmo/react-window-manager 0.4.1 → 0.4.2

package/README.md

@@ -1,198 +1,144 @@
-# React Window Manager
+# React Window Manager (RWM)
+
+A flexible window management system for React applications.
 
 ---
 
-## Installation
+## INSTALL RWM
+
+### 1. Install Dependencies
 
-### Install the package
+Install React Window Manager along with React and React DOM.
+
+React and React DOM (v19+) are peer dependencies.
 
 ```bash
 pnpm add @gustavolmo/react-window-manager
-# or
-npm install @gustavolmo/react-window-manager
-# or
-yarn add @gustavolmo/react-window-manager
+pnpm add react react-dom
 ```
 
-## Requirements
-
-### You must have:
-
-- **React 18+ (or 19)**
-- **React DOM**
-- **Zustand**
-
-Install it with
-
 ```bash
-pnpm add react react-dom zustand
+npm install @gustavolmo/react-window-manager
+npm install react react-dom
 ```
 
-### Styling
-
-This library ships with its own compiled CSS.
-
-Import the stylesheet once at your application root:
-
 ```bash
-import "@gustavolmo/react-window-manager/index.css"
+yarn add @gustavolmo/react-window-manager
+yarn add react react-dom
 ```
 
-The styling properties of compoents accept tailwind or regular css classes
-
 ---
 
-## Overview
-
-A lightweight desktop-style window manager built with:
+### 2. Import Default Styles
 
-- **React**
-- **Zustand** (isolated state per window)
-- A shared **WorkspaceLayout**
-- Independent **WindowLayout** instances
-- External **WindowButton** controllers
+The library includes its own compiled CSS. Import it once at your application root:
 
-Each window instance is fully isolated, draggable, dockable, and externally controllable via its own store.
+```ts
+import "@gustavolmo/react-window-manager/index.css"
+```
 
 ---
 
-## 1. Create a Window Store
+## QUICK START
 
-Initialize a window instance early (module scope recommended):
+### 1. Create a Window
+
+Call `createWindowStore()` to create a new window instance.
 
 ```ts
-const myWindow = createWindowStore('window-my-id')
+const myWindow1 = createWindowStore()
+const myWindow2 = createWindowStore()
 ```
 
-- The ID must be unique.
-- The return value is a standard Zustand hook.
-- Each window is automatically registered internally.
+Each instance contains everything needed to render and control a window.
 
-You can create multiple windows:
+---
 
-```ts
-const firstWindow = createWindowStore('window-first')
-const secondWindow = createWindowStore('window-second')
-```
+### 2. Render the Window
 
----
+All windows must be rendered inside `WorkspaceLayout`.
 
-## 2. Wrap Everything in `WorkspaceLayout`
+This component acts as:
 
-All windows must be rendered inside a shared workspace:
+* The rendering surface
+* The coordinate system
+* The stacking context for all windows
 
 ```tsx
-<WorkspaceLayout>
-  {/* WindowLayout components */}
-</WorkspaceLayout>
-```
+import { WorkspaceLayout } from "@gustavolmo/react-window-manager"
 
-The workspace acts as:
+// ...
 
-- The rendering surface  
-- The stacking context  
-- The coordinate system for all windows  
+<WorkspaceLayout>
+  {/* any valid code */}
 
----
+  <myWindow1.Window>
+    {/* any valid code */}
+  </myWindow1.Window>
 
-## 3. Render a Window
+  <myWindow2.Window>
+    {/* any valid code */}
+  </myWindow2.Window>
+</WorkspaceLayout>
+```
 
-Use `WindowLayout` and pass:
+---
 
-- `useWindowStore` → the store instance  
-- `windowName` → title (string or ReactNode)  
-- `defaultDock` → initial docking behavior (optional) 
+### 3. Adjusting the Workspace Layout
 
-```tsx
-<WindowLayout
-  useWindowStore={myWindow}
-  windowName="My Window"
-  defaultDock="right"
->
-  <div>Any React content</div>
-</WindowLayout>
-```
+By default, the workspace layout is fixed with full width and height. You can override this using `className`.
 
-Supported docking modes:
+All windows will adjust their coordinates accordingly.
 
-- `"left"`
-- `"right"`
-- `"full"`
+To prevent visual overflow outside the workspace layout, elements placed outside must have a higher `z-index` than the total number of windows.
 
-Responsive docking can be computed:
+Example:
 
 ```tsx
-defaultDock={window.innerWidth < 800 ? 'full' : 'left'}
-```
-
----
-
-## 4. Control a Window with `WindowButton`
+// Example with Tailwind (regular CSS also works)
 
-Place a control button anywhere in your UI:
+<section className="fixed w-full h-full flex flex-col">
+  <WorkspaceLayout className="h-full w-full grow">
+    {/* any valid code */}
+  </WorkspaceLayout>
 
-```tsx
-<WindowButton useWindowStore={myWindow}>
-  <p>Open Window</p>
-</WindowButton>
+  <nav className="w-full h-12 bg-neutral-900 flex gap-2 px-4 z-50">
+    {/* any valid code */}
+  </nav>
+</section>
 ```
 
-- Multiple buttons can control the same window.
-- Buttons are fully decoupled from layout.
-- No prop drilling is required.
-
 ---
 
-## 5. Access Window State
-
-Since the store is a standard Zustand hook, you can read window state directly:
+### 4. Control the Window
 
-```ts
-const { isDragging, isResizing } = myWindow()
-```
+Use the `.Button` property from the window store to control visibility.
 
-Example use case:
+Buttons can be placed anywhere and can control the same window from multiple locations.
 
 ```tsx
-className={
-  isDragging || isResizing
-    ? 'pointer-events-none'
-    : 'pointer-events-auto'
-}
+<myWindow1.Button>
+  {/* any valid code */}
+</myWindow1.Button>
 ```
 
-This is useful when embedding iframes or other complex interactive content.
-
 ---
 
-## 6. Access via Registry (Optional)
+### 5. Defaults
 
-Windows are also registered globally by ID:
-
-```ts
-const { isOpen } = windowRegistry['window-my-id']()
-```
-
-This is useful when you do not have direct access to the original store reference.
-
----
+The default setup includes:
 
-## Architecture Summary
+* Built-in styling
+* Docking panel
+* Resize edge detection
 
-- `createWindowStore(id)` → creates isolated window state  
-- `WorkspaceLayout` → shared window surface  
-- `WindowLayout` → draggable and dockable container  
-- `WindowButton` → external controller  
-- Zustand → reactive state management  
+No additional configuration is required for basic usage.
 
 ---
 
-## Design Principles
+## FURTHER READING
 
-- Fully decoupled window instances  
-- No global prop chains  
-- Arbitrary React content support (apps, iframes, components)  
-- Independent lifecycle per window  
-- Scalable to many concurrent windows  
+For advanced usage patterns and API details:
 
-This enables building browser-based desktop-style interfaces with minimal setup and clean separation of concerns.
+Full documentation:
+https://gustavolmo.github.io/react-window-manager/