npm - papagaio - Versions diffs - 0.7.0 → 0.7.1 - Mend

papagaio 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/examples/simple.html CHANGED Viewed

@@ -7,7 +7,7 @@
 </head>
 <script src="../src/papagaio-bootstrap.mjs" type="module"></script>
 <script type="papagaio">
-    $pattern {abc} {$eval{console.log(papagaio)} aaaaaaaaaaaaaaaaaaaaaaaaaaaa}
+    $pattern {abc} {$eval{console.log(this)} aaaaaaaaaaaaaaaaaaaaaaaaaaaa}
     abc
 </script>
 <body>

package/index.html CHANGED Viewed

@@ -2,435 +2,55 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🦜 papagaio</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #fff;
-            color: #000;
-            overflow-x: hidden;
-        }
-        .app {
-            max-width: 100%;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        .header {
-            background: #fff;
-            padding: 24px 20px;
-            text-align: center;
-            border-bottom: 1px solid #ddd;
-            position: relative;
-            cursor: pointer;
-            user-select: none;
-        }
-        .header:active {
-            background: #fafafa;
-        }
-        .header h1 {
-            font-size: 2rem;
-            color: #000;
-            margin-bottom: 4px;
-        }
-        .header p {
-            font-size: 0.9rem;
-            color: #666;
-        }
-        .tabs {
-            display: flex;
-            background: #fff;
-            border-bottom: 1px solid #ddd;
-        }
-        .tab {
-            flex: 1;
-            padding: 18px;
-            text-align: center;
-            font-size: 1rem;
-            font-weight: 500;
-            background: #f5f5f5;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s;
-            color: #666;
-            border-right: 1px solid #ddd;
-        }
-        .tab:last-child {
-            border-right: none;
-        }
-        .tab.active {
-            background: #fff;
-            color: #000;
-            border-bottom: 2px solid #000;
-        }
-        .content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            padding-bottom: 130px;
-        }
-        .editor-container {
-            display: none;
-            flex-direction: column;
-            flex: 1;
-        }
-        .editor-container.active {
-            display: flex;
-        }
-        textarea {
-            flex: 1;
-            padding: 20px;
-            border: none;
-            font-family:
-                ui-monospace,
-                SFMono-Regular,
-                Menlo,
-                Consolas,
-                "Liberation Mono",
-                monospace;
-            font-size: 15px;      /* melhor que 1rem no mobile */
-            line-height: 1.55;
-            font-weight: 500;    /* 👈 chave pra não ficar fina */
-            letter-spacing: 0.2px;
-            resize: none;
-            background: #fff;
-            color: #000;
-            white-space: pre;
-            overflow-x: auto;
-            overflow-y: auto;
-            word-break: normal;
-        }
-        textarea:focus {
-            outline: none;
-        }
-        #output {
-            background: #fafafa;
-        }
-        .action-bar {
-            position: fixed;
-            left: 0;
-            right: 0;
-            bottom: 48px;
-            background: #fff;
-            padding: 16px 20px;
-            border-top: 1px solid #ddd;
-            transition: bottom 0.15s ease-out;
-            z-index: 100;
-        }
-        .process-btn {
-            width: 100%;
-            padding: 18px;
-            background: #000;
-            color: #fff;
-            border: 1px solid #000;
-            border-radius: 4px;
-            font-size: 1.1rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .process-btn:active {
-            background: #333;
-        }
-        input[type="file"] {
-            display: none;
-        }
-        .status {
-            position: fixed;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            padding: 12px;
-            text-align: center;
-            font-size: 0.85rem;
-            color: #999;
-            background: #fff;
-            border-top: 1px solid #ddd;
-            transition: bottom 0.15s ease-out;
-            z-index: 100;
-        }
-        .drawer-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 199;
-            display: none;
-        }
-        .drawer-overlay.active {
-            display: block;
-        }
-        .drawer {
-            position: fixed;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            width: 85%;
-            max-width: 400px;
-            background: #fff;
-            z-index: 200;
-            transform: translateX(-100%);
-            transition: transform 0.3s;
-            display: flex;
-            flex-direction: column;
-        }
-        .drawer.active {
-            transform: translateX(0);
-        }
-        .drawer-header {
-            padding: 24px 20px;
-            border-bottom: 1px solid #ddd;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .drawer-header h2 {
-            font-size: 1.3rem;
-            font-weight: 600;
-        }
-        .drawer-close {
-            width: 36px;
-            height: 36px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background: #fff;
-            font-size: 1.2rem;
-            cursor: pointer;
-        }
-        .drawer-close:active {
-            background: #f5f5f5;
-        }
-        .drawer-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 16px 20px;
-        }
-        .sketch-item {
-            padding: 16px;
-            margin-bottom: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background: #fff;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .sketch-item:active {
-            background: #f5f5f5;
-        }
-        .sketch-item.active {
-            background: #000;
-            color: #fff;
-            border-color: #000;
-        }
-        .sketch-item-name {
-            font-size: 1rem;
-            font-weight: 500;
-            margin-bottom: 4px;
-        }
-        .sketch-item-date {
-            font-size: 0.8rem;
-            color: #999;
-        }
-        .sketch-item.active .sketch-item-date {
-            color: #ccc;
-        }
-        .sketch-item-actions {
-            display: flex;
-            gap: 8px;
-            margin-top: 12px;
-        }
-        .sketch-item-btn {
-            flex: 1;
-            padding: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background: #fff;
-            font-size: 0.85rem;
-            cursor: pointer;
-        }
-        .sketch-item.active .sketch-item-btn {
-            border-color: #fff;
-            color: #fff;
-            background: transparent;
-        }
-        .sketch-item-btn:active {
-            background: #f5f5f5;
-        }
-        .sketch-item.active .sketch-item-btn:active {
-            background: rgba(255,255,255,0.1);
-        }
-        .drawer-footer {
-            padding: 16px 20px;
-            border-top: 1px solid #ddd;
-        }
-        .drawer-action-btn {
-            width: 100%;
-            padding: 14px;
-            margin-bottom: 8px;
-            background: #fff;
-            color: #000;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 0.95rem;
-            font-weight: 400;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-        .drawer-action-btn:active {
-            background: #f5f5f5;
-        }
-        .drawer-new-btn {
-            width: 100%;
-            padding: 16px;
-            background: #000;
-            color: #fff;
-            border: none;
-            border-radius: 4px;
-            font-size: 1rem;
-            font-weight: 500;
-            cursor: pointer;
-            margin-top: 8px;
-        }
-        .drawer-new-btn:active {
-            background: #333;
-        }
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: #999;
-        }
-        @media (min-width: 768px) {
-            .app {
-                max-width: 600px;
-                margin: 0 auto;
-                border-left: 1px solid #ddd;
-                border-right: 1px solid #ddd;
-            }
-            .action-bar,
-            .status {
-                max-width: 600px;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="app">
-        <div class="header" onclick="toggleDrawer()">
-            <h1>🦜 papagaio</h1>
-            <p>easy yet powerful text preprocessor</p>
-        </div>
-        <div class="tabs">
-            <button class="tab active" onclick="switchTab('input')">INPUT</button>
-            <button class="tab" onclick="switchTab('output')">OUTPUT</button>
-        </div>
-        <div class="content">
-            <div class="editor-container active" id="inputContainer">
-                <textarea id="input"></textarea>
-            </div>
-            <div class="editor-container" id="outputContainer">
-                <textarea id="output" readonly></textarea>
-            </div>
-        </div>
-        <div class="action-bar" id="actionBar">
-            <button class="process-btn" onclick="processCode()">Process</button>
-        </div>
-        <div class="status" id="statusBar">
-            Last saved: <span id="lastSaved">never</span>
-        </div>
-        <div class="drawer-overlay" id="drawerOverlay" onclick="toggleDrawer()"></div>
-        <div class="drawer" id="drawer">
-            <div class="drawer-header">
-                <h2 id="drawerTitle">Sketches</h2>
-                <button class="drawer-close" onclick="toggleDrawer()">×</button>
-            </div>
-            <div class="drawer-content" id="drawerContent"></div>
-            <div class="drawer-footer">
-                <button class="drawer-action-btn" onclick="exportSketches()">
-                    ↓ Export Sketches
-                </button>
-                <label for="importFileInput" class="drawer-action-btn">
-                    ↑ Import Sketches
-                </label>
-                <input type="file" id="importFileInput" onchange="importSketches(this.files[0])" accept=".json">
-                <button class="drawer-new-btn" onclick="createNewSketchFromDrawer()">+ New Sketch</button>
-            </div>
-        </div>
+    <h1>🦜 papagaio </h1>
+    <p>
+        easy yet powerful text preprocessor.
+    </p>
+    <hr>
+    <div>
+        <strong>
+            <label for="sketchSelect">Current Sketch:</label>
+        </strong>
+        <select id="sketchSelect" onchange="switchSketch()">
+            <option value="">-- Select Sketch --</option>
+        </select>
+        |
+        <button onclick="createNewSketch()">New Sketch</button>
+        <button onclick="renameCurrentSketch()">Rename</button>
+        <button onclick="deleteCurrentSketch()">Delete</button>
+    </div>
+    <hr>
+    <div>
+        <strong>
+        <label for="sketchSelect">Sketches:</label>
+        </strong>
+        <button onclick="exportSketches()">Export</button>
+        <input type="file" id="importFileInput" onchange="importSketches(this.files[0])" accept=".json">
     </div>
+    <hr>
+    <h3>INPUT</h3>
+    <textarea id="input" rows="15" cols="80" style="width: 70%; font-family: monospace;"></textarea>
+    <br><br>
+    <button onclick="processCode()">Process</button>
+    <br><br>
+    <h3>OUTPUT</h3>
+    <textarea id="output" rows="15" cols="80" style="width: 70%; font-family: monospace;" readonly></textarea>
     <script type="module">
         import { Papagaio } from './src/papagaio.js';
         class SketchesManager {
             constructor() {
                 this.sketches = this.loadSketches();
@@ -519,86 +139,13 @@
         let processor = new Papagaio();
         let sketchesManager;
-        let currentTab = 'input';
-        function setupKeyboardAdjustment() {
-            if (window.visualViewport) {
-                const actionBar = document.getElementById('actionBar');
-                const statusBar = document.getElementById('statusBar');
-                const statusHeight = 48;
-                window.visualViewport.addEventListener('resize', () => {
-                    const viewportHeight = window.visualViewport.height;
-                    const windowHeight = window.innerHeight;
-                    const keyboardHeight = windowHeight - viewportHeight;
-                    if (keyboardHeight > 100) {
-                        actionBar.style.bottom = `${keyboardHeight + statusHeight}px`;
-                        statusBar.style.bottom = `${keyboardHeight}px`;
-                    } else {
-                        actionBar.style.bottom = `${statusHeight}px`;
-                        statusBar.style.bottom = '0px';
-                    }
-                });
-                window.visualViewport.addEventListener('scroll', () => {
-                    const viewportHeight = window.visualViewport.height;
-                    const windowHeight = window.innerHeight;
-                    const keyboardHeight = windowHeight - viewportHeight;
-                    if (keyboardHeight > 100) {
-                        actionBar.style.bottom = `${keyboardHeight + statusHeight}px`;
-                        statusBar.style.bottom = `${keyboardHeight}px`;
-                    }
-                });
-            }
-        }
         window.addEventListener('load', () => {
             sketchesManager = new SketchesManager();
             loadOrCreateDefaultSketch();
-            renderDrawerSketches();
-            setupSwipeGestures();
-            setupKeyboardAdjustment();
+            populateSketchSelect();
         });
-        function setupSwipeGestures() {
-            let touchStartX = 0;
-            let touchStartY = 0;
-            let touchEndX = 0;
-            let touchEndY = 0;
-            document.addEventListener('touchstart', (e) => {
-                touchStartX = e.changedTouches[0].screenX;
-                touchStartY = e.changedTouches[0].screenY;
-            });
-            document.addEventListener('touchend', (e) => {
-                touchEndX = e.changedTouches[0].screenX;
-                touchEndY = e.changedTouches[0].screenY;
-                handleSwipe();
-            });
-            function handleSwipe() {
-                const diffX = touchEndX - touchStartX;
-                const diffY = touchEndY - touchStartY;
-                if (touchStartX < 50 && diffX > 100 && Math.abs(diffY) < 100) {
-                    const drawer = document.getElementById('drawer');
-                    if (!drawer.classList.contains('active')) {
-                        toggleDrawer();
-                    }
-                }
-                if (diffX < -100 && Math.abs(diffY) < 100) {
-                    const drawer = document.getElementById('drawer');
-                    if (drawer.classList.contains('active')) {
-                        toggleDrawer();
-                    }
-                }
-            }
-        }
         function loadOrCreateDefaultSketch() {
             let sketch = null;
             if (sketchesManager.currentSketchId) {
@@ -619,45 +166,39 @@
             if (sketch) {
                 document.getElementById('input').value = sketch.input;
                 document.getElementById('output').value = '';
-                updateDrawerTitle(sketch.name);
             }
         }
-        function updateDrawerTitle(name) {
-            document.getElementById('drawerTitle').textContent = `${name}`;
-        }
         function saveCurrentSketch() {
             if (sketchesManager.currentSketchId) {
                 sketchesManager.updateSketch(sketchesManager.currentSketchId, {
                     input: document.getElementById('input').value
                 });
-                updateLastSaved();
             }
         }
-        function updateLastSaved() {
-            const now = new Date();
-            const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-            document.getElementById('lastSaved').textContent = timeStr;
+        function populateSketchSelect() {
+            const select = document.getElementById('sketchSelect');
+            select.innerHTML = '<option value="">-- Select Sketch --</option>';
+            const sketches = sketchesManager.getAllSketches();
+            sketches.forEach(sketch => {
+                const option = document.createElement('option');
+                option.value = sketch.id;
+                option.textContent = sketch.name;
+                if (sketch.id === sketchesManager.currentSketchId) {
+                    option.selected = true;
+                }
+                select.appendChild(option);
+            });
         }
-        function switchTab(tab) {
-            currentTab = tab;
+        function switchSketch() {
+            const select = document.getElementById('sketchSelect');
+            const id = select.value;
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.editor-container').forEach(c => c.classList.remove('active'));
+            if (!id) return;
-            if (tab === 'input') {
-                document.querySelectorAll('.tab')[0].classList.add('active');
-                document.getElementById('inputContainer').classList.add('active');
-            } else {
-                document.querySelectorAll('.tab')[1].classList.add('active');
-                document.getElementById('outputContainer').classList.add('active');
-            }
-        }
-        function selectSketch(id) {
             saveCurrentSketch();
             sketchesManager.setCurrentSketchId(id);
             const sketch = sketchesManager.getSketch(id);
@@ -665,83 +206,59 @@
             if (sketch) {
                 document.getElementById('input').value = sketch.input;
                 document.getElementById('output').value = '';
-                updateDrawerTitle(sketch.name);
-                renderDrawerSketches();
             }
         }
-        function createNewSketchFromDrawer() {
+        function createNewSketch() {
             const name = prompt('Enter sketch name:');
             if (!name || !name.trim()) {
+                alert('Please enter a valid sketch name');
                 return;
             }
             const id = sketchesManager.createSketch(name.trim());
+            populateSketchSelect();
             const sketch = sketchesManager.getSketch(id);
             if (sketch) {
                 document.getElementById('input').value = sketch.input;
                 document.getElementById('output').value = '';
-                updateDrawerTitle(sketch.name);
-                renderDrawerSketches();
             }
         }
-        function renameSketchFromDrawer(id, event) {
-            event.stopPropagation();
-            const sketch = sketchesManager.getSketch(id);
-            const newName = prompt('Enter new name:', sketch.name);
-            if (!newName || !newName.trim()) {
+        function renameCurrentSketch() {
+            if (!sketchesManager.currentSketchId) {
+                alert('No sketch selected');
                 return;
             }
-            sketchesManager.renameSketch(id, newName.trim());
+            const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
+            const newName = prompt('Enter new name:', sketch.name);
-            if (id === sketchesManager.currentSketchId) {
-                updateDrawerTitle(newName.trim());
+            if (!newName || !newName.trim()) {
+                alert('Please enter a valid name');
+                return;
             }
-            renderDrawerSketches();
+            sketchesManager.renameSketch(sketchesManager.currentSketchId, newName.trim());
+            populateSketchSelect();
         }
-        function deleteSketchFromDrawer(id, event) {
-            event.stopPropagation();
-            const sketch = sketchesManager.getSketch(id);
-            if (!confirm(`Delete "${sketch.name}"?`)) {
+        function deleteCurrentSketch() {
+            if (!sketchesManager.currentSketchId) {
+                alert('No sketch selected');
                 return;
             }
-            sketchesManager.deleteSketch(id);
-            loadOrCreateDefaultSketch();
-            renderDrawerSketches();
-            const currentSketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
-            if (currentSketch) {
-                updateDrawerTitle(currentSketch.name);
-            }
-        }
-        function renderDrawerSketches() {
-            const content = document.getElementById('drawerContent');
-            const sketches = sketchesManager.getAllSketches();
+            const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
-            if (sketches.length === 0) {
-                content.innerHTML = '<div class="empty-state">No sketches yet<br>Create one to get started</div>';
+            if (!confirm(`Are you sure you want to delete "${sketch.name}"? This action cannot be undone.`)) {
                 return;
             }
-            content.innerHTML = sketches.map(sketch => `
-                <div class="sketch-item ${sketch.id === sketchesManager.currentSketchId ? 'active' : ''}"
-                     onclick="selectSketch('${sketch.id}')">
-                    <div class="sketch-item-name">${sketch.name}</div>
-                    <div class="sketch-item-date">${sketch.createdAt}</div>
-                    <div class="sketch-item-actions">
-                        <button class="sketch-item-btn" onclick="renameSketchFromDrawer('${sketch.id}', event)">Rename</button>
-                        <button class="sketch-item-btn" onclick="deleteSketchFromDrawer('${sketch.id}', event)">Delete</button>
-                    </div>
-                </div>
-            `).join('');
+            sketchesManager.deleteSketch(sketchesManager.currentSketchId);
+            loadOrCreateDefaultSketch();
+            populateSketchSelect();
         }
         function processCode() {
@@ -750,25 +267,11 @@
                 const output = processor.process(input);
                 document.getElementById('output').value = output;
                 saveCurrentSketch();
-                switchTab('output');
             } catch (err) {
                 document.getElementById('output').value = `Error: ${err.message}`;
             }
         }
-        function toggleDrawer() {
-            const drawer = document.getElementById('drawer');
-            const overlay = document.getElementById('drawerOverlay');
-            // Fecha o teclado ao abrir o drawer
-            if (!drawer.classList.contains('active')) {
-                document.activeElement?.blur();
-            }
-            drawer.classList.toggle('active');
-            overlay.classList.toggle('active');
-        }
         function exportSketches() {
             const data = {
                 papagaio_sketches: localStorage.getItem('papagaio_sketches'),
@@ -805,7 +308,7 @@
                     }
                     location.reload();
                 } catch (err) {
-                    alert('Error importing: ' + err.message);
+                    alert('Error importing file: ' + err.message);
                 }
             };
@@ -814,17 +317,15 @@
         setInterval(() => {
             saveCurrentSketch();
-        }, 2000);
+        }, 1000);
         window.processCode = processCode;
-        window.selectSketch = selectSketch;
-        window.createNewSketchFromDrawer = createNewSketchFromDrawer;
-        window.renameSketchFromDrawer = renameSketchFromDrawer;
-        window.deleteSketchFromDrawer = deleteSketchFromDrawer;
+        window.switchSketch = switchSketch;
+        window.createNewSketch = createNewSketch;
+        window.renameCurrentSketch = renameCurrentSketch;
+        window.deleteCurrentSketch = deleteCurrentSketch;
         window.exportSketches = exportSketches;
         window.importSketches = importSketches;
-        window.switchTab = switchTab;
-        window.toggleDrawer = toggleDrawer;
     </script>
 </body>
 </html>

package/mobile.html ADDED Viewed

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>🦜 papagaio</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #fff;
+            color: #000;
+            overflow: hidden;
+        }
+        .app {
+            max-width: 100%;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .header {
+            background: #fff;
+            padding: 24px 20px;
+            text-align: center;
+            border-bottom: 1px solid #ddd;
+        }
+        .header h1 {
+            font-size: 2rem;
+            color: #000;
+            margin-bottom: 4px;
+        }
+        .header p {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .tabs {
+            display: flex;
+            background: #fff;
+            border-bottom: 1px solid #ddd;
+        }
+        .tab {
+            flex: 1;
+            padding: 18px;
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 500;
+            background: #f5f5f5;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: #666;
+            border-right: 1px solid #ddd;
+        }
+        .tab:last-child {
+            border-right: none;
+        }
+        .tab.active {
+            background: #fff;
+            color: #000;
+            border-bottom: 2px solid #000;
+        }
+        .content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .editor-container {
+            display: none;
+            flex-direction: column;
+            flex: 1;
+        }
+        .editor-container.active {
+            display: flex;
+        }
+        textarea {
+            flex: 1;
+            padding: 20px;
+            border: none;
+            font-family:
+                ui-monospace,
+                SFMono-Regular,
+                Menlo,
+                Consolas,
+                "Liberation Mono",
+                monospace;
+            font-size: 15px;
+            line-height: 1.55;
+            font-weight: 500;
+            letter-spacing: 0.2px;
+            resize: none;
+            background: #fff;
+            color: #000;
+            white-space: pre;
+            overflow-x: auto;
+            overflow-y: auto;
+            word-break: normal;
+        }
+        textarea:focus {
+            outline: none;
+        }
+        #output {
+            background: #fafafa;
+        }
+        @media (min-width: 768px) {
+            .app {
+                max-width: 600px;
+                margin: 0 auto;
+                border-left: 1px solid #ddd;
+                border-right: 1px solid #ddd;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app">
+        <div class="header">
+            <h1>🦜 papagaio</h1>
+            <p>easy yet powerful text preprocessor</p>
+        </div>
+        <div class="tabs">
+            <button class="tab active" onclick="switchTab('input')">INPUT</button>
+            <button class="tab" onclick="switchTab('output')">OUTPUT</button>
+        </div>
+        <div class="content">
+            <div class="editor-container active" id="inputContainer">
+                <textarea id="input"></textarea>
+            </div>
+            <div class="editor-container" id="outputContainer">
+                <textarea id="output" readonly></textarea>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import { Papagaio } from './src/papagaio.js';
+        const processor = new Papagaio();
+        function loadSaved() {
+            try {
+                const saved = localStorage.getItem('papagaio_input');
+                if (saved) {
+                    document.getElementById('input').value = saved;
+                }
+            } catch {}
+        }
+        function saveInput() {
+            try {
+                const input = document.getElementById('input').value;
+                localStorage.setItem('papagaio_input', input);
+            } catch {}
+        }
+        function switchTab(tab) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.editor-container').forEach(c => c.classList.remove('active'));
+            if (tab === 'input') {
+                document.querySelectorAll('.tab')[0].classList.add('active');
+                document.getElementById('inputContainer').classList.add('active');
+            } else {
+                document.querySelectorAll('.tab')[1].classList.add('active');
+                document.getElementById('outputContainer').classList.add('active');
+                processCode();
+            }
+        }
+        function processCode() {
+            try {
+                const input = document.getElementById('input').value;
+                const output = processor.process(input);
+                document.getElementById('output').value = output;
+                saveInput();
+            } catch (err) {
+                document.getElementById('output').value = `Error: ${err.message}`;
+            }
+        }
+        window.addEventListener('load', loadSaved);
+        setInterval(saveInput, 2000);
+        window.switchTab = switchTab;
+    </script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "papagaio",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "easy yet powerful preprocessor",
   "main": "src/papagaio.js",
   "type": "module",

package/src/papagaio.js CHANGED Viewed

@@ -175,7 +175,11 @@ function applyEvals(p, txt, ev) {
     let r = txt;
     for (let i = ev.length - 1; i >= 0; i--) {
         const ph = `__E${i}__`;
-        try { r = r.replace(ph, String(Function("papagaio", "ctx", `"use strict";return(function(){${ev[i].code}})();`)(p, {}))); }
+        try {
+            r = r.replace(ph, String(
+                Function("ctx", `"use strict";${ev[i].code}`).call(p, {})
+            ));
+        }
         catch (e) { r = r.replace(ph, "error: " + e.message); }
     }
     return r;