issue-sticker 0.1.1 → 0.2.0

package/dist/tooltip-BkQcdrki.js

@@ -0,0 +1,512 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { h as Presence, n as Portal$1, w as Arrow, D as DismissableLayer, C as Content, y as Root, j as useComposedRefs, t as createPopperScope, i as createContextScope, z as createSlottable, f as useId, e as useControllableState, v as Root2, A as Anchor, P as Primitive, g as composeEventHandlers, b as usePortalContainer, a as cn, O as OVERLAY_LAYER, s as stopEscapePropagation } from "./createLucideIcon-B457EluY.js";
+var [createTooltipContext] = createContextScope("Tooltip", [
+  createPopperScope
+]);
+var usePopperScope = createPopperScope();
+var PROVIDER_NAME = "TooltipProvider";
+var DEFAULT_DELAY_DURATION = 700;
+var TOOLTIP_OPEN = "tooltip.open";
+var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
+var TooltipProvider$1 = (props) => {
+  const {
+    __scopeTooltip,
+    delayDuration = DEFAULT_DELAY_DURATION,
+    skipDelayDuration = 300,
+    disableHoverableContent = false,
+    children
+  } = props;
+  const isOpenDelayedRef = React.useRef(true);
+  const isPointerInTransitRef = React.useRef(false);
+  const skipDelayTimerRef = React.useRef(0);
+  React.useEffect(() => {
+    const skipDelayTimer = skipDelayTimerRef.current;
+    return () => window.clearTimeout(skipDelayTimer);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TooltipProviderContextProvider,
+    {
+      scope: __scopeTooltip,
+      isOpenDelayedRef,
+      delayDuration,
+      onOpen: React.useCallback(() => {
+        if (skipDelayDuration <= 0) return;
+        window.clearTimeout(skipDelayTimerRef.current);
+        isOpenDelayedRef.current = false;
+      }, [skipDelayDuration]),
+      onClose: React.useCallback(() => {
+        if (skipDelayDuration <= 0) return;
+        window.clearTimeout(skipDelayTimerRef.current);
+        skipDelayTimerRef.current = window.setTimeout(
+          () => isOpenDelayedRef.current = true,
+          skipDelayDuration
+        );
+      }, [skipDelayDuration]),
+      isPointerInTransitRef,
+      onPointerInTransitChange: React.useCallback((inTransit) => {
+        isPointerInTransitRef.current = inTransit;
+      }, []),
+      disableHoverableContent,
+      children
+    }
+  );
+};
+TooltipProvider$1.displayName = PROVIDER_NAME;
+var TOOLTIP_NAME = "Tooltip";
+var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
+var Tooltip$1 = (props) => {
+  const {
+    __scopeTooltip,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    disableHoverableContent: disableHoverableContentProp,
+    delayDuration: delayDurationProp
+  } = props;
+  const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
+  const popperScope = usePopperScope(__scopeTooltip);
+  const [trigger, setTrigger] = React.useState(null);
+  const contentId = useId();
+  const openTimerRef = React.useRef(0);
+  const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
+  const delayDuration = delayDurationProp ?? providerContext.delayDuration;
+  const wasOpenDelayedRef = React.useRef(false);
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: (open2) => {
+      if (open2) {
+        providerContext.onOpen();
+        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+      } else {
+        providerContext.onClose();
+      }
+      onOpenChange == null ? void 0 : onOpenChange(open2);
+    },
+    caller: TOOLTIP_NAME
+  });
+  const stateAttribute = React.useMemo(() => {
+    return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
+  }, [open]);
+  const handleOpen = React.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    wasOpenDelayedRef.current = false;
+    setOpen(true);
+  }, [setOpen]);
+  const handleClose = React.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    setOpen(false);
+  }, [setOpen]);
+  const handleDelayedOpen = React.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = window.setTimeout(() => {
+      wasOpenDelayedRef.current = true;
+      setOpen(true);
+      openTimerRef.current = 0;
+    }, delayDuration);
+  }, [delayDuration, setOpen]);
+  React.useEffect(() => {
+    return () => {
+      if (openTimerRef.current) {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = 0;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Root2, { ...popperScope, children: /* @__PURE__ */ jsx(
+    TooltipContextProvider,
+    {
+      scope: __scopeTooltip,
+      contentId,
+      open,
+      stateAttribute,
+      trigger,
+      onTriggerChange: setTrigger,
+      onTriggerEnter: React.useCallback(() => {
+        if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
+        else handleOpen();
+      }, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
+      onTriggerLeave: React.useCallback(() => {
+        if (disableHoverableContent) {
+          handleClose();
+        } else {
+          window.clearTimeout(openTimerRef.current);
+          openTimerRef.current = 0;
+        }
+      }, [handleClose, disableHoverableContent]),
+      onOpen: handleOpen,
+      onClose: handleClose,
+      disableHoverableContent,
+      children
+    }
+  ) });
+};
+Tooltip$1.displayName = TOOLTIP_NAME;
+var TRIGGER_NAME = "TooltipTrigger";
+var TooltipTrigger$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTooltip, ...triggerProps } = props;
+    const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
+    const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
+    const popperScope = usePopperScope(__scopeTooltip);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
+    const isPointerDownRef = React.useRef(false);
+    const hasPointerMoveOpenedRef = React.useRef(false);
+    const handlePointerUp = React.useCallback(() => isPointerDownRef.current = false, []);
+    React.useEffect(() => {
+      return () => document.removeEventListener("pointerup", handlePointerUp);
+    }, [handlePointerUp]);
+    return /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        "aria-describedby": context.open ? context.contentId : void 0,
+        "data-state": context.stateAttribute,
+        ...triggerProps,
+        ref: composedRefs,
+        onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+          if (event.pointerType === "touch") return;
+          if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
+            context.onTriggerEnter();
+            hasPointerMoveOpenedRef.current = true;
+          }
+        }),
+        onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
+          context.onTriggerLeave();
+          hasPointerMoveOpenedRef.current = false;
+        }),
+        onPointerDown: composeEventHandlers(props.onPointerDown, () => {
+          if (context.open) {
+            context.onClose();
+          }
+          isPointerDownRef.current = true;
+          document.addEventListener("pointerup", handlePointerUp, { once: true });
+        }),
+        onFocus: composeEventHandlers(props.onFocus, () => {
+          if (!isPointerDownRef.current) context.onOpen();
+        }),
+        onBlur: composeEventHandlers(props.onBlur, context.onClose),
+        onClick: composeEventHandlers(props.onClick, context.onClose)
+      }
+    ) });
+  }
+);
+TooltipTrigger$1.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "TooltipPortal";
+var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+var TooltipPortal = (props) => {
+  const { __scopeTooltip, forceMount, children, container } = props;
+  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children }) }) });
+};
+TooltipPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "TooltipContent";
+var TooltipContent$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
+    const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
+    const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
+  }
+);
+var TooltipContentHoverable = React.forwardRef((props, forwardedRef) => {
+  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+  const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const [pointerGraceArea, setPointerGraceArea] = React.useState(null);
+  const { trigger, onClose } = context;
+  const content = ref.current;
+  const { onPointerInTransitChange } = providerContext;
+  const handleRemoveGraceArea = React.useCallback(() => {
+    setPointerGraceArea(null);
+    onPointerInTransitChange(false);
+  }, [onPointerInTransitChange]);
+  const handleCreateGraceArea = React.useCallback(
+    (event, hoverTarget) => {
+      const currentTarget = event.currentTarget;
+      const exitPoint = { x: event.clientX, y: event.clientY };
+      const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+      const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+      const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+      const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+      setPointerGraceArea(graceArea);
+      onPointerInTransitChange(true);
+    },
+    [onPointerInTransitChange]
+  );
+  React.useEffect(() => {
+    return () => handleRemoveGraceArea();
+  }, [handleRemoveGraceArea]);
+  React.useEffect(() => {
+    if (trigger && content) {
+      const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
+      const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
+      trigger.addEventListener("pointerleave", handleTriggerLeave);
+      content.addEventListener("pointerleave", handleContentLeave);
+      return () => {
+        trigger.removeEventListener("pointerleave", handleTriggerLeave);
+        content.removeEventListener("pointerleave", handleContentLeave);
+      };
+    }
+  }, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
+  React.useEffect(() => {
+    if (pointerGraceArea) {
+      const handleTrackPointerGrace = (event) => {
+        const target = event.target;
+        const pointerPosition = { x: event.clientX, y: event.clientY };
+        const hasEnteredTarget = (trigger == null ? void 0 : trigger.contains(target)) || (content == null ? void 0 : content.contains(target));
+        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
+        if (hasEnteredTarget) {
+          handleRemoveGraceArea();
+        } else if (isPointerOutsideGraceArea) {
+          handleRemoveGraceArea();
+          onClose();
+        }
+      };
+      document.addEventListener("pointermove", handleTrackPointerGrace);
+      return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
+    }
+  }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
+  return /* @__PURE__ */ jsx(TooltipContentImpl, { ...props, ref: composedRefs });
+});
+var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
+var Slottable = createSlottable("TooltipContent");
+var TooltipContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeTooltip,
+      children,
+      "aria-label": ariaLabel,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      ...contentProps
+    } = props;
+    const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
+    const popperScope = usePopperScope(__scopeTooltip);
+    const { onClose } = context;
+    React.useEffect(() => {
+      document.addEventListener(TOOLTIP_OPEN, onClose);
+      return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
+    }, [onClose]);
+    React.useEffect(() => {
+      if (context.trigger) {
+        const handleScroll = (event) => {
+          if (event.target instanceof Node && event.target.contains(context.trigger)) {
+            onClose();
+          }
+        };
+        window.addEventListener("scroll", handleScroll, { capture: true });
+        return () => window.removeEventListener("scroll", handleScroll, { capture: true });
+      }
+    }, [context.trigger, onClose]);
+    return /* @__PURE__ */ jsx(
+      DismissableLayer,
+      {
+        asChild: true,
+        disableOutsidePointerEvents: false,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside: (event) => event.preventDefault(),
+        onDismiss: onClose,
+        children: /* @__PURE__ */ jsxs(
+          Content,
+          {
+            "data-state": context.stateAttribute,
+            ...popperScope,
+            ...contentProps,
+            ref: forwardedRef,
+            style: {
+              ...contentProps.style,
+              // re-namespace exposed content custom properties
+              ...{
+                "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
+                "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
+                "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
+                "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
+                "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Slottable, { children }),
+              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TooltipContent$1.displayName = CONTENT_NAME;
+var ARROW_NAME = "TooltipArrow";
+var TooltipArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTooltip, ...arrowProps } = props;
+    const popperScope = usePopperScope(__scopeTooltip);
+    const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
+      ARROW_NAME,
+      __scopeTooltip
+    );
+    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+TooltipArrow.displayName = ARROW_NAME;
+function getExitSideFromRect(point, rect) {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return "left";
+    case right:
+      return "right";
+    case top:
+      return "top";
+    case bottom:
+      return "bottom";
+    default:
+      throw new Error("unreachable");
+  }
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
+  const paddedExitPoints = [];
+  switch (exitSide) {
+    case "top":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding }
+      );
+      break;
+    case "bottom":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y - padding }
+      );
+      break;
+    case "left":
+      paddedExitPoints.push(
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding }
+      );
+      break;
+    case "right":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x - padding, y: exitPoint.y + padding }
+      );
+      break;
+  }
+  return paddedExitPoints;
+}
+function getPointsFromRect(rect) {
+  const { top, right, bottom, left } = rect;
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom }
+  ];
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const ii = polygon[i];
+    const jj = polygon[j];
+    const xi = ii.x;
+    const yi = ii.y;
+    const xj = jj.x;
+    const yj = jj.y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function getHull(points) {
+  const newPoints = points.slice();
+  newPoints.sort((a, b) => {
+    if (a.x < b.x) return -1;
+    else if (a.x > b.x) return 1;
+    else if (a.y < b.y) return -1;
+    else if (a.y > b.y) return 1;
+    else return 0;
+  });
+  return getHullPresorted(newPoints);
+}
+function getHullPresorted(points) {
+  if (points.length <= 1) return points.slice();
+  const upperHull = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    while (upperHull.length >= 2) {
+      const q = upperHull[upperHull.length - 1];
+      const r = upperHull[upperHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
+      else break;
+    }
+    upperHull.push(p);
+  }
+  upperHull.pop();
+  const lowerHull = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (lowerHull.length >= 2) {
+      const q = lowerHull[lowerHull.length - 1];
+      const r = lowerHull[lowerHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
+      else break;
+    }
+    lowerHull.push(p);
+  }
+  lowerHull.pop();
+  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
+    return upperHull;
+  } else {
+    return upperHull.concat(lowerHull);
+  }
+}
+var Provider = TooltipProvider$1;
+var Root3 = Tooltip$1;
+var Trigger = TooltipTrigger$1;
+var Portal = TooltipPortal;
+var Content2 = TooltipContent$1;
+var Arrow2 = TooltipArrow;
+const TooltipProvider = Provider;
+const Tooltip = Root3;
+const TooltipTrigger = Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 8, onEscapeKeyDown, children, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+    Content2,
+    {
+      ref,
+      sideOffset,
+      onEscapeKeyDown: stopEscapePropagation(onEscapeKeyDown),
+      className: cn(
+        `pointer-events-none ${OVERLAY_LAYER.floating} max-w-[280px] select-none whitespace-nowrap rounded-md border border-line-subtle bg-text-primary px-2.5 py-1.5 font-sans text-xs font-medium leading-4 text-text-inverse shadow-md outline-none`,
+        "data-[state=delayed-open]:animate-scale-in data-[state=closed]:animate-scale-out",
+        "motion-reduce:animate-none",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Arrow2, { className: "fill-text-primary", width: 8, height: 4 })
+      ]
+    }
+  ) });
+});
+TooltipContent.displayName = Content2.displayName;
+export {
+  TooltipProvider as T,
+  Tooltip as a,
+  TooltipTrigger as b,
+  TooltipContent as c
+};

