visual-feedback 0.3.3 → 0.4.0

package/AGENTS.md

@@ -36,7 +36,10 @@ comes before the first report in step 6.
    recipe adds. In a React or Next.js app, render `<Feedback endpoint="/api/feedback" />` from
    `visual-feedback/react` instead, once, in the root layout; its props are the same options, and
    a function prop such as `onSubmit` needs a `"use client"` file (`docs/API.md`). Every option is in `docs/API.md`; the look is in
-   `docs/THEMING.md`.
+   `docs/THEMING.md`. Fit the button to the app's own design: read its layout and pick
+   `trigger` and `position`, and `--vf-offset` where the default spot would cover something the app shows, and the
+   `--vf-*` colours and corners where the widget does not take them from the page already. Tell the
+   developer where it sits and why.
 3. On the server: copy the recipe's route as it is written. Its test runs that code, with only the
    marked parts below filled in, so do not change how it stores a report. If the app is not a Next.js App Router app, keep the logic and
    change only how the route is mounted.

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.4.0 (2026-10-13)
+
+- Breaking: the trigger is a tab by default, in the corner `position` names, with a flag icon. It
+  has no border: the text colour fills it, and on hover the colours swap. `--vf-offset` lifts the
+  tab along its side edge, and no longer moves it off that edge. `trigger: "button"` keeps the
+  round button, 16px from both edges, filled the same way (SPEC §3).
+- Breaking: the trigger has no `title`. Its tooltip is the widget's own: it shows at once on hover
+  or keyboard focus, beside the trigger with an arrow pointing at it, and has its own part,
+  `trigger-tooltip`. Screen readers still hear it as the description.
+- The README starts with a prompt to give a coding agent, naming the package by its npm page, and AGENTS.md asks the agent to fit the
+  button to the app's design.
+- The demo styles the tooltip as its "Click here" hint, and fades that hint while the tooltip
+  shows.
+
 ## 0.3.3 (2026-10-13)
 
 - The trigger stands out more: a swirl icon that fills it, in place of the speech bubble, ringed

package/README.md

@@ -8,6 +8,14 @@ any design.
 
 ![The feedback dialog over a video site, with a box and an arrow drawn around the topic buttons, seven of which read Undefined](docs/demo.png)
 
+Ask your coding agent:
+
+```text
+Install the visual-feedback npm package (https://www.npmjs.com/package/visual-feedback) and add it to this app by following its AGENTS.md. Place its button where it covers nothing, and match its position, colours and corners to our design.
+```
+
+Or the old-school way, by hand:
+
 ```sh
 npm install visual-feedback
 ```

package/dist/index.d.mts

@@ -1,4 +1,4 @@
 
-import { a as FeedbackWidget, c as CaptureOptions, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as discardDraft, t as FeedbackEvent } from "./widget-Z1KOUKjx.mjs";
+import { a as FeedbackWidget, c as CaptureOptions, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as discardDraft, t as FeedbackEvent } from "./widget-Cxcm3h1Z.mjs";
 import { n as Mark, r as Screenshot, t as FeedbackReport } from "./report-CaJegYyg.mjs";
 export { type CaptureOptions, type FeedbackEvent, type FeedbackEvents, type FeedbackOptions, type FeedbackReport, type FeedbackStrings, type FeedbackWidget, type Mark, type Screenshot, createFeedback, discardDraft };

package/dist/index.mjs

@@ -1,2 +1,2 @@
 
-export { t as createFeedback, n as discardDraft } from "./widget-IwlLFJCu.mjs";
+export { t as createFeedback, n as discardDraft } from "./widget-BoohIxqp.mjs";

package/dist/react.d.mts

@@ -1,5 +1,5 @@
 
-import { r as FeedbackOptions } from "./widget-Z1KOUKjx.mjs";
+import { r as FeedbackOptions } from "./widget-Cxcm3h1Z.mjs";
 //#region src/react/index.d.ts
 export type FeedbackProps = FeedbackOptions;
 export declare function Feedback(props: FeedbackProps): null;

