@contember/echo 0.0.18

package/dist/features/drawing/components/ColorSelector.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const ColorSelector: Component;

package/dist/features/drawing/components/DrawingLayer.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const DrawingLayer: Component;

package/dist/features/drawing/components/DrawingToolbar.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const DrawingToolbar: Component;

package/dist/features/drawing/components/DrawingTooltip.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const DrawingTooltip: Component;

package/dist/features/drawing/components/Shape.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'solid-js';
+import type { Shape as ShapeType } from '~/types';
+interface ShapeProps {
+    shape: ShapeType;
+    selectedShapeId: string | null;
+    onShapeClick?: (id: string) => void;
+    isMask?: boolean;
+}
+export declare const Shape: Component<ShapeProps>;
+export {};

package/dist/features/drawing/components/ShapeActions.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const ShapeActions: Component;

package/dist/features/drawing/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DrawingLayer';
+export * from './DrawingTooltip';
+export * from './Shape';
+export * from './ShapeActions';
+export * from './DrawingToolbar';

package/dist/features/drawing/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDrawing';
+export * from './useDrag';
+export * from './useViewport';

package/dist/features/drawing/hooks/useDrag.d.ts

@@ -0,0 +1,17 @@
+import type { Point } from '~/types';
+export declare const useDrag: () => {
+    state: {
+        isDragging: import("solid-js").Accessor<boolean>;
+        dragStartPos: import("solid-js").Accessor<Point | null>;
+        initialClickPos: import("solid-js").Accessor<Point | null>;
+        dragOffset: import("solid-js").Accessor<Point | null>;
+    };
+    actions: {
+        startDrag: (point: Point) => void;
+        stopDrag: () => void;
+        setInitialClick: (point: Point | null) => void;
+        updateDragOffset: (shape: {
+            points: Point[];
+        }, point: Point) => void;
+    };
+};

package/dist/features/drawing/hooks/useDrawing.d.ts

@@ -0,0 +1,11 @@
+export declare const useDrawing: () => {
+    state: import("../../../stores").DrawingState;
+    actions: {
+        handleStart: (e: MouseEvent | TouchEvent) => void;
+        handleMove: (e: MouseEvent | TouchEvent) => void;
+        handleEnd: (e: MouseEvent | TouchEvent) => void;
+        handleEnter: (e: MouseEvent | TouchEvent) => void;
+        handleLeave: (e: MouseEvent | TouchEvent) => void;
+        handleShapeClick: (shapeId: string) => void;
+    };
+};

package/dist/features/drawing/hooks/useViewport.d.ts

@@ -0,0 +1,4 @@
+export declare const useViewport: () => {
+    width: import("solid-js").Accessor<number>;
+    height: import("solid-js").Accessor<number>;
+};

package/dist/features/drawing/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './styles';
+export * from './hooks';
+export * from './types';
+export * from './utils';

package/dist/features/drawing/styles/ColorSelector.styles.d.ts

@@ -0,0 +1,2 @@
+import type { StylesConfig } from '~/types';
+export declare const colorSelectorStyles: (config: StylesConfig) => string;

package/dist/features/drawing/styles/DrawingLayer.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const drawingLayerStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/drawing/styles/DrawingToolbar.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const drawingToolbarStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/drawing/styles/DrawingTooltip.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const tooltipStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/drawing/styles/ShapeActions.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const shapeActionsStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/drawing/styles/index.d.ts

@@ -0,0 +1,6 @@
+export * from './DrawingLayer.styles';
+export * from './ShapeActions.styles';
+export * from './ColorSelector.styles';
+export * from './DrawingLayer.styles';
+export * from './DrawingToolbar.styles';
+export * from './DrawingTooltip.styles';

package/dist/features/drawing/types/index.d.ts

