@modalogue/core 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+# @modalogue/core
+
+Headless state management for multi-step dialogs. Framework-agnostic with zero dependencies.
+
+## Installation
+
+```bash
+npm install @modalogue/core
+# or
+pnpm add @modalogue/core
+# or
+yarn add @modalogue/core
+```
+
+## Usage
+
+```typescript
+import Modalogue from '@modalogue/core';
+
+// Create a new instance
+const modalogue = new Modalogue();
+
+// Subscribe to state changes
+const unsubscribe = modalogue.subscribe((state) => {
+  console.log('Modal state:', state);
+  // state.isOpen - boolean
+  // state.activeView - { id, element }
+  // state.hasHistory - boolean
+});
+
+// Open a modal with content
+modalogue.open(<YourContent />);
+
+// Navigate to a new view (adds to history)
+modalogue.navigate(<NextView />);
+
+// Go back to previous view
+modalogue.back();
+
+// Close modal and clear history
+modalogue.close();
+
+// Hide modal without clearing history
+modalogue.hide();
+
+// Show hidden modal
+modalogue.show();
+
+// Clean up subscription
+unsubscribe();
+```
+
+## API
+
+### `new Modalogue()`
+
+Creates a new Modalogue instance.
+
+### `modalogue.subscribe(callback): () => void`
+
+Subscribe to state changes. Returns an unsubscribe function.
+
+### `modalogue.open(content): void`
+
+Opens the modal with the given content. Clears any existing history.
+
+### `modalogue.navigate(content): void`
+
+Navigates to new content, preserving history for back navigation.
+
+### `modalogue.back(): void`
+
+Goes back to the previous view. If on the first view, closes the modal.
+
+### `modalogue.close(): void`
+
+Closes the modal and clears all history.
+
+### `modalogue.hide(): void`
+
+Hides the modal without clearing history (can be shown again).
+
+### `modalogue.show(): void`
+
+Shows a previously hidden modal.
+
+## Types
+
+```typescript
+import type { ModalState, ModalContent, ActiveView, Subscriber, ModalAPI } from '@modalogue/core';
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+type ModalContent<T = any> = T;
+type ActiveView = {
+    element: ModalContent | null;
+    id: number | null;
+};
+type ModalState = {
+    isOpen: boolean;
+    activeView: ActiveView;
+    hasHistory: boolean;
+};
+type Subscriber = (state: ModalState) => void;
+interface ModalAPI {
+    open: (content: ModalContent) => void;
+    navigate: (content: ModalContent) => void;
+    back: () => void;
+    close: () => void;
+    hide: () => void;
+    show: () => void;
+    subscribe: (callback: Subscriber) => () => void;
+}
+
+declare class Modalogue {
+    private subscribers;
+    private isOpen;
+    private viewHistory;
+    constructor();
+    subscribe: (callback: Subscriber) => (() => void);
+    private notify;
+    private getActiveView;
+    open: (content: ModalContent) => void;
+    navigate: (content: ModalContent) => void;
+    back: () => void;
+    close: () => void;
+    hide: () => void;
+    show: () => void;
+}
+
+export { Modalogue as default };
+export type { ActiveView, ModalAPI, ModalContent, ModalState, Subscriber };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+type ModalContent<T = any> = T;
+type ActiveView = {
+    element: ModalContent | null;
+    id: number | null;
+};
+type ModalState = {
+    isOpen: boolean;
+    activeView: ActiveView;
+    hasHistory: boolean;
+};
+type Subscriber = (state: ModalState) => void;
+interface ModalAPI {
+    open: (content: ModalContent) => void;
+    navigate: (content: ModalContent) => void;
+    back: () => void;
+    close: () => void;
+    hide: () => void;
+    show: () => void;
+    subscribe: (callback: Subscriber) => () => void;
+}
+
+declare class Modalogue {
+    private subscribers;
+    private isOpen;
+    private viewHistory;
+    constructor();
+    subscribe: (callback: Subscriber) => (() => void);
+    private notify;
+    private getActiveView;
+    open: (content: ModalContent) => void;
+    navigate: (content: ModalContent) => void;
+    back: () => void;
+    close: () => void;
+    hide: () => void;
+    show: () => void;
+}
+
+export { Modalogue as default };
+export type { ActiveView, ModalAPI, ModalContent, ModalState, Subscriber };

package/dist/index.js

@@ -0,0 +1,70 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class Modalogue {
+    constructor(){
+        this.subscribers = new Set();
+        this.isOpen = false;
+        this.viewHistory = [];
+        this.subscribe = (callback)=>{
+            this.subscribers.add(callback);
+            return ()=>this.subscribers.delete(callback);
+        };
+        this.notify = ()=>{
+            const state = {
+                isOpen: this.isOpen,
+                activeView: this.getActiveView(),
+                hasHistory: this.viewHistory.length > 1
+            };
+            this.subscribers.forEach((subscriber)=>subscriber(state));
+        };
+        this.getActiveView = ()=>{
+            return this.viewHistory[this.viewHistory.length - 1] || {
+                id: null,
+                element: null
+            };
+        };
+        this.open = (content)=>{
+            this.viewHistory = [
+                {
+                    id: 0,
+                    element: content
+                }
+            ];
+            this.isOpen = true;
+            this.notify();
+        };
+        this.navigate = (content)=>{
+            this.viewHistory.push({
+                id: this.viewHistory.length,
+                element: content
+            });
+            this.notify();
+        };
+        this.back = ()=>{
+            if (this.viewHistory.length > 1) {
+                this.viewHistory.pop();
+                this.notify();
+            } else {
+                this.close();
+            }
+        };
+        this.close = ()=>{
+            this.isOpen = false;
+            this.viewHistory = [];
+            this.notify();
+        };
+        this.hide = ()=>{
+            this.isOpen = false;
+            this.notify();
+        };
+        this.show = ()=>{
+            this.isOpen = true;
+            this.notify();
+        };
+    // if (!Modalogue.instance) {
+    //   Modalogue.instance = new Modalogue();
+    // }
+    }
+}
+
+exports.default = Modalogue;

package/dist/index.mjs

@@ -0,0 +1,68 @@
+class Modalogue {
+    constructor(){
+        this.subscribers = new Set();
+        this.isOpen = false;
+        this.viewHistory = [];
+        this.subscribe = (callback)=>{
+            this.subscribers.add(callback);
+            return ()=>this.subscribers.delete(callback);
+        };
+        this.notify = ()=>{
+            const state = {
+                isOpen: this.isOpen,
+                activeView: this.getActiveView(),
+                hasHistory: this.viewHistory.length > 1
+            };
+            this.subscribers.forEach((subscriber)=>subscriber(state));
+        };
+        this.getActiveView = ()=>{
+            return this.viewHistory[this.viewHistory.length - 1] || {
+                id: null,
+                element: null
+            };
+        };
+        this.open = (content)=>{
+            this.viewHistory = [
+                {
+                    id: 0,
+                    element: content
+                }
+            ];
+            this.isOpen = true;
+            this.notify();
+        };
+        this.navigate = (content)=>{
+            this.viewHistory.push({
+                id: this.viewHistory.length,
+                element: content
+            });
+            this.notify();
+        };
+        this.back = ()=>{
+            if (this.viewHistory.length > 1) {
+                this.viewHistory.pop();
+                this.notify();
+            } else {
+                this.close();
+            }
+        };
+        this.close = ()=>{
+            this.isOpen = false;
+            this.viewHistory = [];
+            this.notify();
+        };
+        this.hide = ()=>{
+            this.isOpen = false;
+            this.notify();
+        };
+        this.show = ()=>{
+            this.isOpen = true;
+            this.notify();
+        };
+    // if (!Modalogue.instance) {
+    //   Modalogue.instance = new Modalogue();
+    // }
+    }
+}
+
+export { Modalogue as default };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@modalogue/core",
+  "version": "0.1.0",
+  "description": "Headless state management for multi-step dialogs",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bunchee",
+    "dev": "bunchee --watch",
+    "type-check": "tsc --noEmit",
+    "test:unit": "vitest",
+    "test:unit:run": "vitest run",
+    "test:unit:coverage": "vitest run --coverage"
+  },
+  "keywords": [
+    "modal",
+    "dialog",
+    "multi-step",
+    "headless",
+    "state-management"
+  ],
+  "author": "Edoardo Guido <ciao@edoardoguido.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/edoardoguido/modalogue",
+    "directory": "packages/core"
+  },
+  "homepage": "https://modalogue.dev",
+  "peerDependencies": {},
+  "dependencies": {},
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "bunchee": "^6.5.2",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^2.1.8"
+  }
+}