mesurer 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type ColorPickerFormat = "hex" | "rgb" | "hsl" | "oklch";
-type ColorSample = {
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
+type TextFont = "handwritten" | "code" | "serif" | "sans-serif";
+type TextBackground = "none" | "label" | "outline";
+type TextStyleSettings = {
+    font: TextFont;
+    color: string;
+    background: TextBackground;
+    /** The colour of the label, or of the outline. */
+    backgroundColor: string;
 };
 
 type Point$1 = {
@@ -21,14 +23,26 @@ type Arrow = {
     width: number;
     rotation?: number;
 };
+type PenPoint = Point$1 & {
+    w?: number;
+};
+type PenKind = "ink" | "marker";
+type PenChoice = PenKind | "eraser";
 type PenStroke = {
     id: string;
-    points: Point$1[];
+    /** The pen it was drawn with. One drawn before there were several was drawn in ink. */
+    kind?: PenKind;
+    /**
+     * Its points are the line the ink follows, as it is drawn, and are not smoothed again. Set on
+     * what the eraser leaves of a stroke, so that rubbing part of it out moves none of the rest.
+     */
+    fixed?: boolean;
+    points: PenPoint[];
     color: string;
     width: number;
     rotation?: number;
 };
-type TextAnnotation = {
+type TextAnnotation$1 = {
     id: string;
     x: number;
     y: number;
@@ -36,6 +50,8 @@ type TextAnnotation = {
     scale?: number;
     rotation?: number;
     boxWidth?: number;
+    /** What the note was written in. A note keeps its own, whatever the next one is set to. */
+    style?: TextStyleSettings;
 };
 type CommentMessage = {
     id: string;
@@ -56,6 +72,15 @@ type CommentTarget = {
     rect: Rect;
     documentPoint: Point$1;
     anchor?: Point$1;
+    /** The address of the page the element was on when it was commented on. */
+    url?: string;
+    /** The size, in CSS px, of the window that page was in. */
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    /** That window was a responsive preview of this size, not the page itself. */
+    preview?: boolean;
 };
 type CommentThread = {
     id: string;
@@ -139,23 +164,6 @@ type DistanceOverlay = {
 type ToolMode = "none" | "select" | "selection" | "guides" | "xray" | "rulers" | "arrows" | "pen" | "text" | "comments";
 type PersistentToolMode = Exclude<ToolMode, "none" | "xray" | "rulers">;
 
-type Point = {
-    x: number;
-    y: number;
-};
-type ToolbarPlacement = Point & {
-    edge?: ToolbarSide | null;
-    align?: DockAlign;
-    vertical?: boolean;
-};
-type DockAlign = "start" | "center" | "end";
-
-type TextFont = "handwritten" | "code" | "serif" | "sans-serif";
-type TextStyleSettings = {
-    font: TextFont;
-    color: string;
-};
-
 type LayoutGuideKind = "columns" | "rows" | "grid";
 type LayoutGuideAlign = "stretch" | "min" | "center" | "max";
 type LayoutGuide = {
@@ -171,6 +179,185 @@ type LayoutGuide = {
     align: LayoutGuideAlign;
 };
 
+declare const REVIEW_STATE_SCHEMA_VERSION = 1;
+type ReviewId = string;
+type PageId = string;
+type PageVersionId = string;
+type DomTargetId = string;
+type ViewportSnapshot = {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+};
+type ScrollSnapshot = Point$1;
+type ScreenshotAsset = {
+    id: string;
+    mimeType: "image/png" | "image/jpeg" | "image/webp";
+    width: number;
+    height: number;
+    dataUrl?: string;
+    storageKey?: string;
+};
+type PageSnapshot = {
+    url: string;
+    title?: string;
+    capturedAt: number;
+    viewport: ViewportSnapshot;
+    scroll: ScrollSnapshot;
+    screenshot?: ScreenshotAsset;
+};
+type DomAccessibilityFingerprint = {
+    role?: string;
+    name?: string;
+    label?: string;
+};
+type DomFingerprint = {
+    selector?: string;
+    domPath?: string[];
+    framePath?: string[];
+    frameShadowPaths?: string[][];
+    shadowPath?: string[];
+    tagName: string;
+    id?: string;
+    attributes: Record<string, string>;
+    text?: string;
+    nearbyText?: string;
+    htmlPreview?: string;
+    accessibility?: DomAccessibilityFingerprint;
+    bounds: Rect;
+    styles?: Record<string, string>;
+};
+type DomContext = {
+    fingerprints: Record<DomTargetId, DomFingerprint>;
+};
+type PageVersion = {
+    id: PageVersionId;
+    pageId: PageId;
+    number: number;
+    createdAt: number;
+    snapshot: PageSnapshot;
+    domContext: DomContext;
+};
+type ReviewComment = {
+    id: string;
+    targetId?: DomTargetId;
+    text: string;
+    messages: CommentMessage[];
+    position: Point$1;
+    status: "open" | "resolved";
+    createdVersion: PageVersionId;
+    createdAt: number;
+    updatedAt: number;
+};
+type ArrowAnnotation = Arrow & {
+    type: "arrow";
+};
+type PenAnnotation = PenStroke & {
+    type: "pen";
+};
+type RectangleAnnotation = {
+    type: "rectangle";
+    id: string;
+    rect: Rect;
+    color: string;
+    width: number;
+    rotation?: number;
+};
+type TextAnnotation = TextAnnotation$1 & {
+    type: "text";
+};
+type ReviewMeasurement = Omit<Measurement, "elementRef">;
+type MeasurementAnnotation = ReviewMeasurement & {
+    type: "measurement";
+    kind: "element";
+    targetId?: DomTargetId;
+};
+type ReviewDistance = Omit<DistanceOverlay, "elementRefA" | "elementRefB" | "pinTargetRef">;
+type DistanceMeasurementAnnotation = ReviewDistance & {
+    type: "measurement";
+    kind: "distance";
+    targetIds?: {
+        a?: DomTargetId;
+        b?: DomTargetId;
+        pin?: DomTargetId;
+    };
+};
+type GuideAnnotation = Guide & {
+    type: "guide";
+};
+type ReviewAnnotation = ArrowAnnotation | PenAnnotation | RectangleAnnotation | TextAnnotation | MeasurementAnnotation | DistanceMeasurementAnnotation | GuideAnnotation;
+type ReviewWorkspace = {
+    guides: Guide[];
+    arrows: Arrow[];
+    penStrokes: PenStroke[];
+    textAnnotations: TextAnnotation$1[];
+    measurements: ReviewMeasurement[];
+    heldDistances: ReviewDistance[];
+    comments: ReviewComment[];
+    layoutGuides: LayoutGuide[];
+    textStyle?: TextStyleSettings;
+};
+type Review = {
+    id: ReviewId;
+    pageId: PageId;
+    createdAt: number;
+    updatedAt: number;
+    comments: ReviewComment[];
+    annotations: ReviewAnnotation[];
+    textStyle?: TextStyleSettings;
+    workspace?: ReviewWorkspace;
+};
+type ReviewPage = {
+    id: PageId;
+    projectId: string;
+    url: string;
+    title?: string;
+    versionIds: PageVersionId[];
+};
+type ReviewProject = {
+    id: string;
+    name: string;
+};
+type ReviewState = {
+    schemaVersion: typeof REVIEW_STATE_SCHEMA_VERSION;
+    project: ReviewProject;
+    page: ReviewPage;
+    versions: PageVersion[];
+    review: Review;
+};
+
+type ColorPickerFormat = "hex" | "rgb" | "hsl" | "oklch";
+type ColorSample = {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+};
+
+/** What a pen was last set to. Kept for each pen, so each is found as it was left. */
+type PenSetting = {
+    width?: number;
+    color?: string;
+};
+type PenSettings = Partial<Record<PenKind | "eraser", PenSetting>>;
+
+type Point = {
+    x: number;
+    y: number;
+};
+type ToolbarPlacement = Point & {
+    edge?: ToolbarSide | null;
+    align?: DockAlign;
+    vertical?: boolean;
+};
+type DockAlign = "start" | "center" | "end";
+
+type PersistenceRevision = {
+    counter: number;
+    writerId: string;
+    mutationId: string;
+};
+
 declare const MESURER_STORAGE_VERSION = 2;
 type GuidePattern = "solid" | "dashed" | "dotted";
 type InfoCardMode = "hover" | "click";
@@ -199,6 +386,8 @@ type MesurerStoredSettings = {
     toolbarPosition?: ToolbarPlacement;
     toolbarDock?: ToolbarDock;
     toolbarAutoHide?: boolean;
+    penKind?: PenChoice;
+    penSettings?: PenSettings;
     highlightColor?: string;
     guideColor?: string;
     arrowColor?: string;
@@ -238,7 +427,7 @@ type MesurerPageArtifacts = {
     selectedPenStrokeIds?: string[];
     selectedTextIds?: string[];
     penStrokes: PenStroke[];
-    textAnnotations: TextAnnotation[];
+    textAnnotations: TextAnnotation$1[];
     measurements: Measurement[];
     activeMeasurement: Measurement | null;
     heldDistances: DistanceOverlay[];
@@ -253,6 +442,7 @@ declare const isPagedWorkspaceStore: (value: unknown) => value is PagedWorkspace
 type MesurerPersistenceSnapshot = {
     settings: MesurerStoredSettings;
     workspace: MesurerStoredWorkspace | PagedWorkspaceStore | null;
+    revision?: PersistenceRevision;
 };
 type PersistenceChangeSource = {
     settings?: boolean;
@@ -272,10 +462,64 @@ declare const normalizeStoredWorkspace: (value: unknown) => MesurerStoredWorkspa
 declare const createLocalStoragePersistence: (ownerWindow: Window, workspaceKey: string, settingsKey?: string, legacyKey?: string) => MesurerPersistence;
 declare const createPageScopedPersistence: (base: MesurerPersistence, getPageKey: () => string) => MesurerPersistence;
 
+type CapturedReviewImage = {
+    blob: Blob;
+    width: number;
+    height: number;
+    mimeType: "image/png" | "image/jpeg" | "image/webp";
+    origin: {
+        x: number;
+        y: number;
+    };
+    cssWidth: number;
+    cssHeight: number;
+    scale: number;
+    /** The capture as an SVG document that loads, from their own address, the images that could
+     *  not be read into `blob`. Present only when there are some. */
+    live?: string;
+};
+
+type ReviewSnapshotCapture = {
+    blob: Blob;
+    width: number;
+    height: number;
+    mimeType: "image/png" | "image/jpeg" | "image/webp";
+    origin?: {
+        x: number;
+        y: number;
+    };
+    cssWidth?: number;
+    cssHeight?: number;
+    scale?: number;
+    live?: string;
+};
+
+type EphemeralReviewUrl = {
+    url: string;
+    state: ReviewState;
+    html: string;
+};
+declare const createEphemeralReviewUrl: (state: ReviewState, capture: ReviewSnapshotCapture, ownerWindow: Window) => Promise<EphemeralReviewUrl>;
+
+type CreateReviewViewer = typeof createEphemeralReviewUrl;
+
+type ReviewPublication = {
+    id: string;
+    html: string;
+    state: ReviewState;
+    screenshot: Blob;
+};
+
 type MesurerFeatures = {
     screenshot?: boolean;
     rulers?: boolean;
     settings?: boolean;
+    responsive?: boolean;
+    /**
+     * Saving a review. Off unless asked for: reviews are not kept anywhere yet but on the machine
+     * they are saved from, so the Save button is not shown to everyone.
+     */
+    review?: boolean;
 };
 
 type ExtensionRecordingSession = {
@@ -327,9 +571,21 @@ type MesurerProps = {
     persistence?: MesurerPersistence;
     onPersistenceError?: (error: unknown) => void;
     captureVisibleTab?: () => Promise<Blob>;
+    captureDom?: ((ownerDocument: Document, ownerWindow: Window) => Promise<CapturedReviewImage>) | false;
+    /** Builds a saved review's viewer page, for a host that loads that code on demand. */
+    createReviewViewer?: CreateReviewViewer;
+    /**
+     * Keeps a saved review, and gives the address it opens at. Without it the review's own page
+     * is kept in this site's storage and opened on this site, which only a site that serves the
+     * viewer can do.
+     */
+    publishReview?: (review: ReviewPublication) => Promise<string>;
+    /** Fills the tab a review will open in while it is made, for a host that loads that code on demand. */
+    showReviewLoading?: (view: Window) => void;
     extensionRecording?: ExtensionRecordingSession;
     extensionRecordingPlayer?: string;
     features?: MesurerFeatures;
+    reviewState?: ReviewState;
     initialState?: {
         enabled?: boolean;
         minimized?: boolean;
@@ -357,7 +613,7 @@ type MesurerProps = {
     };
 };
 
-declare function Mesurer({ highlightColor, guideColor, arrowColor, guideHighlightEnabled, hoverHighlightEnabled, layoutDetailsEnabled, persistOnReload, persistSession, shortcutsEnabled, theme, portalTarget, persistKey, colorPickerFormats, colorPickerClickFormat, snapEnabled, snapGuidesEnabled, snapArrowsEnabled, arrowClickToPlace, selectNewGuideEnabled, multiMeasureEnabled, guideStyle, rulerSettings, textStyle, persistence, onPersistenceError, captureVisibleTab, extensionRecording, extensionRecordingPlayer, features, initialState, }: MesurerProps): react_jsx_runtime.JSX.Element | null;
+declare function Mesurer(props: MesurerProps): react_jsx_runtime.JSX.Element;
 
 type TypographyRow = {
     label: string;
@@ -396,4 +652,4 @@ type TextInspectorOptions = {
 declare const createTextInspector: (options?: TextInspectorOptions, legacy?: boolean) => TextInspectorAPI;
 declare const TextInspector: TextInspectorAPI;
 
-export { type Arrow, type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerFeatures, type MesurerPageArtifacts, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerSessionChrome, type MesurerStoredSettings, type MesurerStoredWorkspace, type PagedWorkspaceStore, type PenStroke, type Point$1 as Point, type RulerSettings, type ScreenshotSettings, type ShareMode, type TextAnnotation, type TextFont, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TextStyleSettings, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createPageScopedPersistence, createTextInspector, isPagedWorkspaceStore, normalizeStoredSettings, normalizeStoredWorkspace };
+export { type Arrow, type ColorPickerFormat, type ColorSample, type GuidePattern, type GuideStyle, MESURER_STORAGE_VERSION, Mesurer, type MesurerFeatures, type MesurerPageArtifacts, type MesurerPersistence, type MesurerPersistenceSnapshot, type MesurerProps, type MesurerSessionChrome, type MesurerStoredSettings, type MesurerStoredWorkspace, type PagedWorkspaceStore, type PenStroke, type Point$1 as Point, type RulerSettings, type ScreenshotSettings, type ShareMode, type TextAnnotation$1 as TextAnnotation, type TextBackground, type TextFont, TextInspector, type TextInspectorAPI, type TextInspectorOptions, type TextStyleSettings, type TypographyInfo, type TypographyRow, createLocalStoragePersistence, createPageScopedPersistence, createTextInspector, isPagedWorkspaceStore, normalizeStoredSettings, normalizeStoredWorkspace };