@stnd/launcher

The Universal Command Palette engine for the Standard Framework.

@stnd/launcher provides a centralized interface for command execution, navigation, and view management. It adheres to the “Standard” design philosophy: clean, keyboard-centric, and extensible.

Architecture

The Launcher follows a Reactive Core pattern:

• Engine (launcher.ts): Manages state (registry, palette, views), search logic, and public API.
• UI (Launcher.svelte): A “dumb” view component that subscribes to the engine state and renders the appropriate interface.
• Folios: Extend the launcher by registering commands and views via virtual:standard/components.

Usage

Import and mount the <Launcher /> component in your layout:

<script>
  import Launcher from “@stnd/launcher/Launcher.svelte”;
</script>

<!—
  load: Optional allow-list of commands/views to enable.
  If omitted, all registered commands are loaded.
—>
<Launcher load={[“::navigator”, “::search”]} />

Props

Core Concepts

Registry

The registry holds all available Commands and Views.

• Commands: Executable actions (functions).
• Views: Interactive components rendered within the launcher window.

Sizing

The launcher window adapts to its content.

• Standard: Default command palette size.
• Wide: Extended width for rich content.
• Tall: Extended height for browsing.

Views can request size changes dynamically:

// In your view component
let { setSize } = $props();

// Expand window
setSize({ width: “wide”, height: “tall” });

Built-in Views

::navigator (Browser)

The creation of a browser-like experience within the OS.

• Trigger: ::navigator
• Behavior: Starts compact, expands to a full browser window when a URL is loaded.
• Usage:

  <button data-launcher-navigator="https://google.com">Open Google</button>
  

::settings (Complex Layout Example)

A reference implementation of a two-column sidebar layout acting as a “Settings” or “Profile” page. It demonstrates:

• Sidebar navigation.
• Dynamic responsive sizing (starts wide & tall).
• Mock form controls.

Source: packages/launcher/views/SettingsView.svelte

API (launcher.ts)

import {
  initLauncher,
  register,
  launcherView,
  launcherToggle,
  setSize,
} from “@stnd/launcher”;

initLauncher(options)

Initialize the engine with app-specific logic.

register(trigger, meta, handler)

Register a new command or view.

• trigger: Unique ID (e.g., ::my-view).
• meta: Configuration object for the command/view.
  • title (string): Display name.
  • desc (string): Short description.
  • icon (string): Icon identifier.
  • size (object): Window dimensions { width, height }.
  • requireAuth (boolean): If true, only shown to authenticated users.
  • requireGuest (boolean): If true, only shown to unauthenticated users.
  • requireRole (string | string[]): Restricts visibility to users with specific roles (e.g., “admin”).
  • context (string | string[]): Restricts visibility to specific application states (e.g., “editor”).
• handler: Function (action) or Svelte Component (view).

launcherView(view, props)

Switch the active view.

• view: Trigger ID of the view.
• props: Data to pass to the view component.

Data Attributes

The UI listens for clicks on elements with specific data attributes:

• data-launcher-toggle: Toggles the launcher.
• data-launcher-view=“::id”: Opens a specific view.
• data-launcher-navigator=“url”: Opens the navigator with a URL.
• data-launcher-prompt=“text”: Opens launcher with pre-filled text.