feat: html-friendly distribution bundle#123
Open
tuanddd wants to merge 9 commits intobenjitaylor:mainfrom
Open
feat: html-friendly distribution bundle#123tuanddd wants to merge 9 commits intobenjitaylor:mainfrom
tuanddd wants to merge 9 commits intobenjitaylor:mainfrom
Conversation
Canvas overlay for drawing on the page with gesture classification (box, circle, underline, arrow). Click strokes to create linked annotations. Includes undo (cmd+z), hover highlighting, and drawing descriptions in copy output.
Shake the popup if you try to draw while it's open. Replace stroke width change on hover with a soft translucent glow behind the stroke.
- Drawing glow animates in/out via rAF lerp (0→0.25 alpha) instead of snapping. Works for both stroke hover and marker hover directions. - Canvas hidden when marker visibility is toggled off (H key / eye button), unless actively in draw mode.
This reverts commit fbd9b593df59ae67b8a4440743d2d34c385442f2.
Glow highlight lerps via rAF (separate effect, doesn't touch resize/ scroll). Canvas hidden when marker visibility toggled off.
Single-pass rendering with canvas shadowBlur on hovered stroke instead of the two-pass wide translucent stroke. glowIntensity 0-1 controls blur radius (0-12px), animated in/out via rAF lerp.
… fade - Replace shadowBlur glow with globalAlpha dim (non-hovered strokes at 30%) - Add tooltip exit animation (100ms fade out on unhover) - Move canvas outside overlay so it fades on toolbar close - Fix marker exit timing: compute timeout from stagger delay + animation - Fix marker enter timing: same, prevents class removal mid-animation - Skip stagger delay for individually added markers (only batch entrance) - Remove scale(1.3) on markers when linked drawing is hovered - Add drawCanvasFading state for deletion fade - Use visibility:hidden for hit-test hiding (canvas uses opacity now)
- Revert canvas from pointer events back to mouse events (fixes strokes not registering) - Add unique IDs to draw strokes and strokeId on annotations (fixes wrong strokes being deleted when indices shift) - Delete/cancel now find strokes by stable ID, not positional index - Per-stroke fade on delete uses refs for fresh data, no stale closures - Canvas visibility uses shouldShowMarkers only (hiding markers while in draw mode now works, also exits draw mode) - Remove touch-action, drawModeActive CSS, pointer capture
|
@tuanddd is attempting to deploy a commit to the Benji Taylor's Projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a browser entrypoint for
agentationso it can be used directly from a script tag, while keeping the existing React component API intact.This PR introduces:
agentation/browserexport with an imperative mount APIdist/agentation.browser.min.jswindow.Agentation.mount()API for plain HTML pagesWhat Changed
New browser entrypoint
Added browser.tsx, which:
PageFeedbackToolbarCSScomponent into a singleton browser rootmountAgentation(props?)update(nextProps?)destroy()window.Agentation = { mount, version }in browser environmentsThe toolbar UI and behavior still come from the existing React component implementation.
New browser bundle output
Updated tsup.config.ts to build:
browsermodule builddist/agentation.browser.min.jsThe browser bundle includes the runtime it needs and can be loaded directly in a plain HTML page.
New package export
Updated package.json to add:
This is exposed through the new
./browsersubpath export.Browser runtime shim
Added process-shim.ts so the built browser bundle can run safely in environments where
processis not defined.Docs and examples
Updated:
These now document:
import { Agentation } from "agentation"window.Agentation.mount()import { mountAgentation } from "agentation/browser"Also updated example-vanilla-js.html to load the built browser bundle locally and mount it on a plain HTML page.
Behavior
The main React entrypoint remains unchanged:
import { Agentation } from "agentation"still works as beforeThe new browser entrypoint adds:
update()destroy()Testing
Validated locally:
pnpm exec vitest run src/browser.test.tsxpnpm buildAdded tests in browser.test.tsx for:
E2E test with an actual vanilla HTML has not been performed yet, if this PR gains some traction I'll find some time to do it