skema-core 0.1.2 → 2.1.0

package/README.md

@@ -13,12 +13,12 @@
 
 ## Overview
 
-Skema is a React component that provides a tldraw-powered drawing overlay for annotating and manipulating DOM elements visually. It sits on top of your localhost website, allowing developers to annotate, draw, and select DOM elements directly on the live page. Combined with AI, your annotations become code changes.
+Skema is an npm package that provides a tldraw-powered drawing overlay for annotating and manipulating DOM elements visually. It sits on top of your localhost website, allowing developers to annotate, draw, and select DOM elements directly on the live page. Combined with AI, your annotations become code changes.
 
 ## Features
 
 - **Drawing Overlay**: Use tldraw's powerful drawing tools directly on your website
-- **DOM Picker**: Select any element on the page to capture its selector, bounding box, and context
+- **DOM Selection**: Double-click on the canvas to select the element under the cursor (or use brush/lasso selection)
 - **AI Code Generation**: Annotations are sent to AI (Gemini or Claude) which edits your code
 - **Undo/Revert**: Git-based snapshots let you revert changes per-annotation
 - **Non-Invasive**: Transparent overlay that doesn't interfere with your page when not in use
@@ -112,7 +112,15 @@ npx skema-core help                 # Show help
 ## Keyboard Shortcuts
 
 - **⌘⇧E** (Cmd+Shift+E / Ctrl+Shift+E): Toggle Skema overlay
-- **P**: Activate DOM Picker tool
+- **s**: Select tool
+- **d**: Draw tool
+- **l**: Lasso select
+- **e**: Eraser
+- **r**: Rectangle (shapes)
+- **o**: Ellipse (shapes)
+- **Escape**: Close popup or shape picker
+
+To select a DOM element for annotation, double-click on the canvas over that element.
 
 ## Props