feedbackkit-web 1.0.37

package/dist/types/renderer.d.ts

@@ -0,0 +1,64 @@
+import type { FeedbackAnnotation, NormalizedPoint } from "./types";
+/**
+ * Canvas port of the Swift SDK's `AnnotationRenderer`
+ * (Sources/FeedbackKit/Annotation/AnnotationRenderer.swift). Same stroke
+ * width, arrowhead geometry, text-bubble metrics, scale/rotation math and
+ * hit-testing, so a report annotated in a browser renders the same way a
+ * native one does — and the dashboard can use this one file to redraw
+ * annotations from any platform on top of the raw screenshot.
+ *
+ * All sizes are in the *target's* coordinate space (CSS pixels on the web,
+ * points on iOS/macOS); callers scale the context for device pixels.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+/** Anything with `measureText` — lets hit-testing run without a real canvas in tests. */
+export interface TextMeasurer {
+    font: string;
+    measureText(text: string): {
+        width: number;
+    };
+}
+export declare const STROKE_WIDTH = 4;
+export declare const HIT_TEST_TOLERANCE = 16;
+export declare function textFont(scale?: number): string;
+/** Accepts both the `[x, y]` wire shape and a legacy/defensive `{x, y}` object. */
+export declare function readPoint(p: NormalizedPoint | Point | unknown): Point;
+export declare function denormalize(annotation: FeedbackAnnotation, size: Size): Point[];
+export declare function normalizeColor(hex: string | undefined): string;
+export declare function drawAnnotations(ctx: CanvasRenderingContext2D, annotations: readonly FeedbackAnnotation[], size: Size): void;
+export declare function drawAnnotation(ctx: CanvasRenderingContext2D, annotation: FeedbackAnnotation, size: Size): void;
+export declare function arrowGeometry(rawStart: Point, rawEnd: Point, scale?: number, rotation?: number): {
+    start: Point;
+    end: Point;
+    left: {
+        x: number;
+        y: number;
+    };
+    right: {
+        x: number;
+        y: number;
+    };
+};
+export declare function textBubbleRect(measurer: TextMeasurer, text: string, point: Point, scale?: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function rectangleCorners(center: Point, halfWidth: number, halfHeight: number, rotation: number): Point[];
+/**
+ * Whether a pointer at `point` grabs `annotation` for a drag. Freehand
+ * strokes are intentionally not draggable, same as native.
+ */
+export declare function hitTest(annotation: FeedbackAnnotation, point: Point, size: Size, measurer: TextMeasurer): boolean;
+export declare function midpoint(a: Point, b: Point): Point;
+export declare function rotate(p: Point, angle: number, center: Point): Point;
+export declare function scaled(p: Point, scale: number, center: Point): Point;
+export declare function distanceToSegment(p: Point, a: Point, b: Point): number;

package/dist/types/submit.d.ts

@@ -0,0 +1,42 @@
+import type { FeedbackKitConfiguration, FeedbackProduct, FeedbackReport } from "./types";
+/** The hosted FeedbackKit dashboard's ingestion endpoint. */
+export declare const DEFAULT_ENDPOINT = "https://gpucoladcyvijefdjudf.supabase.co/functions/v1/ingest-feedback";
+export declare class FeedbackSubmissionError extends Error {
+    readonly kind: "not_configured" | "network" | "server";
+    readonly status?: number | undefined;
+    constructor(message: string, kind: "not_configured" | "network" | "server", status?: number | undefined);
+}
+/**
+ * Wire format sent to the ingestion endpoint — the exact shape the Swift
+ * SDK's private `IngestPayload` produces (Sources/FeedbackKit/Networking/FeedbackSubmitter.swift)
+ * and `supabase/functions/ingest-feedback` accepts. snake_case at the top
+ * level; `environment`/`annotations`/`logs` pass through untouched (camelCase
+ * JSONB). Optional fields are omitted rather than sent as null, matching
+ * Swift's `encodeIfPresent`.
+ */
+export interface IngestPayload {
+    project_key: string;
+    id: string;
+    created_at: string;
+    text: string;
+    screenshot_raw_png_base64?: string;
+    screenshot_annotated_png_base64?: string;
+    annotations: FeedbackReport["annotations"];
+    environment: FeedbackReport["environment"];
+    attachment_filename?: string;
+    attachment_mime_type?: string;
+    attachment_data_base64?: string;
+    product_keys?: string[];
+    products?: {
+        key: string;
+        name: string;
+        description: string;
+        is_default: boolean;
+    }[];
+    logs?: FeedbackReport["logs"];
+}
+export declare function blobToBase64(blob: Blob): Promise<string>;
+export declare function encodePayload(report: FeedbackReport, projectKey: string): Promise<IngestPayload>;
+export declare function submitReport(report: FeedbackReport, configuration: FeedbackKitConfiguration): Promise<void>;
+/** `GET <endpoint>?project_key=…` — the products configured for the project in the dashboard. */
+export declare function fetchProducts(configuration: FeedbackKitConfiguration): Promise<FeedbackProduct[]>;

package/dist/types/types.d.ts

@@ -0,0 +1,149 @@
+import type { LogCaptureOptions } from "./logs";
+/**
+ * Public data model. Mirrors the Swift SDK's `FeedbackReport` family
+ * (Sources/FeedbackKit/Model/FeedbackReport.swift) so a report captured on
+ * the web is interchangeable with one captured on iOS/macOS/watchOS.
+ *
+ * Like the Swift SDK, the public API is camelCase and the wire format
+ * (see `submit.ts`) is snake_case at the top level — except `environment`,
+ * `annotations`, and `logs`, which are stored as opaque JSONB and read
+ * directly by the dashboard, the Developer Portal, and the CLI, so their
+ * property names are part of the cross-platform contract and must stay in
+ * sync with `web/src/lib/types.ts` and the Swift model by hand.
+ */
+/**
+ * A point normalized to 0...1 relative to the screenshot's width/height.
+ * Encoded as a `[x, y]` tuple because that's exactly how Swift's `CGPoint`
+ * encodes through `Codable` — the Developer Portal decodes web reports with
+ * the Swift SDK's own `FeedbackAnnotation`, so any other shape would fail.
+ */
+export type NormalizedPoint = [x: number, y: number];
+export type AnnotationKind = "rectangle" | "arrow" | "freehand" | "text";
+export interface FeedbackAnnotation {
+    kind: AnnotationKind;
+    /** Freehand: every point on the stroke. Rectangle/arrow: exactly two (start, end). Text: one (top-left). */
+    points: NormalizedPoint[];
+    colorHex: string;
+    /** Only set for `text` annotations. */
+    label?: string;
+    /** Uniform scale around the shape's center (rectangle/arrow) or font size (text). */
+    scale: number;
+    /** Rotation in radians around the shape's center (rectangle/arrow only). */
+    rotation: number;
+}
+/**
+ * Device/app/page context. Every field the Swift `FeedbackEnvironment` has
+ * is required here too (the Developer Portal can't decode a report missing
+ * any of them); the trailing web-only fields are optional additions that
+ * Swift's `Codable` simply ignores.
+ */
+export interface FeedbackEnvironment {
+    /** The real OS the browser runs on, e.g. "macOS", "Windows", "iOS", "Android". */
+    osName: string;
+    osVersion: string;
+    /** Browser name and major version, e.g. "Chrome 141". */
+    deviceModel: string;
+    appVersion: string;
+    appBuild: string;
+    /** The page's host, e.g. "app.example.com". */
+    bundleIdentifier: string;
+    /** Developer-set `FeedbackKit.currentScreen`, else `location.pathname`. */
+    screenName: string | null;
+    locale: string;
+    /** Viewport size in CSS pixels. */
+    screenWidthPoints: number;
+    screenHeightPoints: number;
+    /** `devicePixelRatio`. */
+    screenScale: number;
+    /** Always `"web"` for reports from this SDK. Native SDKs leave it unset. */
+    platform?: "web";
+    /** Full page URL at capture time, with the query string's sensitive values redacted. */
+    pageUrl?: string;
+    userAgent?: string;
+    /** Browser name alone, e.g. "Chrome". */
+    browserName?: string;
+    /** Full browser version, e.g. "141.0.7390.54". */
+    browserVersion?: string;
+}
+export type LogLevel = "log" | "info" | "warn" | "error" | "debug" | "network";
+/** One console message, uncaught error, or failed network request from before the report was made. */
+export interface FeedbackLogEntry {
+    level: LogLevel;
+    message: string;
+    /** ISO-8601 timestamp. */
+    timestamp: string;
+}
+export interface FeedbackAttachment {
+    filename: string;
+    mimeType: string;
+    data: Blob;
+}
+export interface FeedbackProduct {
+    key: string;
+    name: string;
+    description?: string;
+    isDefault?: boolean;
+}
+/**
+ * The complete report handed back to the developer on submit. FeedbackKit's
+ * job ends at producing this value — what happens to it (logging it,
+ * POSTing it to your own backend, or `FeedbackKit.submit` to the hosted
+ * dashboard) is up to you.
+ */
+export interface FeedbackReport {
+    id: string;
+    createdAt: Date;
+    text: string;
+    /** Raw viewport capture. Null if the user turned the screenshot off. */
+    screenshotRaw: Blob | null;
+    /** Same capture with annotations flattened in. Null under the same conditions. */
+    screenshotAnnotated: Blob | null;
+    /** Empty when there's no screenshot. */
+    annotations: FeedbackAnnotation[];
+    environment: FeedbackEnvironment;
+    attachment: FeedbackAttachment | null;
+    products: FeedbackProduct[];
+    /** Recent console output / errors / failed requests (web only). Empty if log capture is off. */
+    logs: FeedbackLogEntry[];
+}
+/** Brand colors for the widget, as hex strings (`#RRGGBB`). Mirrors Swift's `FeedbackTheme`. */
+export interface FeedbackTheme {
+    /** Send button, selected tool, screenshot toggle, trigger button. */
+    primaryColorHex?: string;
+    /** Cancel and attach buttons. */
+    secondaryColorHex?: string;
+}
+export type CaptureMode = "dom" | "display";
+export interface FeedbackKitConfiguration {
+    /** The project key from the dashboard's project settings. A routing key, not a secret. */
+    projectKey: string;
+    /**
+     * The ingestion endpoint, e.g. `https://<ref>.supabase.co/functions/v1/ingest-feedback`.
+     * Defaults to the hosted FeedbackKit dashboard.
+     */
+    endpoint?: string;
+    /** Static product list. When empty, products are fetched from the backend using `projectKey`. */
+    products?: FeedbackProduct[];
+    /** Product preselected in the composer (e.g. "web"). */
+    defaultProductKey?: string;
+    /** Your app's version/build, since a browser can't know them. */
+    appVersion?: string;
+    appBuild?: string;
+    /**
+     * Record recent console warnings/errors, uncaught exceptions, and failed
+     * network requests to attach to reports (the user can untick them per
+     * report). Default `true`; pass options to tune, or `false` to disable.
+     */
+    captureLogs?: boolean | LogCaptureOptions;
+}
+export interface CaptureOptions {
+    /**
+     * `"dom"` (default): re-render the page into an image — silent, no
+     * permission prompt. `"display"`: the browser's Screen Capture API —
+     * pixel-exact but shows a picker every time; falls back to `"dom"` where
+     * unsupported or declined.
+     */
+    mode?: CaptureMode;
+    /** Upper bound on the capture's pixel ratio, to keep uploads small on dense displays. Default 2. */
+    maxPixelRatio?: number;
+}

package/dist/types/ui/editor.d.ts

@@ -0,0 +1,60 @@
+import type { CapturedScreenshot } from "../capture";
+import type { FeedbackAnnotation } from "../types";
+export type Tool = "pen" | "rectangle" | "arrow" | "text" | "move";
+/** Same palette as the native toolbar: systemRed, systemYellow, systemGreen, systemBlue, label. */
+export declare const COLORS: readonly ["#FF3B30", "#FFCC00", "#34C759", "#007AFF", "#000000"];
+/**
+ * The annotation canvas: the screenshot, plus an "ink" canvas on top that
+ * the user draws on. Everything is stored in the capture's own coordinate
+ * space (viewport CSS pixels) and normalized to 0...1 on the way out, so the
+ * on-screen display size never leaks into the report — same contract as
+ * the native `AnnotationCanvasView`.
+ */
+export declare class AnnotationEditor {
+    private readonly shot;
+    readonly element: HTMLDivElement;
+    annotations: FeedbackAnnotation[];
+    tool: Tool;
+    color: string;
+    onChange: () => void;
+    private readonly base;
+    private readonly ink;
+    private readonly inkCtx;
+    private history;
+    private draft;
+    private draftStart;
+    private pointers;
+    private drag;
+    private gesture;
+    private selected;
+    private textInput;
+    private displayScale;
+    constructor(shot: CapturedScreenshot);
+    /** Fits the screenshot inside `maxWidth × maxHeight` (CSS px) keeping its aspect ratio. */
+    layout(maxWidth: number, maxHeight: number): void;
+    setTool(tool: Tool): void;
+    undo(): void;
+    clear(): void;
+    get canUndo(): boolean;
+    /** Deletes the annotation last moved/selected with the move tool. */
+    deleteSelected(): boolean;
+    /** The screenshot at full capture resolution with every annotation burned in. */
+    flatten(): HTMLCanvasElement;
+    commitTextInput(): void;
+    cancelTextInput(): void;
+    render(): void;
+    private changed;
+    private snapshot;
+    /** Pointer position in capture coordinates (viewport CSS px of the original page). */
+    private toCapture;
+    private normalize;
+    private hitIndex;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Mouse/trackpad stand-in for pinch/twist: wheel scales, Shift/Alt+wheel rotates. */
+    private onWheel;
+    private startGesture;
+    private updateGesture;
+    private openTextInput;
+}

package/dist/types/ui/icons.d.ts

@@ -0,0 +1,15 @@
+export declare const icons: {
+    feedback: string;
+    pen: string;
+    rectangle: string;
+    arrow: string;
+    text: string;
+    move: string;
+    undo: string;
+    trash: string;
+    close: string;
+    plus: string;
+    paperclip: string;
+    send: string;
+    check: string;
+};

package/dist/types/ui/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Widget CSS, scoped inside the host's Shadow DOM so neither the page's
+ * styles nor ours leak across. `:host { all: initial }` also blocks inherited
+ * properties (font, color, line-height) from the page.
+ */
+export declare const styles = "\n:host {\n  all: initial;\n  --fk-primary: #007aff;\n  --fk-secondary: #6b7280;\n  --fk-bg: #ffffff;\n  --fk-surface: #f5f5f7;\n  --fk-border: rgba(0, 0, 0, 0.1);\n  --fk-text: #111114;\n  --fk-muted: #6b6b73;\n  --fk-danger: #d92d20;\n  --fk-backdrop: rgba(10, 10, 14, 0.55);\n  --fk-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  color: var(--fk-text);\n}\n@media (prefers-color-scheme: dark) {\n  :host(:not([data-color-scheme=\"light\"])) {\n    --fk-bg: #1c1c1f;\n    --fk-surface: #26262a;\n    --fk-border: rgba(255, 255, 255, 0.12);\n    --fk-text: #f2f2f5;\n    --fk-muted: #a0a0a8;\n    --fk-backdrop: rgba(0, 0, 0, 0.65);\n  }\n}\n:host([data-color-scheme=\"dark\"]) {\n  --fk-bg: #1c1c1f;\n  --fk-surface: #26262a;\n  --fk-border: rgba(255, 255, 255, 0.12);\n  --fk-text: #f2f2f5;\n  --fk-muted: #a0a0a8;\n  --fk-backdrop: rgba(0, 0, 0, 0.65);\n}\n*, *::before, *::after { box-sizing: border-box; }\nbutton { font: inherit; color: inherit; cursor: pointer; }\nbutton:disabled { cursor: not-allowed; opacity: 0.45; }\n:focus-visible { outline: 2px solid var(--fk-primary); outline-offset: 2px; }\n\n/* ---------- floating trigger ---------- */\n.fk-trigger {\n  position: fixed;\n  z-index: 2147483000;\n  bottom: 20px;\n  right: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 44px;\n  padding: 0 16px 0 14px;\n  border: 0;\n  border-radius: 22px;\n  background: var(--fk-primary);\n  color: #fff;\n  font-weight: 600;\n  font-size: 14px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);\n  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;\n}\n.fk-trigger[data-position=\"bottom-left\"] { right: auto; left: 20px; }\n.fk-trigger:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26); }\n.fk-trigger[data-compact=\"true\"] { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 24px; }\n.fk-trigger[data-compact=\"true\"] .fk-trigger-label { display: none; }\n.fk-trigger[aria-busy=\"true\"] { opacity: 0.6; pointer-events: none; }\n\n/* ---------- overlay ---------- */\n.fk-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483001;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: var(--fk-backdrop);\n  animation: fk-fade 0.16s ease-out;\n}\n@keyframes fk-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes fk-rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }\n.fk-dialog {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 340px;\n  width: min(1180px, 100%);\n  height: min(780px, 100%);\n  overflow: hidden;\n  border-radius: 16px;\n  background: var(--fk-bg);\n  box-shadow: var(--fk-shadow);\n  animation: fk-rise 0.2s ease-out;\n}\n.fk-stage {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  background: var(--fk-surface);\n  border-right: 1px solid var(--fk-border);\n}\n.fk-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--fk-border);\n}\n.fk-toolbar-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--fk-border); }\n.fk-tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--fk-muted);\n}\n.fk-tool:hover:not(:disabled) { background: var(--fk-border); color: var(--fk-text); }\n.fk-tool[aria-pressed=\"true\"] { background: var(--fk-primary); color: #fff; }\n.fk-swatch {\n  width: 22px;\n  height: 22px;\n  margin: 0 2px;\n  padding: 0;\n  border-radius: 11px;\n  border: 2px solid var(--fk-bg);\n  box-shadow: 0 0 0 1px var(--fk-border);\n}\n.fk-swatch[aria-pressed=\"true\"] { box-shadow: 0 0 0 2px var(--fk-text); }\n.fk-hint { margin-left: auto; font-size: 12px; color: var(--fk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.fk-canvas-wrap {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  overflow: hidden;\n}\n.fk-canvas-box { position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); border-radius: 6px; overflow: hidden; }\n.fk-canvas-box canvas { display: block; }\n.fk-canvas-box .fk-ink { position: absolute; inset: 0; touch-action: none; }\n.fk-stage[data-screenshot=\"off\"] .fk-canvas-box { opacity: 0.25; filter: grayscale(1); }\n.fk-stage[data-screenshot=\"off\"] .fk-toolbar button { pointer-events: none; opacity: 0.35; }\n.fk-off-note {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: var(--fk-muted);\n  pointer-events: none;\n}\n.fk-stage[data-screenshot=\"off\"] .fk-off-note { display: flex; }\n.fk-text-input {\n  position: absolute;\n  z-index: 2;\n  min-width: 120px;\n  padding: 6px 8px;\n  border: 2px solid var(--fk-primary);\n  border-radius: 8px;\n  background: var(--fk-bg);\n  color: var(--fk-text);\n  font: bold 14px -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  outline: none;\n}\n\n/* ---------- composer ---------- */\n.fk-composer { display: flex; flex-direction: column; min-height: 0; padding: 18px; gap: 14px; overflow-y: auto; }\n.fk-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.fk-title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }\n.fk-close { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: 15px; background: var(--fk-surface); color: var(--fk-muted); }\n.fk-close:hover { color: var(--fk-text); }\n.fk-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--fk-muted); text-transform: uppercase; letter-spacing: 0.04em; }\n.fk-textarea {\n  width: 100%;\n  min-height: 140px;\n  resize: vertical;\n  padding: 10px 12px;\n  border: 1px solid var(--fk-border);\n  border-radius: 10px;\n  background: var(--fk-bg);\n  color: var(--fk-text);\n  font: inherit;\n  line-height: 1.45;\n}\n.fk-textarea:focus { outline: none; border-color: var(--fk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fk-primary) 22%, transparent); }\n.fk-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.fk-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 28px;\n  padding: 0 11px;\n  border: 1px solid var(--fk-border);\n  border-radius: 14px;\n  background: var(--fk-bg);\n  font-size: 13px;\n}\n.fk-chip[aria-pressed=\"true\"] { border-color: var(--fk-primary); background: color-mix(in srgb, var(--fk-primary) 12%, transparent); color: var(--fk-primary); font-weight: 600; }\n.fk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.fk-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }\n.fk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }\n.fk-switch-track { position: relative; width: 36px; height: 22px; border-radius: 11px; background: var(--fk-border); transition: background 0.15s; }\n.fk-switch-track::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }\n.fk-switch input:checked + .fk-switch-track { background: var(--fk-primary); }\n.fk-switch input:checked + .fk-switch-track::after { transform: translateX(14px); }\n.fk-switch input:focus-visible + .fk-switch-track { outline: 2px solid var(--fk-primary); outline-offset: 2px; }\n.fk-attach {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 12px;\n  border: 1px dashed var(--fk-secondary);\n  border-radius: 8px;\n  background: transparent;\n  color: var(--fk-secondary);\n  font-size: 13px;\n}\n.fk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 8px; background: var(--fk-surface); font-size: 12px; }\n.fk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fk-file button { display: inline-flex; border: 0; background: transparent; color: var(--fk-muted); padding: 2px; }\n.fk-meta { font-size: 12px; color: var(--fk-muted); }\n.fk-meta details summary { cursor: pointer; }\n.fk-meta pre { max-height: 140px; overflow: auto; margin: 6px 0 0; padding: 8px; border-radius: 8px; background: var(--fk-surface); font-size: 11px; white-space: pre-wrap; word-break: break-word; }\n.fk-spacer { flex: 1; }\n.fk-actions { display: flex; gap: 8px; }\n.fk-btn {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n  height: 40px;\n  border-radius: 10px;\n  font-weight: 600;\n}\n.fk-btn-secondary { border: 1px solid var(--fk-border); background: transparent; color: var(--fk-secondary); }\n.fk-btn-primary { border: 0; background: var(--fk-primary); color: #fff; }\n.fk-btn-primary:hover:not(:disabled) { filter: brightness(1.06); }\n.fk-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--fk-danger) 12%, transparent); color: var(--fk-danger); font-size: 13px; }\n.fk-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: fk-spin 0.7s linear infinite; }\n@keyframes fk-spin { to { transform: rotate(360deg); } }\n.fk-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; text-align: center; }\n.fk-done-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 24px; background: var(--fk-primary); color: #fff; }\n.fk-done-icon svg { width: 26px; height: 26px; }\n.fk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---------- narrow screens: stack stage over composer ---------- */\n@media (max-width: 760px) {\n  .fk-overlay { padding: 0; }\n  .fk-dialog { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; border-radius: 0; }\n  .fk-stage { border-right: 0; border-bottom: 1px solid var(--fk-border); }\n  .fk-hint { display: none; }\n  .fk-canvas-wrap { padding: 10px; }\n  .fk-composer { max-height: 55vh; padding: 14px; gap: 10px; }\n  .fk-textarea { min-height: 84px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .fk-overlay, .fk-dialog { animation: none; }\n}\n";

package/dist/types/ui/widget.d.ts

@@ -0,0 +1,48 @@
+import type { CaptureOptions, FeedbackKitConfiguration, FeedbackLogEntry, FeedbackProduct, FeedbackReport, FeedbackTheme } from "../types";
+export interface WidgetDeps {
+    configuration(): FeedbackKitConfiguration | null;
+    theme(): FeedbackTheme | null;
+    products(): Promise<FeedbackProduct[]>;
+    defaultProductKey(): string | undefined;
+    logs(): FeedbackLogEntry[];
+    captureOptions(): CaptureOptions;
+    currentScreen(): string | null;
+}
+export interface OpenOptions {
+    /** POST the report to the configured endpoint before resolving. */
+    submit: boolean;
+    /** Called with the finished report (after a successful submit, when `submit` is true). */
+    onReport?: (report: FeedbackReport) => void | Promise<void>;
+    /** Called if submitting fails. The dialog stays open so the user can retry. */
+    onError?: (error: unknown) => void;
+}
+export interface TriggerOptions {
+    position?: "bottom-right" | "bottom-left";
+    /** Button text. Default "Feedback". */
+    label?: string;
+    /** Icon-only round button. */
+    compact?: boolean;
+}
+/**
+ * Owns the widget's Shadow DOM host: the floating trigger button and the
+ * capture → annotate → describe → send dialog. One per page.
+ */
+export declare class Widget {
+    private readonly deps;
+    private host;
+    private shadow;
+    private trigger;
+    private pending;
+    constructor(deps: WidgetDeps);
+    /** True for the widget's own host element — used to keep it out of screenshots. */
+    isOwnNode: (node: Node) => boolean;
+    get isOpen(): boolean;
+    showTrigger(options: TriggerOptions, onClick: () => void): void;
+    hideTrigger(): void;
+    destroy(): void;
+    open(options: OpenOptions): Promise<FeedbackReport | null>;
+    private mount;
+    private applyTheme;
+    private run;
+}
+export declare function uuid(): string;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "feedbackkit-web",
+  "version": "1.0.37",
+  "description": "Drop-in in-app feedback for websites: capture a screenshot, annotate it, describe the problem, and get a structured FeedbackKit report.",
+  "type": "module",
+  "main": "./dist/feedbackkit.js",
+  "module": "./dist/feedbackkit.js",
+  "types": "./dist/types/index.d.ts",
+  "unpkg": "./dist/feedbackkit.iife.js",
+  "jsdelivr": "./dist/feedbackkit.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/feedbackkit.js"
+    },
+    "./iife": "./dist/feedbackkit.iife.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && FEEDBACKKIT_IIFE=1 vite build && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "dev": "vite build --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:e2e": "npm run build && node e2e/run.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tianhaoz95/feedback-kit.git",
+    "directory": "web-sdk"
+  },
+  "homepage": "https://github.com/tianhaoz95/feedback-kit/tree/main/web-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/tianhaoz95/feedback-kit/issues"
+  },
+  "keywords": [
+    "feedback",
+    "bug-report",
+    "screenshot",
+    "annotation",
+    "widget",
+    "feedbackkit"
+  ],
+  "license": "SEE LICENSE IN LICENSE",
+  "dependencies": {
+    "modern-screenshot": "^4.7.0"
+  },
+  "devDependencies": {
+    "playwright": "^1.63.0",
+    "typescript": "^5",
+    "vite": "^7",
+    "vitest": "^4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}