visual-feedback 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.3.3 (2026-10-13)
+
+- The trigger stands out more: a swirl icon that fills it, in place of the speech bubble, ringed
+  by a 1px border in the same colour (`--vf-text`). With `triggerText`, the icon stays small
+  beside the label.
+- The demo site shows a "Click here" hint at the trigger, and its thumbnails rest at 20% colour and
+  fade to full colour on hover.
+
+## 0.3.2 (2026-10-13)
+
+- The README links a live demo: the playground on GitHub Pages, at
+  https://dorumrr.github.io/visual-feedback/. The widget itself is unchanged.
+
 ## 0.3.1 (2026-10-12)
 
 - The trigger shows its name as a tooltip. With a `shortcut` set, the tooltip names it too, the way

package/README.md

@@ -4,6 +4,8 @@ A small button lets your users screenshot the page, mark it up and write a note.
 report and store it where you want. It has no service, no tracking and no global CSS, and it fits
 any design.
 
+**Try it [here](https://dorumrr.github.io/visual-feedback/)**. A report you send stays in the page, as the site's own list.
+
 ![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)
 
 ```sh

package/dist/index.mjs

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

package/dist/react.mjs

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

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

@@ -164,21 +164,18 @@ function sheet(text) {
 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)}`;
 }
-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}[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(--_b);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))}`;
+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 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: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linejoin": "round",
+		fill: "currentColor",
 		part: "trigger-icon"
 	})) svg.setAttribute(name, value);
-	path.setAttribute("d", "M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z");
+	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");
 	svg.append(path);
 	return svg;
 }

package/docs/SPEC.md

@@ -49,10 +49,11 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
 
 ## 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`), with an icon and the `trigger` accessible name. A host that gives `triggerText`
-  gets that short label beside the 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.
+  (`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

package/docs/THEMING.md

@@ -40,7 +40,7 @@ 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 |
+| `--vf-text` | with `theme: "auto"` the page's text colour, else `CanvasText` | text, and the trigger's icon and border |
 | `--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 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",
@@ -66,13 +66,13 @@
     "prepack": "npm run --silent build -- --logLevel warn",
     "dev": "node tests/dev.mjs",
     "demo": "node tests/demo.mjs",
+    "site": "node tests/site.mjs",
     "release": "node tests/release.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@biomejs/biome": "^2.5.15",
     "@electric-sql/pglite": "0.5.8",
-    "@electric-sql/pglite-socket": "^0.2.11",
     "@playwright/test": "^1.64.0",
     "@size-limit/preset-small-lib": "^14.2.0",
     "@supabase/supabase-js": "^2.117.3",
@@ -80,7 +80,6 @@
     "@types/react": "^19.3.0",
     "aws4fetch": "^1.0.20",
     "next": "^16.4.0",
-    "postgres": "^3.4.9",
     "publint": "^0.3.25",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",