@stnd/lab 0.2.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Lab.svelte +1809 -0
- package/README.md +78 -0
- package/{lab.js → old.standard.lab.js} +342 -125
- package/package.json +19 -3
- package/CHANGELOG.md +0 -7
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "@stnd/lab"
|
|
3
|
+
aliases: []
|
|
4
|
+
created: 2026-07-05 07:41
|
|
5
|
+
modified: 2026-09-16T17:28:43.239Z
|
|
6
|
+
last_audited: 2026-07-14
|
|
7
|
+
audit_interval_days: 90
|
|
8
|
+
next_audit: 2026-10-12
|
|
9
|
+
audit_priority: 3
|
|
10
|
+
maturity: sprout
|
|
11
|
+
mode: read
|
|
12
|
+
publish: true
|
|
13
|
+
status: active
|
|
14
|
+
tags:
|
|
15
|
+
- package
|
|
16
|
+
- stnd
|
|
17
|
+
theme: kernel
|
|
18
|
+
type: package
|
|
19
|
+
visibility: public
|
|
20
|
+
garden-url: https://standard.garden/@francis/readme
|
|
21
|
+
garden-short: https://stnd.gd/wAgx4e
|
|
22
|
+
permalink: readme
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# @[stnd](../README)/lab
|
|
26
|
+
|
|
27
|
+
Development tools and inspectors for the Standard Ecosystem.
|
|
28
|
+
|
|
29
|
+
## ELI5
|
|
30
|
+
|
|
31
|
+
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.
|
|
32
|
+
|
|
33
|
+
**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.
|
|
34
|
+
|
|
35
|
+
## Overview
|
|
36
|
+
|
|
37
|
+
`@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.
|
|
38
|
+
|
|
39
|
+
## Key Components
|
|
40
|
+
|
|
41
|
+
- `Lab.svelte`: A comprehensive on-page inspector for CSS tokens, themes, and layouts.
|
|
42
|
+
|
|
43
|
+
## Features
|
|
44
|
+
|
|
45
|
+
- **Token Inspector**: View and edit all active CSS custom properties in real-time.
|
|
46
|
+
- **Theme Switcher**: Instantly preview different themes from `@stnd/themes`.
|
|
47
|
+
- **Responsive Previews**: Toggle various viewport sizes and orientations.
|
|
48
|
+
- **Grid & Rhythm Overlays**: Visualize the baseline grid and golden ratio layout blocks.
|
|
49
|
+
- **Color Explorer**: Inspect OKLCH color palettes and contrast ratios.
|
|
50
|
+
|
|
51
|
+
## Usage
|
|
52
|
+
|
|
53
|
+
The `Lab` component is typically injected automatically by the `@stnd/core` integration when in development mode. To include it manually:
|
|
54
|
+
|
|
55
|
+
```svelte
|
|
56
|
+
<script>
|
|
57
|
+
import { Lab } from "@stnd/lab";
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
{#if import.meta.env.DEV}
|
|
61
|
+
<Lab />
|
|
62
|
+
{/if}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Shortcuts
|
|
66
|
+
- `Cmd/Ctrl + S`: Toggle the Lab panel open/dormant (overrides the browser’s save dialog).
|
|
67
|
+
- `Cmd/Ctrl + D`: Same toggle, alternate binding.
|
|
68
|
+
- `Shift + Cmd/Ctrl + D`: Toggle debug overlays (`stnd-debug` class + on-page debug info), independent of the panel itself.
|
|
69
|
+
|
|
70
|
+
## Notes / Observations
|
|
71
|
+
|
|
72
|
+
- `old.standard.lab.js` (1,545 lines) sits in this package unreferenced by
|
|
73
|
+
anything — looks like the pre-Svelte-5 predecessor to `Lab.svelte`.
|
|
74
|
+
|
|
75
|
+
## Todo
|
|
76
|
+
|
|
77
|
+
- [ ] **Confirm `old.standard.lab.js` is dead and delete it** — nothing imports [priority:: 3] [token_scale:: 3] [created:: 2026-07-14] [area:: framework]
|
|
78
|
+
it; grep found zero references anywhere in the repo.
|