windowpp 0.1.2 → 0.1.4

package/templates/example/frontend/src/App.tsx

@@ -0,0 +1,781 @@
+import { For, Show, createSignal, onMount, onCleanup } from 'solid-js';
+import { A } from '@solidjs/router';
+import {
+  appData, type AppDataEntry,
+  filesystem,
+  fileDrop, formatFileSize, type FileInfo,
+  input, type InputKeyEvent, type ShortcutEvent,
+  appApi, type AppInfo, type MonitorInfo,
+  windowApi, type WindowEvent, type WindowInfo,
+} from './API';
+import './filedrop.css';
+import {
+  ClipboardToast,
+  FileSearch,
+  FileSearchButton,
+  PresetsPanel,
+  type FileSearchResult,
+  type SearchPreset,
+} from './components';
+
+// ============================================================================
+//  Utilities
+// ============================================================================
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/').replace(/\/+/g, '/');
+}
+
+function inferSearchPresets(appDataRoot: string): SearchPreset[] {
+  const presets: SearchPreset[] = [];
+
+  if (appDataRoot) {
+    presets.push({
+      label: 'App Data',
+      path: appDataRoot,
+      note: 'Small, safe default for quick testing',
+    });
+  }
+
+  const normalized = normalizePath(appDataRoot);
+
+  if (/^[A-Za-z]:\//.test(normalized)) {
+    const driveRoot = normalized.slice(0, 3);
+    const usersIndex = normalized.toLowerCase().indexOf('/appdata/');
+    if (usersIndex > 3) {
+      presets.push({
+        label: 'Home',
+        path: normalized.slice(0, usersIndex).replace(/\//g, '\\'),
+        note: 'User profile on Windows',
+      });
+    }
+    presets.push({
+      label: 'Drive Root',
+      path: driveRoot.replace(/\//g, '\\'),
+      note: 'Broadest Windows search scope',
+    });
+    return dedupePresets(presets);
+  }
+
+  const macIndex = normalized.indexOf('/Library/Application Support/');
+  if (macIndex > 0) {
+    presets.push({
+      label: 'Home',
+      path: normalized.slice(0, macIndex),
+      note: 'User home on macOS',
+    });
+    presets.push({
+      label: 'Root',
+      path: '/',
+      note: 'Entire filesystem on macOS',
+    });
+    return dedupePresets(presets);
+  }
+
+  const linuxIndex = normalized.indexOf('/.config/');
+  if (linuxIndex > 0) {
+    presets.push({
+      label: 'Home',
+      path: normalized.slice(0, linuxIndex),
+      note: 'User home on Linux',
+    });
+    presets.push({
+      label: 'Root',
+      path: '/',
+      note: 'Entire filesystem on Linux',
+    });
+  }
+
+  return dedupePresets(presets);
+}
+
+function dedupePresets(presets: SearchPreset[]): SearchPreset[] {
+  const seen = new Set<string>();
+  return presets.filter((preset) => {
+    const key = (preset.path ?? preset.roots?.join('|') ?? '').trim().toLowerCase();
+    if (!key || seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+
+// ============================================================================
+//  App Component
+// ============================================================================
+
+function App() {
+  const [images, setImages] = createSignal<FileInfo[]>([]);
+  const [documents, setDocuments] = createSignal<FileInfo[]>([]);
+  const [appDataRoot, setAppDataRoot] = createSignal('');
+  const [appDataEntries, setAppDataEntries] = createSignal<AppDataEntry[]>([]);
+  const [settingsText, setSettingsText] = createSignal('');
+  const [status, setStatus] = createSignal('Loading app data...');
+
+  const [searchOpen, setSearchOpen] = createSignal(false);
+  const [availableRoots, setAvailableRoots] = createSignal<string[]>([]);
+  const [searchPresets, setSearchPresets] = createSignal<SearchPreset[]>([]);
+  const [lastKeyEvent, setLastKeyEvent] = createSignal('Waiting for keyboard input...');
+  const [pressedKeys, setPressedKeys] = createSignal<string[]>([]);
+  const [lastShortcut, setLastShortcut] = createSignal('No shortcut has fired yet');
+  const [browserLastKeyEvent, setBrowserLastKeyEvent] = createSignal('Waiting for browser keyboard input...');
+  const [browserPressedKeys, setBrowserPressedKeys] = createSignal<string[]>([]);
+  const [appInfo, setAppInfo] = createSignal<AppInfo | null>(null);
+  const [windowInfo, setWindowInfo] = createSignal<WindowInfo | null>(null);
+  const [lastWindowEvent, setLastWindowEvent] = createSignal('Waiting for window events...');
+  const [clipboardText, setClipboardText] = createSignal('');
+  const [monitorSummary, setMonitorSummary] = createSignal('Loading monitors...');
+  const [alwaysOnTop, setAlwaysOnTop] = createSignal(false);
+  const [clipboardToastVisible, setClipboardToastVisible] = createSignal(false);
+  const [clipboardToastTitle, setClipboardToastTitle] = createSignal('Clipboard text captured');
+  const [clipboardToastMessage, setClipboardToastMessage] = createSignal('');
+
+  let imageZoneRef: HTMLDivElement | undefined;
+  let documentZoneRef: HTMLDivElement | undefined;
+  let disposeInputKeyListener: (() => void) | undefined;
+  let disposeInputShortcutListener: (() => void) | undefined;
+  let disposeAppEventListener: (() => void) | undefined;
+  let disposeWindowEventListener: (() => void) | undefined;
+  let clipboardToastTimer: number | undefined;
+
+  onMount(() => {
+    const syncBrowserPressedKeys = (event: KeyboardEvent, pressed: boolean) => {
+      const label = event.key === ' ' ? 'Space' : event.key;
+      setBrowserLastKeyEvent(`${event.type} ${label} [code=${event.code}] [ctrl=${event.ctrlKey} shift=${event.shiftKey} alt=${event.altKey} meta=${event.metaKey}]`);
+      setBrowserPressedKeys((current) => {
+        const next = current.filter((entry) => entry !== label);
+        if (pressed) {
+          next.push(label);
+        }
+        return next;
+      });
+    };
+
+    const handleBrowserKeyDown = (event: KeyboardEvent) => {
+      syncBrowserPressedKeys(event, true);
+    };
+
+    const handleBrowserKeyUp = (event: KeyboardEvent) => {
+      syncBrowserPressedKeys(event, false);
+    };
+
+    const clearBrowserPressedKeys = () => {
+      setBrowserPressedKeys([]);
+    };
+
+    window.addEventListener('keydown', handleBrowserKeyDown);
+    window.addEventListener('keyup', handleBrowserKeyUp);
+    window.addEventListener('blur', clearBrowserPressedKeys);
+
+    if (imageZoneRef) {
+      const zone = fileDrop.createDropZone('images', imageZoneRef);
+      zone.onFiles((files: FileInfo[]) => {
+        console.log('Images dropped:', files);
+        setImages(files);
+      });
+    }
+
+    if (documentZoneRef) {
+      const zone = fileDrop.createDropZone('documents', documentZoneRef);
+      zone.onFiles((files: FileInfo[]) => {
+        console.log('Documents dropped:', files);
+        setDocuments(files);
+      });
+    }
+
+    void initializeAppData();
+
+    void initializeInputDemo();
+
+    void initializePlatformDemo();
+
+    onCleanup(() => {
+      if (clipboardToastTimer !== undefined) {
+        window.clearTimeout(clipboardToastTimer);
+      }
+      window.removeEventListener('keydown', handleBrowserKeyDown);
+      window.removeEventListener('keyup', handleBrowserKeyUp);
+      window.removeEventListener('blur', clearBrowserPressedKeys);
+      disposeInputKeyListener?.();
+      disposeInputShortcutListener?.();
+      disposeAppEventListener?.();
+      disposeWindowEventListener?.();
+      void input.unregisterShortcut('example.local.quick-help');
+      void input.unregisterShortcut('example.local.toggle-search');
+      void input.unregisterShortcut('example.local.close-search');
+      void input.unregisterShortcut('example.global.toggle-search');
+    });
+  });
+
+  async function initializePlatformDemo() {
+    try {
+      const [info, currentWindow, monitors] = await Promise.all([
+        appApi.getInfo(),
+        windowApi.getCurrent(),
+        appApi.getMonitors(),
+      ]);
+
+      setAppInfo(info);
+      setWindowInfo(currentWindow);
+      setAlwaysOnTop(false);
+      setMonitorSummary(formatMonitorSummary(monitors));
+      const initialClipboard = await appApi.getClipboardText();
+      setClipboardText(initialClipboard);
+
+      disposeAppEventListener = await appApi.onClipboardText((nextClipboard) => {
+        setClipboardText(nextClipboard);
+        showClipboardToast('Clipboard text captured', nextClipboard || 'Empty clipboard');
+      });
+
+      disposeWindowEventListener = await windowApi.onEvent((event: WindowEvent) => {
+        setLastWindowEvent(formatWindowEvent(event));
+        if (event.window) {
+          setWindowInfo(event.window);
+        }
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Platform API error: ${message}`);
+    }
+  }
+
+  function showClipboardToast(title: string, message: string) {
+    if (clipboardToastTimer !== undefined) {
+      window.clearTimeout(clipboardToastTimer);
+    }
+    setClipboardToastTitle(title);
+    setClipboardToastMessage(message || 'Empty clipboard');
+    setClipboardToastVisible(true);
+    clipboardToastTimer = window.setTimeout(() => {
+      setClipboardToastVisible(false);
+    }, 2600);
+  }
+
+  async function initializeInputDemo() {
+    try {
+      disposeInputKeyListener = await input.onKeyEvent((event: InputKeyEvent) => {
+        setLastKeyEvent(`${event.type} ${event.key} [pressed=${event.pressedKeys.join(' > ') || 'none'}]${event.ctrl ? ' +Ctrl' : ''}${event.shift ? ' +Shift' : ''}${event.alt ? ' +Alt' : ''}${event.meta ? ' +Meta' : ''}${event.global ? ' (global)' : ''}`);
+        setPressedKeys(event.pressedKeys);
+      });
+
+      disposeInputShortcutListener = input.onShortcut((shortcutEvent: ShortcutEvent) => {
+        setLastShortcut(`${shortcutEvent.id} -> ${shortcutEvent.event.key}`);
+
+        if (shortcutEvent.id === 'example.local.toggle-search') {
+          setSearchOpen((open) => !open);
+          setStatus('Local shortcut fired via native input API');
+        }
+
+        if (shortcutEvent.id === 'example.local.quick-help') {
+          setStatus('Single-key shortcut fired via native input API');
+        }
+
+        if (shortcutEvent.id === 'example.local.close-search') {
+          setSearchOpen(false);
+        }
+
+        if (shortcutEvent.id === 'example.global.toggle-search') {
+          setSearchOpen((open) => !open);
+          setStatus('Global hotkey fired via native input API');
+        }
+      });
+
+      await input.registerAppShortcut('example.local.quick-help', 'L');
+      await input.registerAppShortcut('example.local.toggle-search', 'Ctrl+Shift+L');
+      await input.registerAppShortcut('example.local.close-search', 'Escape');
+      await input.registerGlobalShortcut('example.global.toggle-search', 'Ctrl+Shift+Space');
+      setStatus('Input API ready');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Input API error: ${message}`);
+    }
+  }
+
+  function formatWindowEvent(event: WindowEvent): string {
+    const windowLabel = event.window ? `${event.window.title} (${event.window.state})` : event.windowId;
+    return `${event.name} -> ${windowLabel}`;
+  }
+
+  function formatMonitorSummary(monitors: MonitorInfo[]): string {
+    if (!monitors.length) {
+      return 'No monitors reported';
+    }
+    const primary = monitors.find((monitor) => monitor.isPrimary) ?? monitors[0];
+    return `${monitors.length} monitor(s), primary ${primary.name} @ ${primary.scaleFactor.toFixed(2)}x`;
+  }
+
+  async function runWindowAction(label: string, action: () => Promise<WindowInfo | void>) {
+    try {
+      const result = await action();
+      if (result) {
+        setWindowInfo(result);
+      } else {
+        const current = await windowApi.getCurrent().catch(() => null);
+        if (current) {
+          setWindowInfo(current);
+        }
+      }
+      setStatus(label);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`${label} failed: ${message}`);
+    }
+  }
+
+  async function hideThenShowWindow() {
+    await runWindowAction('Window hidden', () => windowApi.hide());
+    window.setTimeout(() => {
+      void runWindowAction('Window shown again', () => windowApi.show());
+    }, 1000);
+  }
+
+  async function nudgeWindow() {
+    const current = windowInfo();
+    if (!current) {
+      return;
+    }
+    await runWindowAction('Window moved', () => windowApi.setPosition(current.position.x + 40, current.position.y + 40));
+  }
+
+  async function growWindow() {
+    const current = windowInfo();
+    if (!current) {
+      return;
+    }
+    await runWindowAction('Window resized', () => windowApi.setSize(current.size.width + 120, current.size.height + 80));
+  }
+
+  async function renameWindow() {
+    const nextTitle = `WindowPP Control Demo ${new Date().toLocaleTimeString()}`;
+    await runWindowAction('Window title updated', () => windowApi.setTitle(nextTitle));
+  }
+
+  async function toggleAlwaysOnTop() {
+    const nextValue = !alwaysOnTop();
+    await runWindowAction(nextValue ? 'Window pinned on top' : 'Window no longer on top', async () => {
+      const updated = await windowApi.setAlwaysOnTop(nextValue);
+      setAlwaysOnTop(nextValue);
+      return updated;
+    });
+  }
+
+  async function copyWindowTitle() {
+    const title = windowInfo()?.title ?? '';
+    try {
+      await appApi.setClipboardText(title);
+      setStatus('Window title copied to clipboard');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Clipboard write failed: ${message}`);
+    }
+  }
+
+  async function refreshClipboard() {
+    try {
+      const nextClipboard = await appApi.getClipboardText();
+      setClipboardText(nextClipboard);
+      setStatus('Clipboard refreshed');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Clipboard read failed: ${message}`);
+    }
+  }
+
+  async function copySampleClipboardText() {
+    const sample = `Example clipboard capture ${new Date().toLocaleTimeString()}`;
+    try {
+      await appApi.setClipboardText(sample);
+      setStatus('Sample clipboard text copied');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Sample clipboard copy failed: ${message}`);
+    }
+  }
+
+  async function initializeAppData() {
+    try {
+      const root = await appData.getRoot();
+      const roots = await filesystem.listRoots();
+      const hasSettings = await appData.exists('settings.json');
+      const [settings, entries] = await Promise.all([
+        hasSettings ? appData.readText('settings.json') : Promise.resolve(''),
+        appData.readDir(''),
+      ]);
+      setAppDataRoot(root);
+      setAvailableRoots(roots);
+      setSearchPresets([
+        {
+          label: 'All Roots',
+          roots,
+          note: roots.length > 1 ? 'Search every mounted drive by default' : 'Search full filesystem by default',
+        },
+        ...inferSearchPresets(root),
+      ]);
+      setSettingsText(settings);
+      setAppDataEntries(entries);
+      setStatus('App data ready');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`App data error: ${message}`);
+    }
+  }
+
+  async function saveSettings() {
+    try {
+      await appData.writeText('settings.json', settingsText());
+      setAppDataEntries(await appData.readDir(''));
+      setStatus('settings.json saved');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Save failed: ${message}`);
+    }
+  }
+
+  async function handleSearchResultClick(result: FileSearchResult) {
+    try {
+      if (result.kind === 'application') {
+        await filesystem.launchApplication(result.application.launchTarget);
+        setStatus(`Launched ${result.application.name}`);
+      } else {
+        await filesystem.openPath(result.path);
+        setStatus(`Opened ${result.path}`);
+      }
+      setSearchOpen(false);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(`Open failed: ${message}`);
+    }
+  }
+
+  const appShortcutLabel = /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? 'Cmd+Shift+L' : 'Ctrl+Shift+L';
+  const globalShortcutLabel = /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? 'Cmd+Shift+Space' : 'Ctrl+Shift+Space';
+
+  return (
+    <div class="min-h-screen bg-[radial-gradient(circle_at_top,#f8fafc,#e2e8f0_40%,#cbd5e1)] px-6 py-8 text-slate-900">
+      <ClipboardToast
+        visible={clipboardToastVisible()}
+        title={clipboardToastTitle()}
+        message={clipboardToastMessage()}
+      />
+
+      {/* Floating Search Button */}
+      <FileSearchButton onClick={() => setSearchOpen(true)} />
+
+      {/* File Search Modal */}
+      <FileSearch
+        isOpen={searchOpen}
+        onClose={() => setSearchOpen(false)}
+        availableRoots={availableRoots}
+        searchPresets={searchPresets}
+        onResultClick={handleSearchResultClick}
+      />
+
+      {/* Main Content */}
+      <div class="mx-auto max-w-6xl">
+        {/* Header Card */}
+        <div class="mb-8 rounded-4xl border border-white/70 bg-white/80 p-8 shadow-2xl shadow-slate-400/20 backdrop-blur">
+          <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <p class="mb-2 text-sm font-semibold uppercase tracking-[0.3em] text-slate-500">WindowPP Playground</p>
+              <h1 class="text-4xl font-bold tracking-tight text-slate-900">File drop, app data, and native file search in one example app.</h1>
+              <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-600">
+                The floating command palette now drives real native filesystem search bridge. Use it to test recursive search behavior on Windows, macOS, and Linux without changing framework code for each platform.
+              </p>
+            </div>
+            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+              <div class="font-semibold text-slate-800">Status</div>
+              <div>{status()}</div>
+            </div>
+            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+              <div class="font-semibold text-slate-800">Input API</div>
+              <div>App: {appShortcutLabel}</div>
+              <div>Global: {globalShortcutLabel}</div>
+            </div>
+            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+              <div class="font-semibold text-slate-800">Platform API</div>
+              <div>{appInfo()?.name ?? 'Loading app info...'}</div>
+              <div>{monitorSummary()}</div>
+            </div>
+            <A
+              href="/settings"
+              class="flex items-center gap-1.5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600 hover:bg-slate-100 transition-colors select-none"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                <circle cx="12" cy="12" r="3"/>
+              </svg>
+              <span class="font-semibold text-slate-800">Settings</span>
+            </A>
+          </div>
+        </div>
+
+        <div class="mb-8 grid gap-4 lg:grid-cols-2 xl:grid-cols-4">
+          <div class="rounded-3xl border border-white/70 bg-white/85 p-5 shadow-xl shadow-slate-400/10 backdrop-blur">
+            <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">App Key Event</div>
+            <div class="mt-3 text-sm text-slate-700">{lastKeyEvent()}</div>
+          </div>
+          <div class="rounded-3xl border border-white/70 bg-white/85 p-5 shadow-xl shadow-slate-400/10 backdrop-blur">
+            <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">App Pressed Keys</div>
+            <div class="mt-3 text-sm text-slate-700">{pressedKeys().length ? pressedKeys().join(' > ') : 'None'}</div>
+          </div>
+          <div class="rounded-3xl border border-white/70 bg-white/85 p-5 shadow-xl shadow-slate-400/10 backdrop-blur">
+            <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Browser App Keys</div>
+            <div class="mt-3 text-sm text-slate-700">{browserPressedKeys().length ? browserPressedKeys().join(' > ') : 'None'}</div>
+          </div>
+          <div class="rounded-3xl border border-white/70 bg-white/85 p-5 shadow-xl shadow-slate-400/10 backdrop-blur">
+            <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Browser Last Event</div>
+            <div class="mt-3 text-sm text-slate-700">{browserLastKeyEvent()}</div>
+          </div>
+          <div class="rounded-3xl border border-white/70 bg-white/85 p-5 shadow-xl shadow-slate-400/10 backdrop-blur xl:col-span-4">
+            <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Last Shortcut</div>
+            <div class="mt-3 text-sm text-slate-700">{lastShortcut()}</div>
+          </div>
+        </div>
+
+        <div class="mb-8 rounded-[28px] border border-white/70 bg-white/85 p-6 shadow-xl shadow-slate-400/15 backdrop-blur">
+          <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+            <div>
+              <h2 class="text-xl font-semibold text-slate-800">Platform Control API</h2>
+              <p class="mt-2 max-w-3xl text-sm text-slate-500">
+                Cross-platform app and window control from the frontend. App scope is inside this WindowPP app. Global scope is OS-wide for supported shortcut backends.
+              </p>
+            </div>
+            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+              <div class="font-semibold text-slate-800">Last Window Event</div>
+              <div>{lastWindowEvent()}</div>
+            </div>
+          </div>
+
+          <div class="mt-6 grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5 text-sm text-slate-700">
+              <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Current Window</div>
+              <div class="mt-3 space-y-2">
+                <div>ID: {windowInfo()?.id ?? 'Loading...'}</div>
+                <div>Title: {windowInfo()?.title ?? 'Loading...'}</div>
+                <div>State: {windowInfo()?.state ?? 'Loading...'}</div>
+                <div>Visible: {windowInfo() ? (windowInfo()!.visible ? 'true' : 'false') : 'Loading...'}</div>
+                <div>Focused: {windowInfo() ? (windowInfo()!.focused ? 'true' : 'false') : 'Loading...'}</div>
+                <div>
+                  Position: {windowInfo() ? `${windowInfo()!.position.x}, ${windowInfo()!.position.y}` : 'Loading...'}
+                </div>
+                <div>
+                  Size: {windowInfo() ? `${windowInfo()!.size.width} x ${windowInfo()!.size.height}` : 'Loading...'}
+                </div>
+                <div>Scale: {windowInfo() ? windowInfo()!.scaleFactor.toFixed(2) : 'Loading...'}</div>
+              </div>
+            </div>
+
+            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5 text-sm text-slate-700">
+              <div class="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Application</div>
+              <div class="mt-3 space-y-2">
+                <div>Name: {appInfo()?.name ?? 'Loading...'}</div>
+                <div>Version: {appInfo()?.version ?? 'Loading...'}</div>
+                <div>Identifier: {appInfo()?.identifier ?? 'Loading...'}</div>
+                <div>Clipboard: {clipboardText() || 'Empty'}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-6 flex flex-wrap gap-3">
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window info refreshed', () => windowApi.getCurrent())}>Refresh</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void renameWindow()}>Rename Window</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window focused', () => windowApi.focus())}>Focus</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window minimized', () => windowApi.minimize())}>Minimize</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window maximized', () => windowApi.maximize())}>Maximize</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window restored', () => windowApi.restore())}>Restore</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void runWindowAction('Window centered', () => windowApi.center())}>Center</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void nudgeWindow()}>Move +40,+40</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void growWindow()}>Resize +120,+80</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void toggleAlwaysOnTop()}>{alwaysOnTop() ? 'Disable Always On Top' : 'Enable Always On Top'}</button>
+            <button class="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" onClick={() => void hideThenShowWindow()}>Hide 1s</button>
+            <button class="rounded-full bg-slate-200 px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-300" onClick={() => void copyWindowTitle()}>Copy Title</button>
+            <button class="rounded-full bg-emerald-500 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600" onClick={() => void copySampleClipboardText()}>Copy Sample Clipboard Text</button>
+            <button class="rounded-full bg-slate-200 px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-300" onClick={() => void refreshClipboard()}>Read Clipboard</button>
+          </div>
+        </div>
+
+        {/* Main Grid */}
+        <div class="mb-6 grid gap-6 xl:grid-cols-[1.4fr_0.9fr]">
+          {/* App Data Section */}
+          <div class="rounded-[28px] border border-white/70 bg-white/85 p-6 shadow-xl shadow-slate-400/15 backdrop-blur">
+            <div class="mb-4 flex items-start justify-between gap-4">
+              <div>
+                <h2 class="text-xl font-semibold text-slate-800">App Data</h2>
+                <p class="mt-1 text-sm text-slate-500 break-all">{appDataRoot()}</p>
+              </div>
+              <button
+                class="rounded-full border border-slate-300 bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-700 hover:border-slate-400 hover:bg-slate-200"
+                onClick={() => setSearchOpen(true)}
+              >
+                Open Search Palette
+              </button>
+            </div>
+            <p class="mb-4 text-sm text-slate-500">
+            Startup creates a per-user app-data folder automatically. Files inside it are optional and only appear when your app writes them.
+            </p>
+            <div class="grid gap-6 lg:grid-cols-2 lg:items-start">
+              <div>
+                <label for="settings-json" class="mb-2 block text-sm font-medium text-slate-700">settings.json</label>
+                <textarea
+                  id="settings-json"
+                  class="min-h-48 w-full rounded-2xl border border-slate-200 bg-slate-50 p-3 font-mono text-sm text-slate-800 outline-none ring-0 placeholder:text-slate-400 focus:border-slate-400"
+                  title="settings.json editor"
+                  placeholder="Optional: write settings.json here and click Save Settings"
+                  value={settingsText()}
+                  onInput={(event) => setSettingsText(event.currentTarget.value)}
+                />
+                <button
+                  class="mt-3 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"
+                  onClick={() => void saveSettings()}
+                >
+                  Save Settings
+                </button>
+                  <p class="mt-3 text-xs text-slate-500">
+                    App input demo: use {appShortcutLabel} in the focused app window or {globalShortcutLabel} from anywhere.
+                  </p>
+              </div>
+              <div>
+                <h3 class="mb-2 text-sm font-medium text-slate-700">Current app-data entries</h3>
+                <div class="space-y-2">
+                  <Show
+                    when={appDataEntries().length > 0}
+                    fallback={
+                      <div class="rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
+                        Folder is empty. Save settings or write files from the frontend/backend to populate it.
+                      </div>
+                    }
+                  >
+                    <For each={appDataEntries()}>
+                      {(entry) => (
+                        <div class="rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
+                          <div class="font-medium text-slate-800">{entry.name}</div>
+                          <div class="break-all text-slate-500">{entry.path}</div>
+                        </div>
+                      )}
+                    </For>
+                  </Show>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Presets Panel */}
+          <PresetsPanel
+            presets={searchPresets}
+            onPresetClick={() => setSearchOpen(true)}
+          />
+        </div>
+
+        {/* Drop Zones */}
+        <div class="grid gap-6 lg:grid-cols-2">
+          <div class="rounded-[28px] border border-white/70 bg-white/85 p-6 shadow-xl shadow-slate-400/15 backdrop-blur">
+            <h2 class="mb-4 flex items-center gap-2 text-xl font-semibold text-slate-700">
+              <span>Images</span>
+              <span class="text-sm text-slate-500">(jpg, png, gif)</span>
+            </h2>
+            <div
+              ref={imageZoneRef}
+              class="wpp-dropzone"
+              data-dropzone="images"
+            >
+              <div class="wpp-dropzone-content">
+                <svg class="wpp-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                </svg>
+                <span class="wpp-dropzone-text">Drop images here</span>
+                <span class="wpp-dropzone-hint">jpg, png, gif</span>
+              </div>
+            </div>
+
+            <Show when={images().length > 0}>
+              <div class="wpp-dropzone-files mt-4">
+                <For each={images()}>
+                  {(f: FileInfo) => (
+                    <div class="wpp-dropzone-file-item">
+                      <div class="wpp-dropzone-file-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                        </svg>
+                      </div>
+                      <div class="wpp-dropzone-file-info">
+                        <span class="wpp-dropzone-file-name">{f.name}</span>
+                        <span class="wpp-dropzone-file-meta">{formatFileSize(f.size)}</span>
+                      </div>
+                    </div>
+                  )}
+                </For>
+                <button
+                  class="mt-2 w-full rounded-full bg-slate-200 px-3 py-1 text-sm hover:bg-slate-300"
+                  onClick={() => setImages([])}
+                >
+                  Clear Images
+                </button>
+              </div>
+            </Show>
+          </div>
+
+          <div class="rounded-[28px] border border-white/70 bg-white/85 p-6 shadow-xl shadow-slate-400/15 backdrop-blur">
+            <h2 class="mb-4 flex items-center gap-2 text-xl font-semibold text-slate-700">
+              <span>Documents</span>
+              <span class="text-sm text-slate-500">(pdf, doc, txt)</span>
+            </h2>
+            <div
+              ref={documentZoneRef}
+              class="wpp-dropzone"
+              data-dropzone="documents"
+            >
+              <div class="wpp-dropzone-content">
+                <svg class="wpp-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                </svg>
+                <span class="wpp-dropzone-text">Drop documents here</span>
+                <span class="wpp-dropzone-hint">pdf, doc, txt</span>
+              </div>
+            </div>
+
+            <Show when={documents().length > 0}>
+              <div class="wpp-dropzone-files mt-4">
+                <For each={documents()}>
+                  {(f: FileInfo) => (
+                    <div class="wpp-dropzone-file-item">
+                      <div class="wpp-dropzone-file-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                        </svg>
+                      </div>
+                      <div class="wpp-dropzone-file-info">
+                        <span class="wpp-dropzone-file-name">{f.name}</span>
+                        <span class="wpp-dropzone-file-meta">{formatFileSize(f.size)}</span>
+                      </div>
+                    </div>
+                  )}
+                </For>
+                <button
+                  class="mt-2 w-full rounded-full bg-slate-200 px-3 py-1 text-sm hover:bg-slate-300"
+                  onClick={() => setDocuments([])}
+                >
+                  Clear Documents
+                </button>
+              </div>
+            </Show>
+          </div>
+        </div>
+
+        {/* How It Works */}
+        <div class="mt-8 rounded-[28px] border border-white/70 bg-white/85 p-6 shadow-xl shadow-slate-400/15 backdrop-blur">
+          <h2 class="mb-4 text-xl font-semibold text-slate-700">How It Works</h2>
+          <ul class="space-y-2 text-slate-600">
+            <li>1. Drag files over the window - cursor shows "none" outside zones</li>
+            <li>2. Hover over a drop zone - cursor changes to "copy" and zone highlights</li>
+            <li>3. Drop files on a zone - files are processed and displayed</li>
+            <li>4. Open search palette with {appShortcutLabel} in the focused app or {globalShortcutLabel} system-wide to live-test fs.searchFiles.</li>
+            <li>5. Change root path to app data, home, or a drive/root path to compare platform behavior.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;