package/dist/react.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { t as createFeedback } from "./widget-IwlLFJCu.mjs";
+import { t as createFeedback } from "./widget-BoohIxqp.mjs";
 import { useEffect, useRef } from "react";
 //#region src/react/index.ts
 function Feedback(props) {

package/dist/{widget-IwlLFJCu.mjs → widget-BoohIxqp.mjs}

@@ -162,23 +162,24 @@ function sheet(text) {
 	return result;
 }
 function variables() {
-	return `.vf{--_r:var(--vf-radius,var(--_pr,16px));--_s:var(--vf-surface,var(--_ps,Canvas));--_t:var(--vf-text,var(--_pt,CanvasText));--_m:var(--vf-muted,var(--_pm,color-mix(in srgb,var(--_t) 60%,transparent)));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,var(--_pa,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"}));--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 12px 32px -12px rgb(0 0 0/35%));--_size:var(--vf-trigger-size,2.5em);--_off:var(--vf-offset,16px);--_z:var(--vf-z,2147483000)}`;
+	return `.vf{--_r:var(--vf-radius,var(--_pr,16px));--_s:var(--vf-surface,var(--_ps,Canvas));--_t:var(--vf-text,var(--_pt,CanvasText));--_m:var(--vf-muted,var(--_pm,color-mix(in srgb,var(--_t) 60%,transparent)));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,var(--_pa,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"}));--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 12px 32px -12px rgb(0 0 0/35%));--_size:var(--vf-trigger-size,2.5em);--_off:var(--vf-offset,16px);--_toff:var(--vf-offset,0px);--_z:var(--vf-z,2147483000)}`;
 }
-const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{font:inherit;position:fixed;z-index:var(--_z);box-sizing:border-box;height:var(--_size);margin:0;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.trigger[data-icon]{width:var(--_size);padding:0;justify-content:center}.trigger[data-icon] svg{width:100%;height:100%}[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger svg{width:1.15em;height:1.15em}.capturing,.capturing .backdrop{visibility:hidden}.still .trigger{transition:none!important}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
-const THEME = `.trigger{font-weight:600;border:1px solid var(--_t);border-radius:999px;background:var(--_s);color:var(--_t);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s}.trigger:hover{background:color-mix(in srgb,var(--_s) 90%,var(--_t))}`;
-function icon() {
+const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{font:inherit;position:fixed;z-index:var(--_z);box-sizing:border-box;height:var(--_size);margin:0;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.trigger[data-icon]{width:var(--_size);padding:0;justify-content:center}.trigger[data-icon]>svg{width:62.5%;height:62.5%}[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger:where([data-tab][data-y=bottom]){bottom:calc(var(--_toff) + env(safe-area-inset-bottom,0px))}.trigger:where([data-tab][data-y=top]){top:calc(var(--_toff) + env(safe-area-inset-top,0px))}.trigger:where([data-tab][data-x=right]){right:env(safe-area-inset-right,0px)}.trigger:where([data-tab][data-x=left]){left:env(safe-area-inset-left,0px)}.trigger>svg{width:1.15em;height:1.15em}.tip{position:absolute;top:50%;translate:0 -50%;direction:ltr;box-sizing:border-box;width:max-content;max-width:calc(100vw - 100% - 2 * var(--_off) - 10px);white-space:normal;display:flex;align-items:center;gap:4px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s}[data-x=right]>.tip{right:calc(100% + 10px)}[data-x=left]>.tip{left:calc(100% + 10px);flex-direction:row-reverse}[data-x=left]>.tip svg{rotate:180deg}.tip svg{width:1.15em;height:1.15em;flex:none}.trigger:focus-visible>.tip{visibility:inherit;opacity:1}@media (hover:hover){.trigger:hover>.tip{visibility:inherit;opacity:1}}.capturing,.capturing .backdrop{visibility:hidden}.capturing .tip{transition:none}.still .trigger{transition:none!important}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
+const THEME = `.trigger{font-weight:600;border:0;border-radius:999px;background:var(--_t);color:var(--_s);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s,color .15s}@media (hover:hover){.trigger:hover{background:var(--_s);color:var(--_t)}}.tip{padding:6px 8px 6px 14px;border-radius:999px;background:var(--_t);color:var(--_s);font-weight:700;box-shadow:var(--_sh)}[data-x=left]>.tip{padding:6px 14px 6px 8px}.trigger:where([data-tab]){--_tr:clamp(0px,var(--_toff) * 1000,var(--_r));border-radius:var(--_r)}.trigger:where([data-tab][data-y=bottom]){border-bottom-left-radius:var(--_tr);border-bottom-right-radius:var(--_tr)}.trigger:where([data-tab][data-y=top]){border-top-left-radius:var(--_tr);border-top-right-radius:var(--_tr)}.trigger:where([data-tab][data-x=right]){border-top-right-radius:0;border-bottom-right-radius:0}.trigger:where([data-tab][data-x=left]){border-top-left-radius:0;border-bottom-left-radius:0}`;
+function icon(d, attributes) {
 	const svg = document.createElementNS(SVG, "svg");
 	const path = document.createElementNS(SVG, "path");
 	for (const [name, value] of Object.entries({
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
-		fill: "currentColor",
-		part: "trigger-icon"
+		...attributes
 	})) svg.setAttribute(name, value);
-	path.setAttribute("d", "M12 12Q17.2 7.9 24 12L22.6 17.6Q16.2 11.6 12 12zM12 12Q18.1 14.5 18 22.4L12.4 24Q14.5 15.4 12 12zM12 12Q12.9 18.5 6 22.4L1.8 18.4Q10.3 15.8 12 12zM12 12Q6.8 16.1 0 12L1.4 6.4Q7.8 12.4 12 12zM12 12Q5.9 9.5 6 1.6L11.6 0Q9.5 8.6 12 12zM12 12Q11.1 5.5 18 1.6L22.2 5.6Q13.7 8.2 12 12z");
+	path.setAttribute("d", d);
 	svg.append(path);
 	return svg;
 }
+const FLAG = "M4 3a1 1 0 0 1 2 0v18a1 1 0 0 1-2 0zM7 4c2.5-1.5 5-1.5 7 0s4 1.5 6 0v10c-2 1.5-4 1.5-6 0s-4.5-1.5-7 0z";
+const ARROW = "M5 12h14m-6-6 6 6-6 6";
 function field(element) {
 	return element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName);
 }
@@ -289,6 +290,9 @@ function createFeedback(options = {}) {
 	let pending;
 	let trigger;
 	let label;
+	const tip = document.createElement("span");
+	tip.dir = "auto";
+	tip.setAttribute("part", "trigger-tooltip-text");
 	let unlisten;
 	function listen(shortcut) {
 		const parsed = parse(shortcut);
@@ -340,18 +344,35 @@ function createFeedback(options = {}) {
 				trigger.setAttribute("part", "trigger");
 				label = document.createElement("span");
 				label.setAttribute("part", "trigger-text");
-				trigger.append(icon(), label);
+				const tooltip = document.createElement("span");
+				tooltip.className = "tip";
+				tooltip.id = "vf-tip";
+				tooltip.setAttribute("part", "trigger-tooltip");
+				tooltip.setAttribute("aria-hidden", "true");
+				tooltip.append(tip, icon(ARROW, {
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2.4",
+					"stroke-linecap": "round",
+					part: "icon"
+				}));
+				trigger.setAttribute("aria-describedby", tooltip.id);
+				trigger.append(icon(FLAG, {
+					fill: "currentColor",
+					part: "trigger-icon"
+				}), label, tooltip);
 				trigger.addEventListener("click", start);
 				wrapper.prepend(trigger);
 			}
 			const [y, x] = (options.position ?? "bottom-right").split("-");
 			trigger.dataset.y = y;
 			trigger.dataset.x = x;
+			trigger.toggleAttribute("data-tab", options.trigger !== "button");
 			const { trigger: name, triggerText } = options.strings ?? {};
 			const accessible = name || triggerText || "Send feedback";
 			trigger.setAttribute("aria-label", accessible);
 			const keys = options.shortcut ? spoken(options.shortcut) : void 0;
-			trigger.title = keys ? `${accessible} (${keys})` : accessible;
+			tip.textContent = keys ? `${accessible} (${keys})` : accessible;
 			trigger.toggleAttribute("data-icon", !triggerText);
 			if (label) {
 				label.textContent = triggerText ?? "";

package/dist/{widget-Z1KOUKjx.d.mts → widget-Cxcm3h1Z.d.mts}

@@ -37,7 +37,7 @@ type FeedbackOptions = {
   requireNote?: boolean;
   redactUrl?: boolean;
   context?: () => Record<string, unknown> | Promise<Record<string, unknown>>;
-  trigger?: "button" | "none";
+  trigger?: "tab" | "button" | "none";
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   shortcut?: string | false;
   strings?: Partial<FeedbackStrings>;

package/docs/API.md

@@ -37,7 +37,7 @@ const feedback = createFeedback({
 | `onSubmit` | `(report) => Promise<void>` | – | Sends the report. A throw shows the send error state, using the error's message. Give this or `endpoint`; with both, `onSubmit` is used. |
 | `endpoint` | `string` | – | POSTs `multipart/form-data` with a `report` part (JSON, each screenshot without its image) and one part per screenshot, `image0`, `image1` and on, named `<id>-<n>.webp` or `<id>-<n>.png`. An answer that is not 2xx, a redirect included, shows the send error state with the default `error` text. It is a same-origin `fetch`, so it sends cookies only to the page's own origin; another origin needs CORS on its server and a `connect-src` that allows it. |
 | `headers` | `Record<string, string>` or `() => Record<string, string>` | – | Extra headers for `endpoint`. A function is called at Send; a throw shows the send error state, using the error's message. |
-| `trigger` | `"button" \| "none"` | `"button"` | `"none"` draws no trigger; the host calls `open()`. A kept draft's bar still shows. |
+| `trigger` | `"tab" \| "button" \| "none"` | `"tab"` | `"tab"` touches the side edge, `"button"` is round, in the corner (SPEC §3). `"none"` draws no trigger; the host calls `open()`. A kept draft's bar still shows. |
 | `position` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` | Corner of the trigger. |
 | `shortcut` | `string \| false` | `false` | For example `"Alt+Shift+F"`: any of `Alt`, `Shift`, `Control` and `Meta`, then one key, a letter, a digit or a key name such as `F2`, joined by `+`. The modifiers must match exactly, AltGr never matches, and any other modifier name, or no key, makes it match nothing. Without `Control` or `Meta` it does not fire while focus is in a form field (`input`, `textarea`, `select`) or editable content. It does nothing while the dialog is open or a draft is kept in the draft bar. The trigger's tooltip names it (SPEC §3). Opt-in; it is the widget's only listener on `window` or `document`, one `keydown` on `window` (SPEC §9 names what else the widget watches, and what the capture library keeps). |
 | `tools` | `("pen" \| "box" \| "arrow" \| "text" \| "select")[]` | all five | Order is the toolbar order, and the first drawing tool is the one selected at open. Repeats and unknown names are ignored; an empty list, or Select alone, shows no toolbar. The Delete button is there only with Select. |

package/docs/SPEC.md

@@ -15,8 +15,8 @@ idle --open--> capturing --image ready--> annotating --Send--> sending --ok--> s
                                               +--Esc / Keep as draft / Add screenshot--> draft
 annotating, draft --Cancel (it may ask first, below) / Discard--> idle
 ```
-- **idle:** the trigger button shows (`trigger: "button"`), or nothing shows (`trigger: "none"`,
-  where the host calls `open()`).
+- **idle:** the trigger shows, a tab (`trigger: "tab"`) or a round button (`trigger: "button"`), or
+  nothing shows (`trigger: "none"`, where the host calls `open()`).
 - **capturing:** the trigger and any open panel are hidden, so they are not in the image. The
   screen is captured (SPEC §5), and a screen reader is told the `capturing` text.
 - **capture error:** the `captureError` text, with "Try again" (back to capturing), "Send without
@@ -48,19 +48,25 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
   the same question when it would throw work away, close the dialog, and the draft goes with it.
 
 ## 3. The trigger
-- It is a small round button, 2.5em across by default (40 px on a 16 px site), in a corner
-  (`position`), filled by a swirl icon edged by a ring in the same colour, with the `trigger`
-  accessible name. A host that gives `triggerText` gets that short label beside a small icon, as a pill; with
-  only `triggerText` given, that text is the name too. A host that sets both keeps `triggerText`
-  inside `trigger`, so speech control can say what it sees. It has no badge, and it does not move
-  or pulse.
-- Its tooltip (`title`) is its name, as for the dialog's icon buttons. With a `shortcut` that can
-  match, it is the name and the keys, each modifier once, joined by ` + `, as the platform's
-  keyboards name them: Option, Command, Control and Shift on a Mac, iPhone or iPad
-  (`navigator.platform`), as in `Send feedback (Option + Shift + F)`; Alt, Win, Ctrl and Shift on
-  Windows; Alt, Super, Ctrl and Shift elsewhere. A screen reader then reads the keys as the
-  description.
-- It sits 16 px from the edges by default, and it respects `env(safe-area-inset-*)`.
+- By default it is a small tab, 2.5em square (40 px on a 16 px site), in the corner `position`
+  names, square on both edges there, with a flag icon and the `trigger` accessible name.
+  `--vf-offset` lifts it along its side edge, and then its end side is rounded too.
+  `trigger: "button"` makes it a round button in that corner instead, 16 px from both edges.
+  Either has no border: the text colour fills it, and the icon and label take the background
+  colour. On hover, on a device that can hover, the two swap back.
+  A host that gives `triggerText` gets that short label beside a small icon, in a wider tab, or a
+  pill as a button; with only `triggerText` given, that text is the name too. A host that sets
+  both keeps `triggerText` inside `trigger`, so speech control can say what it sees. It has no
+  badge, and it does not move or pulse.
+- Its tooltip is its own, not the browser's `title`: a pill beside it, on the page's side, with an
+  arrow pointing at it. It fades in at once on keyboard focus, or on hover where the device can
+  hover, and out at the same speed.
+  It reads the name. With a `shortcut` that can match, it is the name and the keys, each modifier
+  once, joined by ` + `, as the platform's keyboards name them: Option, Command, Control and Shift
+  on a Mac, iPhone or iPad (`navigator.platform`), as in `Send feedback (Option + Shift + F)`;
+  Alt, Win, Ctrl and Shift on Windows; Alt, Super, Ctrl and Shift elsewhere. A screen reader reads
+  the tooltip as the description.
+- It respects `env(safe-area-inset-*)`.
 - It is hidden while there is a draft, whether the dialog is open or kept in the draft bar.
 - It does not move to keep clear of the page's content. The host moves it off its own content
   with `position` or `--vf-offset`.

package/docs/THEMING.md

@@ -39,8 +39,8 @@ Set these on `visual-feedback` (or on any ancestor). Custom properties cross the
 |---|---|---|
 | `--vf-font` | `inherit` | font family of all text, such as `Inter, sans-serif` |
 | `--vf-radius` | from the page's button corners, so the widget's buttons match them up to 15px (this is 1.6 times theirs, up to `24px`), else `16px` | panel and composer, and a share of it for buttons and the image |
-| `--vf-surface` | with `theme: "auto"` the page's background, else `Canvas` | panel, tool rail and composer background |
-| `--vf-text` | with `theme: "auto"` the page's text colour, else `CanvasText` | text, and the trigger's icon and border |
+| `--vf-surface` | with `theme: "auto"` the page's background, else `Canvas` | panel, tool rail and composer background, the trigger's icon and label, its fill on hover, and the text of its tooltip |
+| `--vf-text` | with `theme: "auto"` the page's text colour, else `CanvasText` | text, the trigger's fill, its icon and label on hover, and its tooltip's background |
 | `--vf-muted` | text at 60%, more on a page whose text would make that too faint | hints, counters |
 | `--vf-border` | text at 15% | hairlines |
 | `--vf-accent` | the page's accent, else `AccentColor`, or `#0b57d0` where the browser has no `AccentColor` | Send button and its menu button, "Capture this view", active tool, chosen screenshot |
@@ -48,9 +48,9 @@ Set these on `visual-feedback` (or on any ancestor). Custom properties cross the
 | `--vf-focus` | `--vf-accent` | focus ring |
 | `--vf-mark` | `#e5243b` | marks on the screenshot |
 | `--vf-backdrop` | `rgb(0 0 0 / 45%)` | overlay behind the image |
-| `--vf-shadow` | `0 12px 32px -12px rgb(0 0 0 / 35%)` | trigger, panel and draft bar |
+| `--vf-shadow` | `0 12px 32px -12px rgb(0 0 0 / 35%)` | trigger, its tooltip, panel and draft bar |
 | `--vf-trigger-size` | `2.5em`, 40px on a 16px site | trigger height, and its width when it shows the icon alone |
-| `--vf-offset` | `16px` | trigger and draft bar distance from the edges |
+| `--vf-offset` | `16px`, and `0px` for the tab; a length, not a percentage | draft bar and round trigger distance from the edges; the tab keeps to its side edge, and this lifts it along it |
 | `--vf-z` | `2147483000` | stacking |
 
 ```css
@@ -62,8 +62,8 @@ visual-feedback {
 ```
 
 ## 3. `::part()`
-Every visible element has a part name: `trigger`, `trigger-icon`, `trigger-text`, `backdrop`,
-`dialog`, `header`, `title`, `minimise`, `body`, `stage`, `image`, `toolbar`, `tool`, `tool-active`,
+Every visible element has a part name: `trigger`, `trigger-icon`, `trigger-text`, `trigger-tooltip`,
+`trigger-tooltip-text`, `backdrop`, `dialog`, `header`, `title`, `minimise`, `body`, `stage`, `image`, `toolbar`, `tool`, `tool-active`,
 `divider`, `undo`, `clear`, `remove`, `icon`, `text-input`, `selection`, `strip`, `thumb`,
 `thumb-pick`, `thumb-image`, `thumb-number`, `thumb-remove`, `add`, `label`, `composer`, `note`,
 `composer-bar`, `category`, `footer`, `split`, `send-more`, `menu`, `save-pdf`, `actions`, `cancel`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A small button lets your users screenshot the page, mark it up and write a note. You receive one report and store it where you want.",
   "keywords": [
     "feedback",