title: "@stnd/lab" aliases: [] created: 2026-07-05 07:41 modified: 2026-07-05 19:22 last_audited: 2026-07-14 audit_interval_days: 90 next_audit: 2026-10-12 audit_priority: 3 maturity: sprout mode: read publish: false status: active tags:

• package
• stnd theme: kernel type: package visibility: private

@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 [priority:: 3] [token_scale:: 3] [created:: 2026-07-14] [area:: framework] it; grep found zero references anywhere in the repo.