Skip to content

modernize UI for Tailwind v4 and optimize build workflows - #19

Merged
xellanix merged 5 commits into
mainfrom
vite-bun
Apr 20, 2026
Merged

xellanix merged 5 commits into
mainfrom
vite-bun

Conversation

@xellanix

Copy link
Copy Markdown
Owner

Overview

This PR migrates the styling engine to Tailwind CSS v4, introduces tactile UI improvements for interactive elements, and optimizes the build pipeline with new development flags and data fallbacks.

Key Changes

🚀 Features

  • Improve button interactivity and accessibility
    • Introduces tactile "pressed" feedback and standardizes focus-visible and invalid ring styles to improve the overall user experience and accessibility.
  • Add --no-release flag to server compilation
    • Integrates a new command-line argument to bypass the resource-intensive output packaging step, enabling significantly faster development and testing iterations.

🧹 Chore/Refactoring

  • Modernize utility classes for Tailwind CSS v4
    • Refactors the styling architecture to align with the v4 engine, replacing hardcoded dimensions with scale-aware utilities and updating syntax conventions for modifiers and aspect ratios.
  • Automate dependency versioning in About dialog
    • Transitions the version display from manual strings to dynamic property lookups from the project manifest, ensuring the credits list stays in sync with installed packages.
  • Implement fallback for projection data
    • Adds a custom Vite plugin to provide a safe virtual module when generated projection data is missing, preventing build failures in clean environments.

Version Bump

0.1.0

Introduce a `--no-release` command-line argument to the server build
script to optimize the development workflow. By providing this
flag, the build process bypasses the resource-intensive `packOutputs`
step, allowing for faster iteration during testing or beta builds.

- Integrate `parseArgs` in `exe.ts` to handle the new boolean flag from
  the command line.
- Update the build logic to conditionally execute output packaging
  based on the presence of the flag.
- Define `build:beta` and `build:server:beta` scripts in `package.json`
  to provide a standardized entry point for non-release builds.
Transition the versioning logic in the About dialog from hardcoded
strings to dynamic lookups from the project manifest. This ensures the
UI remains a single source of truth for installed packages, reducing
manual maintenance and preventing stale information in the credits list.

- Import dependencies and devDependencies directly from package.json.
- Replace static version strings with dynamic property lookups for core
  libraries like React, Motion, and TypeScript.
- Expand the dependency list to include Bun, Vite, jsdom, and
  Cloudflare Tunnel client.
- Update Tailwind CSS utility classes to use the v4-standard suffix
  modifier (e.g., no-underline!) for consistency.
- Bump @types/bun to v1.3.12 to match updated project requirements.
Refactor UI components to align with the Tailwind CSS v4 engine
specifications. This migration standardizes the syntax for important
modifiers and leverages native framework improvements for better
maintainability and performance.

- Relocate the `!` important modifier from the prefix to the suffix of
  utility classes (e.g., `px-2!` instead of `!px-2`) to follow the new
  v4 convention.
- Convert arbitrary aspect ratio values to native fractional shorthands
  (e.g., `aspect-131/28`).
- Replace hardcoded pixel dimensions with scale-aware utility classes
  (e.g., `h-270` and `w-480` for 1080p proportions).
- Simplify z-index and spacing utilities by removing unnecessary
  bracket notation where standard scales now apply.
- Add linting overrides for exported components within the settings
  registry to resolve React Refresh warnings.
Enhance the button component's user experience by adding tactile
feedback and standardizing focus/validation indicators.

- Prevent accidental text selection during rapid interactions to ensure
  the UI feels more like a native application.
- Introduce a subtle 'pressed' effect (1px shift) on click to provide
  immediate visual confirmation of user input.
- Exclude buttons with popups from the active translation to avoid
  visual misalignment with appearing overlays or menus.
- Standardize `focus-visible` and `invalid` ring widths to consistent
  theme values for improved accessibility and visual polish.
Implement a Vite plugin to provide a safe default when the temporary
projection data file is missing. This ensures the application can
still build and run even if the slide generation process hasn't been
triggered yet.

- Detect missing '@/data/__temp/slides' module during resolution.
- Redirect failed imports to a virtual module exporting an empty
  projections array.
- Add type declarations for the virtual module to support TypeScript
  integration.
- Prevent compilation errors in clean environments where generated
  assets do not yet exist.
@xellanix
xellanix merged commit 3cbae57 into main Apr 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant