feat(decnet_web/theme-lab): scaffold dev-gated /theme-lab route

Adds VITE_DECNET_DEVELOPER build-time gate: when unset, the
isDeveloperMode() helper collapses to a constant false and Vite
tree-shakes both the lazy import and the conditional <Route> out
of the prod bundle.

ThemeLab is currently a header stub; subsequent tasks fill it
with the design-system primitive zoo plus a Dark/Light toggle
for live token tuning. Route is intentionally absent from
ROUTE_LABELS / sidebar — direct URL only.
This commit is contained in:
2026-05-09 03:18:34 -04:00
parent 65ddaaa681
commit 846a50dbbf
6 changed files with 112 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
/* ThemeLab — lab-page-specific layout only.
* Colours come from index.css tokens; no hex literals here. */
.theme-lab {
padding: var(--space-8);
color: var(--text-color);
font-family: var(--font-mono);
}
.theme-lab .page-header h1 {
font-size: var(--fs-page);
letter-spacing: var(--ls-title);
color: var(--accent-color);
margin-bottom: var(--space-2);
}
.theme-lab-subtitle {
font-size: var(--fs-mini);
letter-spacing: var(--ls-label);
opacity: 0.6;
}

View File

@@ -0,0 +1,23 @@
import React from 'react';
import './ThemeLab.css';
/* Kitchen-sink theme lab.
*
* Dev-only page (gated upstream in App.tsx via isDeveloperMode()).
* Subsequent tasks fill this in with every design-system primitive
* and a Dark/Light toggle. For now: header stub so the route + gate
* can land in isolation. */
const ThemeLab: React.FC = () => {
return (
<div className="theme-lab" data-testid="theme-lab">
<header className="page-header">
<h1>THEME LAB</h1>
<p className="theme-lab-subtitle">
dev only · primitive zoo for theme regression
</p>
</header>
</div>
);
};
export default ThemeLab;

View File

@@ -0,0 +1,12 @@
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import ThemeLab from '../ThemeLab';
describe('ThemeLab', () => {
it('renders the page header stub', () => {
render(<ThemeLab />);
expect(screen.getByTestId('theme-lab')).toBeInTheDocument();
expect(screen.getByText(/THEME LAB/i)).toBeInTheDocument();
expect(screen.getByText(/dev only/i)).toBeInTheDocument();
});
});