hyper-scheduler 1.0.0

package/src/ui/components/devtools.ts

@@ -0,0 +1,525 @@
+import { DevToolsStore } from '../store/dev-tools-store';
+import { SchedulerIntrospectionAPI, TaskControlAPI } from '../../types';
+import { SchedulerEvents } from '../../constants';
+import { themeStyles } from '../styles/theme.css';
+import './floating-trigger';
+import './task-header';
+import './task-list';
+import './task-detail';
+import './timeline';
+import './resizer';
+import { TaskHeader } from './task-header';
+import { TaskList } from './task-list';
+import { TaskDetail } from './task-detail';
+import { Timeline } from './timeline';
+
+export class DevTools extends HTMLElement {
+  private _shadow: ShadowRoot;
+  private store: DevToolsStore;
+  private scheduler?: SchedulerIntrospectionAPI & TaskControlAPI;
+  private rAFId?: number;
+  private lastTime = 0;
+
+  private $panel!: HTMLElement;
+  private $header!: TaskHeader;
+  private $taskList!: TaskList;
+  private $taskDetail!: TaskDetail;
+  private $timeline!: Timeline;
+  private $trigger!: HTMLElement;
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+    this.store = new DevToolsStore();
+  }
+
+  connectedCallback() {
+    // IMPORTANT: Set language BEFORE rendering child components
+    // so that t() function returns correct translations during initial render
+    const languageAttr = this.getAttribute('language');
+    if (languageAttr === 'en' || languageAttr === 'zh') {
+      // Synchronously set language before any child component renders
+      this.store.setLanguageSync(languageAttr);
+    }
+    
+    this.render();
+    this.cacheDom();
+    this.bindStore();
+    
+    // Apply initial options from attributes (after bindStore so listeners are set up)
+    const dockAttr = this.getAttribute('dock');
+    console.log('[DevTools] dock attribute:', dockAttr);
+    if (dockAttr === 'bottom') {
+      this.store.setDockPosition('bottom');
+    }
+    
+    const themeAttr = this.getAttribute('theme');
+    if (themeAttr === 'light' || themeAttr === 'dark' || themeAttr === 'auto') {
+      this.store.setTheme(themeAttr);
+    }
+    
+    // Set language again through store to trigger UI updates for already rendered components
+    if (languageAttr === 'en' || languageAttr === 'zh') {
+      this.store.setLanguage(languageAttr);
+    }
+    
+    // Apply trigger button options
+    const triggerBg = this.getAttribute('trigger-bg');
+    const triggerColor = this.getAttribute('trigger-color');
+    const triggerPosition = this.getAttribute('trigger-position');
+    console.log('[DevTools] trigger attrs:', { triggerBg, triggerColor, triggerPosition });
+    if (triggerBg) this.$trigger.setAttribute('bg-color', triggerBg);
+    if (triggerColor) this.$trigger.setAttribute('text-color', triggerColor);
+    if (triggerPosition) this.$trigger.setAttribute('position', triggerPosition);
+    
+    // Apply default zoom to timeline
+    const defaultZoom = this.getAttribute('default-zoom');
+    if (defaultZoom) {
+      const zoom = parseFloat(defaultZoom);
+      if (!isNaN(zoom) && zoom >= 0.5 && zoom <= 5) {
+        this.$timeline.defaultZoom = zoom;
+      }
+    }
+    
+    this.addEventListeners();
+    this.startLoop();
+  }
+
+  disconnectedCallback() {
+    if (this.rAFId) cancelAnimationFrame(this.rAFId);
+  }
+
+  setScheduler(api: SchedulerIntrospectionAPI & TaskControlAPI) {
+    this.scheduler = api;
+    this.store.setScheduler(api);
+    
+    // Initial load - fetch immediately
+    const tasks = this.scheduler.getTasks();
+    tasks.forEach(t => this.store.updateTask(t));
+    
+    // Get initial scheduler running state
+    const isRunning = this.scheduler.isRunning();
+    this.store.setSchedulerRunning(isRunning);
+
+    // Subscribe to ALL events and refresh task list
+    const refreshTasks = () => {
+      const allTasks = this.scheduler?.getTasks() || [];
+      allTasks.forEach(t => this.store.updateTask(t));
+    };
+
+    this.scheduler.on(SchedulerEvents.TASK_REGISTERED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_UPDATED, (payload: any) => {
+      console.log('[DevTools] task_updated event:', payload);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.TASK_STARTED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_REMOVED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_STOPPED, (payload: any) => {
+      console.log('[DevTools] task_stopped event:', payload);
+      refreshTasks();
+    });
+    
+    // Listen to scheduler start/stop events
+    this.scheduler.on(SchedulerEvents.SCHEDULER_STARTED, () => {
+      console.log('[DevTools] scheduler_started event');
+      this.store.setSchedulerRunning(true);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.SCHEDULER_STOPPED, () => {
+      console.log('[DevTools] scheduler_stopped event');
+      this.store.setSchedulerRunning(false);
+      refreshTasks();
+    });
+
+    this.scheduler.on(SchedulerEvents.TASK_COMPLETED, (payload: any) => {
+      refreshTasks();
+      
+      // Add to history
+      if (payload && payload.taskId) {
+        this.store.addHistory(payload.taskId, {
+          timestamp: payload.task?.lastRun || Date.now(),
+          duration: payload.duration || 0,
+          success: true,
+          error: null
+        });
+      }
+    });
+
+    this.scheduler.on(SchedulerEvents.TASK_FAILED, (payload: any) => {
+      refreshTasks();
+      
+      // Add to history
+      if (payload && payload.taskId) {
+        this.store.addHistory(payload.taskId, {
+          timestamp: payload.task?.lastRun || Date.now(),
+          duration: payload.duration || 0,
+          success: false,
+          error: payload.error || 'Unknown error'
+        });
+      }
+    });
+
+    // Add polling for real-time updates (fallback for missed events)
+    // Poll every 500ms when DevTools is open
+    setInterval(() => {
+      if (this.store.getState().isOpen) {
+        refreshTasks();
+      }
+    }, 500);
+  }
+
+  private cacheDom() {
+    this.$panel = this._shadow.querySelector('.panel')!;
+    this.$header = this._shadow.querySelector('hs-task-header') as TaskHeader;
+    this.$taskList = this._shadow.querySelector('hs-task-list') as TaskList;
+    this.$taskDetail = this._shadow.querySelector('hs-task-detail') as TaskDetail;
+    this.$timeline = this._shadow.querySelector('hs-timeline') as Timeline;
+    this.$trigger = this._shadow.querySelector('hs-floating-trigger')!;
+  }
+
+  private bindStore() {
+    // Restore size
+    try {
+      const saved = localStorage.getItem('hs-panel-size');
+      if (saved) {
+        this.store.setPanelSize(JSON.parse(saved));
+      }
+    } catch (e) { /* ignore */ }
+
+    // Bind Store -> UI
+    this.store.subscribe('isOpen', (isOpen) => {
+      const pos = this.store.getState().dockPosition;
+      const size = this.store.getState().panelSize;
+      
+      if (isOpen) {
+        this.$panel.classList.add('open');
+        this.$trigger.style.display = 'none';
+        // Ensure panel is visible
+        if (pos === 'right') {
+          this.$panel.style.right = '0';
+        } else {
+          this.$panel.style.bottom = '0';
+        }
+      } else {
+        this.$panel.classList.remove('open');
+        this.$trigger.style.display = 'block';
+        // Ensure panel is hidden
+        if (pos === 'right') {
+          this.$panel.style.right = `-${size.width}px`;
+        } else {
+          this.$panel.style.bottom = `-${size.height}px`;
+        }
+      }
+    });
+
+    this.store.subscribe('theme', (theme) => {
+      const actualTheme = theme === 'auto' ? 'light' : theme;
+      this.setAttribute('theme', actualTheme);
+      
+      // Propagate theme to all child components
+      this.$header.setAttribute('theme', actualTheme);
+      this.$taskList.setAttribute('theme', actualTheme);
+      this.$taskDetail.setAttribute('theme', actualTheme);
+      this.$timeline.setAttribute('theme', actualTheme);
+      
+      this.$header.theme = theme;
+    });
+
+    this.store.subscribe('tasks', (tasks) => {
+      this.$taskList.tasks = tasks;
+      this.$timeline.data = { tasks, history: this.store.getState().history };
+      
+      // Update stats - active = idle + running (正在调度或执行中的任务)
+      let active = 0;
+      tasks.forEach(t => {
+        if (t.status === 'idle' || t.status === 'running') active++;
+      });
+      this.$header.stats = { active, total: tasks.size };
+      
+      // Update detail view if selected
+      const selectedId = this.store.getState().selectedTaskId;
+      if (selectedId && tasks.has(selectedId)) {
+        this.$taskDetail.task = tasks.get(selectedId) || null;
+      }
+    });
+
+    this.store.subscribe('history', (map) => {
+      this.$timeline.data = { tasks: this.store.getState().tasks, history: map };
+      const id = this.store.getState().selectedTaskId;
+      if (id) {
+        this.$taskDetail.history = map.get(id) || [];
+      }
+    });
+
+    this.store.subscribe('selectedTaskId', (id) => {
+      // Only affects tasks tab
+      if (this.store.getState().activeTab !== 'tasks') return;
+      
+      if (id) {
+        this.$taskList.style.display = 'none';
+        this.$taskDetail.style.display = 'block';
+        const task = this.store.getState().tasks.get(id);
+        const history = this.store.getState().history.get(id);
+        this.$taskDetail.task = task || null;
+        this.$taskDetail.history = history || [];
+      } else {
+        this.$taskList.style.display = 'block';
+        this.$taskDetail.style.display = 'none';
+      }
+    });
+
+    this.store.subscribe('activeTab', (tab) => {
+      this.$header.activeTab = tab;
+      // Switch view logic later (Phase 5)
+      if (tab === 'tasks') {
+        this.$taskList.style.display = 'block';
+        this.$timeline.style.display = 'none';
+        // If selected, list is hidden? 
+        if (this.store.getState().selectedTaskId) {
+            this.$taskList.style.display = 'none';
+            this.$taskDetail.style.display = 'block';
+        } else {
+            this.$taskList.style.display = 'block';
+            this.$taskDetail.style.display = 'none';
+        }
+      } else {
+        this.$taskList.style.display = 'none';
+        this.$taskDetail.style.display = 'none';
+        this.$timeline.style.display = 'block';
+      }
+    });
+
+    this.store.subscribe('dockPosition', (pos) => {
+      this.$header.dockPosition = pos; 
+      const size = this.store.getState().panelSize;
+      const isOpen = this.store.getState().isOpen;
+      const isMobile = window.innerWidth <= 480;
+      
+      if (pos === 'right') {
+        this.$panel.classList.add('dock-right');
+        this.$panel.classList.remove('dock-bottom');
+        // 移动端使用 100vw，桌面端使用自定义宽度
+        const width = isMobile ? window.innerWidth : size.width;
+        this.$panel.style.width = isMobile ? '100vw' : `${width}px`;
+        this.$panel.style.height = '100vh';
+        this.$panel.style.bottom = '';
+        this.$panel.style.right = isOpen ? '0' : `-${width}px`;
+      } else {
+        this.$panel.classList.add('dock-bottom');
+        this.$panel.classList.remove('dock-right');
+        this.$panel.style.width = '100%';
+        // 移动端使用固定 50vh，桌面端使用自定义高度
+        const height = isMobile ? '50vh' : `${size.height}px`;
+        this.$panel.style.height = height;
+        this.$panel.style.right = '';
+        this.$panel.style.bottom = isOpen ? '0' : (isMobile ? '-50vh' : `-${size.height}px`);
+      }
+    });
+
+    this.store.subscribe('panelSize', (size) => {
+      const pos = this.store.getState().dockPosition;
+      if (pos === 'right' && size.width) {
+        this.$panel.style.width = `${size.width}px`;
+        // Reset right position to ensure close animation works
+        this.$panel.style.right = this.store.getState().isOpen ? '0' : `-${size.width}px`;
+      } else if (pos === 'bottom' && size.height) {
+        this.$panel.style.height = `${size.height}px`;
+        // Reset bottom position to ensure close animation works
+        this.$panel.style.bottom = this.store.getState().isOpen ? '0' : `-${size.height}px`;
+      }
+    });
+
+    this.store.subscribe('language', (lang) => {
+      this.$header.language = lang;
+      // Update table headers for i18n
+      this.$taskList.updateHeaders();
+      // Update detail view if visible
+      this.$taskDetail.updateTexts?.();
+      // Update timeline if visible
+      this.$timeline.updateTexts?.();
+    });
+
+    this.store.subscribe('filterText', (text) => {
+      const tasks = this.store.getState().tasks;
+      this.$taskList.filter(text, tasks);
+    });
+
+    this.store.subscribe('schedulerRunning', (running) => {
+      this.$header.schedulerRunning = running;
+    });
+  }
+
+  private addEventListeners() {
+    this.$trigger.addEventListener('toggle', () => {
+      this.store.toggle();
+    });
+
+    this.$header.addEventListener('close', (e) => {
+      e.stopPropagation();
+      this.store.toggle();
+    });
+
+    this.$header.addEventListener('dock-toggle', () => {
+      const current = this.store.getState().dockPosition;
+      this.store.setDockPosition(current === 'right' ? 'bottom' : 'right');
+    });
+
+    this.$header.addEventListener('theme-toggle', (e: Event) => {
+      const theme = (e as CustomEvent).detail;
+      this.store.setTheme(theme);
+    });
+
+    this.$header.addEventListener('lang-toggle', (e: Event) => {
+      const lang = (e as CustomEvent).detail;
+      this.store.setLanguage(lang);
+    });
+
+    this.$header.addEventListener('tab-change', (e: Event) => {
+      const tab = (e as CustomEvent).detail;
+      this.store.setTab(tab);
+    });
+
+    this.$header.addEventListener('search', (e: Event) => {
+      const text = (e as CustomEvent).detail;
+      this.store.setFilterText(text);
+    });
+
+    // Listen to resize events from hs-resizer
+    this.addEventListener('resize', (e: Event) => {
+      const size = (e as CustomEvent).detail;
+      this.store.setPanelSize(size);
+    });
+
+    this.$taskList.addEventListener('task-select', (e: Event) => {
+      const id = (e as CustomEvent).detail;
+      this.store.selectTask(id);
+    });
+
+    this.$taskDetail.addEventListener('back', () => {
+      this.store.selectTask(null);
+    });
+
+    this.$taskList.addEventListener('task-action', (e: Event) => {
+      const { action, id } = (e as CustomEvent).detail;
+      console.log('[DevTools] task-action:', action, id);
+      switch (action) {
+        case 'trigger': 
+          this.store.triggerTask(id); 
+          break;
+        case 'stop': 
+          this.store.stopTask(id); 
+          break;
+        case 'start': 
+          this.store.startTask(id); 
+          break;
+        case 'remove': 
+          if (confirm(`Remove task "${id}"?`)) {
+            this.store.removeTask(id); 
+          }
+          break;
+      }
+    });
+  }
+
+  private startLoop() {
+    const loop = (time: number) => {
+      const delta = time - this.lastTime;
+      this.lastTime = time;
+      const fps = 1000 / delta;
+      if (this.$header) {
+        this.$header.fps = fps;
+      }
+      this.rAFId = requestAnimationFrame(loop);
+    };
+    this.rAFId = requestAnimationFrame(loop);
+  }
+
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          font-family: var(--hs-font-family);
+          font-size: var(--hs-font-size);
+          color: var(--hs-text);
+          line-height: var(--hs-line-height);
+        }
+        .panel {
+          position: fixed;
+          background: var(--hs-bg);
+          box-shadow: var(--hs-shadow);
+          z-index: var(--hs-z-index);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+          border-left: 1px solid var(--hs-border);
+        }
+        /* Default Right Dock */
+        .panel.dock-right {
+          top: 0;
+          right: -500px;
+          width: 500px;
+          height: 100vh;
+          border-left: 1px solid var(--hs-border);
+          border-top: none;
+        }
+        
+        /* Bottom Dock */
+        .panel.dock-bottom {
+          bottom: -50vh;
+          left: 0;
+          width: 100%;
+          height: 50vh;
+          max-height: 50vh;
+          border-top: 1px solid var(--hs-border);
+          border-left: none;
+        }
+
+        .content {
+          flex: 1;
+          overflow: hidden;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+        }
+        .content > * {
+          flex: 1;
+          min-height: 0;
+        }
+        
+        /* Mobile - 固定尺寸，禁用拖拽 */
+        @media (max-width: 480px) {
+          .panel.dock-right {
+            width: 100vw !important;
+            right: -100vw;
+          }
+          .panel.dock-right.open {
+            right: 0;
+          }
+          .panel.dock-bottom {
+            height: 50vh !important;
+            max-height: 50vh !important;
+            bottom: -50vh;
+          }
+          .panel.dock-bottom.open {
+            bottom: 0;
+          }
+        }
+      </style>
+      
+      <hs-floating-trigger></hs-floating-trigger>
+      
+      <div class="panel dock-right">
+        <hs-resizer></hs-resizer>
+        <hs-task-header></hs-task-header>
+        <div class="content">
+          <hs-task-list></hs-task-list>
+          <hs-task-detail style="display:none"></hs-task-detail>
+          <hs-timeline style="display:none"></hs-timeline>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('hs-devtools', DevTools);

package/src/ui/components/floating-trigger.ts

@@ -0,0 +1,102 @@
+import { themeStyles } from '../styles/theme.css';
+import { ICONS } from './icons';
+
+export class FloatingTrigger extends HTMLElement {
+  private _shadow: ShadowRoot;
+  
+  // 配置属性
+  private _position: string = 'bottom-right';
+  private _bgColor: string = '';
+  private _textColor: string = '';
+
+  static get observedAttributes() {
+    return ['position', 'bg-color', 'text-color'];
+  }
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+  }
+
+  attributeChangedCallback(name: string, _oldVal: string, newVal: string) {
+    console.log('[FloatingTrigger] attributeChangedCallback:', name, newVal);
+    if (name === 'position') {
+      this._position = newVal || 'bottom-right';
+    } else if (name === 'bg-color') {
+      this._bgColor = newVal || '';
+    } else if (name === 'text-color') {
+      this._textColor = newVal || '';
+    }
+    // 如果已经渲染，重新渲染以应用新样式
+    if (this._shadow.querySelector('button')) {
+      console.log('[FloatingTrigger] re-rendering with:', this._position, this._bgColor, this._textColor);
+      this.render();
+      this.addEventListeners();
+    }
+  }
+
+  addEventListeners() {
+    const btn = this._shadow.querySelector('button');
+    btn?.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('toggle', { bubbles: true, composed: true }));
+    });
+  }
+
+  render() {
+    // 计算位置样式 - 必须明确设置所有四个方向，避免默认值干扰
+    const pos = this._position;
+    const posStyles = `
+      top: ${pos.includes('top') ? '20px' : 'auto'};
+      bottom: ${pos.includes('bottom') ? '20px' : 'auto'};
+      left: ${pos.includes('left') ? '20px' : 'auto'};
+      right: ${pos.includes('right') ? '20px' : 'auto'};
+    `;
+    
+    // 自定义颜色
+    const bgStyle = this._bgColor ? `background: ${this._bgColor};` : '';
+    const colorStyle = this._textColor ? `color: ${this._textColor};` : '';
+    
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        button {
+          position: fixed;
+          ${posStyles}
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          background: var(--hs-primary);
+          color: white;
+          ${bgStyle}
+          ${colorStyle}
+          border: none;
+          box-shadow: var(--hs-shadow);
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--hs-font-family);
+          z-index: var(--hs-z-index);
+          transition: transform 0.2s;
+        }
+        button:hover {
+          ${this._bgColor ? `background: ${this._bgColor}; filter: brightness(1.1);` : 'background: var(--hs-primary-hover);'}
+          transform: scale(1.1);
+        }
+        button:active {
+          transform: scale(0.95);
+        }
+      </style>
+      <button title="Toggle Hyper Scheduler DevTools">
+        ${ICONS.chart}
+      </button>
+    `;
+  }
+}
+
+customElements.define('hs-floating-trigger', FloatingTrigger);

package/src/ui/components/icons.ts

@@ -0,0 +1,16 @@
+export const ICONS = {
+  back: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
+  trigger: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
+  pause: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>`,
+  resume: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`,
+  remove: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><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"></path></svg>`,
+  close: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><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"></path></svg>`,
+  sun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`,
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`,
+  dock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="2" y1="15" x2="22" y2="15"></line></svg>`,
+  dockRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>`,
+  dockBottom: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="2" y1="15" x2="22" y2="15"></line></svg>`,
+  chart: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>`,
+  list: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`
+};