Refactor: Remove SRCL UI and replace with local Tailwind-based primitives#44
Refactor: Remove SRCL UI and replace with local Tailwind-based primitives#44
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b3f2368661
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| .font-use-anonymous-pro, .font-use-atkinson-hyperlegible-mono, | ||
| .font-use-berkeley-mono, .font-use-fira-code, .font-use-iosevka-term, | ||
| .font-use-monaspace-argon, .font-use-monaspace-krypton, | ||
| .font-use-monaspace-neon, .font-use-monaspace-radon, | ||
| .font-use-monaspace-xenon, .font-use-serious-shanns, |
There was a problem hiding this comment.
This rule groups every font-use-* class under the same --font-family-mono value, so changing the Font setting no longer changes typography. Before removing SRCL, these classes resolved to different font families; with this consolidation, every option renders identically and the font selector becomes effectively a no-op for users.
Useful? React with 👍 / 👎.
Copies 17 font files from node_modules/srcl into client/assets/fonts so the font selector actually resolves to distinct faces without relying on the SRCL package being installed. Addresses Codex review on #44 about font-use classes collapsing to a single --font-family-mono value.
- Add @font-face declarations pointing at vendored font files and map each .font-use-* class to its specific family. - Replace the two grouped theme selectors with 14 distinct palettes extracted from SRCL (Aperture, BSOD, Highlight, OS 9, W95, Westworld, Holo, NERV, Midnight, Neon, Phosphor, Sulfur, LCARS, Outrun) using concrete rgba values. - Restore compact menu item layouts to match live: MenuSelect renders "Label: Value" on one line, MenuKnob hides the native range input and shows a thin progress bar, MenuToggle uses a visually-hidden checkbox with a "×" glyph. Selected row uses --theme-focused-foreground-subdued for its background fill (SRCL convention). - Add vertical spacing between models-menu entries. - Story list uses a border-only selection (no glow).
The pre-hydration script in index.html adds the default theme class to both <html> and <body> to avoid a flash. After React mounted, applyThemeClass was only updating <html>, so body's original theme class stayed and its scoped CSS vars overrode html's for every descendant. That made the map, settings, and stories screens render with the initial theme even after the user picked a new one. Remove and reapply the theme (and font) class on both elements so the selection propagates to everything inside body.
Adds @playwright/test dev dependency and scripts under scripts/parity/ that capture the live site at loompad.lol side-by-side with the local dev server across screens, themes, and keyboard-driven flows. Output directory (shots/) is gitignored. - capture.ts: loom, map, stories, settings, edit, models, model-editor at desktop and mobile viewports - capture-themes.ts: settings rendered in each of the 14 themes - verify-theme-switch.ts: proves theme change propagates to map after closing settings - verify-generation.ts: smoke test that triggers /api/generate end to end with a real OpenRouter key
SFMonoSquare-Regular.woff was 6.3 MB — a single font accounting for nearly half the PWA precache. Removed from vendor dir and picker. Added a short README noting provenance and OFL attribution for the subset of faces that need it.
- Theme + font class now live on <html> only. Pre-hydration reads the modern loompad-theme-preferences key (falling back through the legacy key and system preference) and seeds the class. ThemeToggle's applyThemeClass writes to <html> only and strips any stale class from <body> from older pre-hydration scripts. Removes the dual-writer scenario that caused the map/settings theme-switch bug. - Knob slider is now a 2px rule built from currentColor at 25%/100% via color-mix, so it inverts automatically with the row's text color when selected. Dropped the opacity-juggling and state-specific overrides. - Removed the --theme-text-muted variable and its 14 per-theme declarations — nothing reads it. - Deduped .menu-item--inline rule and consolidated .menu-item--knob into a single declaration; added a comment documenting the two selection conventions (filled row for settings/models, border-only for stories).
The manual .text-theme-* / .bg-theme-* / .border-theme-* rules at the bottom of terminal.css duplicated what Tailwind v4 already generates from the @theme color tokens at the top. Removed them; verified all reachable screens render identically via scripts/parity/capture.ts.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
loompad/client/styles/terminal.css
Lines 123 to 126 in 6a4dd42
Preserve theme text utility compatibility
After removing srcl/global.css, the local @theme block now defines theme-bg* utilities, but the app still uses text-theme-background and text-theme-background-modal-footer (in client/interface/Interface.tsx) and those classes are no longer defined anywhere in the repo. That means these spans silently fall back to inherited color, changing intended contrast in the story view. Add compatibility aliases or switch usages to the generated text-theme-bg* utility names.
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| .menu-knob__slider { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; |
There was a problem hiding this comment.
The refactor hides .menu-knob__slider, which is the only actual <input type="range"> in MenuKnob, so Temperature/Auto Mode can no longer be adjusted via mouse/touch drag and become keyboard/gamepad-only. In the previous implementation the SRCL slider was interactive; now the visible bar is decorative and has no pointer handlers. Please keep a reachable interactive control (or attach pointer interaction to the bar) so non-keyboard input still works.
Useful? React with 👍 / 👎.
Ship Iosevka (standard sans) and Iosevka Slab as the entire font palette. Keep Highlight, BSOD, Aperture (light) and Phosphor, NERV, Outrun (dark) as the entire theme palette. Removes 17 vendored font files and their @font-face / .font-use-* rules, and 8 theme blocks from terminal.css. THEME_PRESETS and FONT_OPTIONS in ThemeToggle.tsx reduced to the six themes and two fonts respectively. Pre-hydration script in index.html updated to match the simplified font-class mapping. :root fallback stack now names "Iosevka" first. Picker goes from 16 fonts × 14 themes = 224 combinations to 2 × 6 = 12. PWA precache drops from ~14 MB to ~3.3 MB. Every surviving theme is designed to work against every surviving font without pairing rules. Direction set by the user: keep things restrained, let each theme be a recognizable mood, and let fonts be orthogonal to theme choice rather than pairing them in packages.
Playwright scripts used to shop and QA the design space: - tour-srcl.ts: tile sacred.computer + monaspace.githubnext.com for reference - tour-fonts.ts: capture specimens for candidate fonts (Iosevka, Monaspace, Commit, Maple, Departure, Victor, Workbench, IBM Plex, JetBrains, 0xProto, Atkinson, Recursive, etc.) - tour-loompad.ts: render the live loompad.lol across its full themes × fonts matrix - tour-installed-fonts.ts: render each installed font inside the app - render-prose.ts: render a real prose passage in every font at body size - qa-reduced-set.ts: verify the reduced 2 fonts × 6 themes × 3 screens combinatoric renders without regressions
1 participant
Motivation
Description
client/App.tsxandclient/main.tsxusing local styles (client/styles/terminal.css).ActionListItem,Checkbox,RowSpaceBetween, andNumberRangeSliderusages to local implementations inclient/interface/components/MenuSelect.tsx,MenuKnob.tsx, andMenuToggle.tsx, and updatedSettingsMenu.tsxto use the new primitives while keeping.menu-item/selectedsemantics.onHandleThemeChangefunction atclient/utils/theme.tsand added minimal in-repotheme-*andfont-use-*CSS variable definitions inclient/styles/terminal.cssto preserve the existing theme and font-class behavior.optimizeDepsexclusions inconfig/vite.config.ts,server/vite.ts, andconfig/tsconfig.json, and removed thesrcldependency frompackage.json.Testing
bun run lint, which completed successfully with no errors.bun test, which passed all tests (37 passing, 0 failing).bun run build, which produced successful server and client production bundles.Codex Task