@dorsk/hmm 0.0.0-stage → 0.1.0

package/dist/redact.js

@@ -0,0 +1,64 @@
+const RULES = [
+    [
+        /-----BEGIN [A-Z ]*PRIVATE KEY-----[\s\S]*?-----END [A-Z ]*PRIVATE KEY-----/g,
+        '[redacted-private-key]',
+    ],
+    [/\beyJ[\w-]{8,}\.[\w-]{8,}\.[\w-]{8,}/g, '[redacted-jwt]'],
+    [/\b(Bearer|Basic)\s+[\w.~+/=-]{8,}/gi, '$1 [redacted]'],
+    [/\b(?:sk|pk|rk)-[\w-]{20,}/g, '[redacted-key]'],
+    [/\bgh[pousr]_\w{30,}/g, '[redacted-key]'],
+    [/\bgithub_pat_\w{30,}/g, '[redacted-key]'],
+    [/\bxox[abposr]-[\w-]{10,}/g, '[redacted-key]'],
+    [/\bAKIA[0-9A-Z]{16}\b/g, '[redacted-key]'],
+    [
+        /([\w-]*(?:pass(?:word|wd)?|secret|token|api[_-]?key|access[_-]?key|authorization))(["']?\s*[:=]\s*["']?)(?!\[?redacted)([^\s"'&,;]{4,})/gi,
+        '$1$2[redacted]',
+    ],
+];
+const SECRET_PARAM = /token|key|secret|pass|code|sig|auth|session/i;
+export function redactText(text) {
+    let out = text;
+    for (const [pattern, replacement] of RULES)
+        out = out.replace(pattern, replacement);
+    return out;
+}
+export function redactUrl(url) {
+    let parsed;
+    try {
+        parsed = new URL(url);
+    }
+    catch {
+        return redactText(url);
+    }
+    parsed.username = '';
+    parsed.password = '';
+    for (const name of [...parsed.searchParams.keys()]) {
+        if (SECRET_PARAM.test(name))
+            parsed.searchParams.set(name, 'redacted');
+    }
+    if (parsed.hash.includes('='))
+        parsed.hash = redactText(parsed.hash);
+    return redactText(parsed.toString());
+}
+function deep(value) {
+    if (typeof value === 'string')
+        return redactText(value);
+    if (Array.isArray(value))
+        return value.map(deep);
+    if (typeof value === 'object' && value !== null) {
+        return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, deep(v)]));
+    }
+    return value;
+}
+/** Scrubs every string except attachment image data; images cannot be scrubbed. */
+export function redactEnvelope(envelope) {
+    const { attachments, ...rest } = envelope;
+    const withUrls = {
+        ...rest,
+        page: rest.page ? { ...rest.page, url: redactUrl(rest.page.url) } : undefined,
+        items: rest.items.map((item) => ({ ...item, url: redactUrl(item.url) })),
+    };
+    if (!withUrls.page)
+        delete withUrls.page;
+    return { ...deep(withUrls), attachments };
+}

package/dist/shot.d.ts

@@ -0,0 +1,10 @@
+export type Shot = {
+    data: string;
+    width: number;
+    height: number;
+};
+/**
+ * Rasterises the DOM, so cross-origin images without CORS, video and tainted canvases come out
+ * blank. `target` null captures the visible viewport.
+ */
+export declare function capture(win: Window, target: Element | null, exclude: Element): Promise<Shot>;

package/dist/shot.js

