@ozvi/widget 1.0.0 → 1.1.0

package/README.md

@@ -5,7 +5,9 @@ Ozvi inside your app, MIT:
 - `<ozvi-widget>`: the floating feedback widget (bug reports with masked context, ideas with voting), Preact in shadow DOM;
 - `window.Ozvi`: a JavaScript API to open it from your own buttons, prefill it, identify the person and listen to events;
 - `<ozvi-roadmap>` and `<ozvi-changelog>`: inline embeds (with a "What's new" badge);
-- `@ozvi/widget`, `@ozvi/widget/react`, `@ozvi/widget/vue`: typed ESM wrappers.
+- `@ozvi/widget`, `@ozvi/widget/react`, `@ozvi/widget/vue`: typed ESM wrappers (`npm i @ozvi/widget`).
+
+Docs: [ozvi.io/docs/widget](https://ozvi.io/docs/widget). Signing people in from your backend: [`@ozvi/sdk`](https://www.npmjs.com/package/@ozvi/sdk).
 
 ```html
 <script src="https://feedback.example.com/widget.js" defer></script>
@@ -239,6 +241,36 @@ window.OzviConfig = { mask: "all" };
 If the copy can't be masked (an unexpected error), the report goes **without** a screenshot, never with
 an unmasked one. The reporter still sees the screenshot before sending and can remove it.
 
+## Placement and styling
+
+The floating button sits bottom right, 20 px from the edges. `position="bottom-left"` moves it to the left corner and
+the panel opens towards the page. Your page's CSS on the `ozvi-widget` element wins over the widget's own, so offsets
+and layering need no option:
+
+```css
+/* above a cookie bar or a chat bubble, below your own modals */
+ozvi-widget { bottom: 88px; right: 24px; z-index: 50; }
+```
+
+The inside lives in shadow DOM; these parts are a public, stable styling hook (`::part()`), everything else may change:
+
+| Part | What it is |
+|---|---|
+| `launcher` | the floating button (the theme gives it the accent colour, radius and font) |
+| `launcher-label` | the text in the button; the button keeps its accessible name if you hide it |
+| `panel` | the opened panel |
+
+```css
+/* an icon-only round button */
+ozvi-widget::part(launcher) { width: 48px; height: 48px; padding: 0; justify-content: center; }
+ozvi-widget::part(launcher-label) { display: none; }
+ozvi-widget::part(panel) { box-shadow: none; }
+```
+
+Colours, fonts and radius come from the board's theme (admin → Appearance), so the widget, the board and the e-mails
+stay alike; prefer that over overriding colours here. No button at all: `launcher="none"` and `Ozvi.open()` from your
+own menu.
+
 ## Configuration
 
 Simple switches as attributes:

package/dist/types.d.ts

@@ -86,6 +86,8 @@ export interface OzviOptions {
     appVersion?: string;
     /** "none" hides the floating button; open it with Ozvi.open(). */
     launcher?: "none" | "button";
+    /** Corner of the floating button; the panel opens on the same side. Offsets and z-index: CSS on ozvi-widget. */
+    position?: "bottom-right" | "bottom-left";
     lang?: OzviLang;
     label?: string;
     network?: "off" | "bodies";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozvi/widget",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "Ozvi feedback widget for your app: bug reports with masked screenshots, ideas and voting, roadmap and changelog embeds. Plain ESM, React and Vue. MIT.",
   "type": "module",

package/dist/capture.d.ts

@@ -1,94 +0,0 @@
-/**
- * What the widget remembers so the team can reproduce a bug: the last requests (network log), the last
- * user actions (route changes, clicks by accessible name, form submits) and console errors.
- * Everything is masked BEFORE it is kept, lives only in memory, and leaves the page only with a bug report.
- *
- * Host app configuration (set before widget.js loads, or later via Ozvi.configure):
- *   window.OzviConfig = {
- *     network: false,              // no network log
- *     networkBodies: true,         // also keep bodies of FAILED requests (masked, max 2 000 chars)
- *     actions: false,              // no action timeline
- *     maskRequest: (e) => e,       // last word on every request: change it, or return null to drop it
- *     links: { sentry: () => url, posthog: url, logrocket: url },
- *     detectLinks: true,           // read session links from Sentry/PostHog/LogRocket globals
- *     sentryOrg: "acme",           // needed to build the Sentry replay URL
- *   }
- * Attributes on <ozvi-widget> do the same for the simple cases: network="off|bodies", actions="off", links="auto".
- */
-export interface NetEntry {
-    at: number;
-    method: string;
-    url: string;
-    status: number;
-    ms: number;
-    failed: boolean;
-    size?: number;
-    type?: string;
-    error?: string;
-    req?: string;
-    res?: string;
-}
-export interface Action {
-    at: number;
-    kind: "nav" | "click" | "submit";
-    label: string;
-    role?: string;
-}
-export interface LogLine {
-    at: number;
-    text: string;
-}
-export type LinkKind = "sentry" | "posthog" | "logrocket";
-export interface OzviConfig {
-    network?: boolean;
-    networkBodies?: boolean;
-    actions?: boolean;
-    maskRequest?: (e: NetEntry) => NetEntry | null | false | undefined | void;
-    links?: Partial<Record<LinkKind, string | (() => string | null | undefined)>>;
-    detectLinks?: boolean;
-    sentryOrg?: string;
-}
-export declare const MAX_NET = 30;
-export declare const MAX_ACTIONS = 30;
-export declare const MAX_ERRORS = 20;
-export declare const BODY_LIMIT = 2000;
-/** Fixed-size buffer: the oldest entry falls out. */
-export declare function ring<T>(max: number): {
-    push(x: T): void;
-    list: () => T[];
-    clear(): void;
-};
-export declare const net: {
-    push(x: NetEntry): void;
-    list: () => NetEntry[];
-    clear(): void;
-};
-export declare const actions: {
-    push(x: Action): void;
-    list: () => Action[];
-    clear(): void;
-};
-export declare const errors: {
-    push(x: LogLine): void;
-    list: () => LogLine[];
-    clear(): void;
-};
-/** URL prefixes never logged: the Ozvi host and the host app's token endpoint (its response IS a token). */
-export declare const ignored: string[];
-/** Built-in masking, then the host's maskRequest hook, then masking again (the hook may add data). */
-export declare function finish(e: NetEntry): void;
-export declare function installNetwork(): void;
-/** The accessible name of a clicked control, never an input's value (except button-like inputs, whose value IS the label). */
-export declare function nameOf(el: Element): string;
-export declare function installActions(): void;
-export declare function installErrors(): void;
-/** Session links the host set, plus (only when allowed) the ones its Sentry / PostHog / LogRocket expose. */
-export declare function sessionLinks(): Partial<Record<LinkKind, string>>;
-/** What goes into a bug report's context; respects the opt-outs at the moment of sending too. */
-export declare function snapshot(): {
-    network: NetEntry[];
-    actions: Action[];
-    errors: LogLine[];
-    links: Partial<Record<LinkKind, string>>;
-};
-export declare function install(): void;