@bobfrankston/msger 0.1.73 → 0.1.75

package/msger-native/src/template.html

@@ -72,6 +72,39 @@
     </div>
     <div id="countdown" style="position: fixed; top: 5px; right: 5px; background: rgba(255, 255, 0, 0.3); padding: 5px 10px; font-size: 14px; font-weight: bold; border-radius: 4px; display: none;"></div>
     <script>
+        // msger JavaScript API with error handling
+        (function() {
+            // Check if IPC is available
+            const hasIPC = typeof window.ipc !== 'undefined' && window.ipc.postMessage;
+
+            // Helper to safely send IPC messages
+            function safePostMessage(data) {
+                try {
+                    if (!hasIPC) {
+                        console.error('msger API: window.ipc not available');
+                        return false;
+                    }
+                    window.ipc.postMessage(JSON.stringify(data));
+                    return true;
+                } catch(e) {
+                    console.error('msger API error:', e);
+                    return false;
+                }
+            }
+
+            window.msger = {
+                // Check if running in msger environment
+                isAvailable: function() {
+                    return true;
+                }
+            };
+
+            // NOTE: Use native browser APIs instead of msger wrappers:
+            // - localStorage (native)
+            // - window.close() (native)
+            // msger API is minimal by design - we're just a CLI window wrapper
+        })();
+
         // Countdown timer overlay
         try {
             const timeoutSeconds = {TIMEOUT_SECONDS};
@@ -104,30 +137,53 @@
         }
 
         function sendResult(button) {
-            const result = { button: button };
+            console.log('Button clicked:', button);
 
-            // Get input field value if present
-            const inputField = document.getElementById('inputField');
-            if (inputField) {
-                result.value = inputField.value;
-            }
+            // Try IPC first - maybe it works in template mode?
+            try {
+                const result = { button: button };
 
-            // Get all form data if forms are present
-            const forms = document.querySelectorAll('form');
-            if (forms.length > 0) {
-                const formData = {};
-                forms.forEach(form => {
-                    const data = new FormData(form);
-                    data.forEach((value, key) => {
-                        formData[key] = value;
-                    });
-                });
-                if (Object.keys(formData).length > 0) {
-                    result.form = formData;
+                // Get input field value if present
+                const inputField = document.getElementById('inputField');
+                if (inputField) {
+                    result.value = inputField.value;
                 }
+
+                if (typeof window.ipc !== 'undefined' && window.ipc.postMessage) {
+                    console.log('Attempting IPC postMessage with:', result);
+                    window.ipc.postMessage(JSON.stringify(result));
+                    console.log('IPC postMessage succeeded!');
+                    return true;
+                } else {
+                    console.error('window.ipc not available');
+                    return false;
+                }
+            } catch(e) {
+                console.error('IPC failed:', e);
+                return false;
             }
 
-            window.ipc.postMessage(JSON.stringify(result));
+            // const result = { button: button };
+            // // Get input field value if present
+            // const inputField = document.getElementById('inputField');
+            // if (inputField) {
+            //     result.value = inputField.value;
+            // }
+            // // Get all form data if forms are present
+            // const forms = document.querySelectorAll('form');
+            // if (forms.length > 0) {
+            //     const formData = {};
+            //     forms.forEach(form => {
+            //         const data = new FormData(form);
+            //         data.forEach((value, key) => {
+            //             formData[key] = value;
+            //         });
+            //     });
+            //     if (Object.keys(formData).length > 0) {
+            //         result.form = formData;
+            //     }
+            // }
+            // window.ipc.postMessage(JSON.stringify(result));
         }
 
         // Auto-size window to content
@@ -168,15 +224,15 @@
             });
         }
 
+        // Zoom support with mouse wheel
+        let zoomLevel = 1.0;
+
         // Set initial zoom level if specified
         const initialZoom = {ZOOM_PERCENT};
         if (initialZoom) {
             zoomLevel = initialZoom / 100.0;
             document.body.style.zoom = zoomLevel;
         }