@@ -0,0 +1,21 @@
+import { Point, Shape } from '~/types';
+export interface DrawingState {
+    isDrawing: boolean;
+    currentPoints: Point[];
+    currentPath: string;
+    selectedShapeId: string | null;
+    mousePosition: Point | null;
+    showTooltip: boolean;
+    hasDrawn: boolean;
+    selectedTool: string;
+    selectedColor: string;
+    shapes: Shape[];
+    isDragging: boolean;
+    dragStartPos: Point | null;
+    initialClickPos: Point | null;
+    dragOffset: Point | null;
+}
+export interface ViewportState {
+    width: number;
+    height: number;
+}

package/dist/features/drawing/utils/events.d.ts

@@ -0,0 +1,5 @@
+import type { Point } from '~/types';
+export declare const getPointFromEvent: (e: MouseEvent | TouchEvent, { useClientCoords }?: {
+    useClientCoords?: boolean;
+}) => Point;
+export declare const getDistance: (p1: Point, p2: Point) => number;

package/dist/features/drawing/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './events';
+export * from './svg';

package/dist/features/drawing/utils/svg.d.ts

@@ -0,0 +1,12 @@
+import type { ViewportState } from '../types';
+export declare const generateCutoutPath: (viewport: ViewportState, currentPoints: {
+    x: number;
+    y: number;
+}[], shapes: {
+    type: string;
+    points: {
+        x: number;
+        y: number;
+    }[];
+}[]) => string;
+export declare const getPenCursor: (color: string) => string;

package/dist/features/feedback/components/FeedbackForm.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from 'solid-js';
+export declare const FeedbackForm: Component;

package/dist/features/feedback/components/index.d.ts

@@ -0,0 +1 @@
+export * from './FeedbackForm';

package/dist/features/feedback/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './styles';

package/dist/features/feedback/styles/FeedbackForm.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const feedbackFormStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/feedback/styles/index.d.ts

@@ -0,0 +1 @@
+export * from './FeedbackForm.styles';

package/dist/features/launcher/components/EchoButton.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from 'solid-js';
+export declare const EchoButton: Component;

package/dist/features/launcher/components/Notification.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from 'solid-js';
+export declare const Notification: Component;

package/dist/features/launcher/components/SavedPagesDropdown.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'solid-js';
+export declare const SavedPagesDropdown: Component;

package/dist/features/launcher/components/WelcomeMessage.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from 'solid-js';
+export declare const WelcomeMessage: Component;

package/dist/features/launcher/styles/EchoLauncherButton.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const echoLauncherButtonStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/launcher/styles/Notification.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const notificationStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/launcher/styles/SavedPagesDropdown.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const savedPagesDropdownStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/launcher/styles/WelcomeMessage.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const welcomeMessageStyles: (config: EnrichedStylesConfig) => string;

package/dist/features/launcher/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './EchoLauncherButton.styles';
+export * from './SavedPagesDropdown.styles';
+export * from './WelcomeMessage.styles';
+export * from './Notification.styles';

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { type EchoOptions, type FeedbackData, type Position } from './types';
+/**
+ * Initialize the Echo feedback widget.
+ * @throws {Error} If initialization fails or invalid options are provided
+ * @returns {() => void} Cleanup function to remove the widget
+ */
+export declare function initEcho(options: EchoOptions): () => void;
+export type { FeedbackData, EchoOptions, Position };

package/dist/stores/echoStore.d.ts

