@stnd/launcher 1.0.0

package/Launcher.svelte

@@ -0,0 +1,1067 @@
+<script>
+  /**
+   * @stnd/launcher - The Universal Command Palette UI
+   *
+   * Integrated with the Standard Garden OS aesthetic.
+   */
+  import Icon from "@stnd/icon/Icon.svelte";
+  import Avatar from "@stnd/account/ui/Avatar.svelte";
+  import {
+    registry,
+    palette,
+    search,
+    computeMatches,
+    execute as engineExecute,
+    launcherToggle,
+    launcherView,
+    launcherClose,
+    bootLauncher,
+    setSize,
+    activeView,
+    windowSize,
+  } from "./launcher.ts";
+
+  import { onMount, tick } from "svelte";
+  import { get } from "svelte/store";
+  import { fade, blurFade, scaleBlurFade } from "@stnd/ui/transitions.js";
+  import { quintOut } from "svelte/easing";
+  import { inject } from "@stnd/store";
+  import { registerShortcut } from "@stnd/client/keyboard";
+  import Log from "@stnd/log";
+
+  const log = Log({ scope: "Launcher" });
+
+  // --- PROPS (all optional — the Launcher is fully self-booting) ---
+  // Apps wire services via provide/inject (the Standard OS runtime store).
+  // Props exist only for backward compat or one-off overrides.
+  let { WelcomeView = null, load = null, hideLogin = false } = $props();
+
+  // Check global window variable as fallback (set via window.__HIDE_LAUNCHER_LOGIN__)
+  let shouldHideLogin = $derived(
+    hideLogin ||
+      (typeof window !== "undefined" && window.__HIDE_LAUNCHER_LOGIN__),
+  );
+
+  // --- STATE (Synced with Engine) ---
+  let pState = $state({
+    open: false,
+    view: "search",
+    query: "",
+    contexts: ["global"],
+    props: {},
+  });
+  let registryState = $state({ commands: [], views: {} });
+  let searchResults = $state([]);
+  let isSearching = $state(false);
+  let activeIndex = $state(0);
+  let inputEl = $state();
+  let launcherEl = $state();
+  let itemsContainer = $state();
+  let debounceTimer;
+  let currentUser = $state(null);
+  let dynamicSize = $state(null);
+  // --- UI State for header hover ---
+  let isHeaderHovered = $state(false);
+  let isSearchHovered = $state(false);
+  let isInputFocused = $state(false);
+  let contentHeight = $state(0);
+
+  // --- Derived: Current View Title ---
+  let currentViewTitle = $derived.by(() => {
+    if (pState.view === "search") return "";
+    const view = registryState.views[pState.view];
+    if (view && view.meta && view.meta.title) return view.meta.title;
+    const cmd = registryState.commands.find((c) => c.trigger === pState.view);
+    if (cmd && cmd.title) return cmd.title;
+    return pState.view || "";
+  });
+  let showInput = $derived(
+    !currentViewTitle || isSearchHovered || isInputFocused,
+  );
+  // Remote state sync
+  let coreActiveView = $state(null);
+  let coreWindowSize = $state({ width: "standard", height: "standard" });
+
+  // Subscribe to user store from the Standard OS runtime store
+  $effect(() => {
+    const store = inject("user", false);
+    if (store && typeof store.subscribe === "function") {
+      const unsub = store.subscribe((u) => {
+        currentUser = u;
+      });
+      return unsub;
+    } else if (typeof window !== "undefined" && window.__INITIAL_USER__) {
+      // Fallback: mutate plain object before assigning to avoid reading
+      // the reactive $state proxy inside the effect (would cause a loop)
+      const initialUser = window.__INITIAL_USER__;
+      if (initialUser && initialUser.isAuthenticated === undefined) {
+        initialUser.isAuthenticated = true;
+      }
+      currentUser = initialUser;
+    } else {
+      currentUser = null;
+    }
+  });
+
+  // Scroll active item into view
+  $effect(() => {
+    // Dependency on activeIndex to trigger
+    activeIndex;
+    if (itemsContainer) {
+      const activeEl = itemsContainer.querySelector(
+        ".std-launcher-item.active",
+      );
+      if (activeEl) {
+        activeEl.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      }
+    }
+  });
+
+  // --- SYNC WITH ENGINE ---
+  onMount(() => {
+    // 1. Boot the engine — discovers extensions, registers commands/views.
+    //    App-specific services (user store, search) are already available
+    //    via inject() from the Standard OS runtime store.
+    bootLauncher();
+
+    // 2. Subscribe to palette state (open, view, query)
+    const unsubPalette = palette.subscribe((v) => {
+      pState = v;
+      if (v.open) {
+        // Focus input when opened
+        tick().then(() => inputEl?.focus());
+      }
+    });
+
+    const unsubRegistry = registry.subscribe((v) => {
+      registryState = v;
+    });
+
+    const unsubAV = activeView.subscribe((v) => (coreActiveView = v));
+    const unsubWS = windowSize.subscribe((v) => (coreWindowSize = v));
+
+    // 3. Register Default Shortcuts
+    const shortcuts = [
+      registerShortcut({
+        key: "k",
+        meta: true,
+        id: "launcher-toggle-cmd-k",
+        action: () => launcherToggle(),
+      }),
+      registerShortcut({
+        key: ":",
+        shift: true,
+        id: "launcher-toggle-command-mode",
+        action: () => launcherToggle("::"),
+      }),
+      registerShortcut({
+        key: "Escape",
+        id: "launcher-escape",
+        action: () => {
+          // Only go back if not in a modal/launcher (handled by their own listeners)
+          // But for now, simple history back is the standard behavior
+          window.history.back();
+        },
+      }),
+    ];
+
+    // 4. Keyboard Shortcuts for internal navigation
+    const handleInternalKey = (e) => {
+      if (!pState.open) return;
+
+      if (e.key === "Escape") {
+        if (ActiveViewComponent && pState.view !== "search") {
+          launcherView("search");
+        } else {
+          launcherClose();
+        }
+        return;
+      }
+
+      // Only handle arrows/enter if not in a custom view
+      if (ActiveViewComponent) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        activeIndex = (activeIndex + 1) % matches.length;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        activeIndex =
+          (activeIndex - 1 + matches.length) % (matches.length || 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (matches[activeIndex]) {
+          execute(matches[activeIndex]);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleInternalKey);
+
+    // ===================================
+    // GLOBAL EVENTS & DELEGATION
+    // (Restored for legacy compatibility)
+    // ===================================
+
+    const toggleLauncherHandler = (e) => {
+      const initialQuery = e.detail?.initialQuery || "";
+      launcherToggle(initialQuery);
+    };
+
+    const launcherViewHandler = (e) => {
+      const viewTrigger = e.detail?.viewTrigger;
+      if (viewTrigger) {
+        launcherView(viewTrigger);
+      }
+    };
+
+    const executeLauncherHandler = (e) => {
+      const command = e.detail?.command;
+      if (command) {
+        const cmd = registryState.commands.find((c) => c.trigger === command);
+        if (cmd) {
+          execute(cmd);
+        }
+      }
+    };
+
+    window.addEventListener("toggle-launcher", toggleLauncherHandler);
+    window.addEventListener("open-launcher", launcherViewHandler);
+    window.addEventListener("launcher-execute-command", executeLauncherHandler);
+
+    // Sync user state via events (in case of store collision or lazy init)
+    const handleLogin = (e) => {
+      currentUser = e.detail;
+    };
+    const handleLogout = () => {
+      currentUser = null;
+    };
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+    window.addEventListener("visitor-login", () => {
+      if (window.__INITIAL_USER__) {
+        currentUser = window.__INITIAL_USER__;
+        if (currentUser && currentUser.isAuthenticated === undefined) {
+          currentUser.isAuthenticated = true;
+        }
+      }
+    });
+
+    // Global Click Delegation (data-launcher-*)
+    const dataAttributeHandler = (e) => {
+      // Find closest element with data-launcher attributes
+      const viewTrigger = e.target.closest("[data-launcher-view]");
+      const navTrigger = e.target.closest("[data-launcher-navigator]");
+      const promptTrigger = e.target.closest("[data-launcher-prompt]");
+      const toggleTrigger = e.target.closest("[data-launcher-toggle]");
+
+      if (navTrigger) {
+        e.preventDefault();
+        const url = navTrigger.getAttribute("data-launcher-navigator");
+        launcherView("::navigator", { url });
+      } else if (viewTrigger) {
+        e.preventDefault();
+        const trigger = viewTrigger.getAttribute("data-launcher-view");
+
+        // 1. Try to find a command first (might be an action)
+        const item = registryState.commands.find((c) => c.trigger === trigger);
+        if (item) {
+          execute(item);
+        } else {
+          // 2. Fallback to opening view directly
+          launcherView(trigger);
+        }
+      } else if (promptTrigger) {
+        e.preventDefault();
+        const promptText = promptTrigger.getAttribute("data-launcher-prompt");
+        if (promptText) launcherToggle(promptText);
+      } else if (toggleTrigger) {
+        e.preventDefault();
+        launcherToggle();
+      }
+    };
+
+    document.addEventListener("click", dataAttributeHandler);
+
+    // Close on navigation (Astro View Transitions)
+    const closeOnNavigationHandler = () => {
+      // Always reset on navigation, regardless of open state
+      palette.set({
+        open: false,
+        query: "",
+        view: "search",
+        returnTo: null,
+        contexts: ["global"],
+      });
+      // Also ensure body scroll is unlocked
+      document.body.style.overflow = "";
+    };
+
+    document.addEventListener("astro:before-swap", closeOnNavigationHandler);
+
+    // Additional cleanup after swap completes
+    const afterSwapHandler = () => {
+      const current = get(palette);
+      if (current.open) {
+        palette.set({
+          open: false,
+          query: "",
+          view: "search",
+          returnTo: null,
+          contexts: ["global"],
+        });
+      }
+      document.body.style.overflow = "";
+    };
+
+    document.addEventListener("astro:after-swap", afterSwapHandler);
+
+    // Fermeture sur mousedown à l'extérieur — gère les iframes qui avalent les événements click
+    const handleOutsideMousedown = (e) => {
+      if (!get(palette).open) return;
+
+      // Si le clic se fait sur un élément déclencheur du launcher, on le laisse gérer
+      // pour éviter les conflits (ex: le bouton de bascule ou le bouton de connexion).
+      const target = e.target;
+      if (
+        target &&
+        typeof target.closest === "function" &&
+        (target.closest("[data-launcher-toggle]") ||
+          target.closest("[data-launcher-view]") ||
+          target.closest("[data-launcher-navigator]") ||
+          target.closest("[data-launcher-prompt]"))
+      ) {
+        return;
+      }
+
+      if (launcherEl && !launcherEl.contains(e.target)) {
+        launcherClose();
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideMousedown);
+
+    return () => {
+      window.removeEventListener("keydown", handleInternalKey);
+      window.removeEventListener("toggle-launcher", toggleLauncherHandler);
+      window.removeEventListener("open-launcher", launcherViewHandler);
+      window.removeEventListener(
+        "launcher-execute-command",
+        executeLauncherHandler,
+      );
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+      document.removeEventListener("click", dataAttributeHandler);
+      document.removeEventListener("mousedown", handleOutsideMousedown);
+      document.removeEventListener(
+        "astro:before-swap",
+        closeOnNavigationHandler,
+      );
+      document.removeEventListener("astro:after-swap", afterSwapHandler);
+      unsubPalette();
+      unsubRegistry();
+      unsubAV();
+      unsubWS();
+      shortcuts.forEach((unsub) => unsub && unsub());
+    };
+  });
+
+  // --- DERIVED ---
+  let matches = $derived(
+    computeMatches(
+      pState.query,
+      registryState.commands,
+      searchResults,
+      currentUser,
+    ),
+  );
+
+  let ActiveViewComponent = $derived.by(() => {
+    // 1. Check if it's a folio-provided view
+    if (registryState.views[pState.view]) {
+      return registryState.views[pState.view];
+    }
+    // 2. Fallback for search home: prop → ::welcome from registry → null
+    if (pState.view === "search" && !pState.query) {
+      return WelcomeView || registryState.views["::welcome"] || null;
+    }
+    return null;
+  });
+
+  // Determine view size from registry meta
+  let activeViewSize = $derived.by(() => {
+    // 1. Dynamic Override
+    if (dynamicSize) return dynamicSize;
+
+    // 2. Registry / Default
+    if (!ActiveViewComponent) return { width: "standard", height: "standard" };
+    const cmd = registryState.commands.find(
+      (c) => c.component === ActiveViewComponent,
+    );
+    return (
+      cmd?.meta?.size || cmd?.size || { width: "standard", height: "standard" }
+    );
+  });
+
+  // Reset dynamic size when view changes
+  $effect(() => {
+    pState.view;
+    dynamicSize = null;
+  });
+
+  // --- ACTIONS ---
+  async function performSearch(q) {
+    if (!q || q.startsWith("::")) {
+      searchResults = [];
+      return;
+    }
+    isSearching = true;
+    searchResults = await search(q);
+    isSearching = false;
+    activeIndex = 0;
+  }
+
+  function execute(item) {
+    engineExecute(item, {
+      close: launcherClose,
+      setView: launcherView,
+      views: registryState.views,
+    });
+  }
+
+  $effect(() => {
+    clearTimeout(debounceTimer);
+    if (pState.query && !pState.query.startsWith("::")) {
+      debounceTimer = setTimeout(() => performSearch(pState.query), 200);
+    } else {
+      searchResults = [];
+    }
+  });
+
+  // Reset index when query changes
+  $effect(() => {
+    pState.query;
+    activeIndex = 0;
+  });
+
+  // Prevent body scroll when open
+  $effect(() => {
+    if (pState.open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  });
+
+  // Helper to resolve flexible filter prop to function
+  function resolveFilter(f) {
+    if (!f) return null;
+    if (typeof f === "function") return f;
+
+    // Allow-list mode (string or array)
+    // "::navigator, ::search" or ["::navigator", "::search"]
+    const allowed = Array.isArray(f) ? f : f.split(",").map((s) => s.trim());
+
+    return (trigger) => allowed.includes(trigger);
+  }
+</script>
+
+{#if pState.open}
+  <div
+    class="std-launcher-overlay"
+    transition:blurFade={{ duration: 500, maxBlur: 20, easing: quintOut }}
+    onoutrostart={(e) => (e.currentTarget.style.pointerEvents = "none")}
+  >
+    <!-- Backdrop -->
+    <div
+      class="std-launcher-backdrop"
+      role="button"
+      tabindex="0"
+      aria-label="Close launcher"
+      onclick={launcherClose}
+      onkeydown={(e) => (e.key === "Enter" || e.key === " ") && launcherClose()}
+    ></div>
+
+    <!-- Main Window -->
+    <div
+      bind:this={launcherEl}
+      class="std-launcher {coreWindowSize.width}"
+      role="presentation"
+      transition:scaleBlurFade={{
+        duration: 500,
+        maxBlur: 20,
+        start: 0.95,
+        easing: quintOut,
+      }}
+      onclick={(e) => e.stopPropagation()}
+    >
+      <!-- Header -->
+      <header class="std-launcher-header">
+        <div
+          class="std-launcher-header-inner"
+          role="presentation"
+          data-has-title={currentViewTitle ? "true" : "false"}
+        >
+          <div
+            class="std-launcher-search-area"
+            role="search"
+            onmouseenter={() => (isSearchHovered = true)}
+            onmouseleave={() => (isSearchHovered = false)}
+            aria-label="Toggle launcher"
+          >
+            {#if !showInput}
+              <button class="std-launcher-search-icon icon ghost">
+                <Icon icon="search" class="text-xs" />
+              </button>
+            {/if}
+
+            <input
+              bind:this={inputEl}
+              value={pState.query}
+              oninput={(e) =>
+                palette.update((s) => ({
+                  ...s,
+                  query: e.target.value,
+                  view: e.target.value ? "search" : s.view,
+                }))}
+              onfocus={() => (isInputFocused = true)}
+              onblur={() => (isInputFocused = false)}
+              class="std-launcher-input"
+              class:hidden={!showInput}
+              placeholder="Search..."
+              autocomplete="off"
+              spellcheck="false"
+              tabindex="0"
+              aria-label="Search commands or signals"
+            />
+          </div>
+          {#if currentViewTitle}
+            <div
+              class="std-launcher-title mt-0"
+              role="heading"
+              aria-level="1"
+              class:opacity-0={showInput}
+              in:fade={{ duration: 500 }}
+              out:fade={{ duration: 500 }}
+            >
+              {currentViewTitle}
+            </div>
+          {/if}
+          {#if pState.view !== "search"}
+            <button
+              class="std-launcher-back-btn smaller ghost icon text-subtle m-0"
+              onclick={() => launcherView("search")}
+              aria-label="Go back"
+              transition:fade={{ duration: 500 }}
+            >
+              <Icon icon="back" />
+            </button>
+          {/if}
+          <button
+            class="std-launcher-close-btn smaller ghost icon mt-0 text-subtle"
+            style="padding:var(--trim) !important;"
+            onclick={launcherClose}
+            aria-label="Close launcher"
+            title="Close"
+          >
+            <Icon icon="close" />
+          </button>
+        </div>
+      </header>
+
+      <!-- Body -->
+      <div
+        bind:this={itemsContainer}
+        class="std-launcher-body rhythm mt-0 {coreWindowSize.height}"
+      >
+        {#if ActiveViewComponent}
+          <div
+            class="std-launcher-view"
+            in:scaleBlurFade={{ duration: 500, easing: quintOut }}
+          >
+            <ActiveViewComponent
+              close={launcherClose}
+              back={() => launcherView("search")}
+              onStartTyping={(val) => {
+                if (val) {
+                  palette.update((s) => ({ ...s, query: val }));
+                }
+                inputEl?.focus();
+              }}
+              {...pState.props}
+              {setSize}
+            />
+          </div>
+        {:else if isSearching}
+          <div class="std-launcher-empty">Searching...</div>
+        {:else if matches.length > 0}
+          <div class="no-rhythm flex-col gap-0 p-0 my-half mx-trim">
+            {#each matches as item, i (item.id || item.trigger || i)}
+              <button
+                class="std-launcher-item ghost"
+                class:active={i === activeIndex}
+                onclickcapture={() => execute(item)}
+                onmouseenter={() => (activeIndex = i)}
+              >
+                <span class="std-launcher-item-icon">
+                  {#if item.icon}
+                    <Icon icon={item.icon} />
+                  {:else}
+                    <Icon icon="note" width="100%" height="100%" />
+                  {/if}
+                </span>
+
+                <div class="std-launcher-item-content flex items-center gap-xs">
+                  <div class="std-launcher-item-title">
+                    {item.title}
+                  </div>
+                  {#if item.desc}
+                    <div class="std-launcher-item-desc sm:hidden">
+                      {item.desc}
+                    </div>
+                  {/if}
+                </div>
+
+                {#if item.username && item.type === "search-result"}
+                  <a
+                    href="/@{item.username}"
+                    class="std-launcher-item-username"
+                    aria-label="View {item.username}'s profile"
+                    onclick={(e) => e.stopPropagation()}
+                  >
+                    @{item.username}
+                  </a>
+                {/if}
+              </button>
+            {/each}
+          </div>
+        {:else if pState.query}
+          <div class="std-launcher-empty">Nothing came up.</div>
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      <footer class="std-launcher-footer mt-0">
+        <div>
+          {#if currentUser && currentUser.isAuthenticated}
+            <div
+              class="std-launcher-user flex items-center gap-xs"
+              role="button"
+              tabindex="0"
+              onclick={() => {
+                if (registryState.views["::account-settings"]) {
+                  launcherView("::account-settings");
+                } else if (registryState.views["::settings"]) {
+                  launcherView("::settings");
+                } else {
+                  launcherView("::my-space");
+                }
+              }}
+              onkeydown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  if (registryState.views["::account-settings"]) {
+                    launcherView("::account-settings");
+                  } else if (registryState.views["::settings"]) {
+                    launcherView("::settings");
+                  } else {
+                    launcherView("::my-space");
+                  }
+                }
+              }}
+              style="cursor: pointer;"
+            >
+              <Avatar
+                src={currentUser.image}
+                name={currentUser.username || currentUser.name}
+                email={currentUser.email}
+                size="18px"
+                border={false}
+              />
+              <span class="smaller muted">
+                {currentUser.name || currentUser.username || currentUser.email}
+              </span>
+            </div>
+          {:else if !shouldHideLogin}
+            <button
+              class="no-decoration smaller ghost text-subtle"
+              onclick={() => launcherView("::login")}
+            >
+              Login
+            </button>
+          {/if}
+          <div class="std-launcher-mode smaller inline hidden">
+            {ActiveViewComponent ? "SYSTEM VIEW" : "COMMAND MODE"}
+          </div>
+        </div>
+
+        <div class="std-launcher-hints sm:hidden hidden">
+          <span><kbd>↑</kbd> <kbd>↓</kbd> navigate</span>
+          <span><kbd>esc</kbd> close</span>
+        </div>
+      </footer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* Overlay */
+  .std-launcher-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    z-index: 5000;
+    margin: 0;
+    padding-top: var(--launcher-top, 15vh);
+    font-family: var(--font-interface, sans-serif);
+    &:has(.std-launcher-body.fill) {
+      padding-top: var(--gap-body);
+    }
+  }
+
+  .std-launcher-backdrop {
+    position: absolute;
+    inset: 0;
+    background: var(--color-glass);
+    backdrop-filter: var(--filter-glass);
+    overflow: hidden;
+  }
+
+  .std-launcher-backdrop::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    transform: translateZ(0);
+    will-change: opacity;
+  }
+
+  /* Main Container */
+  .std-launcher {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    font-family: var(--font-interface);
+    background: var(--color-surface-high);
+    border-radius: var(--radius);
+    border: 0;
+    box-shadow: var(--shadow-raised), var(--shadow-xl);
+    transition: all var(--transition-fast);
+    overflow: hidden;
+
+    * {
+      text-shadow: none !important;
+    }
+
+    &.compact {
+      max-width: 50vw;
+    }
+    &.standard {
+      max-width: 60vw;
+    }
+
+    &.large {
+      max-width: 70vw;
+    }
+    &.fill {
+      max-width: calc(100% - (var(--gap-body) * 2));
+    }
+  }
+
+  /* Header */
+  .std-launcher-header {
+    padding: 0 var(--space-d2);
+    box-shadow: var(--shadow);
+    background-color: var(--color-surface-high);
+    text-shadow: none !important;
+    box-shadow: var(--shadow-raised), var(--shadow-glow);
+    position: relative;
+    z-index: 1;
+    transition: all var(--transition-fast);
+  }
+
+  .std-launcher-header-inner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+    min-height: 2.5em;
+  }
+
+  .std-launcher-back-btn {
+    position: absolute;
+    right: calc(var(--space) * 1.25);
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--color-muted);
+    cursor: pointer;
+    padding: var(--space-d4, 0.25rem);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast, 0.15s ease);
+    z-index: 4;
+  }
+  .std-launcher-back-btn:hover {
+    color: var(--color-foreground);
+    background: var(--color-surface-highest);
+  }
+
+  .std-launcher-search-area {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    position: relative;
+    z-index: 3;
+    /* Ensure it takes full height to capture hover */
+    align-self: stretch;
+  }
+
+  .std-launcher-input.hidden {
+    display: none;
+  }
+
+  .opacity-0 {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-fast);
+  }
+
+  .std-launcher-title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: var(--size-sm);
+    color: var(--color-muted);
+    font-weight: 600;
+    font-family: var(--font-interface, sans-serif);
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 2;
+    transition: opacity var(--transition-fast);
+  }
+
+  .std-launcher-search-area .std-launcher-input {
+    width: 100%;
+  }
+
+  .std-launcher-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none !important;
+    font-weight: 600;
+    font-family: var(--font-interface, sans-serif);
+    font-size: var(--size-sm);
+    color: var(--color-muted);
+    caret-color: var(--color-accent);
+    margin: 0;
+    padding: 0 var(--space) 0 0;
+    box-shadow: none;
+    border-radius: 0 !important;
+    text-shadow: none !important;
+    z-index: 3;
+    min-width: 0;
+    opacity: 1;
+    transition: opacity var(--transition-fast);
+  }
+
+  .std-launcher-close-btn {
+    position: absolute;
+    right: var(--space-d3, 0.5rem);
+    background: transparent;
+    border: none;
+    color: var(--color-muted);
+    cursor: pointer;
+    padding: var(--space-d4, 0.25rem);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast, 0.15s ease);
+    z-index: 4;
+  }
+  .std-launcher-close-btn:hover {
+    color: var(--color-foreground);
+    background: var(--color-surface-highest);
+  }
+
+  /* Body */
+  .std-launcher-body {
+    overflow-y: auto;
+    transition: all var(--transition-fast);
+  }
+
+  .std-launcher-view > :first-child {
+    padding: var(--space);
+  }
+
+  .std-launcher-body.standard {
+    max-height: 30vh;
+  }
+
+  .std-launcher-body.large {
+    max-height: 70vh;
+  }
+
+  .std-launcher-body.fill {
+    max-height: calc(100% - (var(--gap-body) * 2)) !important;
+  }
+
+  /* List Items */
+  .std-launcher-item {
+    display: flex;
+    min-height: var(--space);
+    align-items: center;
+    gap: var(--leading);
+    width: 100%;
+    padding: var(--trim) var(--leading) !important;
+    background: transparent;
+    margin: 0 !important;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+
+    text-align: left;
+    transition: all var(--transition-fast);
+    box-shadow: none;
+  }
+
+  .std-launcher-item-title {
+    color: var(--color-muted);
+    font-size: var(--size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-box-trim: none;
+    text-shadow: none !important;
+  }
+
+  .std-launcher-item-desc {
+    font-size: var(--size-2xs);
+    color: var(--color-subtle);
+    font-weight: 400;
+    text-align: left;
+    text-shadow: none !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media (max-width: 640px) {
+    .std-launcher-item-desc {
+      display: none;
+    }
+  }
+
+  .std-launcher-item:hover,
+  .std-launcher-item.active {
+    background: var(--color-surface-highest);
+    box-shadow: var(--shadow);
+    .std-launcher-item-icon {
+      color: var(--color-accent);
+    }
+    .std-launcher-item-title {
+      color: var(--color-accent);
+    }
+
+    .std-launcher-item-desc {
+      color: var(--color-foreground);
+    }
+  }
+
+  .std-launcher-item:active {
+    box-shadow: var(--shadow-inset);
+    background: var(--color-surface-low);
+  }
+  .std-launcher-item-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .std-launcher-item-username {
+    color: var(--color-accent);
+    font-size: var(--scale-xs);
+    text-decoration: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .std-launcher-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    opacity: 0.5;
+
+    filter: blur(0.2px);
+    transition: all var(--duration-fast) var(--ease-snappy);
+  }
+
+  .std-launcher-empty {
+    padding: var(--space-2) 0;
+    text-align: center;
+    color: var(--color-subtle);
+    font-style: italic;
+    font-size: var(--scale-d2);
+  }
+
+  /* Footer */
+  .std-launcher-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-d2) var(--space-d2);
+    font-size: var(--size-xs);
+    color: var(--color-muted);
+    border-top: var(--border);
+    background-color: var(--color-surface-high);
+
+    box-shadow: var(--shadow-raised);
+  }
+
+  .std-launcher-user {
+    display: flex;
+    align-items: center;
+    gap: var(--space-d4);
+    color: var(--color-foreground-muted);
+    padding: var(--space-d4);
+    border-radius: var(--radius);
+    transition: all var(--transition-fast);
+  }
+
+  .std-launcher-user:hover {
+    background: var(--color-surface-highest);
+    color: var(--color-foreground);
+  }
+
+  .std-launcher-user span {
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .std-launcher-hints {
+    display: flex;
+    gap: 1rem;
+  }
+
+  /* Mobile: Bottom Sheet */
+  @media (max-width: 640px) {
+    .std-launcher-overlay {
+      align-items: flex-start;
+      padding-top: var(--launcher-mobile-top, 1rem);
+    }
+    .std-launcher {
+      margin-inline: 1rem;
+      max-width: 100% !important;
+    }
+  }
+</style>