package/headless-react.d.ts

@@ -0,0 +1,12 @@
+export interface HeadlessSessionReplayIssue {
+  session_replay_url?: string | null;
+  session_replay?: { url?: string | null } | null;
+}
+
+export interface SessionReplayViewerProps {
+  issue: HeadlessSessionReplayIssue | null | undefined;
+}
+
+export declare function SessionReplayViewer(
+  props: SessionReplayViewerProps
+): import('react').ReactElement;

package/headless.d.ts

@@ -0,0 +1,172 @@
+import type {
+  Issue,
+  IssueFilterGroup,
+  IssueFilters,
+  IssuePosition,
+  IssueStickerSummary,
+  SessionReplayMeta,
+} from '@issue-sticker/shared';
+
+export type HeadlessPhase =
+  | 'initializing'
+  | 'idle'
+  | 'loadingIssues'
+  | 'viewingIssue'
+  | 'recordingVideo'
+  | 'selectingTarget'
+  | 'draftingIssue'
+  | 'submittingIssue';
+
+export type HeadlessErrorCode =
+  | 'INVALID_PHASE'
+  | 'NOT_INITIALIZED'
+  | 'AUTH_FAILED'
+  | 'MEMBER_AUTH_REQUIRED'
+  | 'NETWORK_ERROR'
+  | 'CAPTURE_FAILED'
+  | 'VALIDATION_ERROR';
+
+export type HeadlessAuthMode = 'public' | 'member';
+export type HeadlessCaptureMediaMode = 'screenshot' | 'video';
+
+export interface HeadlessIssueCaptureOptions {
+  readonly mediaMode?: 'screenshot';
+}
+
+export interface HeadlessUser {
+  id: string;
+  name: string;
+}
+
+export interface HeadlessConfig {
+  apiKey: string;
+  user?: HeadlessUser;
+  capture?: {
+    networkLogs?: boolean;
+    consoleLogs?: boolean;
+    excludeSelectors?: string[];
+  };
+}
+
+export interface HeadlessAuthState {
+  readonly mode: HeadlessAuthMode;
+  readonly isReady: boolean;
+  readonly canUseIntegrations: boolean;
+  readonly tenantId: string | null;
+  readonly projectId: string | null;
+  readonly accountId: string | null;
+}
+
+export type DynamicFieldSource = 'jira' | 'notion' | 'custom';
+
+export interface DynamicFieldOption {
+  readonly label: string;
+  readonly value: string;
+  readonly description?: string | null;
+}
+
+export interface DynamicFieldDescriptor {
+  readonly id: string;
+  readonly source: DynamicFieldSource;
+  readonly label: string;
+  readonly inputType:
+    | 'text'
+    | 'number'
+    | 'select'
+    | 'multi_select'
+    | 'date'
+    | 'checkbox'
+    | 'user'
+    | 'issue'
+    | 'people'
+    | 'readonly';
+  readonly options: readonly DynamicFieldOption[];
+  readonly search?: (query: string) => Promise<readonly DynamicFieldOption[]>;
+  readonly resolveValueLabel?: (value: string) => Promise<string | null>;
+}
+
+export interface IssueFormSchema {
+  readonly fields: readonly DynamicFieldDescriptor[];
+  readonly unavailableReason?: 'public-mode' | 'not-configured' | 'loading-failed';
+}
+
+export interface IssueFilterSchema {
+  readonly groups: readonly IssueFilterGroup[];
+  readonly unavailableReason?: 'public-mode' | 'not-configured' | 'loading-failed';
+}
+
+export interface HeadlessIssueDraft {
+  readonly mediaMode: HeadlessCaptureMediaMode;
+  readonly position: IssuePosition;
+  readonly screenshotPreviewUrls: readonly string[];
+  readonly videoPreviewUrl: string | null;
+  readonly targetSelector: string;
+  readonly sessionReplayEnabled: boolean;
+  readonly sessionReplayPreview: SessionReplayMeta | null;
+}
+
+export interface HeadlessVideoCaptureState {
+  readonly isRecording: boolean;
+  readonly hasRecordedVideo: boolean;
+  readonly error: string | null;
+}
+
+export interface HeadlessSessionReplayState {
+  readonly available: boolean;
+  readonly canAttach: boolean;
+  readonly enabled: boolean;
+  readonly error: string | null;
+}
+
+export interface HeadlessSnapshot {
+  readonly phase: HeadlessPhase;
+  readonly auth: HeadlessAuthState;
+  readonly issues: readonly IssueStickerSummary[];
+  readonly activeIssue: (Issue & { comments?: unknown[] }) | null;
+  readonly draft: HeadlessIssueDraft | null;
+  readonly videoCapture: HeadlessVideoCaptureState;
+  readonly sessionReplay: HeadlessSessionReplayState;
+  readonly formSchema: IssueFormSchema | null;
+  readonly filterSchema: IssueFilterSchema | null;
+  readonly error: IssueStickerHeadlessError | null;
+}
+
+export interface HeadlessIssueFilters extends Omit<IssueFilters, 'projectId' | 'externalUserId'> {
+  externalUserId?: string;
+}
+
+export interface SubmitDraftInput {
+  title: string;
+  description: string;
+  dynamicFields?: Record<string, unknown>;
+}
+
+export interface HeadlessClient {
+  readonly phase: HeadlessPhase;
+  getSnapshot(): HeadlessSnapshot;
+  subscribe(listener: (snapshot: HeadlessSnapshot) => void): () => void;
+  initialize(): Promise<void>;
+  refreshIssues(filters?: HeadlessIssueFilters): Promise<void>;
+  refreshFilterSchema(): Promise<void>;
+  openIssue(issueId: string): Promise<void>;
+  closeIssue(): void;
+  startIssueCapture(options?: HeadlessIssueCaptureOptions): Promise<void>;
+  startVideoCapture(): Promise<void>;
+  stopVideoCapture(): Promise<void>;
+  setSessionReplayEnabled(enabled: boolean): void;
+  cancelIssueCapture(): void;
+  submitDraft(input: SubmitDraftInput): Promise<Issue>;
+  loginAsMember(): Promise<void>;
+  logoutMember(): Promise<void>;
+  destroy(): void;
+}
+
+export declare class IssueStickerHeadlessError extends Error {
+  readonly code: HeadlessErrorCode;
+  readonly cause?: unknown;
+  constructor(code: HeadlessErrorCode, message: string, cause?: unknown);
+}
+
+export declare function createIssueStickerHeadless(config: HeadlessConfig): HeadlessClient;
+
+export default createIssueStickerHeadless;