@moraby/app-launcher 2.0.12 → 2.0.14

package/README.md

@@ -166,11 +166,11 @@ function AdminLauncher() {
         isOpen={showSettings}
         onClose={() => setShowSettings(false)}
         apps={apps}
-        onAdd={(app) => setApps([...apps, { ...app, id: Date.now().toString() }])}
-        onUpdate={(id, updates) =>
+        onAdd={(app: Omit<AppItem, 'id'>) => setApps([...apps, { ...app, id: Date.now().toString() }])}
+        onUpdate={(id: string, updates: Partial<Omit<AppItem, 'id'>>) =>
           setApps(apps.map((a) => (a.id === id ? { ...a, ...updates } : a)))
         }
-        onDelete={(id) => setApps(apps.filter((a) => a.id !== id))}
+        onDelete={(id: string) => setApps(apps.filter((a) => a.id !== id))}
       />
     </>
   );
@@ -179,6 +179,14 @@ function AdminLauncher() {
 
 **Note:** If you forget `renderFooter`, there will be no button to open the settings!
 
+### Modal Rendering & CSS Isolation
+
+The `AppSettings` modal renders using a **React Portal** directly attached to `document.body`. 
+
+- **Placement & Clipping:** This prevents the modal from being clipped by host application styles such as `overflow: hidden` or complex `z-index` stacking contexts.
+- **Client-Side Only:** In Next.js App Router, ensure the component (or its parent wrapper) is a Client Component (`'use client'`) since `document.body` is required.
+- **CSS Isolation:** The launcher utilizes targeted CSS resets (`all: revert`, explicit `box-sizing`) to protect its buttons and SVG icons from host application global styles (e.g., global `button {}` or `svg {}` styles bleeding into the component).
+
 ## Configuration JSON Format
 
 Export your configuration from the admin app and host it as a JSON file: