@koderlabs/tasks-sdk-web-reporter 0.1.0

package/dist/index.js

@@ -0,0 +1,1657 @@
+import {
+  __name,
+  collectMetadata,
+  formatMetadataBlock,
+  patchConsole
+} from "./chunk-LDKYNLXK.js";
+
+// src/hotkey.ts
+function parseHotkey(raw) {
+  if (!raw) return null;
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform ?? "");
+  const parts = raw.toLowerCase().split("+").map((p) => p.trim());
+  const modifiers = /* @__PURE__ */ new Set();
+  let key = "";
+  for (const part of parts) {
+    if (part === "mod") {
+      modifiers.add(isMac ? "meta" : "ctrl");
+    } else if ([
+      "ctrl",
+      "control"
+    ].includes(part)) {
+      modifiers.add("ctrl");
+    } else if ([
+      "meta",
+      "cmd",
+      "command"
+    ].includes(part)) {
+      modifiers.add("meta");
+    } else if ([
+      "alt",
+      "option",
+      "opt"
+    ].includes(part)) {
+      modifiers.add("alt");
+    } else if (part === "shift") {
+      modifiers.add("shift");
+    } else {
+      key = part;
+    }
+  }
+  if (!key) return null;
+  return {
+    ctrl: modifiers.has("ctrl"),
+    meta: modifiers.has("meta"),
+    alt: modifiers.has("alt"),
+    shift: modifiers.has("shift"),
+    key
+  };
+}
+__name(parseHotkey, "parseHotkey");
+function matchesHotkey(e, parsed) {
+  return e.ctrlKey === parsed.ctrl && e.metaKey === parsed.meta && e.altKey === parsed.alt && e.shiftKey === parsed.shift && e.key.toLowerCase() === parsed.key;
+}
+__name(matchesHotkey, "matchesHotkey");
+function isTypingTarget(e) {
+  const target = e.target;
+  if (!target) return false;
+  const tag = target.tagName?.toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select") return true;
+  if (target.isContentEditable) return true;
+  const ceProp = target.contentEditable;
+  if (ceProp === "true" || ceProp === "plaintext-only") return true;
+  const ce = target.getAttribute?.("contenteditable");
+  if (ce === "" || ce === "true" || ce === "plaintext-only") return true;
+  return false;
+}
+__name(isTypingTarget, "isTypingTarget");
+function registerHotkey(hotkeyStr, handler, target = window) {
+  const parsed = parseHotkey(hotkeyStr);
+  if (!parsed) return () => {
+  };
+  const hasModifier = parsed.ctrl || parsed.meta || parsed.alt;
+  const listener = /* @__PURE__ */ __name((e) => {
+    const ke = e;
+    if (!hasModifier && isTypingTarget(ke)) return;
+    if (matchesHotkey(ke, parsed)) {
+      e.preventDefault();
+      e.stopPropagation();
+      handler();
+    }
+  }, "listener");
+  target.addEventListener("keydown", listener, true);
+  return () => target.removeEventListener("keydown", listener, true);
+}
+__name(registerHotkey, "registerHotkey");
+
+// src/modal/styles.ts
+var WIDGET_STYLES = `
+  :host {
+    --accent-background: #ef4444;
+    --foreground: #111827;
+    --background: #ffffff;
+    --border-color: #e5e7eb;
+    --z-index: 2147483647;
+    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    all: initial;
+    font-family: var(--font-family);
+    color: var(--foreground);
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  .it-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    z-index: var(--z-index);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .it-modal {
+    background: var(--background);
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
+    /* Big enough to annotate a screenshot comfortably without dominating
+       the entire viewport. Cap so it doesn't get unwieldy on 4K monitors. */
+    width: min(1280px, 88vw);
+    height: min(900px, 88vh);
+    max-width: 88vw;
+    max-height: 88vh;
+    overflow-y: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    position: relative;
+    font-family: var(--font-family);
+    color: var(--foreground);
+  }
+
+  .it-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .it-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .it-close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--foreground);
+    opacity: 0.6;
+    padding: 4px;
+    border-radius: 6px;
+    line-height: 1;
+    font-size: 18px;
+    transition: opacity 0.15s;
+  }
+  .it-close-btn:hover { opacity: 1; }
+
+  .it-section { display: flex; flex-direction: column; gap: 6px; }
+
+  .it-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--foreground);
+    opacity: 0.8;
+  }
+
+  .it-textarea, .it-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 14px;
+    font-family: var(--font-family);
+    color: var(--foreground);
+    background: var(--background);
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+  .it-textarea:focus, .it-input:focus {
+    border-color: var(--accent-background);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-background) 20%, transparent);
+  }
+
+  .it-textarea { min-height: 100px; }
+
+  .it-error {
+    font-size: 12px;
+    color: var(--accent-background);
+    min-height: 16px;
+  }
+
+  .it-screenshot-area {
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    text-align: center;
+    background: #f9fafb;
+    /* Let the screenshot panel grow to fill the modal \u2014 description sits
+       below and keeps its natural size. */
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .it-screenshot-preview {
+    position: relative;
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: 6px;
+    /* Center the screenshot vertically so smaller captures aren't pinned
+       to the top of a tall panel. */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Stage = aspect-ratio-locked wrapper around bg + fg canvases.
+     Sized to fit the preview pane while preserving the screenshot's
+     aspect ratio \u2014 keeps fg overlay aligned with bg pixel-for-pixel. */
+  .it-screenshot-stage {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+    /* Default ratio prevents 0-height collapse before the first capture */
+    aspect-ratio: 16 / 10;
+    /* Lock width to the smaller of (parent width) or (parent height \xD7 ratio).
+       Browsers honor aspect-ratio for one axis only when the other is auto. */
+    width: 100%;
+    height: auto;
+  }
+
+  .it-background-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 6px;
+  }
+
+  .it-foreground-canvas {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    cursor: crosshair;
+  }
+
+  .it-screenshot-placeholder {
+    color: var(--foreground);
+    opacity: 0.5;
+    font-size: 13px;
+  }
+
+  .it-toolbar {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+
+  .it-btn {
+    padding: 7px 14px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    background: var(--background);
+    color: var(--foreground);
+    transition: background 0.15s, border-color 0.15s;
+    font-family: var(--font-family);
+  }
+  .it-btn:hover { background: #f3f4f6; }
+
+  .it-btn-primary {
+    background: var(--accent-background);
+    color: #fff;
+    border-color: var(--accent-background);
+  }
+  .it-btn-primary:hover { filter: brightness(0.9); background: var(--accent-background); }
+  .it-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+
+  .it-btn-tool.active {
+    background: color-mix(in srgb, var(--accent-background) 15%, var(--background));
+    border-color: var(--accent-background);
+    color: var(--accent-background);
+  }
+
+  .it-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .it-branding {
+    font-size: 11px;
+    color: var(--foreground);
+    opacity: 0.4;
+    text-decoration: none;
+  }
+  .it-branding:hover { opacity: 0.7; }
+
+  .it-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .it-spinner {
+    display: inline-block;
+    width: 14px; height: 14px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: it-spin 0.7s linear infinite;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+  @keyframes it-spin { to { transform: rotate(360deg); } }
+
+  /* Modal collapses to a compact confirmation card after submit succeeds.
+     Overrides the wide annotation-mode sizing without re-mounting. */
+  .it-modal.it-modal--success {
+    width: min(420px, 92vw) !important;
+    height: auto !important;
+    max-height: 80vh !important;
+  }
+
+  .it-success {
+    text-align: center;
+    padding: 16px 8px 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .it-success-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #dcfce7;
+    color: #16a34a;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1;
+    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.08);
+  }
+
+  .it-success-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .it-success-ticket {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--accent-background);
+    text-decoration: none;
+    letter-spacing: 0.02em;
+  }
+  .it-success-ticket:hover { text-decoration: underline; }
+
+  .it-success-hint {
+    font-size: 12px;
+    color: var(--foreground);
+    opacity: 0.55;
+    margin-top: 4px;
+  }
+
+  .it-warning {
+    font-size: 12px;
+    color: #d97706;
+    background: #fef3c7;
+    border-radius: 6px;
+    padding: 8px 10px;
+  }
+
+  .it-fab {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: calc(var(--z-index) - 1);
+    width: 48px; height: 48px;
+    border-radius: 50%;
+    background: var(--accent-background);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    font-size: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .it-fab:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+  }
+`;
+
+// src/modal/shell.ts
+function getCspNonce() {
+  if (typeof document === "undefined") return null;
+  const meta = document.querySelector('meta[name="csp-nonce"]');
+  const v = meta?.getAttribute("content");
+  return v && v.length > 0 ? v : null;
+}
+__name(getCspNonce, "getCspNonce");
+var ModalShell = class {
+  static {
+    __name(this, "ModalShell");
+  }
+  /** Outer host appended to document.body — exposed so callers can hide it
+  *  from native screenshot capture without leaking the shadow DOM. */
+  host;
+  shadow;
+  _isOpen = false;
+  onCloseCb;
+  // Refs
+  backdropEl = null;
+  modalEl = null;
+  contentSlot = null;
+  // Cleanup
+  _escListener = null;
+  constructor(opts = {}) {
+    this.onCloseCb = opts.onClose;
+    this.host = document.createElement("div");
+    this.host.setAttribute("data-it-widget", "");
+    this.shadow = this.host.attachShadow({
+      mode: "open"
+    });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = WIDGET_STYLES;
+    const nonce = getCspNonce();
+    if (nonce) {
+      styleEl.setAttribute("nonce", nonce);
+      styleEl.nonce = nonce;
+    }
+    this.shadow.appendChild(styleEl);
+  }
+  get shadowRoot() {
+    return this.shadow;
+  }
+  get isOpen() {
+    return this._isOpen;
+  }
+  get modalElement() {
+    return this.modalEl;
+  }
+  /**
+  * Open the modal with the given content element.
+  */
+  open(content) {
+    if (this._isOpen) this._teardown();
+    document.body.appendChild(this.host);
+    const backdrop = document.createElement("div");
+    backdrop.className = "it-backdrop";
+    backdrop.addEventListener("click", (e) => {
+      if (e.target === backdrop) {
+        e.stopPropagation();
+      }
+    });
+    const modal = document.createElement("div");
+    modal.className = "it-modal";
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    this.contentSlot = content;
+    modal.appendChild(content);
+    backdrop.appendChild(modal);
+    this.shadow.appendChild(backdrop);
+    this.backdropEl = backdrop;
+    this.modalEl = modal;
+    this._isOpen = true;
+    this._escListener = (e) => {
+      if (e.key === "Escape" && this._isOpen) {
+        this.close();
+      }
+    };
+    window.addEventListener("keydown", this._escListener);
+    modal.setAttribute("tabindex", "-1");
+    modal.focus();
+  }
+  /** Close and remove the modal. */
+  close() {
+    if (!this._isOpen) return;
+    this._teardown();
+    this.onCloseCb?.();
+  }
+  /** Destroy completely — remove host from DOM. */
+  destroy() {
+    this._teardown();
+    if (this.host.parentNode) this.host.parentNode.removeChild(this.host);
+  }
+  _teardown() {
+    if (this._escListener) {
+      window.removeEventListener("keydown", this._escListener);
+      this._escListener = null;
+    }
+    if (this.backdropEl && this.shadow.contains(this.backdropEl)) {
+      this.shadow.removeChild(this.backdropEl);
+    }
+    this.backdropEl = null;
+    this.modalEl = null;
+    this.contentSlot = null;
+    this._isOpen = false;
+  }
+};
+
+// src/annotator/tools.ts
+var AnnotationTools = class {
+  static {
+    __name(this, "AnnotationTools");
+  }
+  _commands = [];
+  _activeTool = "highlight";
+  _onChange;
+  constructor(onChange) {
+    this._onChange = onChange;
+  }
+  get activeTool() {
+    return this._activeTool;
+  }
+  get commands() {
+    return this._commands;
+  }
+  /** Switch between highlight and hide tools. */
+  setTool(mode) {
+    this._activeTool = mode;
+    this._notify();
+  }
+  /** Toggle between the two tools. */
+  toggleTool() {
+    this._activeTool = this._activeTool === "highlight" ? "hide" : "highlight";
+    this._notify();
+  }
+  /** Add a new draw command (called when the user finishes drawing a rect). */
+  addCommand(cmd) {
+    this._commands = [
+      ...this._commands,
+      cmd
+    ];
+    this._notify();
+  }
+  /** Remove the last command (undo). */
+  undo() {
+    if (this._commands.length === 0) return;
+    this._commands = this._commands.slice(0, -1);
+    this._notify();
+  }
+  /** Remove a specific command by index. */
+  removeAt(index) {
+    this._commands = this._commands.filter((_, i) => i !== index);
+    this._notify();
+  }
+  /** Remove all commands. */
+  clear() {
+    this._commands = [];
+    this._notify();
+  }
+  /** Get a plain-object snapshot of the current state. */
+  getState() {
+    return {
+      commands: [
+        ...this._commands
+      ],
+      activeTool: this._activeTool
+    };
+  }
+  _notify() {
+    this._onChange?.(this.getState());
+  }
+};
+
+// src/annotator/draw.ts
+var ACCENT_VAR = "--accent-background";
+var ACCENT_DEFAULT = "#ef4444";
+function getAccentColor(root) {
+  const el = root instanceof ShadowRoot ? root.host : root;
+  return getComputedStyle(el).getPropertyValue(ACCENT_VAR).trim() || ACCENT_DEFAULT;
+}
+__name(getAccentColor, "getAccentColor");
+function paintForeground(foreground, commands, accent = ACCENT_DEFAULT) {
+  const ctx = foreground.getContext("2d");
+  if (!ctx) return;
+  const W = foreground.width;
+  const H = foreground.height;
+  ctx.clearRect(0, 0, W, H);
+  const highlights = commands.filter((c) => c.type === "highlight");
+  const hides = commands.filter((c) => c.type === "hide");
+  if (highlights.length > 0) {
+    ctx.save();
+    ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
+    ctx.fillRect(0, 0, W, H);
+    ctx.globalCompositeOperation = "destination-out";
+    for (const cmd of highlights) {
+      const rx = cmd.x * W;
+      const ry = cmd.y * H;
+      const rw = cmd.w * W;
+      const rh = cmd.h * H;
+      ctx.fillStyle = "rgba(0,0,0,1)";
+      ctx.fillRect(rx, ry, rw, rh);
+    }
+    ctx.restore();
+    ctx.save();
+    ctx.strokeStyle = accent;
+    ctx.lineWidth = 2;
+    for (const cmd of highlights) {
+      ctx.strokeRect(cmd.x * W, cmd.y * H, cmd.w * W, cmd.h * H);
+    }
+    ctx.restore();
+  }
+  if (hides.length > 0) {
+    ctx.save();
+    ctx.fillStyle = "#000000";
+    for (const cmd of hides) {
+      ctx.fillRect(cmd.x * W, cmd.y * H, cmd.w * W, cmd.h * H);
+    }
+    ctx.restore();
+  }
+}
+__name(paintForeground, "paintForeground");
+function compositeCanvases(background, foreground, output) {
+  const ctx = output.getContext("2d");
+  if (!ctx) return;
+  output.width = background.width;
+  output.height = background.height;
+  ctx.clearRect(0, 0, output.width, output.height);
+  ctx.drawImage(background, 0, 0);
+  ctx.drawImage(foreground, 0, 0);
+}
+__name(compositeCanvases, "compositeCanvases");
+
+// src/annotator/index.ts
+var Annotator = class {
+  static {
+    __name(this, "Annotator");
+  }
+  tools;
+  background;
+  foreground;
+  cssRoot;
+  onChangeCb;
+  // In-progress drag state
+  dragging = false;
+  dragStart = null;
+  // Cleanup for event listeners
+  cleanupListeners = [];
+  constructor(opts) {
+    this.background = opts.background;
+    this.foreground = opts.foreground;
+    this.cssRoot = opts.cssRoot;
+    this.onChangeCb = opts.onChange;
+    this.tools = new AnnotationTools((state) => {
+      this._repaint();
+      this.onChangeCb?.(state.commands);
+    });
+    this._attachMouseListeners();
+  }
+  get activeTool() {
+    return this.tools.activeTool;
+  }
+  get commands() {
+    return this.tools.commands;
+  }
+  setTool(mode) {
+    this.tools.setTool(mode);
+  }
+  toggleTool() {
+    this.tools.toggleTool();
+  }
+  undo() {
+    this.tools.undo();
+  }
+  clear() {
+    this.tools.clear();
+  }
+  removeAt(i) {
+    this.tools.removeAt(i);
+  }
+  /** Composite background + foreground into an output canvas. */
+  composite(output) {
+    compositeCanvases(this.background, this.foreground, output);
+  }
+  /** Destroy event listeners. */
+  destroy() {
+    for (const fn of this.cleanupListeners) fn();
+    this.cleanupListeners = [];
+  }
+  // ── Private helpers ──────────────────────────────────────────────────────────
+  _repaint() {
+    const accent = getAccentColor(this.cssRoot);
+    paintForeground(this.foreground, [
+      ...this.tools.commands
+    ], accent);
+  }
+  /** Normalize a pixel coordinate within the foreground canvas to 0..1. */
+  _normalize(px, py) {
+    const W = this.foreground.width || 1;
+    const H = this.foreground.height || 1;
+    return {
+      nx: Math.max(0, Math.min(1, px / W)),
+      ny: Math.max(0, Math.min(1, py / H))
+    };
+  }
+  /**
+  * Mouse → internal canvas pixel coordinates.
+  *
+  * The foreground canvas has a HUGE internal resolution (matches the raw
+  * screenshot, e.g. 2880×1800 on retina) but is displayed at a small CSS
+  * size in the modal (~400px wide). `clientX - rect.left` returns CSS
+  * pixels, so we must scale up to internal pixels — otherwise a 100px CSS
+  * drag becomes a 100/2880 ≈ 3.5% rectangle pinned to the top-left.
+  */
+  _canvasPos(e) {
+    const rect = this.foreground.getBoundingClientRect();
+    const scaleX = rect.width > 0 ? this.foreground.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? this.foreground.height / rect.height : 1;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  }
+  _attachMouseListeners() {
+    const fg = this.foreground;
+    const onMouseDown = /* @__PURE__ */ __name((e) => {
+      if (e.button !== 0) return;
+      this.dragging = true;
+      this.dragStart = this._canvasPos(e);
+    }, "onMouseDown");
+    const onMouseMove = /* @__PURE__ */ __name((e) => {
+      if (!this.dragging || !this.dragStart) return;
+      const current = this._canvasPos(e);
+      const preview = this._buildCommand(this.dragStart, current);
+      const accent = getAccentColor(this.cssRoot);
+      paintForeground(this.foreground, [
+        ...this.tools.commands,
+        preview
+      ], accent);
+    }, "onMouseMove");
+    const onMouseUp = /* @__PURE__ */ __name((e) => {
+      if (!this.dragging || !this.dragStart) return;
+      this.dragging = false;
+      const end = this._canvasPos(e);
+      const cmd = this._buildCommand(this.dragStart, end);
+      const W = this.foreground.width || 1;
+      const H = this.foreground.height || 1;
+      if (Math.abs(cmd.w) * W > 4 && Math.abs(cmd.h) * H > 4) {
+        this.tools.addCommand(this._normalizeCommand(cmd));
+      } else {
+        this._repaint();
+      }
+      this.dragStart = null;
+    }, "onMouseUp");
+    fg.addEventListener("mousedown", onMouseDown);
+    fg.addEventListener("mousemove", onMouseMove);
+    fg.addEventListener("mouseup", onMouseUp);
+    this.cleanupListeners.push(() => fg.removeEventListener("mousedown", onMouseDown), () => fg.removeEventListener("mousemove", onMouseMove), () => fg.removeEventListener("mouseup", onMouseUp));
+  }
+  /** Build a raw (pixel-space) DrawCommand from two mouse positions. */
+  _buildCommand(start, end) {
+    const x = Math.min(start.x, end.x);
+    const y = Math.min(start.y, end.y);
+    const w = Math.abs(end.x - start.x);
+    const h = Math.abs(end.y - start.y);
+    const W = this.foreground.width || 1;
+    const H = this.foreground.height || 1;
+    return {
+      type: this.tools.activeTool,
+      x: x / W,
+      y: y / H,
+      w: w / W,
+      h: h / H
+    };
+  }
+  /** Ensure a command's coordinates are normalized (clamp to 0..1). */
+  _normalizeCommand(cmd) {
+    const clamp = /* @__PURE__ */ __name((v) => Math.max(0, Math.min(1, v)), "clamp");
+    return {
+      type: cmd.type,
+      x: clamp(cmd.x),
+      y: clamp(cmd.y),
+      w: clamp(cmd.w),
+      h: clamp(cmd.h)
+    };
+  }
+};
+
+// src/capture/support.ts
+function isNativeCaptureSupported() {
+  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+    return false;
+  }
+  if (/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1) {
+    return false;
+  }
+  if (!isSecureContext) {
+    return false;
+  }
+  return typeof navigator.mediaDevices?.getDisplayMedia === "function";
+}
+__name(isNativeCaptureSupported, "isNativeCaptureSupported");
+
+// src/capture/native.ts
+async function nativeCapture(opts = {}) {
+  const dpi = window.devicePixelRatio || 1;
+  const hiddenList = Array.isArray(opts.hideElement) ? opts.hideElement.filter((el) => !!el) : opts.hideElement ? [
+    opts.hideElement
+  ] : [];
+  const prev = hiddenList.map((el) => ({
+    el,
+    display: el.style.display,
+    visibility: el.style.visibility
+  }));
+  for (const el of hiddenList) {
+    el.style.visibility = "hidden";
+    el.style.display = "none";
+  }
+  const restore = /* @__PURE__ */ __name(() => {
+    for (const { el, display, visibility } of prev) {
+      el.style.display = display;
+      el.style.visibility = visibility;
+    }
+  }, "restore");
+  let stream;
+  try {
+    stream = await navigator.mediaDevices.getDisplayMedia({
+      video: {
+        width: window.innerWidth * dpi,
+        height: window.innerHeight * dpi
+      },
+      audio: false,
+      // @ts-expect-error — non-standard constraint flags (Chromium 111+)
+      monitorTypeSurfaces: "exclude",
+      preferCurrentTab: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "exclude"
+    });
+  } catch (err) {
+    restore();
+    throw err;
+  }
+  try {
+    const video = document.createElement("video");
+    video.srcObject = stream;
+    video.muted = true;
+    await new Promise((resolve, reject) => {
+      video.onloadedmetadata = () => resolve();
+      video.onerror = () => reject(new Error("Video element error during screenshot"));
+    });
+    await video.play().catch(() => {
+    });
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth || window.innerWidth * dpi;
+    canvas.height = video.videoHeight || window.innerHeight * dpi;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Could not get 2D canvas context for screenshot");
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    for (const track of stream.getTracks()) track.stop();
+    video.srcObject = null;
+    return {
+      canvas,
+      dpi
+    };
+  } finally {
+    restore();
+  }
+}
+__name(nativeCapture, "nativeCapture");
+
+// src/capture/fallback.ts
+async function fallbackCapture(onTainted, opts = {}) {
+  let html2canvas;
+  try {
+    const mod = await import("html2canvas");
+    html2canvas = mod.default ?? mod;
+  } catch (importErr) {
+    throw new Error("html2canvas is not installed. Install it as a peer dependency or use a browser that supports getDisplayMedia.");
+  }
+  const hiddenList = Array.isArray(opts.hideElement) ? opts.hideElement.filter((el) => !!el) : opts.hideElement ? [
+    opts.hideElement
+  ] : [];
+  const prev = hiddenList.map((el) => ({
+    el,
+    display: el.style.display,
+    visibility: el.style.visibility
+  }));
+  for (const el of hiddenList) {
+    el.style.visibility = "hidden";
+    el.style.display = "none";
+  }
+  const restore = /* @__PURE__ */ __name(() => {
+    for (const { el, display, visibility } of prev) {
+      el.style.display = display;
+      el.style.visibility = visibility;
+    }
+  }, "restore");
+  let tainted = false;
+  try {
+    try {
+      const canvas = await html2canvas(document.body, {
+        allowTaint: false,
+        useCORS: true,
+        logging: false,
+        scale: window.devicePixelRatio || 1
+      });
+      return {
+        canvas,
+        tainted
+      };
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "SecurityError") {
+        tainted = true;
+        onTainted?.();
+        const canvas = await html2canvas(document.body, {
+          allowTaint: true,
+          useCORS: false,
+          logging: false,
+          scale: window.devicePixelRatio || 1
+        }).catch(() => {
+          const blank = document.createElement("canvas");
+          blank.width = window.innerWidth;
+          blank.height = window.innerHeight;
+          return blank;
+        });
+        return {
+          canvas,
+          tainted
+        };
+      }
+      throw err;
+    }
+  } finally {
+    restore();
+  }
+}
+__name(fallbackCapture, "fallbackCapture");
+
+// src/capture/index.ts
+async function capture(opts = {}) {
+  const useNative = opts.useNativeScreenshot !== false;
+  if (useNative && isNativeCaptureSupported()) {
+    try {
+      const result = await nativeCapture({
+        hideElement: opts.hideElement
+      });
+      return {
+        ...result,
+        method: "native"
+      };
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "NotAllowedError") {
+        return null;
+      }
+      opts.onFallback?.();
+    }
+  } else if (useNative) {
+    opts.onFallback?.();
+  }
+  try {
+    const result = await fallbackCapture(opts.onTainted, {
+      hideElement: opts.hideElement
+    });
+    return {
+      canvas: result.canvas,
+      dpi: window.devicePixelRatio || 1,
+      method: "fallback",
+      tainted: result.tainted
+    };
+  } catch {
+    return null;
+  }
+}
+__name(capture, "capture");
+
+// src/modal/form.ts
+function buildFormElement(opts) {
+  const container = document.createElement("div");
+  const header = document.createElement("div");
+  header.className = "it-header";
+  const title = document.createElement("h2");
+  title.className = "it-title";
+  title.textContent = "Report a Bug";
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "it-close-btn";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.textContent = "\u2715";
+  closeBtn.addEventListener("click", opts.onCancel);
+  header.appendChild(title);
+  header.appendChild(closeBtn);
+  container.appendChild(header);
+  let capturedCanvas = null;
+  let annotator = null;
+  let annotations = [];
+  const screenshotArea = document.createElement("div");
+  screenshotArea.className = "it-screenshot-area";
+  const placeholder = document.createElement("div");
+  placeholder.className = "it-screenshot-placeholder";
+  placeholder.textContent = "No screenshot yet.";
+  const captureBtn = document.createElement("button");
+  captureBtn.className = "it-btn";
+  captureBtn.textContent = "Add Screenshot";
+  let taintedWarning = null;
+  const screenshotPreview = document.createElement("div");
+  screenshotPreview.className = "it-screenshot-preview";
+  screenshotPreview.style.display = "none";
+  const stage = document.createElement("div");
+  stage.className = "it-screenshot-stage";
+  const backgroundCanvas = document.createElement("canvas");
+  backgroundCanvas.className = "it-background-canvas";
+  const foregroundCanvas = document.createElement("canvas");
+  foregroundCanvas.className = "it-foreground-canvas";
+  stage.appendChild(backgroundCanvas);
+  stage.appendChild(foregroundCanvas);
+  screenshotPreview.appendChild(stage);
+  const toolbar = document.createElement("div");
+  toolbar.className = "it-toolbar";
+  toolbar.style.display = "none";
+  const highlightBtn = document.createElement("button");
+  highlightBtn.className = "it-btn it-btn-tool active";
+  highlightBtn.textContent = "\u25AD Highlight";
+  const hideBtn = document.createElement("button");
+  hideBtn.className = "it-btn it-btn-tool";
+  hideBtn.textContent = "\u25A0 Hide";
+  const undoBtn = document.createElement("button");
+  undoBtn.className = "it-btn";
+  undoBtn.textContent = "\u21A9 Undo";
+  const clearBtn = document.createElement("button");
+  clearBtn.className = "it-btn";
+  clearBtn.textContent = "\u2715 Clear";
+  toolbar.appendChild(highlightBtn);
+  toolbar.appendChild(hideBtn);
+  toolbar.appendChild(undoBtn);
+  toolbar.appendChild(clearBtn);
+  screenshotArea.appendChild(placeholder);
+  screenshotArea.appendChild(captureBtn);
+  screenshotArea.appendChild(screenshotPreview);
+  screenshotArea.appendChild(toolbar);
+  container.appendChild(screenshotArea);
+  captureBtn.addEventListener("click", async () => {
+    captureBtn.disabled = true;
+    captureBtn.textContent = "Capturing\u2026";
+    try {
+      const result = await capture({
+        useNativeScreenshot: opts.widgetOpts.useNativeScreenshot,
+        hideElement: opts.hideForCapture ?? null,
+        onTainted: /* @__PURE__ */ __name(() => {
+          if (!taintedWarning) {
+            taintedWarning = document.createElement("div");
+            taintedWarning.className = "it-warning";
+            taintedWarning.textContent = "Some content was blocked by browser security. You can still submit without a full screenshot.";
+            screenshotArea.appendChild(taintedWarning);
+          }
+        }, "onTainted"),
+        onFallback: /* @__PURE__ */ __name(() => {
+          if (!opts.widgetOpts.silent) {
+            console.info("[InstantTasks Widget] Using html2canvas fallback for screenshot.");
+          }
+        }, "onFallback")
+      });
+      if (result) {
+        capturedCanvas = result.canvas;
+        backgroundCanvas.width = result.canvas.width;
+        backgroundCanvas.height = result.canvas.height;
+        const bgCtx = backgroundCanvas.getContext("2d");
+        bgCtx?.drawImage(result.canvas, 0, 0);
+        foregroundCanvas.width = result.canvas.width;
+        foregroundCanvas.height = result.canvas.height;
+        stage.style.aspectRatio = `${result.canvas.width} / ${result.canvas.height}`;
+        annotator?.destroy();
+        annotator = new Annotator({
+          background: backgroundCanvas,
+          foreground: foregroundCanvas,
+          cssRoot: opts.cssRoot,
+          onChange: /* @__PURE__ */ __name((cmds) => {
+            annotations = cmds;
+          }, "onChange")
+        });
+        highlightBtn.addEventListener("click", () => {
+          annotator?.setTool("highlight");
+          highlightBtn.classList.add("active");
+          hideBtn.classList.remove("active");
+        });
+        hideBtn.addEventListener("click", () => {
+          annotator?.setTool("hide");
+          hideBtn.classList.add("active");
+          highlightBtn.classList.remove("active");
+        });
+        undoBtn.addEventListener("click", () => annotator?.undo());
+        clearBtn.addEventListener("click", () => annotator?.clear());
+        placeholder.style.display = "none";
+        captureBtn.textContent = "Re-capture";
+        screenshotPreview.style.display = "";
+        toolbar.style.display = "";
+      } else {
+        captureBtn.textContent = "Add Screenshot";
+      }
+    } catch {
+      captureBtn.textContent = "Add Screenshot";
+    } finally {
+      captureBtn.disabled = false;
+    }
+  });
+  const descSection = document.createElement("div");
+  descSection.className = "it-section";
+  const descLabel = document.createElement("label");
+  descLabel.className = "it-label";
+  descLabel.textContent = "Description *";
+  const descArea = document.createElement("textarea");
+  descArea.className = "it-textarea";
+  descArea.placeholder = "Describe the bug (at least 10 characters)\u2026";
+  descArea.rows = 4;
+  const descError = document.createElement("div");
+  descError.className = "it-error";
+  descSection.appendChild(descLabel);
+  descSection.appendChild(descArea);
+  descSection.appendChild(descError);
+  container.appendChild(descSection);
+  const titleSection = document.createElement("div");
+  titleSection.className = "it-section";
+  const titleLabel = document.createElement("label");
+  titleLabel.className = "it-label";
+  titleLabel.textContent = "Title (optional)";
+  const titleInput = document.createElement("input");
+  titleInput.className = "it-input";
+  titleInput.type = "text";
+  titleInput.placeholder = "Auto-derived from description if blank";
+  titleInput.maxLength = 200;
+  titleSection.appendChild(titleLabel);
+  titleSection.appendChild(titleInput);
+  container.appendChild(titleSection);
+  let emailInput = null;
+  if (opts.widgetOpts.collectEmail) {
+    const emailSection = document.createElement("div");
+    emailSection.className = "it-section";
+    const emailLabel = document.createElement("label");
+    emailLabel.className = "it-label";
+    emailLabel.textContent = "Email (optional)";
+    emailInput = document.createElement("input");
+    emailInput.className = "it-input";
+    emailInput.type = "email";
+    emailInput.placeholder = "you@example.com";
+    if (opts.widgetOpts.reporter?.email) {
+      emailInput.value = opts.widgetOpts.reporter.email;
+    }
+    emailSection.appendChild(emailLabel);
+    emailSection.appendChild(emailInput);
+    container.appendChild(emailSection);
+  }
+  const submitError = document.createElement("div");
+  submitError.className = "it-error";
+  container.appendChild(submitError);
+  const footer = document.createElement("div");
+  footer.className = "it-footer";
+  const brandingEl = document.createElement("a");
+  brandingEl.className = "it-branding";
+  brandingEl.href = "https://tasks.koderlabs.net";
+  brandingEl.target = "_blank";
+  brandingEl.rel = "noopener";
+  brandingEl.textContent = "Powered by InstantTasks";
+  brandingEl.style.display = opts.showBranding !== false ? "" : "none";
+  const actions = document.createElement("div");
+  actions.className = "it-actions";
+  const cancelBtn = document.createElement("button");
+  cancelBtn.className = "it-btn";
+  cancelBtn.textContent = "Cancel";
+  cancelBtn.addEventListener("click", opts.onCancel);
+  const submitBtn = document.createElement("button");
+  submitBtn.className = "it-btn it-btn-primary";
+  submitBtn.textContent = "Submit";
+  actions.appendChild(cancelBtn);
+  actions.appendChild(submitBtn);
+  footer.appendChild(brandingEl);
+  footer.appendChild(actions);
+  container.appendChild(footer);
+  submitBtn.addEventListener("click", async () => {
+    const desc = descArea.value.trim();
+    if (desc.length < 10) {
+      descError.textContent = "Description must be at least 10 characters.";
+      descArea.focus();
+      return;
+    }
+    descError.textContent = "";
+    submitError.textContent = "";
+    let screenshotForSubmit;
+    if (capturedCanvas && annotator) {
+      const out = document.createElement("canvas");
+      annotator.composite(out);
+      screenshotForSubmit = out;
+    } else if (capturedCanvas) {
+      screenshotForSubmit = capturedCanvas;
+    }
+    const derivedTitle = titleInput.value.trim() || (desc.length > 80 ? desc.slice(0, 80) + "\u2026" : desc);
+    const payload = {
+      title: derivedTitle,
+      description: desc,
+      email: emailInput?.value.trim() || void 0,
+      screenshot: screenshotForSubmit,
+      annotations
+    };
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = '<span class="it-spinner"></span>Submitting\u2026';
+    try {
+      const result = await opts.onSubmit(payload);
+      container.innerHTML = "";
+      const modalEl = container.closest(".it-modal");
+      modalEl?.classList.add("it-modal--success");
+      const successEl = document.createElement("div");
+      successEl.className = "it-success";
+      successEl.innerHTML = `
+        <div class="it-success-icon">\u2713</div>
+        <div class="it-success-title">Bug reported</div>
+        <a class="it-success-ticket" href="${result.ticketUrl}" target="_blank" rel="noopener">${result.ticketKey}</a>
+        <div class="it-success-hint">Closing in 4 seconds\u2026</div>
+      `;
+      container.appendChild(successEl);
+      setTimeout(() => opts.onCancel(), 4e3);
+    } catch (err) {
+      submitError.textContent = err instanceof Error ? err.message : "Submission failed. Please try again.";
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Submit";
+    }
+  });
+  if (emailInput && opts.widgetOpts.reporter?.email) {
+    emailInput.value = opts.widgetOpts.reporter.email;
+  }
+  setTimeout(() => descArea.focus(), 50);
+  if (opts.widgetOpts.autoCapture !== false) {
+    requestAnimationFrame(() => requestAnimationFrame(() => captureBtn.click()));
+  }
+  return container;
+}
+__name(buildFormElement, "buildFormElement");
+
+// src/transport.ts
+function canvasToBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("Failed to convert canvas to PNG blob"));
+    }, "image/png");
+  });
+}
+__name(canvasToBlob, "canvasToBlob");
+async function submitBugReport(client, payload) {
+  const meta = await collectMetadata(payload.captureConsole, payload.customDataFn);
+  const fullDescription = payload.description + formatMetadataBlock(meta);
+  const event = {
+    kind: "bug_report",
+    ts: (/* @__PURE__ */ new Date()).toISOString(),
+    url: meta.url,
+    userAgent: meta.userAgent,
+    viewport: meta.viewport,
+    payload: {
+      title: payload.title,
+      description: fullDescription,
+      email: payload.email ?? payload.reporter?.email,
+      annotations: payload.annotations,
+      reporter: payload.reporter,
+      metadata: {
+        appVersion: meta.appVersion,
+        customData: {
+          ...meta.customData,
+          ...payload.customData
+        },
+        consoleTail: meta.consoleTail
+      }
+    }
+  };
+  const attachments = /* @__PURE__ */ new Map();
+  if (payload.screenshot) {
+    try {
+      const pngBlob = await canvasToBlob(payload.screenshot);
+      attachments.set("screenshot", pngBlob);
+    } catch {
+    }
+  }
+  const result = await client.send(event, attachments.size > 0 ? attachments : void 0);
+  const ticketKey = result.ticketKey ?? "unknown";
+  const baseUrl = client.options.endpoint;
+  const ticketUrl = `${baseUrl}/tickets/${ticketKey}`;
+  return {
+    ticketKey,
+    ticketUrl
+  };
+}
+__name(submitBugReport, "submitBugReport");
+
+// src/index.ts
+var WidgetIntegration = class WidgetIntegration2 {
+  static {
+    __name(this, "WidgetIntegration");
+  }
+  name = "widget";
+  opts;
+  /** Caller-supplied options, before defaults were applied. Used to decide
+  *  which fields can be overwritten by server-side project config. */
+  _initialOpts;
+  client = null;
+  shell = null;
+  fabBtn = null;
+  /** Outer shadow-host element for the FAB. Tracked separately from the
+  *  button so capture flows can hide the *entire* widget chrome (not just
+  *  the modal) from screenshots. */
+  fabHost = null;
+  _visible = false;
+  _reporter;
+  _customData = {};
+  /** Reserved for upcoming network capture filters (Phase I).
+  *  Public so the field stays type-checked and isn't tree-shaken; safe to
+  *  read but currently has no effect. */
+  networkSettings = {};
+  listeners = /* @__PURE__ */ new Map();
+  cleanupHotkey = /* @__PURE__ */ __name(() => {
+  }, "cleanupHotkey");
+  cleanupConsole = /* @__PURE__ */ __name(() => {
+  }, "cleanupConsole");
+  constructor(opts) {
+    this._initialOpts = {
+      ...opts
+    };
+    this.opts = {
+      hotkey: "mod+shift+b",
+      autoInject: true,
+      useNativeScreenshot: true,
+      autoCapture: true,
+      showBranding: true,
+      ...opts
+    };
+    this._reporter = opts.reporter;
+    this._customData = {
+      ...opts.customData
+    };
+  }
+  setup(client) {
+    this.client = client;
+    if (this.opts.captureConsole) {
+      import("./metadata-BXXSPXC5.js").then(({ patchConsole: patchConsole2 }) => {
+        this.cleanupConsole = patchConsole2();
+      }).catch(() => {
+      });
+    }
+    void this._applyRemoteConfig(client).finally(() => this._wireRuntime());
+  }
+  /**
+  * GET /sdk/v1/config — uses the SDK's own configured endpoint + access
+  * key (the client already has both). Merges into this.opts only for
+  * fields the caller didn't explicitly set.
+  */
+  async _applyRemoteConfig(client) {
+    try {
+      const endpoint = client.options.endpoint?.replace(/\/+$/, "");
+      const accessKey = client.options.accessKey;
+      const projectId = client.options.projectId;
+      if (!endpoint || !accessKey || !projectId) return;
+      const res = await fetch(`${endpoint}/api/v1/sdk/v1/config`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessKey}`,
+          "X-Project-Id": projectId
+        }
+      });
+      if (!res.ok) return;
+      const body = await res.json().catch(() => null);
+      const cfg = body?.sdkConfig;
+      if (!cfg) return;
+      const init = this._initialOpts;
+      if (init.hotkey === void 0 && typeof cfg.hotkey === "string") {
+        this.opts.hotkey = cfg.hotkey;
+      }
+      if (init.autoInject === void 0 && typeof cfg.showFab === "boolean") {
+        this.opts.autoInject = cfg.showFab;
+      }
+      if (cfg.enabled === false) {
+        this.opts.hotkey = false;
+        this.opts.autoInject = false;
+      }
+    } catch {
+    }
+  }
+  /** Wires hotkey + FAB + debug surface. Called after _applyRemoteConfig. */
+  _wireRuntime() {
+    this.cleanupHotkey = registerHotkey(this.opts.hotkey, () => this.show());
+    if (this.opts.autoInject) {
+      this._injectFab();
+    }
+    const proc = globalThis.process;
+    const isProd = proc?.env?.NODE_ENV === "production";
+    const exposeGlobal = this.opts.exposeGlobal ?? !isProd;
+    if (exposeGlobal) {
+      try {
+        const w = window;
+        w.InstantTasks = {
+          show: /* @__PURE__ */ __name(() => this.show(), "show"),
+          hotkey: this.opts.hotkey
+        };
+        if (!this.opts.silent) {
+          console.info(`[InstantTasks Widget] ready. Hotkey: ${this.opts.hotkey}. Type \`InstantTasks.show()\` in DevTools to open it.`);
+        }
+      } catch {
+      }
+    } else if (!this.opts.silent) {
+      try {
+        console.info(`[InstantTasks Widget] ready. Hotkey: ${this.opts.hotkey}.`);
+      } catch {
+      }
+    }
+    this._emit({
+      name: "load"
+    });
+  }
+  teardown() {
+    this.cleanupHotkey();
+    this.cleanupConsole();
+    this.shell?.destroy();
+    this.shell = null;
+    if (this.fabBtn?.parentNode) this.fabBtn.parentNode.removeChild(this.fabBtn);
+    this.fabBtn = null;
+    this._visible = false;
+  }
+  // ── WidgetApi methods ──────────────────────────────────────────────────────
+  show() {
+    if (this._visible) return;
+    if (!this.client) return;
+    this._visible = true;
+    this._openModal();
+    this._emit({
+      name: "show"
+    });
+  }
+  hide() {
+    if (!this._visible) return;
+    this.shell?.close();
+    this._visible = false;
+    this._emit({
+      name: "hide"
+    });
+  }
+  isVisible() {
+    return this._visible;
+  }
+  async capture(mode) {
+    void mode;
+    this.show();
+  }
+  cancelCapture() {
+    this.hide();
+  }
+  setReporter(info) {
+    this._reporter = info;
+  }
+  clearReporter() {
+    this._reporter = void 0;
+  }
+  setCustomData(data) {
+    this._customData = {
+      ...this._customData,
+      ...data
+    };
+  }
+  setNetworkRecordingSettings(s) {
+    this.networkSettings = s;
+  }
+  on(event, listener) {
+    const arr = this.listeners.get(event) ?? [];
+    arr.push(listener);
+    this.listeners.set(event, arr);
+  }
+  off(event, listener) {
+    const arr = this.listeners.get(event) ?? [];
+    this.listeners.set(event, arr.filter((l) => l !== listener));
+  }
+  unload() {
+    this.teardown();
+  }
+  // ── Private ────────────────────────────────────────────────────────────────
+  _openModal() {
+    const shell = new ModalShell({
+      onClose: /* @__PURE__ */ __name(() => {
+        this._visible = false;
+        this._emit({
+          name: "hide"
+        });
+      }, "onClose")
+    });
+    this.shell?.destroy();
+    this.shell = shell;
+    const formEl = buildFormElement({
+      widgetOpts: this.opts,
+      cssRoot: shell.shadowRoot,
+      // Hide modal AND FAB during capture — both live as separate shadow
+      // hosts on document.body and would otherwise show in the screenshot.
+      hideForCapture: [
+        shell.host,
+        this.fabHost
+      ].filter((el) => !!el),
+      showBranding: this.opts.showBranding,
+      onCancel: /* @__PURE__ */ __name(() => {
+        this._emit({
+          name: "feedbackdiscarded"
+        });
+        shell.close();
+        this._visible = false;
+      }, "onCancel"),
+      onSubmit: /* @__PURE__ */ __name(async (payload) => {
+        let cancelled = false;
+        const mutableValues = {
+          description: payload.description,
+          title: payload.title,
+          email: payload.email,
+          labels: void 0,
+          assignee: void 0,
+          customFields: void 0,
+          priority: void 0,
+          issueType: void 0
+        };
+        const beforeSendListeners = this.listeners.get("feedbackbeforesend") ?? [];
+        for (const listener of beforeSendListeners) {
+          listener({
+            name: "feedbackbeforesend",
+            values: mutableValues,
+            setValue: /* @__PURE__ */ __name((field, value) => {
+              const MUTABLE = /* @__PURE__ */ new Set([
+                "assignee",
+                "labels",
+                "customFields",
+                "priority",
+                "issueType"
+              ]);
+              if (MUTABLE.has(field)) mutableValues[field] = value;
+            }, "setValue"),
+            cancel: /* @__PURE__ */ __name(() => {
+              cancelled = true;
+            }, "cancel")
+          });
+          if (cancelled) break;
+        }
+        if (cancelled) {
+          this._emit({
+            name: "feedbackdiscarded"
+          });
+          shell.close();
+          this._visible = false;
+          throw new Error("Cancelled by feedbackbeforesend handler");
+        }
+        if (!this.client) throw new Error("Client not initialized");
+        const result = await submitBugReport(this.client, {
+          title: mutableValues.title ?? payload.title,
+          description: mutableValues.description ?? payload.description,
+          email: mutableValues.email ?? payload.email,
+          screenshot: payload.screenshot,
+          annotations: payload.annotations,
+          reporter: this._reporter,
+          customData: {
+            ...this._customData,
+            ...mutableValues.customFields
+          }
+        });
+        this._emit({
+          name: "feedbacksent",
+          ...result
+        });
+        return result;
+      }, "onSubmit")
+    });
+    shell.open(formEl);
+  }
+  _injectFab() {
+    const fabHost = document.createElement("div");
+    fabHost.setAttribute("data-it-fab", "");
+    const shadow = fabHost.attachShadow({
+      mode: "open"
+    });
+    const style = document.createElement("style");
+    style.textContent = `
+      .it-fab {
+        position: fixed; bottom: 20px; right: 20px;
+        z-index: 2147483646;
+        width: 44px; height: 44px; border-radius: 50%;
+        background: #4f46e5; color: #fff;
+        border: none; cursor: pointer; padding: 0;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
+        display: inline-flex;
+        align-items: center; justify-content: center;
+        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
+      .it-fab:hover {
+        transform: translateY(-1px) scale(1.04);
+        background: #4338ca;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.22);
+      }
+      .it-fab:focus-visible {
+        outline: 2px solid #c7d2fe;
+        outline-offset: 2px;
+      }
+      .it-fab svg { width: 20px; height: 20px; display: block; }
+    `;
+    const fab = document.createElement("button");
+    fab.className = "it-fab";
+    fab.setAttribute("aria-label", "Report a bug");
+    fab.setAttribute("title", "Report a bug");
+    fab.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="12" y1="7" x2="12" y2="11"/><circle cx="12" cy="14.5" r="1"/></svg>';
+    fab.addEventListener("click", () => this.show());
+    shadow.appendChild(style);
+    shadow.appendChild(fab);
+    document.body.appendChild(fabHost);
+    this.fabBtn = fab;
+    this.fabHost = fabHost;
+  }
+  _emit(event) {
+    const name = event.name;
+    const listeners = this.listeners.get(name) ?? [];
+    for (const l of listeners) {
+      try {
+        l(event);
+      } catch (e) {
+        console.error("[InstantTasks Widget] listener threw", e);
+      }
+    }
+  }
+};
+function reporterIntegration(opts = {}) {
+  return new WidgetIntegration(opts);
+}
+__name(reporterIntegration, "reporterIntegration");
+var widgetIntegration = reporterIntegration;
+var src_default = reporterIntegration;
+export {
+  WidgetIntegration as ReporterIntegration,
+  WidgetIntegration,
+  collectMetadata,
+  src_default as default,
+  formatMetadataBlock,
+  isNativeCaptureSupported,
+  parseHotkey,
+  patchConsole,
+  registerHotkey,
+  reporterIntegration,
+  widgetIntegration
+};
+//# sourceMappingURL=index.js.map