-
-        // Zoom support with mouse wheel
-        let zoomLevel = 1.0;
         document.addEventListener('wheel', function(e) {
             // Only zoom when Ctrl is held (or Cmd on Mac)
             if (e.ctrlKey || e.metaKey) {
@@ -197,17 +253,30 @@
         window.addEventListener('load', function() {
             document.body.focus();
         });
-        
+
         // Also focus when window gets focus
         window.addEventListener('focus', function() {
             document.body.focus();
         });
-        
+
         // And try again after a short delay
         setTimeout(() => {
             document.body.focus();
         }, 100);
 
+        // Auto-trigger fullscreen if requested
+        const startFullscreen = {FULLSCREEN};
+        if (startFullscreen) {
+            window.addEventListener('load', function() {
+                // Wait a bit for the window to be ready
+                setTimeout(() => {
+                    document.documentElement.requestFullscreen().catch(err => {
+                        console.error('Failed to enter fullscreen:', err);
+                    });
+                }, 100);
+            });
+        }
+
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape') {
                 e.preventDefault();
@@ -215,14 +284,20 @@
                 if (document.fullscreenElement) {
                     document.exitFullscreen();
                 } else {
-                    const result = { button: 'Cancel', dismissed: true };
-                    window.ipc.postMessage(JSON.stringify(result));
+                    // CANNOT use IPC - it crashes!
+                    // The Rust window handler should catch Esc key
+                    console.error('Esc key: Cannot send via IPC (crashes). Close window with X button instead.');
+                    // const result = { button: 'Cancel', dismissed: true };
+                    // window.ipc.postMessage(JSON.stringify(result));
                 }
             } else if (e.key === 'F11') {
-                // Toggle fullscreen
+                // Note: This uses HTML5 fullscreen, not native window fullscreen
+                // The Rust window handler should catch F11 for native fullscreen
                 e.preventDefault();
                 if (!document.fullscreenElement) {
-                    document.documentElement.requestFullscreen();
+                    document.documentElement.requestFullscreen().catch(err => {
+                        console.warn('HTML5 fullscreen failed:', err);
+                    });
                 } else {
                     document.exitFullscreen();
                 }

package/msger-storage-demo.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>msger Storage API Demo</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            padding: 30px;
+            max-width: 800px;
+            margin: 0 auto;
+            background: #f5f5f5;
+        }
+        h1 { color: #333; }
+        .info {
+            background: #e3f2fd;
+            border-left: 4px solid #0066cc;
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 4px;
+        }
+        .warning {
+            background: #fff3cd;
+            border-left: 4px solid #ffc107;
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 4px;
+        }
+        .section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        input, textarea {
+            width: 100%;
+            padding: 10px;
+            margin: 5px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-family: inherit;
+            box-sizing: border-box;
+        }
+        button {
+            padding: 10px 20px;
+            margin: 5px;
+            background: #0066cc;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        button:hover { background: #0052a3; }
+        button.secondary { background: #6c757d; }
+        button.secondary:hover { background: #5a6268; }
+        .output {
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            padding: 15px;
+            margin: 10px 0;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            white-space: pre-wrap;
+            min-height: 60px;
+        }
+        code {
+            background: #f4f4f4;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: 'Courier New', monospace;
+        }
+    </style>
+</head>
+<body>
+    <h1>msger Storage API Demo</h1>
+
+    <div class="info">
+        <strong>✅ What Works:</strong> localStorage-based persistence API<br>
+        <strong>❌ What's Broken:</strong> All window controls, buttons, F11 (IPC crashes)<br>
+        <strong>🔧 How to Close:</strong> Click the X button (top-right corner)
+    </div>
+
+    <div class="warning">
+        <strong>⚠️ Window Controls Disabled</strong><br>
+        Due to a wry library bug, all window operations via JavaScript crash the app.
+        Configure window at startup using CLI flags: <code>-size 800,600 -title "My App"</code>
+    </div>
+
+    <!-- Basic Storage -->
+    <div class="section">
+        <h2>Basic Storage (with Timestamps)</h2>
+        <input type="text" id="key" value="myData" placeholder="Storage key">
+        <textarea id="value" rows="3" placeholder="Enter any text...">Hello from msger!</textarea>
+        <div>
+            <button onclick="saveData()">Save Data</button>
+            <button onclick="loadData()">Load Data</button>
+            <button onclick="removeData()" class="secondary">Remove Data</button>
+        </div>
+        <div id="output1" class="output">Click Save to store data</div>
+    </div>
+
+    <!-- Complex Data -->
+    <div class="section">
+        <h2>Structured Data</h2>
+        <p>Save complex objects, arrays, and nested data</p>
+        <button onclick="saveUserSettings()">Save User Settings</button>
+        <button onclick="loadUserSettings()">Load User Settings</button>
+        <div id="output2" class="output">Click to save/load structured data</div>
+    </div>
+
+    <!-- List All Data -->
+    <div class="section">
+        <h2>Manage Storage</h2>
+        <button onclick="listAll()">List All Saved Data</button>
+        <button onclick="clearAll()" class="secondary">Clear All msger Data</button>
+        <div id="output3" class="output">Click to list or clear data</div>
+    </div>
+
+    <!-- File-Like Storage -->
+    <div class="section">
+        <h2>Virtual File Storage</h2>
+        <p>Store "files" in localStorage and export them</p>
+        <input type="text" id="filename" value="document.txt" placeholder="Filename">
+        <textarea id="filecontent" rows="5" placeholder="File content...">This is a virtual file stored in localStorage.</textarea>
+        <div>
+            <button onclick="saveFile()">Save Virtual File</button>
+            <button onclick="loadFile()">Load Virtual File</button>
+            <button onclick="downloadFile()">Export (Download)</button>
+        </div>
+        <div id="output4" class="output">Click to save/load/export files</div>
+    </div>
+
+    <script>
+        // Check if msger API is available
+        const hasMsger = typeof window.msger !== 'undefined';
+        if (!hasMsger) {
+            alert('WARNING: msger API not found! Are you running in msger?');
+        }
+
+        function log(id, msg, color = '#4ec9b0') {
+            document.getElementById(id).textContent = msg;
+        }
+
+        // Basic Storage
+        function saveData() {
+            const key = document.getElementById('key').value;
+            const value = document.getElementById('value').value;
+            const data = {
+                value: value,
+                savedAt: new Date().toISOString(),
+                savedTimestamp: Date.now()
+            };
+            const result = msger.saveData(key, data);
+            log('output1', `✅ Saved!\nKey: ${key}\nValue: ${value}\nTime: ${data.savedAt}\n\nData persists across restarts!`);
+        }
+
+        function loadData() {
+            const key = document.getElementById('key').value;
+            const data = msger.loadData(key, null);
+            if (data) {
+                const age = Math.floor((Date.now() - data.savedTimestamp) / 1000);
+                log('output1', `✅ Loaded!\nKey: ${key}\nValue: ${data.value}\nSaved: ${data.savedAt}\nAge: ${age} seconds ago\n\nThis proves persistence works!`);
+                document.getElementById('value').value = data.value;
+            } else {
+                log('output1', `❌ Key "${key}" not found`);
+            }
+        }
+
+        function removeData() {
+            const key = document.getElementById('key').value;
+            msger.removeData(key);
+            log('output1', `✅ Removed key: ${key}`);
+        }
+
+        // Structured Data
+        function saveUserSettings() {
+            const settings = {
+                theme: 'dark',
+                fontSize: 14,
+                language: 'en',
+                notifications: {
+                    email: true,
+                    push: false
+                },
+                recentFiles: [
+                    'document1.txt',
+                    'notes.md',
+                    'project.json'
+                ]
+            };
+            msger.saveData('userSettings', settings);
+            log('output2', `✅ Saved complex object:\n${JSON.stringify(settings, null, 2)}`);
+        }
+
+        function loadUserSettings() {
+            const settings = msger.loadData('userSettings', null);
+            if (settings) {
+                log('output2', `✅ Loaded settings:\n${JSON.stringify(settings, null, 2)}`);
+            } else {
+                log('output2', `❌ No settings found. Click "Save User Settings" first.`);
+            }
+        }
+
+        // List All
+        function listAll() {
+            const allKeys = Object.keys(localStorage);
+            const msgerKeys = allKeys.filter(k => k.startsWith('msger_'));
+            if (msgerKeys.length === 0) {
+                log('output3', `No msger data found. Save something first!`);
+                return;
+            }
+            let output = `Found ${msgerKeys.length} items:\n\n`;
+            msgerKeys.forEach(key => {
+                const displayKey = key.replace('msger_', '');
+                const data = msger.loadData(displayKey, null);
+                if (data && data.savedAt) {
+                    const age = Math.floor((Date.now() - data.savedTimestamp) / 1000);
+                    output += `📄 ${displayKey} (${age}s ago)\n`;
+                } else {
+                    output += `📄 ${displayKey}\n`;
+                }
+            });
+            log('output3', output);
+        }
+
+        function clearAll() {
+            if (confirm('Clear all msger data?')) {
+                msger.clearData();
+                log('output3', `✅ All msger data cleared!`);
+            }
+        }
+
+        // Virtual Files
+        function saveFile() {
+            const filename = document.getElementById('filename').value;
+            const content = document.getElementById('filecontent').value;
+            const fileData = {
+                name: filename,
+                content: content,
+                size: content.length,
+                created: new Date().toISOString()
+            };
+            msger.saveData('file_' + filename, fileData);
+            log('output4', `✅ Saved virtual file:\nName: ${filename}\nSize: ${content.length} bytes\nCreated: ${fileData.created}`);
+        }
+
+        function loadFile() {
+            const filename = document.getElementById('filename').value;
+            const fileData = msger.loadData('file_' + filename, null);
+            if (fileData) {
+                document.getElementById('filecontent').value = fileData.content;
+                log('output4', `✅ Loaded file:\nName: ${fileData.name}\nSize: ${fileData.size} bytes\nCreated: ${fileData.created}`);
+            } else {
+                log('output4', `❌ File "${filename}" not found`);
+            }
+        }
+
+        function downloadFile() {
+            const filename = document.getElementById('filename').value;
+            const fileData = msger.loadData('file_' + filename, null);
+            if (fileData) {
+                const blob = new Blob([fileData.content], { type: 'text/plain' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = fileData.name;
+                a.click();
+                URL.revokeObjectURL(url);
+                log('output4', `✅ Downloaded: ${fileData.name}`);
+            } else {
+                log('output4', `❌ File "${filename}" not found. Save it first!`);
+            }
+        }
+
+        // Auto-load on startup
+        window.addEventListener('load', function() {
+            // Check for persisted data
+            const testKey = document.getElementById('key').value;
+            const data = msger.loadData(testKey, null);
+            if (data) {
+                log('output1', `✅ Found persisted data! Click "Load Data" to see it.`);
+                listAll();
+            }
+        });
+    </script>
+</body>
+</html>

package/msger.code-workspace

@@ -2,6 +2,9 @@
 	"folders": [
 		{
 			"path": "."
+		},
+		{
+			"path": "../msgview"
 		}
 	],
 	"settings": {

package/msgerdefs/README.md

@@ -0,0 +1,122 @@
+# @bobfrankston/msgerdefs
+
+TypeScript definitions for the **msger** JavaScript API.
+
+## Installation
+
+```bash
+npm install @bobfrankston/msgerdefs
+```
+
+## Usage
+
+### TypeScript
+
+```typescript
+import type { MsgerAPI } from '@bobfrankston/msgerdefs';
+import { isMsger, getMsgerAPI } from '@bobfrankston/msgerdefs';
+
+// Option 1: Type the global window.msger
+declare global {
+    interface Window {
+        msger?: MsgerAPI;
+    }
+}
+
+// Check if running in msger
+if (isMsger()) {
+    window.msger!.setTitle('My Application');
+    window.msger!.saveData('lastOpened', new Date().toISOString());
+}
+
+// Option 2: Use getMsgerAPI() for cross-platform compatibility
+const msger = getMsgerAPI();
+msger.saveData('userPrefs', { theme: 'dark' });  // Works in both msger and browser!
+msger.setTitle('My App');  // Only works in msger, no-op in browser
+```
+
+### JavaScript
+
+```javascript
+import { isMsger, getMsgerAPI } from '@bobfrankston/msgerdefs';
+
+const msger = getMsgerAPI();
+
+// Data persistence (works in both msger and browser)
+msger.saveData('userSettings', { fontSize: 14, theme: 'dark' });
+const settings = msger.loadData('userSettings', { fontSize: 12 });
+
+// Window control (msger only, gracefully degrades in browser)
+if (isMsger()) {
+    msger.toggleFullscreen();
+    msger.setAlwaysOnTop(true);
+}
+```
+
+## API Reference
+
+### Window Control
+
+- `toggleFullscreen()` - Toggle fullscreen mode
+- `setFullscreen(enabled: boolean)` - Set fullscreen state
+- `minimize()` - Minimize window
+- `maximize()` - Toggle maximize/restore
+- `setSize(width, height)` - Set window size
+- `setPosition(x, y)` - Set window position
+- `setAlwaysOnTop(enabled: boolean)` - Keep window on top
+- `setTitle(title: string)` - Set window title
+- `close(result?)` - Close window with optional result
+
+### Data Persistence
+
+- `saveData(key, value)` - Save data to localStorage
+- `loadData(key, defaultValue?)` - Load data from localStorage
+- `removeData(key)` - Remove data
+- `clearData()` - Clear all msger data
+
+### File System (Coming Soon)
+
+- `fs.selectFile(options?)` - Open file picker
+- `fs.selectFiles(options?)` - Open multi-file picker
+- `fs.saveFileAs(content, filename?, options?)` - Save file dialog
+- `fs.selectFolder(options?)` - Folder picker
+- `fs.read(path)` - Read file (requires allowFs flag)
+- `fs.write(path, content)` - Write file (requires allowFs flag)
+- `fs.list(path)` - List directory (requires allowFs flag)
+- `fs.exists(path)` - Check if file exists (requires allowFs flag)
+- `fs.delete(path)` - Delete file (requires allowFs flag)
+
+## Examples
+
+See [samples.html](samples.html) for interactive examples and demos of all API features!
+
+**Test in msger:**
+```bash
+msger -url "file:///path/to/node_modules/@bobfrankston/msgerdefs/samples.html"
+```
+
+**Test in browser:**
+```bash
+# Open samples.html in your browser to test browser compatibility
+```
+
+The samples demonstrate:
+- Window control (fullscreen, minimize, maximize, resize, position)
+- Data persistence (save/load user preferences, session data, recent files)
+- Presentation mode example
+- Session management
+- And more!
+
+## Browser Compatibility
+
+The `getMsgerAPI()` function returns a browser-compatible implementation:
+
+- **Data persistence**: Uses localStorage in both msger and browser
+- **Window control**: No-op in browser (except `setTitle` updates document.title)
+- **File system**: Not available in browser (`fs` is undefined)
+
+This allows you to write code once that works in both environments!
+
+## License
+
+ISC