@stnd/client

Client-side utilities and enhancements for Standard applications.

ELI5

The stuff that only makes sense once you’re in a browser: keyboard shortcuts (Cmd+K), swipe gestures, “copy to clipboard”, detecting a Kindle/e-ink screen. Each piece is its own file you import directly by path — there’s no single @stnd/client bundle to pull in, just @stnd/client/keyboard, @stnd/client/gestures, etc.

Use it:

import { initKeyboard, registerShortcut } from "@stnd/client/keyboard";
initKeyboard({});
registerShortcut({ key: "k", meta: true, action: () => openLauncher(), id: "toggle-launcher" });

Overview

@stnd/client is a collection of browser-specific modules designed to improve interactivity, gestures, keyboard shortcuts, e-ink rendering, and application state. These modules are lightweight and framework-agnostic, though they integrate perfectly with Astro and Svelte views.

Key Modules & Usage

Keyboard Shortcuts (/keyboard)

Unified keyboard shortcut management. Handles keybindings, prevents collisions, and offers automatic Type-to-Search.

• registerShortcut({ key, meta, shift, action, id }): Registers a new global key interceptor. Automatically resolves Cmd (Mac) versus Ctrl (Windows/Linux).
• initKeyboard({ onTypeSearch }): Bootstraps the listener and activates Type-to-Search.

import { initKeyboard, registerShortcut } from "@stnd/client/keyboard";

// 1. Initialize
initKeyboard({
  onTypeSearch: (char) => {
    console.log("User typed alphanumeric character outside inputs:", char);
  }
});

// 2. Register a shortcut
const cleanup = registerShortcut({
  key: "k",
  meta: true, // Cmd+K on Mac, Ctrl+K on Windows
  action: (e) => {
    e.preventDefault();
    console.log("Toggle command palette!");
  },
  id: "toggle-launcher" // Raises a console error on duplicate registration
});

// 3. Remove when views unmount
cleanup();

Touch Gestures (/gestures)

Enables fluid touch interactions on mobile browsers.

• initGestures({ onSwipeBack, onDoubleClick }): Listen for swipes and double-taps on the document container.

import { initGestures } from "@stnd/client/gestures";

const cleanup = initGestures({
  onSwipeBack: () => {
    console.log("User swiped from left to right; navigating back.");
    history.back();
  },
  onDoubleClick: (e) => {
    console.log("Double clicked/tapped screen coordinates:", e.clientX, e.clientY);
  }
});

Clipboard Copy (/copy-to-clipboard)

Safe browser copying handling fallback options for older mobile platforms.

• copyToClipboard(text): Copies string to local clipboard. Returns a promise.

import { copyToClipboard } from "@stnd/client/copy-to-clipboard";

copyToClipboard("Link copied to garden!")
  .then(() => console.log("Copied!"))
  .catch((err) => console.error("Clipboard write blocked", err));

E-Ink Display Adaptation (/eink)

Detects slow-refresh or monochrome E-Ink screens (Kindle, Kobo, BOOX, or slow media updates) and toggles specific high-contrast CSS rules.

• initEInk(): Detects screen capability and automatically toggles standard-eink class on document.documentElement if detected or if override URL param ?eink=true is present.
• isEInkModeActive(): Check if e-ink styling is currently loaded.

import { initEInk } from "@stnd/client/eink";

// Run on page load
initEInk();

State — moved out of this package

State management no longer lives in @stnd/client. Toasts are a Gold Standard module, and shared reactive state goes through the runtime store:

// Toast notifications (Gold Standard module, loaded automatically)
import { toast } from "@stnd/modules/toast/toast.js";
toast("Note published successfully!", "success");

// Shared state — provide/inject via @stnd/store
import { provide, inject } from "@stnd/store";

Notes / Observations

(jot down anything noticed here — quirks, gotchas, ideas)

Todo

Part of the Road to Public Release (Phase 1). Rolls up into the project board.

• [ ] Clean the export map — package.json declares subpaths like
  ./modules/*/client that don’t exist on disk. Prune the map to what ships.