@@ -0,0 +1,55 @@
+import type { DrawingTool, FeedbackData, Notification, Point, Screenshot, Shape, TextConfig } from '~/types';
+export interface FeedbackState {
+    comment: string;
+    screenshot?: Screenshot;
+    isCapturing: boolean;
+    isMinimized: boolean;
+}
+export interface DrawingState {
+    isDrawing: boolean;
+    selectedShapeId: string | null;
+    selectedTool: DrawingTool;
+    selectedColor: string;
+    shapes: Shape[];
+    currentPoints: Point[];
+    currentPath: string;
+    showTooltip: boolean;
+    mousePosition: Point;
+    hasDrawn: boolean;
+    isDragging: boolean;
+    dragStartPos: Point | null;
+    initialClickPos: Point | null;
+    dragOffset: Point | null;
+}
+export interface WidgetState {
+    isOpen: boolean;
+    primaryColor: string;
+    onSubmit: (data: FeedbackData) => void | Promise<void>;
+    notification: Notification;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    isPagesDropdownOpen: boolean;
+    pagesCount: number;
+}
+interface EchoStoreConfig {
+    primaryColor: string;
+    onSubmit: (data: FeedbackData) => Promise<void>;
+    text: TextConfig;
+}
+export interface EchoStore {
+    feedback: FeedbackState;
+    setFeedback: (state: Partial<FeedbackState>, isClearing?: boolean) => void;
+    drawing: DrawingState;
+    setDrawing: (state: Partial<DrawingState>, isClearing?: boolean) => void;
+    widget: WidgetState;
+    setWidget: (state: Partial<WidgetState>) => void;
+    text: TextConfig;
+    methods: {
+        reset: () => void;
+        postSubmit: (result: Notification) => void;
+    };
+}
+export declare const createEchoStore: (config: EchoStoreConfig) => EchoStore;
+export {};

package/dist/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from './echoStore';
+export * from './welcomeMessageStore';

package/dist/stores/welcomeMessageStore.d.ts

@@ -0,0 +1,4 @@
+export declare const welcomeMessageStore: {
+    isClosing: import("solid-js").Accessor<boolean>;
+    setIsClosing: import("solid-js").Setter<boolean>;
+};

package/dist/styles/Echo.styles.d.ts

@@ -0,0 +1,2 @@
+import type { EnrichedStylesConfig } from '~/types';
+export declare const echoStyles: (config: EnrichedStylesConfig) => string;

package/dist/styles/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Echo.styles';
+export * from './zIndex';

package/dist/styles/zIndex.d.ts

@@ -0,0 +1,13 @@
+declare const zIndex: {
+    readonly root: 999999;
+    readonly overlay: 1;
+    readonly launcher: 2;
+    readonly widgetButton: 2;
+    readonly notification: 2;
+    readonly welcomeMessage: 2;
+    readonly feedbackForm: 4;
+    readonly drawingToolbar: 3;
+    readonly shapeActions: 3;
+    readonly drawingTooltip: 3;
+};
+export { zIndex };

package/dist/types.d.ts

@@ -0,0 +1,93 @@
+export type Screenshot = `data:image/webp;base64,${string}` | `data:image/png;base64,${string}`;
+export interface BrowserInfo {
+    width: number;
+    height: number;
+    screenWidth: number;
+    screenHeight: number;
+}
+export interface Metadata {
+    url: string;
+    userAgent: string;
+    timestamp: string;
+    browserInfo: BrowserInfo;
+}
+export interface ConsoleEntry {
+    type: 'log' | 'warn' | 'error';
+    message: string;
+    timestamp: string;
+}
+export interface FeedbackData {
+    comment: string;
+    screenshot?: Screenshot;
+    metadata: Metadata;
+    console: ConsoleEntry[];
+}
+export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface TextConfig {
+    welcomeMessage: {
+        text: string;
+        closeAriaLabel: string;
+    };
+    feedbackForm: {
+        title: string;
+        placeholder: string;
+        screenshotAlt: string;
+        submitButton: string;
+        minimizeTitle: string;
+        expandTitle: string;
+        closeTitle: string;
+        showFormTitle: string;
+    };
+    notification: {
+        successTitle: string;
+        errorTitle: string;
+        errorMessage: string;
+        hideTitle: string;
+    };
+    drawingTooltip: {
+        text: string;
+    };
+}
+export type EchoOptions = {
+    onSubmit: (data: FeedbackData) => Promise<void>;
+    position?: Position;
+    primaryColor?: `#${string}`;
+    textConfig?: Partial<TextConfig>;
+    children?: any;
+};
+export declare const POSITIONS: Record<Position, {
+    [key: string]: string;
+}>;
+export interface Point {
+    x: number;
+    y: number;
+}
+export type ShapeType = 'rectangle' | 'path';
+export type DrawingTool = 'highlight' | 'pen';
+export interface Shape {
+    id: string;
+    type: ShapeType;
+    color: string;
+    points: Point[];
+}
+export interface IconProps {
+    size?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    class?: string;
+    style?: any;
+    fill?: string;
+}
+export interface StylesConfig {
+    primaryColor: string;
+}
+export interface EnrichedStylesConfig extends StylesConfig {
+    primaryTextColor: string;
+    primaryColorLighter: string;
+    primaryColorLightest: string;
+}
+export interface Notification {
+    show: boolean;
+    type: 'success' | 'error' | null;
+    message: string | null;
+}

