@stnd/lab

Development tools and inspectors for the Standard Ecosystem.

ELI5

Press Cmd+S (or Ctrl+S) on any Standard site in dev mode and a panel slides open showing every CSS token in play — colors, spacing, type scale — editable live. It’s how you tune a theme by feel instead of guessing values and rebuilding.

It’s already on — @stnd/lab is a Gold Standard module, so any @stnd/core app gets it automatically in dev mode. Nothing to install.

Overview

@stnd/lab provides a set of tools designed to help developers inspect, debug, and refine their applications during development. Its primary component is the Lab inspector, which allows for real-time adjustments of design tokens and themes.

Key Components

Lab.svelte: A comprehensive on-page inspector for CSS tokens, themes, and layouts.

Features

Token Inspector: View and edit all active CSS custom properties in real-time.
Theme Switcher: Instantly preview different themes from @stnd/themes.
Responsive Previews: Toggle various viewport sizes and orientations.
Grid & Rhythm Overlays: Visualize the baseline grid and golden ratio layout blocks.
Color Explorer: Inspect OKLCH color palettes and contrast ratios.

Usage

The Lab component is typically injected automatically by the @stnd/core integration when in development mode. To include it manually:

<script>
  import { Lab } from "@stnd/lab";
</script>

{#if import.meta.env.DEV}
  <Lab />
{/if}

Shortcuts

Cmd/Ctrl + S: Toggle the Lab panel open/dormant (overrides the browser’s save dialog).
Cmd/Ctrl + D: Same toggle, alternate binding.
Shift + Cmd/Ctrl + D: Toggle debug overlays (stnd-debug class + on-page debug info), independent of the panel itself.

Notes / Observations

old.standard.lab.js (1,545 lines) sits in this package unreferenced by
anything — looks like the pre-Svelte-5 predecessor to Lab.svelte.

Todo

[ ] Confirm old.standard.lab.js is dead and delete it — nothing imports
it; grep found zero references anywhere in the repo.