feedly-widget 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# feedly-widget
+
+Visual feedback annotation widget. Drop into any web app and let testers annotate live.
+
+## Install
+
+```bash
+npm install feedly-widget
+```
+
+## Use
+
+```ts
+import Feedly from 'feedly-widget'
+
+Feedly.init({ projectId: 'YOUR_PROJECT_ID' })
+```
+
+That's it. The widget renders nothing until an admin enables the session for your project from the Feedly dashboard. When enabled, a small floating "F" button appears at the bottom right. Click it → name → annotate.
+
+### Custom Supabase endpoint
+
+The widget is preconfigured with the Feedly hosted Supabase endpoint at build time. To point it at your own:
+
+```ts
+Feedly.init({
+  projectId: 'YOUR_PROJECT_ID',
+  supabaseUrl: 'https://YOUR-PROJECT.supabase.co',
+  supabaseAnonKey: 'YOUR-ANON-KEY',
+})
+```
+
+### Tear down
+
+```ts
+Feedly.destroy()
+```
+
+## How it works
+
+- Mounts a Shadow DOM root on `document.body` so its CSS can't bleed into your app and vice versa.
+- Subscribes to Supabase Realtime — the widget appears/disappears instantly when the admin toggles the session, no polling.
+- Annotations are stored against the full `window.location.href` so they restore correctly when the tester revisits the page.
+- Testers are identified by a `device_id` UUID in `localStorage`; no signup, no auth.