@@ -0,0 +1,61 @@
+import { LIMITS } from "./envelope.js";
+const MAX_SIDE = 1600;
+const PREFIX = 'data:image/png;base64,';
+const CLEAR = new Set(['', 'transparent', 'rgba(0, 0, 0, 0)']);
+function paintOf(win, el) {
+    const color = win.getComputedStyle(el).backgroundColor;
+    return CLEAR.has(color) ? null : color;
+}
+/** The renderer paints `backgroundColor` on the captured node itself, so an element that has its own background must not get one. */
+function backdropOf(win, target) {
+    if (paintOf(win, target))
+        return {};
+    for (let node = target.parentElement; node; node = node.parentElement) {
+        const color = paintOf(win, node);
+        if (color)
+            return { backgroundColor: color };
+    }
+    return { backgroundColor: '#ffffff' };
+}
+/**
+ * Rasterises the DOM, so cross-origin images without CORS, video and tainted canvases come out
+ * blank. `target` null captures the visible viewport.
+ */
+export async function capture(win, target, exclude) {
+    const { domToPng } = await import('modern-screenshot');
+    const doc = win.document;
+    const size = target
+        ? target.getBoundingClientRect()
+        : { width: win.innerWidth, height: win.innerHeight };
+    if (size.width < 1 || size.height < 1)
+        throw new Error('nothing to capture');
+    const base = {
+        filter: (node) => node !== exclude,
+        ...(target
+            ? backdropOf(win, target)
+            : {
+                backgroundColor: paintOf(win, doc.body) ?? '#ffffff',
+                width: size.width,
+                height: size.height,
+                style: {
+                    overflow: 'hidden',
+                    transform: `translate(${-win.scrollX}px, ${-win.scrollY}px)`,
+                },
+            }),
+    };
+    let scale = Math.min(1, MAX_SIDE / Math.max(size.width, size.height));
+    for (let attempt = 0; attempt < 3; attempt++, scale /= 2) {
+        const url = await domToPng(target ?? doc.documentElement, { ...base, scale });
+        if (!url.startsWith(PREFIX))
+            break;
+        const data = url.slice(PREFIX.length);
+        if (data.length <= LIMITS.attachmentChars) {
+            return {
+                data,
+                width: Math.max(1, Math.round(size.width * scale)),
+                height: Math.max(1, Math.round(size.height * scale)),
+            };
+        }
+    }
+    throw new Error('the screenshot is too large');
+}

package/dist/transport.d.ts

@@ -0,0 +1,11 @@
+import { type Envelope } from './envelope.ts';
+export type Transport = (envelope: Envelope) => Promise<void>;
+export declare class SendError extends Error {
+    retryable: boolean;
+    constructor(message: string, retryable: boolean);
+}
+export declare function httpTransport(endpoint: string, projectKey: string): Transport;
+export declare const isRetryable: (err: unknown) => boolean;
+/** False when the report could not be stored, for example when the quota is exceeded. */
+export declare function enqueue(storage: Storage, key: string, envelope: Envelope): boolean;
+export declare function flush(storage: Storage, key: string, transport: Transport): Promise<number>;

package/dist/transport.js

