@tra-bilisim/report-issue 0.1.0 → 0.1.2

package/README.md

@@ -40,6 +40,8 @@ const adapter: ReportIssueAdapter = {
   getMetadata: () => ({ userId: currentUser.id, roles: currentUser.roles }),
   getCurrentUrl: () => window.location.href,
   pageOptions: [{ value: 'https://app/x', label: '/x' }],
+  pageInputMode: 'select',          // 'select' (default, uses pageOptions) | 'input' (free-text URL)
+  maskCapture: true,                 // default true (KVKK-safe); set false for unmasked screenshots/recordings
   environmentResolver: url => (url.includes('localhost') ? 'Locale' : 'Prod'),
   t: key => i18n.translate(key),   // English keys are the default fallback text
   locale: 'tr',
@@ -56,17 +58,183 @@ function App() {
 }
 ```
 
+## Localization (i18n)
+
+The widget never bundles its own i18n library — it calls `t(key)` from your adapter
+for every user-facing string. **The key itself is the English fallback text**, so if
+you omit `t`, the UI renders in English as-is.
+
+Wire it to whatever i18n system you already use:
+
+```tsx
+const adapter: ReportIssueAdapter = {
+  submit: ...,
+  t: key => i18n.translate(key),   // e.g. react-i18next: (key) => i18next.t(key)
+  locale: 'tr',
+};
+```
+
+Below is the **complete list of keys** used by the widget, with Turkish
+translations. Drop this straight into your translation resource file (adjust the
+shape to whatever your `i18n.translate`/`t` implementation expects — this is a plain
+key → value map):
+
+```ts
+{
+  // Annotation editor toolbar
+  'Select': 'Seç',
+  'Draw': 'Çizim',
+  'Line': 'Çizgi',
+  'Arrow': 'Ok',
+  'Rectangle': 'Dikdörtgen',
+  'Circle': 'Daire',
+  'Text': 'Metin',
+  'Highlight': 'Vurgula',
+  'Thickness': 'Kalınlık',
+  'Undo': 'Geri al',
+  'Redo': 'Yinele',
+  'Cancel': 'İptal',
+  'Confirm': 'Onayla',
+
+  // Floating button / dialog title
+  'Report an Issue': 'Sorun Bildir',
+  'Describe the problem and attach screenshots or a screen recording.': 'Sorunu açıklayın ve ekran görüntüsü veya ekran kaydı ekleyin.',
+
+  // Attachments
+  'Attachments': 'Ekler',
+  'Take a Screenshot': 'Ekran Görüntüsü Al',
+  'Record Video': 'Video Kaydet',
+  '{name} exceeds the size limit.': '{name} boyut sınırını aşıyor.',
+  'You can attach at most {count} files.': 'En fazla {count} dosya ekleyebilirsiniz.',
+  'Failed to capture screenshot.': 'Ekran görüntüsü alınamadı.',
+
+  // Screen recording
+  'Screen recording is only supported on Chrome and Edge browsers.': 'Ekran kaydı yalnızca Chrome ve Edge tarayıcılarında desteklenir.',
+  'Only this application tab can be recorded. Please share this tab.': 'Yalnızca bu uygulama sekmesi kaydedilebilir. Lütfen bu sekmeyi paylaşın.',
+  'Screen recording permission was denied.': 'Ekran kaydı izni reddedildi.',
+  'Stop': 'Durdur',
+
+  // Recording / screenshot consent dialog (KVKK)
+  'Screenshot Consent': 'Ekran Görüntüsü Onayı',
+  'Screen Recording Consent': 'Ekran Kaydı Onayı',
+  'Before the screenshot is taken, please review which data is collected and give your consent.': 'Ekran görüntüsü alınmadan önce, hangi verilerin toplandığını inceleyip onayınızı verin.',
+  'Before the recording starts, please review which data is collected and give your consent.': 'Kayıt başlamadan önce, hangi verilerin toplandığını inceleyip onayınızı verin.',
+  'To diagnose the issue you reported, a screenshot of this application screen will be captured. Sensitive on-screen data is masked before capture.': 'Bildirdiğiniz sorunu teşhis edebilmek için bu uygulama ekranının bir görüntüsü alınacaktır. Hassas veriler görüntü alınmadan önce maskelenir.',
+  'To diagnose the issue you reported, a short screen recording of only this tab will be captured. All on-screen data is masked during recording; you may temporarily reveal it.': 'Bildirdiğiniz sorunu teşhis edebilmek için yalnızca bu sekmenin kısa bir ekran kaydı alınacaktır. Kayıt sırasında tüm ekran verileri maskelenir; isterseniz geçici olarak görünür hale getirebilirsiniz.',
+  'Data that will be collected:': 'Toplanacak veriler:',
+  'A masked screenshot of this application screen': 'Bu uygulama ekranının maskelenmiş bir görüntüsü',
+  'A masked screen recording limited to this application tab': 'Yalnızca bu sekmeyle sınırlı, maskelenmiş bir ekran kaydı',
+  'Console and network logs of this session': 'Bu oturuma ait konsol ve ağ kayıtları',
+  'Session metadata (user, roles, browser, page)': 'Oturum meta verileri (kullanıcı, roller, tarayıcı, sayfa)',
+  'This data is used solely to diagnose and resolve the reported issue and is shared only with the relevant technical team. You may withdraw your consent by not submitting the report.': 'Bu veriler yalnızca bildirdiğiniz sorunu teşhis edip çözmek amacıyla kullanılır ve yalnızca ilgili teknik ekiple paylaşılır. Raporu göndermeyerek onayınızı geri çekebilirsiniz.',
+  'I have read the above and give my explicit consent to the processing and sharing of this data.': 'Yukarıdakileri okudum ve bu verilerin işlenmesine ve paylaşılmasına açıkça onay veriyorum.',
+  'Take Screenshot': 'Ekran Görüntüsü Al',
+  'Start Recording': 'Kaydı Başlat',
+
+  // Page field
+  'The page where the issue occurred': 'Sorunun oluştuğu sayfa',
+  'Current page': 'Geçerli sayfa',
+  'Enter the page where the issue occurred': 'Sorunun oluştuğu sayfayı girin',
+  'Please specify the page.': 'Lütfen sayfayı belirtin.',
+
+  // Category / description
+  'Category': 'Kategori',
+  'optional': 'opsiyonel',
+  'Description': 'Açıklama',
+  'Describe what happened...': 'Ne olduğunu açıklayın...',
+
+  // Select control
+  'Search': 'Ara',
+  'No results': 'Sonuç bulunamadı',
+
+  // Submit
+  'Submit': 'Gönder',
+  'An error occurred!': 'Bir hata oluştu!',
+}
+```
+
+`{name}` and `{count}` are literal placeholders — the widget does simple
+`.replace('{name}', ...)` / `.replace('{count}', ...)` substitution itself, so keep
+those tokens verbatim in your translated value.
+
 ## Network log capture (optional)
 
-Feed your axios instance into the shared log store with one call:
+`attachAxiosNetworkLogging(instance, options?)` installs request/response
+interceptors on your axios instance that feed the shared report-issue log store.
+The captured requests are attached to a report as `networkLogs` automatically.
+
+Call it **once**, at module scope where you create your axios instance — not inside
+a React component (that would re-attach on every render):
 
 ```ts
+// src/api/http.ts
+import axios from 'axios';
 import { attachAxiosNetworkLogging } from '@tra-bilisim/report-issue/adapters/axios';
-attachAxiosNetworkLogging(myAxiosInstance);
+
+export const http = axios.create({ baseURL: '/api' });
+
+// One call — done. Every request through `http` is now logged.
+attachAxiosNetworkLogging(http);
+```
+
+`attachAxiosNetworkLogging` returns a **detach** function that removes the
+interceptors (useful in tests or HMR):
+
+```ts
+const detach = attachAxiosNetworkLogging(http);
+// ...later
+detach();
+```
+
+### Options
+
+Both options are optional — the defaults cover common API shapes.
+
+```ts
+attachAxiosNetworkLogging(http, {
+  // Pull a human-readable message out of the response body for the log entry.
+  // Default looks for { message | Message | errorMessage | ErrorMessage }.
+  getMessage: data => (data as any)?.error?.detail,
+
+  // Decide whether a response counts as an error in the log.
+  // Default: any status < 200 or >= 300.
+  isErrorResponse: (status, data) =>
+    status >= 400 || (data as any)?.success === false,
+});
 ```
 
-Or wire your own transport by calling the primitives from `@tra-bilisim/report-issue/core`:
-`beginNetworkRequest`, `completeNetworkRequest`, `failNetworkRequest`.
+### Request correlation header
+
+Each logged request is tagged with an `X-Request-Tracking-Id` header. If your
+backend already sets/echoes this header, the adapter **reuses** it; otherwise it
+generates one (`rpi_<time>_<rand>`). This lets you cross-reference a captured
+request with your server logs.
+
+### Custom transport (no axios)
+
+Using `fetch` or another client? Skip the adapter and call the core primitives
+directly from `@tra-bilisim/report-issue/core`:
+
+```ts
+import {
+  beginNetworkRequest,
+  completeNetworkRequest,
+  failNetworkRequest,
+} from '@tra-bilisim/report-issue/core';
+
+async function loggedFetch(url: string, init?: RequestInit) {
+  const id = crypto.randomUUID();
+  beginNetworkRequest(id, init?.method ?? 'GET', url);
+  try {
+    const res = await fetch(url, init);
+    completeNetworkRequest(id, res.status, !res.ok);
+    return res;
+  } catch (err) {
+    failNetworkRequest(id, undefined, (err as Error).message);
+    throw err;
+  }
+}
+```
 
 ## Wire contract (`submit`)
 
@@ -88,13 +256,62 @@ Or wire your own transport by calling the primitives from `@tra-bilisim/report-i
 
 `submit` must resolve to `{ ok: boolean; message?: string | null }`.
 
-## Masking controls (data attributes)
+## Masking (KVKK privacy)
+
+By default, **everything is masked**: page text is replaced with `●●●●●●` and
+input/textarea values are hidden before a screenshot is taken or a recording
+starts. This is the safe default — turn it off only if your app has no
+sensitive on-screen data.
+
+```ts
+const adapter: ReportIssueAdapter = {
+  submit: ...,
+  maskCapture: false, // disable masking entirely — screenshots/recordings capture the real UI
+};
+```
+
+`maskCapture` is a single on/off switch for **both** capture types (screenshot and
+screen recording); there's no separate flag per type. When `true` (default), the
+per-element data attributes below give you fine-grained control over what stays
+masked/visible within that overall mask:
+
+### Masking controls (data attributes)
 
 - `data-report-mask-ignore` — never mask this subtree (also excluded from the video mask)
 - `data-report-mask-text-ignore` — keep text visible (still masks inputs)
 - `data-report-ignore-capture` — exclude from screenshots entirely
 - `data-report-mask-control` / `data-report-mask-value` — force text masking
 
+### Masking controls for third-party markup (CSS selectors)
+
+The attributes above require you to add them to your own JSX. If the element you
+need to exclude is rendered by a component you don't control — a `<legend>` from a
+form library, a chart tooltip, a portal from another package — you can't attach an
+attribute to it. `maskSelectors` gives you the same four controls as **CSS
+selectors** instead, so you can target it from outside without touching its markup:
+
+```ts
+const adapter: ReportIssueAdapter = {
+  submit: ...,
+  maskSelectors: {
+    ignore: ['legend', '.third-party-lib__tooltip'],   // == data-report-mask-ignore
+    textIgnore: ['.some-lib-readonly-label'],           // == data-report-mask-text-ignore
+    forceTextMask: [],                                  // == data-report-mask-control
+    ignoreCapture: [],                                  // == data-report-ignore-capture
+  },
+};
+```
+
+All four arrays are optional and additive — they extend the built-in attributes,
+they don't replace them. Selectors are matched the same way the attributes are:
+against the element itself when masking text (a `<legend>Personal info</legend>`
+selector directly excludes its own text) and against **ancestors** when masking
+inputs (`ignore: ['.card']` protects inputs nested inside `.card`, not a `.card`
+element that is itself an input). Prefer a selector specific enough to avoid
+unintentionally un-masking real user data elsewhere on the page (e.g. `'legend'` is
+fine if you have no other sensitive `<legend>` elements; otherwise scope it further,
+e.g. `'.my-form legend'`).
+
 ## Entry points
 
 - `@tra-bilisim/report-issue` — React provider, button, dialog, hooks, types

package/dist/{AnnotationEditor-ILMYBTOG.js → AnnotationEditor-XYSZQLAH.js}

@@ -1,5 +1,6 @@
-import { useReportIssueConfig, Button } from './chunk-JMQUG5Q7.js';
+import { useReportIssueConfig, Button } from './chunk-6IHDBCB5.js';
 import './chunk-EXDFVVYA.js';
+import './chunk-7ONPNSFH.js';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { Canvas, PencilBrush, FabricImage, Rect, Ellipse, Line, IText, Triangle, Group } from 'fabric';
 import { MousePointer2, Pencil, Minus, MoveRight, Square, Circle, Type, Highlighter, Undo2, Redo2 } from 'lucide-react';

package/dist/{chunk-JMQUG5Q7.js → chunk-6IHDBCB5.js}

@@ -1,4 +1,5 @@
 import { patchConsole } from './chunk-EXDFVVYA.js';
+import { configureMaskSelectors } from './chunk-7ONPNSFH.js';
 import { createContext, forwardRef, useState, useMemo, useEffect, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -32,7 +33,8 @@ function resolveConfig(adapter) {
     getCurrentUrl: adapter.getCurrentUrl ?? (() => typeof window !== "undefined" ? window.location.href : ""),
     maxFiles: adapter.maxFiles ?? DEFAULT_MAX_FILES,
     maxFileSizeBytes: adapter.maxFileSizeBytes ?? DEFAULT_MAX_FILE_SIZE,
-    maxRecordingSeconds: adapter.maxRecordingSeconds ?? DEFAULT_MAX_RECORDING_SECONDS
+    maxRecordingSeconds: adapter.maxRecordingSeconds ?? DEFAULT_MAX_RECORDING_SECONDS,
+    maskCapture: adapter.maskCapture ?? true
   };
 }
 var ReportIssueContext = createContext(void 0);
@@ -45,6 +47,9 @@ var ReportIssueProvider = ({ config, children }) => {
   useEffect(() => {
     if (config.captureConsole !== false) patchConsole();
   }, [config.captureConsole]);
+  useEffect(() => {
+    configureMaskSelectors(config.maskSelectors);
+  }, [config.maskSelectors]);
   const captureMode = isCapturing || isRecording;
   const value = useMemo(() => ({
     config: resolved,

package/dist/{chunk-ZYF6UFBB.js → chunk-7ONPNSFH.js}

@@ -7,8 +7,26 @@ var MEDIA_TAGS = /* @__PURE__ */ new Set(["IMG", "PICTURE", "SVG", "CANVAS", "VI
 var MASK_IGNORE_SELECTOR = "[data-report-mask-ignore], [data-sonner-toaster], [data-sonner-toast]";
 var TEXT_MASK_IGNORE_SELECTOR = "[data-report-mask-text-ignore]";
 var FORCE_TEXT_MASK_SELECTOR = "[data-report-mask-control], [data-report-mask-value]";
+var CAPTURE_IGNORE_SELECTOR = "[data-report-ignore-capture]";
 var IGNORED_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "checkbox", "radio", "file", "button", "submit", "reset", "image", "range", "color", "password"]);
 var maskedTextNodes = /* @__PURE__ */ new Map();
+var extraSelectors = {
+  ignore: [],
+  textIgnore: [],
+  forceTextMask: [],
+  ignoreCapture: []
+};
+function configureMaskSelectors(overrides = {}) {
+  extraSelectors.ignore = overrides.ignore ?? [];
+  extraSelectors.textIgnore = overrides.textIgnore ?? [];
+  extraSelectors.forceTextMask = overrides.forceTextMask ?? [];
+  extraSelectors.ignoreCapture = overrides.ignoreCapture ?? [];
+}
+var combineSelector = (base, extra) => extra.length ? `${base}, ${extra.join(", ")}` : base;
+var ignoreSelector = () => combineSelector(MASK_IGNORE_SELECTOR, extraSelectors.ignore);
+var textIgnoreSelector = () => combineSelector(TEXT_MASK_IGNORE_SELECTOR, extraSelectors.textIgnore);
+var forceTextMaskSelector = () => combineSelector(FORCE_TEXT_MASK_SELECTOR, extraSelectors.forceTextMask);
+var captureIgnoreSelector = () => combineSelector(CAPTURE_IGNORE_SELECTOR, extraSelectors.ignoreCapture);
 function isInputElement(el) {
   return el.tagName === "INPUT";
 }
@@ -20,32 +38,36 @@ function isFormField(el) {
 }
 function hasIgnoreAncestor(node) {
   let cur = node.parentNode;
+  const selector = ignoreSelector();
   while (cur && cur !== document.body) {
-    if (cur instanceof HTMLElement && cur.matches(MASK_IGNORE_SELECTOR)) return true;
+    if (cur instanceof HTMLElement && cur.matches(selector)) return true;
     cur = cur.parentNode;
   }
   return false;
 }
 function hasTextMaskIgnoreAncestor(node) {
   let cur = node.parentNode;
+  const selector = textIgnoreSelector();
   while (cur && cur !== document.body) {
-    if (cur instanceof HTMLElement && cur.matches(TEXT_MASK_IGNORE_SELECTOR)) return true;
+    if (cur instanceof HTMLElement && cur.matches(selector)) return true;
     cur = cur.parentNode;
   }
   return false;
 }
 function hasForceTextMaskAncestor(node) {
   let cur = node.parentNode;
+  const selector = forceTextMaskSelector();
   while (cur && cur !== document.body) {
-    if (cur instanceof HTMLElement && cur.matches(FORCE_TEXT_MASK_SELECTOR)) return true;
+    if (cur instanceof HTMLElement && cur.matches(selector)) return true;
     cur = cur.parentNode;
   }
   return false;
 }
 function hasCaptureIgnoreAncestor(el) {
   let cur = el.parentElement;
+  const selector = captureIgnoreSelector();
   while (cur && cur !== document.body) {
-    if (cur.hasAttribute("data-report-ignore-capture")) return true;
+    if (cur.matches(selector)) return true;
     cur = cur.parentElement;
   }
   return false;
@@ -132,9 +154,10 @@ function toggleVideoMask(enable) {
     if (!document.getElementById(VIDEO_STYLE_ID)) {
       const style = document.createElement("style");
       style.id = VIDEO_STYLE_ID;
+      const notIgnored = ignoreSelector();
       style.textContent = `
-        .report-video-mask input:not([data-report-mask-ignore]),
-        .report-video-mask textarea:not([data-report-mask-ignore]) {
+        .report-video-mask input:not(${notIgnored}),
+        .report-video-mask textarea:not(${notIgnored}) {
           -webkit-text-security: disc !important;
         }
       `;
@@ -159,4 +182,4 @@ function toggleVideoMask(enable) {
   }
 }
 
-export { applyInputMask, applyMask, removeMask, toggleVideoMask };
+export { applyInputMask, applyMask, captureIgnoreSelector, configureMaskSelectors, removeMask, toggleVideoMask };

package/dist/{chunk-KY2IRP36.js → chunk-DCNBXNWY.js}

@@ -1,10 +1,10 @@
-import { applyMask, applyInputMask, removeMask } from './chunk-ZYF6UFBB.js';
+import { applyMask, applyInputMask, captureIgnoreSelector, removeMask } from './chunk-7ONPNSFH.js';
 import html2canvas from 'html2canvas-pro';
 
 var HIDE_DIALOG_CLASS = "report-hide-dialog";
 var waitForCaptureImages = async () => {
   const images = Array.from(document.images).filter((img) => {
-    if (img.closest("[data-report-ignore-capture]")) return false;
+    if (img.closest(captureIgnoreSelector())) return false;
     const style = window.getComputedStyle(img);
     return img.getClientRects().length > 0 && style.display !== "none" && style.visibility !== "hidden";
   });
@@ -23,7 +23,7 @@ var waitForCaptureImages = async () => {
 var inlineCaptureSvgImages = async () => {
   const restores = [];
   const svgImages = Array.from(document.images).filter((img) => {
-    if (img.closest("[data-report-ignore-capture]")) return false;
+    if (img.closest(captureIgnoreSelector())) return false;
     const src = img.currentSrc || img.src;
     if (!src) return false;
     try {
@@ -55,16 +55,18 @@ var inlineCaptureSvgImages = async () => {
   }));
   return () => restores.forEach((restore) => restore());
 };
-async function captureMaskedScreenshot() {
+async function captureMaskedScreenshot(mask = true) {
   let restoreCaptureSvgImages = () => {
   };
   document.documentElement.classList.add(HIDE_DIALOG_CLASS);
-  applyMask();
-  applyInputMask();
+  if (mask) {
+    applyMask();
+    applyInputMask();
+  }
   await new Promise((resolve) => {
     setTimeout(resolve, 450);
   });
-  applyInputMask();
+  if (mask) applyInputMask();
   restoreCaptureSvgImages = await inlineCaptureSvgImages();
   await waitForCaptureImages();
   const docEl = document.documentElement;
@@ -83,11 +85,11 @@ async function captureMaskedScreenshot() {
       height: pageScrolls ? fullHeight : viewportHeight,
       windowWidth: viewportWidth,
       windowHeight: pageScrolls ? fullHeight : viewportHeight,
-      ignoreElements: (el) => el.hasAttribute?.("data-report-ignore-capture") || el.getAttribute?.("data-slot") === "dialog-overlay",
+      ignoreElements: (el) => el.matches?.(captureIgnoreSelector()) || el.getAttribute?.("data-slot") === "dialog-overlay",
       // onclone runs after the DOM is cloned but before rendering. React cannot
       // reset values in the clone, so masking is reliable here.
       onclone: (clonedDoc) => {
-        applyInputMask(clonedDoc);
+        if (mask) applyInputMask(clonedDoc);
       }
     });
     return canvas.toDataURL("image/png");

package/dist/{consent-DmS4DxOf.d.ts → consent-BSWTFAIV.d.ts}

@@ -30,6 +30,24 @@ interface PageOption {
     value: string;
     label: string;
 }
+/**
+ * CSS-selector-based equivalents of the `data-report-*` masking attributes, for
+ * elements you cannot add attributes to (e.g. markup rendered by a third-party
+ * component — a `<legend>` from a form library, a chart tooltip, etc.). Each
+ * array is additive: it extends, rather than replaces, the corresponding
+ * attribute. Selectors are matched against ancestors the same way the
+ * attributes are — put them on a wrapper that contains the target content.
+ */
+interface MaskSelectorOverrides {
+    /** Extra CSS selectors whose subtree is never masked. Same effect as `data-report-mask-ignore`. */
+    ignore?: string[];
+    /** Extra CSS selectors whose text stays visible (inputs still masked). Same effect as `data-report-mask-text-ignore`. */
+    textIgnore?: string[];
+    /** Extra CSS selectors whose text is force-masked. Same effect as `data-report-mask-control`. */
+    forceTextMask?: string[];
+    /** Extra CSS selectors excluded entirely from screenshots. Same effect as `data-report-ignore-capture`. */
+    ignoreCapture?: string[];
+}
 interface ReportMetadata {
     userId?: string | number | null;
     userName?: string | null;
@@ -80,6 +98,12 @@ interface ReportIssueAdapter {
     getCurrentUrl?: () => string;
     /** Options for the "which page" dropdown. Function form is re-read on open. */
     pageOptions?: PageOption[] | (() => PageOption[]);
+    /**
+     * How the "which page" field is rendered when "current page" is unchecked:
+     * - `'select'` (default): searchable dropdown fed by `pageOptions`.
+     * - `'input'`: free-text field for an arbitrary URL/path (`pageOptions` ignored).
+     */
+    pageInputMode?: 'select' | 'input';
     /** Maps a page URL to an environment label (e.g. Locale/Test/Prod). */
     environmentResolver?: (url: string) => string;
     /** i18n. Defaults to identity (returns the key, which is English text). */
@@ -93,6 +117,14 @@ interface ReportIssueAdapter {
     maxRecordingSeconds?: number;
     /** Patch `console.*` to capture logs when the provider mounts. Default true. */
     captureConsole?: boolean;
+    /**
+     * Mask sensitive on-screen text/input values (KVKK-style privacy mask) during
+     * screenshot capture and screen recording. Default `true`. Set to `false` if
+     * your app has no sensitive on-screen data and you want unmasked captures.
+     */
+    maskCapture?: boolean;
+    /** CSS-selector overrides for elements you can't attach `data-report-*` attributes to. */
+    maskSelectors?: MaskSelectorOverrides;
 }
 
 declare function pushConsoleLog(level: ConsoleEntry['level'], args: unknown[]): void;
@@ -132,4 +164,4 @@ declare function createVideoRecorder(callbacks: VideoRecorderCallbacks, options?
 declare const CONSENT_VERSION = "1.0";
 declare function createConsent(captureType: CaptureType, version?: string): RecordingConsent;
 
-export { CONSENT_VERSION as C, type NetworkEntry as N, type PageOption as P, type RecorderStartResult as R, type VideoRecorderCallbacks as V, type CaptureType as a, type ConsoleEntry as b, type RecordingConsent as c, type ReportCategoryOption as d, type ReportIssueAdapter as e, type ReportIssueToast as f, type ReportMetadata as g, type ReportSubmitPayload as h, type ReportSubmitResult as i, type VideoRecorderController as j, beginNetworkRequest as k, completeNetworkRequest as l, createConsent as m, createVideoRecorder as n, failNetworkRequest as o, getConsoleLogs as p, getNetworkLogs as q, patchConsole as r, pushConsoleLog as s };
+export { CONSENT_VERSION as C, type MaskSelectorOverrides as M, type NetworkEntry as N, type PageOption as P, type RecorderStartResult as R, type VideoRecorderCallbacks as V, type CaptureType as a, type ConsoleEntry as b, type RecordingConsent as c, type ReportCategoryOption as d, type ReportIssueAdapter as e, type ReportIssueToast as f, type ReportMetadata as g, type ReportSubmitPayload as h, type ReportSubmitResult as i, type VideoRecorderController as j, beginNetworkRequest as k, completeNetworkRequest as l, createConsent as m, createVideoRecorder as n, failNetworkRequest as o, getConsoleLogs as p, getNetworkLogs as q, patchConsole as r, pushConsoleLog as s };

package/dist/core.d.ts

@@ -1,16 +1,21 @@
-export { C as CONSENT_VERSION, a as CaptureType, b as ConsoleEntry, N as NetworkEntry, P as PageOption, R as RecorderStartResult, c as RecordingConsent, d as ReportCategoryOption, e as ReportIssueAdapter, f as ReportIssueToast, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, V as VideoRecorderCallbacks, j as VideoRecorderController, k as beginNetworkRequest, l as completeNetworkRequest, m as createConsent, n as createVideoRecorder, o as failNetworkRequest, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole, s as pushConsoleLog } from './consent-DmS4DxOf.js';
+import { M as MaskSelectorOverrides } from './consent-BSWTFAIV.js';
+export { C as CONSENT_VERSION, a as CaptureType, b as ConsoleEntry, N as NetworkEntry, P as PageOption, R as RecorderStartResult, c as RecordingConsent, d as ReportCategoryOption, e as ReportIssueAdapter, f as ReportIssueToast, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, V as VideoRecorderCallbacks, j as VideoRecorderController, k as beginNetworkRequest, l as completeNetworkRequest, m as createConsent, n as createVideoRecorder, o as failNetworkRequest, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole, s as pushConsoleLog } from './consent-BSWTFAIV.js';
 
+declare function configureMaskSelectors(overrides?: MaskSelectorOverrides): void;
+/** CSS selector matching everything excluded from screenshots — built-in attribute plus any `maskSelectors.ignoreCapture` overrides. */
+declare const captureIgnoreSelector: () => string;
 declare function applyInputMask(targetDoc?: Document): void;
 declare function applyMask(): void;
 declare function removeMask(): void;
 declare function toggleVideoMask(enable: boolean): void;
 
 /**
- * Captures a masked PNG screenshot of the whole document body and returns a
- * data URL. Applies KVKK text/input masking and hides any element marked with
- * `data-report-ignore-capture` (the dialog itself) during the capture, then
- * restores everything before resolving. Framework-agnostic.
+ * Captures a PNG screenshot of the whole document body and returns a data URL.
+ * Hides any element marked with `data-report-ignore-capture` (the dialog itself)
+ * during the capture, then restores everything before resolving. Framework-agnostic.
+ *
+ * @param mask Apply KVKK text/input masking before capturing. Default `true`.
  */
-declare function captureMaskedScreenshot(): Promise<string>;
+declare function captureMaskedScreenshot(mask?: boolean): Promise<string>;
 
-export { applyInputMask, applyMask, captureMaskedScreenshot, removeMask, toggleVideoMask };
+export { MaskSelectorOverrides, applyInputMask, applyMask, captureIgnoreSelector, captureMaskedScreenshot, configureMaskSelectors, removeMask, toggleVideoMask };

package/dist/core.js

@@ -1,4 +1,4 @@
 export { CONSENT_VERSION, createConsent, createVideoRecorder } from './chunk-5S66KGBW.js';
 export { beginNetworkRequest, completeNetworkRequest, failNetworkRequest, getConsoleLogs, getNetworkLogs, patchConsole, pushConsoleLog } from './chunk-EXDFVVYA.js';
-export { captureMaskedScreenshot } from './chunk-KY2IRP36.js';
-export { applyInputMask, applyMask, removeMask, toggleVideoMask } from './chunk-ZYF6UFBB.js';
+export { captureMaskedScreenshot } from './chunk-DCNBXNWY.js';
+export { applyInputMask, applyMask, captureIgnoreSelector, configureMaskSelectors, removeMask, toggleVideoMask } from './chunk-7ONPNSFH.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { e as ReportIssueAdapter, f as ReportIssueToast, a as CaptureType, c as RecordingConsent, b as ConsoleEntry, N as NetworkEntry, R as RecorderStartResult } from './consent-DmS4DxOf.js';
-export { C as CONSENT_VERSION, P as PageOption, d as ReportCategoryOption, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole } from './consent-DmS4DxOf.js';
+import { e as ReportIssueAdapter, f as ReportIssueToast, a as CaptureType, c as RecordingConsent, b as ConsoleEntry, N as NetworkEntry, R as RecorderStartResult } from './consent-BSWTFAIV.js';
+export { C as CONSENT_VERSION, P as PageOption, d as ReportCategoryOption, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole } from './consent-BSWTFAIV.js';
 
 /** Adapter with every optional field filled in — what components actually read. */
 interface ResolvedConfig {
@@ -14,6 +14,7 @@ interface ResolvedConfig {
     maxFiles: number;
     maxFileSizeBytes: number;
     maxRecordingSeconds: number;
+    maskCapture: boolean;
 }
 interface ReportIssueContextValue {
     config: ResolvedConfig;

package/dist/index.js

@@ -1,10 +1,10 @@
 import { createVideoRecorder, CONSENT_VERSION } from './chunk-5S66KGBW.js';
 export { CONSENT_VERSION } from './chunk-5S66KGBW.js';
-import { cn, useReportIssueConfig, Button, useReportIssue } from './chunk-JMQUG5Q7.js';
-export { ReportIssueProvider, useReportIssue, useReportIssueConfig } from './chunk-JMQUG5Q7.js';
+import { cn, useReportIssueConfig, Button, useReportIssue } from './chunk-6IHDBCB5.js';
+export { ReportIssueProvider, useReportIssue, useReportIssueConfig } from './chunk-6IHDBCB5.js';
 import { getConsoleLogs, getNetworkLogs } from './chunk-EXDFVVYA.js';
 export { getConsoleLogs, getNetworkLogs, patchConsole } from './chunk-EXDFVVYA.js';
-import { toggleVideoMask } from './chunk-ZYF6UFBB.js';
+import { toggleVideoMask } from './chunk-7ONPNSFH.js';
 import { createPortal } from 'react-dom';
 import { X, ShieldCheck, Camera, Video, Film, FileText, Circle, Square, MessageSquareWarning, Check, ChevronDown } from 'lucide-react';
 import { forwardRef, lazy, useCallback, useState, useRef, useEffect, useMemo, Suspense } from 'react';
@@ -257,7 +257,7 @@ var RecordingConsentDialog = ({ open, captureType = "video", onOpenChange, onAcc
   ] }) });
 };
 var RecordingConsentDialog_default = RecordingConsentDialog;
-var AnnotationEditor = lazy(() => import('./AnnotationEditor-ILMYBTOG.js'));
+var AnnotationEditor = lazy(() => import('./AnnotationEditor-XYSZQLAH.js'));
 var getAppOrigin = () => typeof window !== "undefined" ? window.location.origin : "";
 var toAbsoluteUrl = (value) => {
   if (!value) return "";
@@ -284,7 +284,8 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
     getCurrentUrl,
     maxFiles,
     maxFileSizeBytes,
-    maxRecordingSeconds
+    maxRecordingSeconds,
+    maskCapture
   } = config;
   const { collectConsoleLogs, collectNetworkLogs } = useReportIssueCapture();
   const [view, setView] = useState("form");
@@ -354,8 +355,8 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
   const captureScreenshot = useCallback(async () => {
     setIsCapturing(true);
     try {
-      const { captureMaskedScreenshot } = await import('./screenshot-BQPXCSLD.js');
-      const dataUrl = await captureMaskedScreenshot();
+      const { captureMaskedScreenshot } = await import('./screenshot-ZBPAR3UN.js');
+      const dataUrl = await captureMaskedScreenshot(maskCapture);
       setEditorImage(dataUrl);
       await new Promise((resolve) => {
         requestAnimationFrame(() => {
@@ -368,7 +369,7 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
     } finally {
       setIsCapturing(false);
     }
-  }, [setIsCapturing, t, toast]);
+  }, [setIsCapturing, t, toast, maskCapture]);
   const handleScreenshotConsentAccept = useCallback((consent) => {
     screenshotConsentRef.current = consent;
     setScreenshotConsentOpen(false);
@@ -399,8 +400,10 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
     maxDurationMs: maxRecordingSeconds * 1e3
   });
   const handleStartRecording = useCallback(async () => {
-    setIsVideoMaskEnabled(true);
-    toggleVideoMask(true);
+    if (maskCapture) {
+      setIsVideoMaskEnabled(true);
+      toggleVideoMask(true);
+    }
     onOpenChange(false);
     const result = await start();
     if (result !== "started") {
@@ -409,7 +412,7 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
       const message = result === "unsupported" ? t("Screen recording is only supported on Chrome and Edge browsers.") : result === "wrong-surface" ? t("Only this application tab can be recorded. Please share this tab.") : t("Screen recording permission was denied.");
       toast.error(message);
     }
-  }, [start, setIsVideoMaskEnabled, handleRecordingChange, onOpenChange, t, toast]);
+  }, [start, setIsVideoMaskEnabled, handleRecordingChange, onOpenChange, t, toast, maskCapture]);
   const handleConsentAccept = useCallback((consent) => {
     consentRef.current = consent;
     setConsentOpen(false);
@@ -567,7 +570,15 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
                   label: `${t("Current page")}: ${currentUrl}`
                 }
               ),
-              pageOptions.length > 0 && /* @__PURE__ */ jsx(
+              adapter.pageInputMode === "input" ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: t("Enter the page where the issue occurred"),
+                  value: customPage,
+                  onChange: (e) => setCustomPage(e.target.value),
+                  disabled: useCurrentPage
+                }
+              ) : pageOptions.length > 0 && /* @__PURE__ */ jsx(
                 Select,
                 {
                   placeholder: t("Enter the page where the issue occurred"),

package/dist/screenshot-ZBPAR3UN.js

@@ -0,0 +1,2 @@
+export { captureMaskedScreenshot } from './chunk-DCNBXNWY.js';
+import './chunk-7ONPNSFH.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tra-bilisim/report-issue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Headless-core + React UI \"Report an Issue\" widget: masked screenshot/annotation, tab-only screen recording, console/network log capture and KVKK consent.",
   "license": "MIT",
   "author": "TRA Bilişim",

package/dist/screenshot-BQPXCSLD.js

@@ -1,2 +0,0 @@
-export { captureMaskedScreenshot } from './chunk-KY2IRP36.js';
-import './chunk-ZYF6UFBB.js';