[JDeffner]

Two lines of HTML next to a form now give the user the whole panel: a text box, an optional microphone, a fill button, live status, a summary of what was filled and what is still missing, undo, and an optional review step. Plain DOM in a shadow root, no dependencies, no CSS injected into the page.

• lib/ui/: AIFormFillElement, DEFAULT_STRINGS, defineFormFillElement, the shadow stylesheet, and the new ai-form-fill/ui entry (dist/ui.js, .cjs, .d.ts).
• lib/browser.ts plus vite.browser.config.js: dist/ai-form-fill.browser.js, one minified IIFE with core, voice and ui that registers the element on load and exposes the API on the AIFormFill global. pnpm build runs both configs.
• package.json: the ./ui export plus unpkg and jsdelivr.
• 15 new tests in tests/ui/element.test.ts and four more build-entry checks. Full suite: 203 passing.

Everything is styled through ::part names and --aff-* variables; filled fields carry data-aff-filled for 1.5 seconds so the page can highlight them.

Base is voice/dictation-build (#4), so review that one first.

🤖 Generated with Claude Code

Summary by Sourcery

Introduce a ready-to-use AI form-filling custom element and browser distribution while preserving modular core, voice, and UI entry points.

New Features:

• Add the <ai-form-fill> custom element with form targeting, AI filling, voice dictation, review/apply, undo, status reporting, localization, and styling hooks.
• Expose the UI as a separate ai-form-fill/ui entry point and provide a bundled browser global for script-tag usage.

Enhancements:

• Keep the core bundle free of UI markup, styles, and speech code while exposing filled-field highlighting through data-aff-filled.
• Document the custom element, browser usage, configuration, styling, review mode, voice support, and customization options.

Build:

• Add ESM, CJS, and declaration outputs for the UI entry point and build a minified browser IIFE.

Deployment:

• Configure unpkg and jsDelivr to serve the browser bundle.

Documentation:

• Document the custom element API and browser bundle in the changelog and README.

Tests:

• Add UI behavior coverage and build-entry checks for the UI and browser bundles.

[sourcery-ai]

Sorry @JDeffner, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 3 days and 10 hours by commenting @sourcery-ai review. Upgrade to get a review now.

[sourcery-ai]

Reviewer's Guide

This PR adds a shadow-DOM <ai-form-fill> UI with review, undo, dictation, accessibility, customization, and field-highlighting support; publishes it as a standalone ai-form-fill/ui entry; and adds a minified script-tag browser bundle that registers the element and exposes the full API globally, with documentation, packaging, build, and test coverage updated accordingly.

Sequence diagram for AI form fill and review flow

sequenceDiagram
    actor User
    participant Element as AIFormFillElement
    participant Controller as FormFillController
    participant Provider as AIProvider
    participant Form as HTMLFormElement

    User->>Element: Enter text and activate submit
    Element->>Controller: extract(text)
    Controller->>Provider: chat(extraction request)
    Provider-->>Controller: Structured field data
    alt review attribute present
        Controller-->>Element: ExtractResult
        Element-->>User: Show review rows and checkboxes
        User->>Element: Activate Apply
        Element->>Controller: applyExtracted(data, fields)
    else direct fill
        Element->>Controller: fill(text)
    end
    Controller->>Form: apply field values
    Form-->>Element: aff:field-filled events
    Element-->>User: Show status and summary
    User->>Element: Activate Undo
    Element->>Controller: undo()
    Controller->>Form: Restore previous values

Loading

File-Level Changes

Change	Details	Files
Adds a dependency-free <ai-form-fill> custom element with a shadow-DOM panel for text entry, filling, status reporting, undo, review/apply, optional dictation, localization, styling hooks, and temporary field highlighting.	Resolves a target form by selector or containment and rebuilds its controller when configuration attributes change. Implements panel state rendering, accessible live status/error announcements, result summaries, undo, cancellation, and review-mode checkboxes. Supports provider instances, configurable strings, ::part selectors, --aff-* variables, and data-aff-filled highlighting. Integrates dictation with browser capability detection, silence auto-stop, Escape cancellation, and automatic fill. Adds UI-focused coverage for form resolution, state transitions, errors, review, voice, customization, highlighting, and non-submission behavior.	lib/ui/element.ts lib/ui/index.ts lib/ui/styles.ts tests/ui/element.test.ts
Publishes the UI as a separate importable package entry while keeping core and voice bundles separated.	Adds ESM, CommonJS, and declaration outputs for ai-form-fill/ui. Exports the custom element class, registration helper, default strings, and string type. Updates package exports and build configuration without adding UI markup or styles to the core entry. Adds build checks for UI artifacts and core-bundle isolation.	package.json vite.config.js dist/ui.js dist/ui.cjs dist/ui.d.ts tests/build/entries.test.ts
Adds a self-contained browser bundle for script-tag consumers and exposes the complete API globally.	Builds a minified IIFE containing core, voice, and UI functionality. Registers the custom element automatically and exports APIs through the AIFormFill global. Runs the browser build alongside the normal build and points CDN metadata at the generated file. Documents script-tag usage and replaces the old UMD guidance with the browser bundle.	lib/browser.ts vite.browser.config.js dist/ai-form-fill.browser.js package.json CHANGELOG.md README.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.