package/dist/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const calculateLuminance: (hexColor: string) => number;
+export declare const getContrastColor: (hexColor: string) => string;

package/dist/utils/console.d.ts

@@ -0,0 +1,4 @@
+import type { ConsoleEntry } from '~/types';
+export declare const setupConsole: () => void;
+export declare const cleanupConsole: () => void;
+export declare const getConsoleBuffer: () => ConsoleEntry[];

package/dist/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: <T extends (...args: any[]) => void>(func: T, wait: number) => (...args: Parameters<T>) => void;

package/dist/utils/device.d.ts

@@ -0,0 +1 @@
+export declare const isMobileDevice: () => boolean;

package/dist/utils/geometry.d.ts

@@ -0,0 +1,7 @@
+import type { Point } from '~/types';
+export declare const getRectFromPoints: (points: Point[]) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './device';
+export * from './screenshot';
+export * from './geometry';
+export * from './shape';
+export * from './storage';

package/dist/utils/screenshot.d.ts

@@ -0,0 +1,6 @@
+import type { Screenshot, Shape } from '~/types';
+interface CaptureScreenshotConfig {
+    annotations: Shape[];
+}
+export declare const captureScreenshot: ({ annotations }: CaptureScreenshotConfig) => Promise<Screenshot | undefined>;
+export {};

package/dist/utils/shape.d.ts

@@ -0,0 +1,2 @@
+import { Shape } from '~/types';
+export declare const renderShape: (shape: Shape, isMask?: boolean) => import("solid-js").JSX.Element;

package/dist/utils/storage.d.ts

@@ -0,0 +1,28 @@
+import type { DrawingState, FeedbackState } from '~/stores/echoStore';
+import type { Shape } from '~/types';
+interface StoredPageState {
+    feedback: {
+        comment: string;
+    };
+    drawing: {
+        shapes: Shape[];
+    };
+    latestQuery?: string;
+}
+export declare const dispatchStorageChange: () => void;
+export declare const getStorageKey: (key: string) => string;
+export declare const getFromStorage: <T>(key: string, defaultValue: T) => T;
+export declare const setToStorage: <T>(key: string, value: T) => void;
+export declare const getPageKey: () => string;
+export declare const savePageState: (pageKey: string, state: {
+    feedback: FeedbackState;
+    drawing: DrawingState;
+}) => void;
+export declare const loadPageState: (pageKey: string) => StoredPageState | null;
+export declare const clearPageState: (pageKey: string) => void;
+export declare const getStoredPagesCount: () => number;
+export declare const getStoredPages: () => {
+    path: string;
+    state: StoredPageState;
+}[];
+export {};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@contember/echo",
+  "version": "0.0.18",
+  "type": "module",
+  "author": "neumie@neumie.dev",
+  "keywords": [
+    "feedback",
+    "solid",
+    "contember"
+  ],
+  "main": "dist/echo.umd.js",
+  "module": "dist/echo.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && tsc --emitDeclarationOnly ",
+    "preview": "vite preview",
+    "watch": "concurrently \"tsc --watch\" \"vite build --watch\""
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "solid-js": "^1.8.15"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.12",
+    "concurrently": "^9.1.2",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-solid": "^2.10.1",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}