package/dist/App.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    projectId: string;
+    supabaseUrl: string;
+    supabaseAnonKey: string;
+    requireInvite: boolean;
+    shadowRoot: ShadowRoot;
+    pinsContainer: Element;
+};
+export default function App({ projectId, supabaseUrl, supabaseAnonKey, requireInvite, pinsContainer, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/CommentList.d.ts

@@ -0,0 +1,13 @@
+import type { Annotation } from '../types';
+import type { AnnotationsByPage } from '../hooks/useAnnotationsList';
+type Props = {
+    grouped: AnnotationsByPage;
+    loading: boolean;
+    fallbackColor: string;
+    fallbackName: string;
+    currentPageUrl: string;
+    onPick: (annotation: Annotation) => void;
+    onClose: () => void;
+};
+export declare function CommentList({ grouped, loading, fallbackColor, fallbackName, currentPageUrl, onPick, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DrawingOverlay.d.ts

@@ -0,0 +1,36 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Anchor, Annotation, AnnotationStatus, AnnotationType, ShapeData } from '../types';
+type Props = {
+    tool: AnnotationType | null;
+    testerColor: string;
+    testerName: string;
+    currentTesterId: string | null;
+    isAdmin: boolean;
+    annotations: Annotation[];
+    onComplete: (type: AnnotationType, shape: ShapeData, comment: string, anchor: Anchor | null, noteOffset: {
+        x: number;
+        y: number;
+    } | null) => Promise<boolean>;
+    onMove: (id: string, newShape: ShapeData) => Promise<boolean>;
+    onSetStatus: (id: string, status: AnnotationStatus, comment?: string) => Promise<{
+        ok: true;
+    } | {
+        ok: false;
+        error: string;
+    }>;
+    onOpenDetails: (id: string) => void;
+    onEditComment: (id: string, newComment: string, noteOffset: {
+        x: number;
+        y: number;
+    } | null) => Promise<boolean>;
+    onDelete: (id: string) => Promise<boolean>;
+    pinRequest: {
+        id: string;
+        ts: number;
+    } | null;
+    pinsContainer: Element;
+    onDiscardDraft: () => void;
+    supabase: SupabaseClient;
+};
+export declare function DrawingOverlay({ tool, testerColor, testerName, currentTesterId, isAdmin, annotations, onComplete, onMove, onSetStatus, onOpenDetails, onEditComment, onDelete, pinRequest, pinsContainer, onDiscardDraft, supabase, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FlowRecorder.d.ts

@@ -0,0 +1,13 @@
+import type { FlowStep } from '../types';
+type Props = {
+    recording: boolean;
+    onStepsChange: (steps: FlowStep[]) => void;
+    steps: FlowStep[];
+};
+export declare function FlowRecorder({ recording, steps, onStepsChange }: Props): null;
+export declare function FlowNoteEntry({ onSubmit, onCancel, disabled, }: {
+    onSubmit: (note: string) => void;
+    onCancel: () => void;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FlowReplayer.d.ts

@@ -0,0 +1,12 @@
+import type { Flow } from '../types';
+type Props = {
+    flow: Flow;
+    stepIndex: number;
+    preStart: boolean;
+    onStart: () => void;
+    onAdvance: () => void;
+    onClose: () => void;
+    ringColor: string;
+};
+export declare function FlowReplayer({ flow, stepIndex, preStart, onStart, onAdvance, onClose, ringColor, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NameEntry.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    onSubmit: (name: string, email?: string) => Promise<boolean>;
+    onSendMagicLink: (email: string) => Promise<{
+        ok: true;
+    } | {
+        ok: false;
+        error: string;
+    }>;
+    onDone: () => void;
+    onCancel: () => void;
+};
+export declare function NameEntry({ onSubmit, onSendMagicLink, onDone, onCancel, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SnapshotPortal.d.ts

@@ -0,0 +1,10 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Annotation, ShapeData } from '../types';
+type Props = {
+    supabase: SupabaseClient;
+    annotation: Annotation;
+    currentShape: ShapeData;
+    onClose: () => void;
+};
+export declare function SnapshotPortal({ supabase, annotation, currentShape, onClose, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/StickyNote.d.ts

@@ -0,0 +1,41 @@
+import type { AnnotationStatus, Point } from '../types';
+type Props = {
+    anchor: Point;
+    anchorFixed?: boolean;
+    color: string;
+    testerName: string;
+    existingComment?: string | null;
+    createdAt?: string;
+    noteOffset?: {
+        x: number;
+        y: number;
+    } | null;
+    editable?: boolean;
+    onSave?: (comment: string, offset: {
+        x: number;
+        y: number;
+    } | null) => Promise<void> | void;
+    onCancel?: () => void;
+    status?: AnnotationStatus;
+    canMarkFixed?: boolean;
+    canVerify?: boolean;
+    jiraTicket?: string | null;
+    onMarkFixed?: () => Promise<void> | void;
+    onConfirmFixed?: () => Promise<void> | void;
+    onStillBroken?: (comment: string) => Promise<{
+        ok: boolean;
+    } | void>;
+    onOpenDetails?: () => void;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    onEdit?: (newComment: string, offset: {
+        x: number;
+        y: number;
+    } | null) => Promise<boolean | void>;
+    onDelete?: () => Promise<boolean | void>;
+    hasSnapshot?: boolean;
+    snapshotShown?: boolean;
+    onToggleSnapshot?: () => void;
+};
+export declare function StickyNote({ anchor, anchorFixed, color, testerName, existingComment, createdAt, noteOffset, editable, onSave, onCancel, status, canMarkFixed, canVerify, jiraTicket, onMarkFixed, onConfirmFixed, onStillBroken, onOpenDetails, canEdit, canDelete, onEdit, onDelete, hasSnapshot, snapshotShown, onToggleSnapshot, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TechDetailsPanel.d.ts

@@ -0,0 +1,9 @@
+import type { Annotation } from '../types';
+type Props = {
+    annotation: Annotation;
+    fallbackName: string;
+    fallbackColor: string;
+    onClose: () => void;
+};
+export declare function TechDetailsPanel({ annotation, fallbackName, fallbackColor, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,33 @@
+import type { AnnotationType, Flow, FlowStep, TesterRef } from '../types';
+type Props = {
+    active: AnnotationType | null;
+    testerName: string;
+    testerColor: string;
+    onSelect: (tool: AnnotationType) => void;
+    annotationsHidden: boolean;
+    onToggleAnnotations: () => void;
+    listOpen: boolean;
+    onToggleList: () => void;
+    flowsEnabled?: boolean;
+    recording: boolean;
+    recordingSteps: FlowStep[];
+    onStartRecording: () => void;
+    onStopRecording: () => void;
+    onAttachNote: (note: string) => void;
+    flows: Flow[];
+    flowsLoading: boolean;
+    flowsOpen: boolean;
+    onToggleFlows: () => void;
+    onPickFlow: (flow: Flow) => void;
+    onDeleteFlow: (id: string) => Promise<unknown>;
+    currentTesterId: string | null;
+    isAdmin?: boolean;
+    testers?: TesterRef[];
+    hiddenTesterIds?: Set<string>;
+    onToggleTester?: (id: string) => void;
+    onShowAll?: () => void;
+    onHideAll?: () => void;
+    pageCount?: number;
+};
+export declare function Toolbar({ active, testerName, testerColor, onSelect, annotationsHidden, onToggleAnnotations, listOpen, onToggleList, flowsEnabled, recording, recordingSteps, onStartRecording, onStopRecording, onAttachNote, flows, flowsLoading, flowsOpen, onToggleFlows, onPickFlow, onDeleteFlow, currentTesterId, isAdmin, testers, hiddenTesterIds, onToggleTester, onShowAll, onHideAll, pageCount, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TriggerButton.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    open: boolean;
+    hasUnseen?: boolean;
+    onClick: () => void;
+};
+export declare function TriggerButton({ open, hasUnseen, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export {};