@@ -0,0 +1,71 @@
+import { validateEnvelope } from "./envelope.js";
+export class SendError extends Error {
+    retryable;
+    constructor(message, retryable) {
+        super(message);
+        this.name = 'SendError';
+        this.retryable = retryable;
+    }
+}
+export function httpTransport(endpoint, projectKey) {
+    const url = `${endpoint.replace(/\/+$/, '')}/v1/reports`;
+    return async (envelope) => {
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json', 'x-hmm-key': projectKey },
+            body: JSON.stringify(envelope),
+            credentials: 'omit',
+        });
+        if (res.ok)
+            return;
+        const retryable = res.status >= 500 || res.status === 408 || res.status === 429;
+        throw new SendError(`the server answered ${res.status}`, retryable);
+    };
+}
+export const isRetryable = (err) => err?.retryable !== false;
+const OUTBOX_MAX = 5;
+function read(storage, key) {
+    try {
+        const parsed = JSON.parse(storage.getItem(key) ?? '[]');
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter((e) => validateEnvelope(e).ok);
+    }
+    catch {
+        return [];
+    }
+}
+function write(storage, key, queue) {
+    try {
+        if (queue.length)
+            storage.setItem(key, JSON.stringify(queue));
+        else
+            storage.removeItem(key);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** False when the report could not be stored, for example when the quota is exceeded. */
+export function enqueue(storage, key, envelope) {
+    const queue = read(storage, key);
+    if (queue.length >= OUTBOX_MAX)
+        return false;
+    return write(storage, key, [...queue, envelope]);
+}
+export async function flush(storage, key, transport) {
+    let sent = 0;
+    for (const envelope of read(storage, key)) {
+        try {
+            await transport(envelope);
+        }
+        catch (err) {
+            if (isRetryable(err))
+                break;
+        }
+        write(storage, key, read(storage, key).filter((e) => e.id !== envelope.id));
+        sent++;
+    }
+    return sent;
+}

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.1.0";

package/dist/version.js

@@ -0,0 +1 @@
+export const VERSION = '0.1.0';

package/package.json

@@ -1,6 +1,83 @@
 {
-  "name": "@dorsk/hmm",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@dorsk/hmm",
+	"version": "0.1.0",
+	"description": "Feedback panel for Svelte apps built on tsumikit: select an element, comment, attach a screenshot, review what will be sent, and post it to your own endpoint.",
+	"type": "module",
+	"license": "MIT",
+	"author": "Dorsk <dorsk.dev@gmail.com>",
+	"homepage": "https://github.com/DorskFR/hmm",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/DorskFR/hmm.git"
+	},
+	"bugs": {
+		"url": "https://github.com/DorskFR/hmm/issues"
+	},
+	"keywords": [
+		"feedback",
+		"widget",
+		"screenshot",
+		"picker",
+		"bug-report",
+		"svelte",
+		"svelte5",
+		"tsumikit"
+	],
+	"files": [
+		"dist",
+		"schema"
+	],
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./envelope": {
+			"types": "./dist/envelope.d.ts",
+			"default": "./dist/envelope.js"
+		},
+		"./schema/envelope.v1.json": "./schema/envelope.v1.json",
+		"./package.json": "./package.json"
+	},
+	"publishConfig": {
+		"access": "public",
+		"provenance": true
+	},
+	"scripts": {
+		"build": "node scripts/version.mjs && svelte-package -i src -o dist && publint && node scripts/bundle.mjs",
+		"check": "node scripts/version.mjs && svelte-check --tsconfig ./tsconfig.json",
+		"lint": "biome check . && tsumikit-lint src",
+		"format": "biome check --write .",
+		"demo": "npm run build && node demo/serve.mjs 4188",
+		"test": "npm run build && playwright test",
+		"test:unit": "playwright test --project unit",
+		"prepare": "lefthook install || true",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"modern-screenshot": "^4.7.0"
+	},
+	"peerDependencies": {
+		"@dorsk/tsumikit": ">=0.82.0 <1",
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.5.12",
+		"@dorsk/tsumikit": "^0.83.0",
+		"@playwright/test": "^1.64.1",
+		"@sveltejs/package": "^3.0.2",
+		"@types/node": "^26.4.1",
+		"ajv": "^8.17.1",
+		"esbuild": "^0.28.2",
+		"esbuild-svelte": "^0.9.5",
+		"lefthook": "^2.1.12",
+		"publint": "^0.3.25",
+		"svelte": "^5.57.3",
+		"svelte-check": "^4.7.8",
+		"typescript": "^6.0.3"
+	},
+	"svelte": "./dist/index.js",
+	"sideEffects": false
+}

package/schema/envelope.v1.json

