Symptom
The new tweakcn import modal (app/src/settings_view/import_theme_modal.rs) is sluggish and visually broken when a user pastes a real tweakcn export.
Visible in this screenshot during smoke: the paste box renders the CSS but the modal extends well beyond the viewport and typing/scrolling lags.
A real tweakcn export is ~80–100 lines, including @import "tailwindcss";, @custom-variant dark, font/radius/shadow vars, chart colors, sidebar primary/accent/border/ring — far more than the ~40-line synthetic fixture (crates/integration/tests/data/tweakcn_sample.css) the modal was sized against.
Root causes
1. No debounce on parse. handle_css_editor_event in app/src/settings_view/import_theme_modal.rs invokes on_css_changed on every EditorEvent::Edited:
```rust
fn handle_css_editor_event(&mut self, event: &EditorEvent, ctx: &mut ViewContext) {
if let EditorEvent::Edited(_) = event {
let text = self.css_editor.read(ctx, |editor, app| editor.buffer_text(app));
self.on_css_changed(text, ctx); // ← runs parse_blocks() on every keystroke / paste byte
}
}
```
For a paste, this fires once with the full content — but on subsequent edits (e.g., the user adjusting the slug, then editing the CSS again), every character triggers a full re-parse + UI notify.
2. Layout overflow. The modal's outer container doesn't appear to constrain the CSS editor's height or wrap it in a scroll view. Long content extends the modal past viewport bounds (visible in the screenshot — modal stretches to the bottom of the screen with no scroll affordance).
Suggested fix
- Debounce parsing. Add a ~200 ms timer (matching the spec at
docs/superpowers/specs/2026-05-20-theme-customization-tweakcn-design.md:221). Either schedule via ctx (warpui has a timer pattern) or use the existing debounce helper if there is one.
- Constrain the CSS editor's height to e.g. 12–16 lines and wrap in a vertical scroll view. The single-line name input is fine as-is.
- Reduce per-render cost in
render() — currently every parse result rebuilds the preview row. If preview generation is heavy, cache it.
Related
Branch
Modal landed on castcodes/theme-tweakcn-impl commit d50ac78d.
Symptom
The new tweakcn import modal (
app/src/settings_view/import_theme_modal.rs) is sluggish and visually broken when a user pastes a real tweakcn export.Visible in this screenshot during smoke: the paste box renders the CSS but the modal extends well beyond the viewport and typing/scrolling lags.
A real tweakcn export is ~80–100 lines, including
@import "tailwindcss";,@custom-variant dark, font/radius/shadow vars, chart colors, sidebar primary/accent/border/ring — far more than the ~40-line synthetic fixture (crates/integration/tests/data/tweakcn_sample.css) the modal was sized against.Root causes
1. No debounce on parse.
handle_css_editor_eventinapp/src/settings_view/import_theme_modal.rsinvokeson_css_changedon everyEditorEvent::Edited:```rust
fn handle_css_editor_event(&mut self, event: &EditorEvent, ctx: &mut ViewContext) {
if let EditorEvent::Edited(_) = event {
let text = self.css_editor.read(ctx, |editor, app| editor.buffer_text(app));
self.on_css_changed(text, ctx); // ← runs parse_blocks() on every keystroke / paste byte
}
}
```
For a paste, this fires once with the full content — but on subsequent edits (e.g., the user adjusting the slug, then editing the CSS again), every character triggers a full re-parse + UI notify.
2. Layout overflow. The modal's outer container doesn't appear to constrain the CSS editor's height or wrap it in a scroll view. Long content extends the modal past viewport bounds (visible in the screenshot — modal stretches to the bottom of the screen with no scroll affordance).
Suggested fix
docs/superpowers/specs/2026-05-20-theme-customization-tweakcn-design.md:221). Either schedule viactx(warpui has a timer pattern) or use the existing debounce helper if there is one.render()— currently every parse result rebuilds the preview row. If preview generation is heavy, cache it.Related
./script/runbuilds (missinglocal_fs) #90 —local_fsdefault features bug; both surface during the same smoke flow.docs/superpowers/specs/2026-05-20-theme-customization-tweakcn-design.md:215-234explicitly called out the 200ms debounce; it didn't make it into the implementation.Branch
Modal landed on
castcodes/theme-tweakcn-implcommitd50ac78d.