Skip to content

Drag-drop and [select|insert] menu

Choose a tag to compare

View all tags
@justinbmeyer justinbmeyer released this 06 May 14:22
· 28 commits to main since this release
v0.17.0
0f2b307
image

Summary

This release is a large overhaul of the UX focused on:

  • moving to drag-drop centered UX. Not only can components be dragged, so can in-page elements themselves.
  • moving to "always on" selecting or inserting. Even after selecting an element, you can immediately select another one. The goal is to make it feel quick to make multiple edits across elements, without having to click a "select" button first every time

There were many other features:

  • Ability to copy-paste (CMD+d then CMD+v) or duplicate a component (CMD+d)
  • Light mode (see image below)
  • Elements panel for some basic layout capabilities and wire-framing (more coming soon)
image

Details

This release updates several documentation files to clarify and improve the setup, debugging, and mode button behavior for the development environment and user interface. The most significant changes include corrections to color naming conventions, expanded and clarified instructions for development and debugging, and substantial enhancements to the documentation around UI mode button states and workflows.

Documentation and Workflow Improvements:

  • Updated the .github/skills/mode-button-behavior/SKILL.md file to provide detailed tables and explanations for persistent selection and insertion modes, including three-way toggle behaviors for Select and Insert buttons, and clarified the color/state logic for overlay toolbar buttons. Added new flows (e.g., Paste workflow), implementation notes, and expanded Escape key behavior for all relevant UI states. [1] [2] [3]
  • Enhanced the user flow documentation for placing and replacing components, including step-by-step reasoning for each UI state transition and button color, and clarified the rapid placement workflow for Insert mode. [1] [2]

Development Environment Instructions:

  • Simplified and consolidated port-killing commands and watcher checks in .claude/agents/launch-react-vite-storyV10-environment.md, clarified sequential background task launching, and improved reporting requirements for development setup.

Debugging and Testing Guidance:

  • Expanded .github/skills/debugging/SKILL.md with instructions to always start with the Test App, provided Playwright code examples for interacting with shadow DOM elements, and emphasized the need to verify clean state and error-free UI before proceeding.

Naming Consistency:

  • Renamed all bv-* color variables to bit-* in .github/copilot-instructions.md for consistency across the codebase and documentation.

Full Changelog: v0.16.3...v0.17.0

Assets 2
Loading