painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/js/widget-system/device-manager.js

@@ -0,0 +1,178 @@
+/**
+ * DeviceManager - Device detection and responsive utilities
+ *
+ * Device types:
+ * - phone: < 768px
+ * - tablet: 768-1024px (or touch device < 1100px)
+ * - desktop: >= 1024px (non-touch) or >= 1100px (any)
+ */
+
+class DeviceManagerClass {
+    constructor() {
+        this.callbacks = new Set();
+        this.currentDevice = this.detectDevice();
+
+        // Stability-based device change: viewport must remain at a new device type
+        // for 1.5s before we apply the change. This prevents transient viewport
+        // shrinkage during iOS app switch from triggering widget transformations
+        // (floating → bottom-sheet), while still allowing sustained changes like
+        // Split View or rotation to apply after a short delay.
+        this._confirmTimeout = null;
+
+        window.addEventListener('resize', () => this._scheduleDeviceCheck());
+        window.addEventListener('orientationchange', () => this._scheduleDeviceCheck());
+
+        document.addEventListener('visibilitychange', () => {
+            if (document.visibilityState === 'hidden') {
+                // Going to background — cancel any pending device change
+                clearTimeout(this._confirmTimeout);
+            } else {
+                // Returning — schedule check after viewport stabilizes
+                this._scheduleDeviceCheck();
+            }
+        });
+    }
+
+    /**
+     * Schedule a device-type check after a stability delay.
+     * Every call resets the timer, so transient viewport changes
+     * (iOS app switch) never reach the threshold.
+     */
+    _scheduleDeviceCheck() {
+        clearTimeout(this._confirmTimeout);
+        this._confirmTimeout = setTimeout(() => {
+            if (document.visibilityState === 'hidden') return;
+            const newDevice = this.detectDevice();
+            if (newDevice !== this.currentDevice) {
+                const oldDevice = this.currentDevice;
+                this.currentDevice = newDevice;
+                this.notifyChange(newDevice, oldDevice);
+            }
+        }, 1500);
+    }
+
+    /**
+     * Detect current device type
+     * @returns {'phone' | 'tablet' | 'desktop'}
+     */
+    detectDevice() {
+        const width = window.innerWidth;
+        const isTouch = this.isTouchDevice();
+
+        if (width < 768) {
+            return 'phone';
+        }
+
+        if (width < 1024 || (width < 1100 && isTouch)) {
+            return 'tablet';
+        }
+
+        return 'desktop';
+    }
+
+    /**
+     * Check if device supports touch
+     * @returns {boolean}
+     */
+    isTouchDevice() {
+        return 'ontouchstart' in window ||
+               navigator.maxTouchPoints > 0 ||
+               // @ts-ignore
+               navigator.msMaxTouchPoints > 0;
+    }
+
+    /**
+     * Get current device type
+     * @returns {'phone' | 'tablet' | 'desktop'}
+     */
+    getDevice() {
+        return this.currentDevice;
+    }
+
+    /**
+     * Check if current device matches
+     * @param {'phone' | 'tablet' | 'desktop'} device
+     * @returns {boolean}
+     */
+    is(device) {
+        return this.currentDevice === device;
+    }
+
+    /**
+     * Check if device is mobile (phone or tablet)
+     * @returns {boolean}
+     */
+    isMobile() {
+        return this.currentDevice === 'phone' || this.currentDevice === 'tablet';
+    }
+
+    /**
+     * Subscribe to device changes
+     * @param {Function} callback - (newDevice, oldDevice) => void
+     * @returns {Function} Unsubscribe function
+     */
+    onChange(callback) {
+        this.callbacks.add(callback);
+        return () => this.callbacks.delete(callback);
+    }
+
+    /**
+     * Notify subscribers of device change
+     */
+    notifyChange(newDevice, oldDevice) {
+        this.callbacks.forEach(cb => {
+            try {
+                cb(newDevice, oldDevice);
+            } catch (e) {
+                console.error('[DeviceManager] Error in change callback:', e);
+            }
+        });
+    }
+
+    /**
+     * Get viewport dimensions
+     * @returns {{ width: number, height: number }}
+     */
+    getViewport() {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+
+    /**
+     * Check if in portrait orientation
+     * @returns {boolean}
+     */
+    isPortrait() {
+        return window.innerHeight > window.innerWidth;
+    }
+
+    /**
+     * Check if in landscape orientation
+     * @returns {boolean}
+     */
+    isLandscape() {
+        return window.innerWidth > window.innerHeight;
+    }
+
+    /**
+     * Get safe area insets (for notched devices)
+     * @returns {{ top: number, right: number, bottom: number, left: number }}
+     */
+    getSafeAreaInsets() {
+        const computedStyle = getComputedStyle(document.documentElement);
+        return {
+            top: parseInt(computedStyle.getPropertyValue('--sat') || '0', 10),
+            right: parseInt(computedStyle.getPropertyValue('--sar') || '0', 10),
+            bottom: parseInt(computedStyle.getPropertyValue('--sab') || '0', 10),
+            left: parseInt(computedStyle.getPropertyValue('--sal') || '0', 10)
+        };
+    }
+}
+
+// Global singleton
+export const DeviceManager = new DeviceManagerClass();
+
+// Also export class for testing
+export { DeviceManagerClass };

painapple_code/static/js/widget-system/event-bus.js

@@ -0,0 +1,152 @@
+/**
+ * WidgetEventBus - Decoupled communication between widgets
+ *
+ * Standard events:
+ * - file:open, file:preview, file:created, file:modified, file:deleted
+ * - navigate:directory, navigate:file
+ * - session:changed, session:message
+ * - widget:opened, widget:closed, widget:transformed
+ * - layout:changed, layout:saved
+ */
+
+import { debug } from '../config.js';
+
+class WidgetEventBus {
+    constructor() {
+        this.listeners = new Map();
+        this.onceListeners = new Map();
+
+        // Debug mode - log all events
+        this.debug = false;
+    }
+
+    /**
+     * Subscribe to an event
+     * @param {string} event - Event name
+     * @param {Function} callback - Handler function
+     * @returns {Function} Unsubscribe function
+     */
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+
+        // Return unsubscribe function
+        return () => this.off(event, callback);
+    }
+
+    /**
+     * Subscribe to an event once
+     * @param {string} event - Event name
+     * @param {Function} callback - Handler function
+     */
+    once(event, callback) {
+        if (!this.onceListeners.has(event)) {
+            this.onceListeners.set(event, new Set());
+        }
+        this.onceListeners.get(event).add(callback);
+    }
+
+    /**
+     * Unsubscribe from an event
+     * @param {string} event - Event name
+     * @param {Function} callback - Handler to remove
+     */
+    off(event, callback) {
+        this.listeners.get(event)?.delete(callback);
+        this.onceListeners.get(event)?.delete(callback);
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event - Event name
+     * @param {*} data - Event data
+     */
+    emit(event, data) {
+        if (this.debug) {
+            debug.log(`[WidgetBus] ${event}`, data);
+        }
+
+        // Regular listeners
+        this.listeners.get(event)?.forEach(cb => {
+            try {
+                cb(data);
+            } catch (e) {
+                console.error(`[WidgetBus] Error in handler for "${event}":`, e);
+            }
+        });
+
+        // Once listeners
+        const onceHandlers = this.onceListeners.get(event);
+        if (onceHandlers) {
+            onceHandlers.forEach(cb => {
+                try {
+                    cb(data);
+                } catch (e) {
+                    console.error(`[WidgetBus] Error in once handler for "${event}":`, e);
+                }
+            });
+            onceHandlers.clear();
+        }
+    }
+
+    /**
+     * Request/response pattern for queries
+     * @param {string} event - Event name
+     * @param {*} data - Request data
+     * @param {number} timeout - Timeout in ms (default 5000)
+     * @returns {Promise<*>} Response data
+     */
+    async request(event, data = {}, timeout = 5000) {
+        return new Promise((resolve, reject) => {
+            const responseEvent = `${event}:response:${Date.now()}:${Math.random().toString(36).slice(2)}`;
+
+            const timer = setTimeout(() => {
+                this.off(responseEvent, handler);
+                reject(new Error(`Request timeout: ${event}`));
+            }, timeout);
+
+            const handler = (response) => {
+                clearTimeout(timer);
+                resolve(response);
+            };
+
+            this.once(responseEvent, handler);
+            this.emit(event, { ...data, _responseEvent: responseEvent });
+        });
+    }
+
+    /**
+     * Respond to a request
+     * @param {object} requestData - Original request data (must contain _responseEvent)
+     * @param {*} response - Response data
+     */
+    respond(requestData, response) {
+        if (requestData._responseEvent) {
+            this.emit(requestData._responseEvent, response);
+        }
+    }
+
+    /**
+     * Clear all listeners
+     */
+    clear() {
+        this.listeners.clear();
+        this.onceListeners.clear();
+    }
+
+    /**
+     * Get listener count for debugging
+     */
+    getListenerCount(event) {
+        return (this.listeners.get(event)?.size || 0) +
+               (this.onceListeners.get(event)?.size || 0);
+    }
+}
+
+// Global singleton instance
+export const WidgetBus = new WidgetEventBus();
+
+// Also export class for testing
+export { WidgetEventBus };

painapple_code/static/js/widget-system/icons.js

@@ -0,0 +1,120 @@
+/**
+ * Shared icons for widget system
+ * All SVG icons used across widgets, centralized to avoid duplication
+ */
+
+export const ICONS = {
+    // Navigation
+    back: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>',
+    forward: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>',
+    up: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>',
+    down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>',
+    chevronRight: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>',
+    chevronDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>',
+
+    // Actions
+    close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+    refresh: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
+    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+    minus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+    search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+    edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+    trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+    copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
+    ellipsis: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>',
+    settings: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+
+    // Files
+    file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
+    folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
+    folderOpen: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="M2 10h20"/></svg>',
+    folderTree: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l2 2h6a2 2 0 0 1 2 2v3"/><path d="M3 5v9a2 2 0 0 0 2 2h3"/><path d="M11 17h6a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2z"/><path d="M11 19h-3"/></svg>',
+    eyeOff: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',
+    image: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
+    code: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+    dollarSign: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
+    coins: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>',
+
+    // Visibility
+    eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
+
+    // Window controls
+    kill: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>',
+    openInTab: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M14 9l3 3-3 3"/></svg>',
+    maximize: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>',
+    minimize: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="12" x2="20" y2="12"/></svg>',
+    restore: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="7" width="14" height="12" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2"/></svg>',
+    popout: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
+    popin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',
+    pin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>',
+    pinOff: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 17v5"/><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/><path d="M9 9.34V7"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/><line x1="2" y1="2" x2="22" y2="22"/></svg>',
+    star: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
+    starFilled: '<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
+    sidebar: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>',
+    sidebarRight: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>',
+
+    // Panel-specific
+    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+    git: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/></svg>',
+    branch: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>',
+    commit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><line x1="1.05" y1="12" x2="7" y2="12"/><line x1="17.01" y1="12" x2="22.96" y2="12"/></svg>',
+    history: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
+    undo: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>',
+    redo: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/></svg>',
+    changes: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="10" height="14" rx="1"/><rect x="11" y="7" width="10" height="14" rx="1"/><path d="M15 11h4" stroke-linecap="round"/><path d="M17 9v4" stroke-linecap="round"/><path d="M6 13h4" stroke-linecap="round"/></svg>',
+    logs: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>',
+    review: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
+
+    // Status
+    check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+    warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+    error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+    info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+    loading: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>',
+    loader: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32"><animate attributeName="stroke-dashoffset" values="32;0" dur="1s" repeatCount="indefinite"/></circle></svg>',
+    circle: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>',
+    x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+    external: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
+    globe: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
+    server: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>',
+    activity: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
+    brain: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-1.54"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-1.54"/></svg>',
+    pause: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>',
+    tool: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>',
+    archive: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>',
+    clock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
+    alert: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+    barChart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>',
+
+    // Drag handle
+    dragHandle: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>',
+    gripHorizontal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>',
+
+    // Tabs/Grid
+    columns: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="8" height="18" rx="1"/><rect x="13" y="3" width="8" height="18" rx="1"/></svg>',
+    wrapText: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M3 12h15a3 3 0 1 1 0 6h-4"/><polyline points="16 16 14 18 16 20"/><path d="M3 18h7"/></svg>',
+    grid: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
+    layers: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',
+};
+
+/**
+ * Get icon by name
+ * @param {string} name - Icon name
+ * @returns {string} SVG string
+ */
+export function getIcon(name) {
+    return ICONS[name] || ICONS.file;
+}
+
+/**
+ * Create icon element
+ * @param {string} name - Icon name
+ * @param {string} className - Optional CSS class
+ * @returns {HTMLElement}
+ */
+export function createIconElement(name, className = 'widget-icon') {
+    const span = document.createElement('span');
+    span.className = className;
+    span.innerHTML = getIcon(name);
+    return span;
+}

painapple_code/static/js/widget-system/index.js

@@ -0,0 +1,49 @@
+/**
+ * Widget System - Main entry point
+ *
+ * Usage:
+ *
+ * import { WidgetManager, WidgetBus } from './widget-system/index.js';
+ *
+ * // Register widgets
+ * WidgetManager.register('files', {
+ *     type: 'bottom-sheet',
+ *     title: 'Files',
+ *     icon: 'folder',
+ *     shortcut: 'Alt+F',
+ *     render: (container, ctx) => renderFileList(container, ctx),
+ *     onSessionChange: (sessionId) => loadFiles(sessionId)
+ * });
+ *
+ * // Create/get widget
+ * const filesWidget = WidgetManager.get('files');
+ * filesWidget.open();
+ *
+ * // Listen for events
+ * WidgetBus.on('file:open', ({ path }) => openInEditor(path));
+ *
+ * // Transform widget type
+ * filesWidget.transformTo('sidebar-left');
+ */
+
+// Core
+export { WidgetBus, WidgetEventBus } from './event-bus.js';
+export { DeviceManager, DeviceManagerClass } from './device-manager.js';
+export { ICONS, getIcon, createIconElement } from './icons.js';
+
+// Base widget
+export { BaseWidget } from './base-widget.js';
+
+// Widget types
+export {
+    BottomSheetWidget,
+    SidebarWidget,
+    FloatingWidget,
+    TabWidget,
+    ModalWidget,
+    getWidgetClass,
+    WIDGET_TYPES
+} from './types/index.js';
+
+// Manager
+export { WidgetManager, WidgetManagerClass } from './widget-manager.js';

painapple_code/static/js/widget-system/init.js

@@ -0,0 +1,54 @@
+/**
+ * Widget System Initialization
+ *
+ * Call initWidgetSystem() early in app startup to set up the widget system.
+ */
+
+import { WidgetManager, WidgetBus } from './index.js';
+import { initWidgets, GitWidget, TerminalWidget, LogExplorerWidget, FileExplorerWidget, FilePreviewWidget, HistoryExplorerWidget, DiffViewerWidget } from '../widgets/index.js';
+import { debug } from '../config.js';
+
+/**
+ * Initialize the widget system
+ * @param {object} options
+ * @param {string} options.sessionId - Current session ID
+ * @param {string} options.cwd - Current working directory
+ * @param {boolean} options.restoreOpenWidgets - Whether to restore previously open widgets (default: true)
+ */
+export function initWidgetSystem(options = {}) {
+    // Set initial session if provided
+    if (options.sessionId) {
+        WidgetBus.emit('session:changed', {
+            sessionId: options.sessionId,
+            cwd: options.cwd
+        });
+    }
+
+    // Initialize all application widgets
+    initWidgets();
+
+    // Restore previously open widgets (unless disabled)
+    if (options.restoreOpenWidgets !== false) {
+        // Defer restoration to next frame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            WidgetManager.restoreOpenWidgets();
+        });
+    }
+
+    debug.log('[WidgetSystem] Initialized');
+
+    return {
+        WidgetManager,
+        WidgetBus,
+        GitWidget,
+        TerminalWidget,
+        LogExplorerWidget,
+        FileExplorerWidget,
+        FilePreviewWidget,
+        HistoryExplorerWidget,
+        DiffViewerWidget
+    };
+}
+
+// Export for direct access
+export { WidgetManager, WidgetBus, GitWidget, TerminalWidget, LogExplorerWidget, FileExplorerWidget, FilePreviewWidget, HistoryExplorerWidget, DiffViewerWidget };