@@ -0,0 +1,163 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"$id": "https://github.com/DorskFR/hmm/blob/main/schema/envelope.v1.json",
+	"title": "hmm report envelope v1",
+	"type": "object",
+	"additionalProperties": false,
+	"required": [
+		"v",
+		"id",
+		"kind",
+		"project",
+		"createdAt",
+		"client",
+		"context",
+		"comment",
+		"items",
+		"attachments"
+	],
+	"properties": {
+		"v": { "const": 1 },
+		"id": { "$ref": "#/definitions/id" },
+		"kind": { "enum": ["feedback", "error", "alert"] },
+		"category": { "enum": ["idea", "problem", "question", "other"] },
+		"fingerprint": { "type": "string", "maxLength": 500 },
+		"project": { "type": "string", "pattern": "^[A-Za-z0-9._-]{1,128}$" },
+		"createdAt": {
+			"type": "string",
+			"maxLength": 40,
+			"pattern": "^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d+)?Z$"
+		},
+		"client": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["name", "version"],
+			"properties": {
+				"name": { "type": "string", "maxLength": 100 },
+				"version": { "type": "string", "maxLength": 100 }
+			}
+		},
+		"page": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["url", "title", "viewport", "userAgent", "language"],
+			"properties": {
+				"url": { "type": "string", "maxLength": 2000 },
+				"title": { "type": "string", "maxLength": 500 },
+				"userAgent": { "type": "string", "maxLength": 500 },
+				"language": { "type": "string", "maxLength": 100 },
+				"viewport": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["width", "height"],
+					"properties": {
+						"width": { "type": "integer", "minimum": 0, "maximum": 1000000 },
+						"height": { "type": "integer", "minimum": 0, "maximum": 1000000 }
+					}
+				}
+			}
+		},
+		"context": {
+			"description": "Free-form host data. Must also serialise to at most 16000 characters.",
+			"type": "object",
+			"maxProperties": 50
+		},
+		"comment": { "type": "string", "maxLength": 5000 },
+		"items": {
+			"type": "array",
+			"maxItems": 20,
+			"items": {
+				"oneOf": [{ "$ref": "#/definitions/elementItem" }, { "$ref": "#/definitions/screenshotItem" }]
+			}
+		},
+		"attachments": {
+			"description": "Ids must be unique, and every item attachment must name one of them.",
+			"type": "array",
+			"maxItems": 10,
+			"items": { "$ref": "#/definitions/attachment" }
+		}
+	},
+	"definitions": {
+		"id": { "type": "string", "pattern": "^[A-Za-z0-9_-]{1,64}$" },
+		"elementItem": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["id", "type", "url", "comment", "target"],
+			"properties": {
+				"id": { "$ref": "#/definitions/id" },
+				"type": { "const": "element" },
+				"url": { "type": "string", "maxLength": 2000 },
+				"comment": { "type": "string", "maxLength": 5000 },
+				"target": { "$ref": "#/definitions/target" },
+				"attachment": { "$ref": "#/definitions/id" }
+			}
+		},
+		"screenshotItem": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["id", "type", "url", "comment", "attachment"],
+			"properties": {
+				"id": { "$ref": "#/definitions/id" },
+				"type": { "const": "screenshot" },
+				"url": { "type": "string", "maxLength": 2000 },
+				"comment": { "type": "string", "maxLength": 5000 },
+				"attachment": { "$ref": "#/definitions/id" }
+			}
+		},
+		"target": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["selector", "tag", "text", "html", "attrs", "rect"],
+			"properties": {
+				"selector": { "type": "string", "maxLength": 1000 },
+				"tag": { "type": "string", "maxLength": 100 },
+				"text": { "type": "string", "maxLength": 400 },
+				"html": { "type": "string", "maxLength": 2000 },
+				"attrs": {
+					"type": "object",
+					"maxProperties": 40,
+					"propertyNames": { "maxLength": 100 },
+					"additionalProperties": { "type": "string", "maxLength": 400 }
+				},
+				"rect": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["x", "y", "width", "height"],
+					"properties": {
+						"x": { "type": "integer", "minimum": -1000000, "maximum": 1000000 },
+						"y": { "type": "integer", "minimum": -1000000, "maximum": 1000000 },
+						"width": { "type": "integer", "minimum": 0, "maximum": 1000000 },
+						"height": { "type": "integer", "minimum": 0, "maximum": 1000000 }
+					}
+				},
+				"source": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["file", "line", "column"],
+					"properties": {
+						"file": { "type": "string", "maxLength": 500 },
+						"line": { "type": "integer", "minimum": 0, "maximum": 1000000 },
+						"column": { "type": "integer", "minimum": 0, "maximum": 1000000 }
+					}
+				}
+			}
+		},
+		"attachment": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["id", "mime", "width", "height", "data"],
+			"properties": {
+				"id": { "$ref": "#/definitions/id" },
+				"mime": { "const": "image/png" },
+				"width": { "type": "integer", "minimum": 1, "maximum": 8192 },
+				"height": { "type": "integer", "minimum": 1, "maximum": 8192 },
+				"data": {
+					"description": "Base64 without a data URL prefix.",
+					"type": "string",
+					"maxLength": 2800000,
+					"pattern": "^[A-Za-z0-9+/]+={0,2}$"
+				}
+			}
+		}
+	}
+}