Refactor frontend state, theming, and modal UX for a more maintainable and accessible workspace

[Copilot]

This refactor tightens the frontend architecture without changing product behavior: state/defaults are centralized, theme loading is cheaper, modal interactions are more predictable, and the UI is more consistent across viewport sizes and assistive technologies. The goal is to reduce incidental complexity while improving accessibility, responsiveness, and long-term maintainability.

• Architecture / state organization

  • Moved scattered runtime defaults into centralized app defaults and state factory helpers.
  • Normalized settings/state initialization so editor behavior, modal behavior, and layout state derive from a single source of truth.
  • Added JS type-check metadata (// @ts-check + jsconfig.json) and explicit typedefs for core app state/settings.

• Performance / loading

  • Replaced eager loading of all CodeMirror themes with a single active theme stylesheet.
  • Theme switching now updates one managed stylesheet instead of preloading every theme upfront.

• Accessibility / modal behavior

  • Added a keyboard skip link into the main workspace.
  • Improved modal focus management:
    • focus moves into opened dialogs
    • focus is restored to the invoking control on close
    • modal focus is constrained while open
  • Upgraded notification semantics for screen readers.
  • Added non-visual unsaved-change text so modified files are not signaled by color alone.
  • Added descriptive help text for the main HTML entry selector.

• Responsive design / UI consistency

  • Standardized sizing tokens for touch targets, stacking order, and dock/panel layout.
  • Replaced rigid panel sizing with responsive clamp(...)-based values.
  • Increased action/button hit areas for better mobile and tablet ergonomics.

• Styling / design tokens

  • Consolidated z-index usage behind named tokens instead of scattered literals.
  • Reduced styling redundancy around modal layering and control sizing.

• Illustrative change

  • Theme loading is now managed through a single default/config path instead of multiple hardcoded <link> tags:

const APP_DEFAULTS = Object.freeze({
    CODEMIRROR_VERSION: '6.65.7',
    CODEMIRROR_THEME_URL(theme) {
        return `https://cdnjs.cloudflare.com/ajax/libs/codemirror/${this.CODEMIRROR_VERSION}/theme/${theme}.min.css`;
    }
});

function createInitialAppState() {
    return {
        previewRefreshDelay: APP_DEFAULTS.PREVIEW_REFRESH_DELAY_MS,
        consoleHeight: APP_DEFAULTS.CONSOLE_INITIAL_HEIGHT_PX,
        settings: createDefaultSettings(),
        // ...
    };
}

• • Main UI: https://github.com/user-attachments/assets/6f3debaf-5cb5-4ee4-991e-5e6c2aee542d
  • Additional UI screenshot: https://github.com/user-attachments/assets/c3436e9b-e495-4efc-9b5d-b947798a849c

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
html-previewer	Ready	Preview, Comment	Mar 8, 2026 2:19pm