npm - @walkeros/explorer - Versions diffs - 0.0.7 → 0.3.0 - Mend

@walkeros/explorer 0.0.7 → 0.3.0

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 (23) hide show

package/LICENSE +42 -0
package/README.md +646 -374
package/dist/chunk-P5UDSGZL.mjs +18485 -0
package/dist/chunk-P5UDSGZL.mjs.map +1 -0
package/dist/index.d.cts +1248 -0
package/dist/index.d.ts +1185 -180
package/dist/index.js +31721 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +12983 -2300
package/dist/index.mjs.map +1 -1
package/dist/monaco-types-T3WXA7KH.mjs +34 -0
package/dist/monaco-types-T3WXA7KH.mjs.map +1 -0
package/dist/styles.css +4923 -0
package/package.json +96 -55
package/dist/examples/destination.html +0 -143
package/dist/examples/index.html +0 -110
package/dist/examples/livecode-js.html +0 -396
package/dist/explorer.js +0 -2996
package/dist/explorer.js.map +0 -1
package/dist/index.cjs +0 -2528
package/dist/index.cjs.map +0 -1
package/dist/index.d.mts +0 -243
package/serve.js +0 -52

package/dist/examples/livecode-js.html DELETED Viewed

@@ -1,396 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LiveCodeJS Example</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background: #f5f5f5;
-        }
-        .container {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        h1 {
-            color: #333;
-            margin-bottom: 20px;
-        }
-        .controls {
-            margin: 20px 0;
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-        button {
-            padding: 8px 16px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background: white;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #f0f0f0;
-        }
-        .btn-primary {
-            background: #007bff;
-            color: white;
-            border-color: #007bff;
-        }
-        .btn-primary:hover {
-            background: #0056b3;
-        }
-        .theme-toggle {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            background: none;
-            border: 2px solid #ddd;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            cursor: pointer;
-            font-size: 18px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-        }
-        .theme-toggle:hover {
-            border-color: #007bff;
-            background: rgba(0, 123, 255, 0.1);
-        }
-        /* Dark theme styles */
-        html[data-theme='dark'] {
-            color-scheme: dark;
-        }
-        html[data-theme='dark'] body {
-            background: #1a1a1a;
-            color: #ffffff;
-        }
-        html[data-theme='dark'] .container {
-            background: #2d2d2d;
-            border: 1px solid #444;
-        }
-        html[data-theme='dark'] h1 {
-            color: #ffffff;
-        }
-        html[data-theme='dark'] button {
-            background: #444;
-            color: #ffffff;
-            border-color: #666;
-        }
-        html[data-theme='dark'] button:hover {
-            background: #555;
-        }
-        html[data-theme='dark'] .btn-primary {
-            background: #007bff;
-            border-color: #007bff;
-        }
-        html[data-theme='dark'] .btn-primary:hover {
-            background: #0056b3;
-        }
-        html[data-theme='dark'] .theme-toggle {
-            border-color: #666;
-            color: #ffffff;
-        }
-        @media (max-width: 768px) {
-            .controls {
-                flex-direction: column;
-            }
-            .theme-toggle {
-                top: 10px;
-                right: 10px;
-                width: 35px;
-                height: 35px;
-                font-size: 16px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
-        <span id="theme-icon">🌙</span>
-    </button>
-    <div class="container">
-        <h1>⚡ LiveCodeJS Example</h1>
-        <p>JavaScript evaluation with context injection - perfect for testing walkerOS functions and data processing.</p>
-        <div id="livecode-js-container" style="height: 500px; border: 1px solid #ddd; border-radius: 8px; margin: 20px 0;"></div>
-        <div class="controls">
-            <button onclick="loadWalkerExample()">WalkerOS Example</button>
-            <button onclick="loadMappingExample()">Data Mapping</button>
-            <button onclick="loadAsyncExample()">Async Operations</button>
-            <button onclick="loadArrayExample()">Array Processing</button>
-            <button onclick="clearAll()">Clear All</button>
-        </div>
-    </div>
-    <script src="../explorer.js"></script>
-    <script>
-        let liveCodeJS = null;
-        // Mock getMappingValue for demo purposes
-        function getMappingValue(data, path) {
-            const keys = path.split('.');
-            let result = data;
-            for (const key of keys) {
-                if (result === null || result === undefined) {
-                    return undefined;
-                }
-                // Handle array indices
-                if (Array.isArray(result) && !isNaN(parseInt(key))) {
-                    result = result[parseInt(key)];
-                } else {
-                    result = result[key];
-                }
-            }
-            return result;
-        }
-        // Mock walker object for demo
-        const walker = {
-            push: (event) => {
-                console.log('Walker event pushed:', event);
-                return event;
-            },
-            entity: (type, data) => ({
-                type,
-                data,
-                action: (name, actionData = {}) => ({
-                    entity: type,
-                    action: name,
-                    data: { ...data, ...actionData },
-                    timestamp: Date.now()
-                })
-            })
-        };
-        document.addEventListener('DOMContentLoaded', () => {
-            // Initialize LiveCodeJS
-            liveCodeJS = WalkerExplorer.createLiveCodeJS('#livecode-js-container', {
-                initCode: `// Welcome to LiveCodeJS!
-// JavaScript evaluation with walkerOS context
-return await getMappingValue(
-  { arr: ['foo', 'bar', 'baz'] },
-  'arr.1'
-);`,
-                context: {
-                    getMappingValue,
-                    walker,
-                    // Add more helper functions
-                    deepClone: (obj) => JSON.parse(JSON.stringify(obj)),
-                    flatten: (arr) => arr.flat(Infinity),
-                    groupBy: (arr, key) => arr.reduce((groups, item) => {
-                        const group = item[key];
-                        groups[group] = groups[group] || [];
-                        groups[group].push(item);
-                        return groups;
-                    }, {})
-                },
-                layout: 'horizontal',
-                showHeader: false,
-                autoEvaluate: true,
-                evaluationDelay: 500
-            });
-            window.liveCodeJS = liveCodeJS;
-        });
-        window.loadWalkerExample = () => {
-            liveCodeJS.setCode(`// WalkerOS Entity and Action Example
-const product = walker.entity('product', {
-  id: 'demo-123',
-  name: 'Amazing Product',
-  price: 99.99,
-  category: 'electronics'
-});
-// Create tracking events
-const viewEvent = product.action('view');
-const cartEvent = product.action('cart', { quantity: 2 });
-const purchaseEvent = product.action('purchase', {
-  transaction_id: 'txn_' + Date.now()
-});
-// Push events to walker
-walker.push(viewEvent);
-walker.push(cartEvent);
-walker.push(purchaseEvent);
-// Return summary
-({
-  product: product.data,
-  events: [viewEvent, cartEvent, purchaseEvent]
-});`);
-        };
-        window.loadMappingExample = () => {
-            liveCodeJS.setCode(`// Data Mapping Examples
-const testData = {
-  user: {
-    profile: {
-      name: 'John Doe',
-      email: 'john@example.com',
-      preferences: {
-        theme: 'dark',
-        notifications: true
-      }
-    },
-    orders: [
-      { id: '001', total: 99.99, status: 'completed' },
-      { id: '002', total: 149.50, status: 'pending' },
-      { id: '003', total: 75.25, status: 'completed' }
-    ]
-  }
-};
-// Test different mapping paths
-const results = {
-  userName: await getMappingValue(testData, 'user.profile.name'),
-  userEmail: await getMappingValue(testData, 'user.profile.email'),
-  theme: await getMappingValue(testData, 'user.profile.preferences.theme'),
-  firstOrderId: await getMappingValue(testData, 'user.orders.0.id'),
-  lastOrderTotal: await getMappingValue(testData, 'user.orders.2.total'),
-  nonExistent: await getMappingValue(testData, 'user.invalid.path')
-};
-// Show results
-results;`);
-        };
-        window.loadAsyncExample = () => {
-            liveCodeJS.setCode(`// Async Operations Example
-async function fetchUserData(userId) {
-  // Simulate API call
-  await new Promise(resolve => setTimeout(resolve, 500));
-  return {
-    id: userId,
-    name: 'User ' + userId,
-    lastSeen: new Date().toISOString(),
-    preferences: {
-      language: 'en',
-      timezone: 'UTC'
-    }
-  };
-}
-async function processUsers(userIds) {
-  const users = [];
-  for (const id of userIds) {
-    const user = await fetchUserData(id);
-    users.push(user);
-  }
-  return users;
-}
-// Process multiple users
-const userIds = [123, 456, 789];
-const users = await processUsers(userIds);
-// Extract specific data
-const userNames = users.map(user => user.name);
-const preferences = users.map(user => user.preferences);
-// Return results
-{
-  totalUsers: users.length,
-  userNames,
-  preferences,
-  fullData: users
-};`);
-        };
-        window.loadArrayExample = () => {
-            liveCodeJS.setCode(`// Array Processing Examples
-const events = [
-  { type: 'page_view', page: '/home', timestamp: 1640995200000 },
-  { type: 'click', element: 'button', page: '/home', timestamp: 1640995260000 },
-  { type: 'page_view', page: '/products', timestamp: 1640995320000 },
-  { type: 'click', element: 'link', page: '/products', timestamp: 1640995380000 },
-  { type: 'purchase', product_id: '123', page: '/checkout', timestamp: 1640995440000 }
-];
-// Group events by type
-const eventsByType = groupBy(events, 'type');
-// Get unique pages
-const uniquePages = [...new Set(events.map(e => e.page))];
-// Filter and transform
-const clickEvents = events
-  .filter(e => e.type === 'click')
-  .map(e => ({
-    element: e.element,
-    page: e.page,
-    time: new Date(e.timestamp).toLocaleTimeString()
-  }));
-// Calculate time differences
-const timeSpans = events
-  .slice(1)
-  .map((event, index) => ({
-    from: events[index].type,
-    to: event.type,
-    duration: event.timestamp - events[index].timestamp
-  }));
-// Return analysis
-{
-  totalEvents: events.length,
-  eventsByType,
-  uniquePages,
-  clickEvents,
-  timeSpans,
-  avgDuration: timeSpans.reduce((sum, span) => sum + span.duration, 0) / timeSpans.length
-};`);
-        };
-        window.clearAll = () => {
-            liveCodeJS.clear();
-        };
-        // Theme toggle functionality
-        window.toggleTheme = () => {
-            const html = document.documentElement;
-            const currentTheme = html.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            html.setAttribute('data-theme', newTheme);
-            // Update icon
-            const icon = document.getElementById('theme-icon');
-            icon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
-            // Save preference
-            localStorage.setItem('theme', newTheme);
-        };
-        // Initialize theme from localStorage or default to light
-        document.addEventListener('DOMContentLoaded', () => {
-            const savedTheme = localStorage.getItem('theme') || 'light';
-            document.documentElement.setAttribute('data-theme', savedTheme);
-            const icon = document.getElementById('theme-icon');
-            icon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
-        });
-    </script>
-</body>
-</html>