@dryui/feedback 0.0.2

package/dist/utils/output.js

@@ -0,0 +1,245 @@
+import { generateDesignOutput as generateLayoutDesignOutput, generateRearrangeOutput as generateLayoutRearrangeOutput, } from '../layout-mode/output.js';
+export const OUTPUT_DETAIL_OPTIONS = [
+    { value: 'compact', label: 'Compact' },
+    { value: 'standard', label: 'Standard' },
+    { value: 'detailed', label: 'Detailed' },
+    { value: 'forensic', label: 'Forensic' },
+];
+function viewportSummary() {
+    if (typeof window === 'undefined')
+        return 'unknown';
+    return `${window.innerWidth}x${window.innerHeight}`;
+}
+function browserLocationHref() {
+    if (typeof window !== 'undefined' && window.location?.href) {
+        return window.location.href;
+    }
+    if (typeof location !== 'undefined' && location.href) {
+        return location.href;
+    }
+    return null;
+}
+function formatRect(rect) {
+    return `${Math.round(rect.width)}x${Math.round(rect.height)} at (${Math.round(rect.x)}, ${Math.round(rect.y)})`;
+}
+function normalizeWhitespace(value) {
+    return value.replace(/\s+/g, ' ').trim();
+}
+function uniqueEntries(entries) {
+    const seen = new Set();
+    const result = [];
+    for (const entry of entries) {
+        const normalized = normalizeWhitespace(entry);
+        if (!normalized)
+            continue;
+        const key = normalized.toLowerCase();
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        result.push(normalized);
+    }
+    return result;
+}
+function splitEntries(value, separator) {
+    return uniqueEntries(value.split(separator));
+}
+function normalizeKeyValueEntry(value) {
+    const normalized = normalizeWhitespace(value.replace(/[;,]+$/, ''));
+    const match = normalized.match(/^([\w-]+)\s*([=:])\s*(.+)$/);
+    if (!match) {
+        return normalized;
+    }
+    const [, key, , rawValue] = match;
+    return `${key}: ${normalizeWhitespace(rawValue ?? '')}`;
+}
+function splitAccessibilityEntries(value) {
+    const normalized = value.trim();
+    let entries = splitEntries(normalized, /[\n;]+/);
+    if (entries.length <= 1) {
+        entries = splitEntries(normalized, /,\s*(?=[a-z][\w-]*\s*[=:])/i);
+    }
+    if (entries.length <= 1 && normalized.includes(',')) {
+        entries = splitEntries(normalized, /,\s*/);
+    }
+    return uniqueEntries(entries.map(normalizeKeyValueEntry));
+}
+function splitNearbyElements(value) {
+    return splitEntries(value, /[\n;,]+/);
+}
+function splitComputedStyles(value) {
+    const normalized = value.replace(/[{}]/g, ' ');
+    return uniqueEntries(normalized
+        .split(/[\n;]+/)
+        .map((entry) => normalizeKeyValueEntry(entry)));
+}
+function formatListSection(label, entries) {
+    if (entries.length === 0) {
+        return [];
+    }
+    if (entries.length === 1) {
+        return [`**${label}:** ${entries[0]}`];
+    }
+    return [`**${label} (${entries.length}):**`, ...entries.map((entry) => `- ${entry}`)];
+}
+function formatFullPathSection(fullPath) {
+    const normalizedPath = normalizeWhitespace(fullPath);
+    if (!normalizedPath) {
+        return [];
+    }
+    const segments = fullPath.includes('>')
+        ? fullPath.split(/\s*>\s*/).map(normalizeWhitespace).filter(Boolean)
+        : [];
+    if (segments.length <= 1) {
+        return [`**Full path:** ${normalizedPath}`];
+    }
+    return [
+        `**Full path:** ${segments.join(' > ')}`,
+        `**Path depth:** ${segments.length}`,
+        `**Immediate parent:** ${segments.at(-2)}`,
+        `**Target node:** ${segments.at(-1)}`,
+    ];
+}
+function formatFeedbackHeader(pathname, detail) {
+    let header = `## Page Feedback: ${pathname}\n`;
+    if (detail === 'forensic') {
+        header += `\n**Environment:**\n`;
+        header += `- Viewport: ${viewportSummary()}\n`;
+        const href = browserLocationHref();
+        if (href) {
+            header += `- URL: ${href}\n`;
+        }
+        if (typeof navigator !== 'undefined') {
+            header += `- User Agent: ${navigator.userAgent}\n`;
+        }
+        if (typeof window !== 'undefined') {
+            header += `- Timestamp: ${new Date().toISOString()}\n`;
+            header += `- Device Pixel Ratio: ${window.devicePixelRatio}\n`;
+        }
+        header += `\n`;
+        return header;
+    }
+    if (detail !== 'compact') {
+        header += `**Viewport:** ${viewportSummary()}\n`;
+    }
+    header += `\n`;
+    return header;
+}
+export function generateFeedbackOutput(annotations, pathname, detail) {
+    if (annotations.length === 0) {
+        return '';
+    }
+    if (detail === 'compact') {
+        return (formatFeedbackHeader(pathname, detail) +
+            annotations
+                .map((annotation, index) => {
+                const selectedText = annotation.selectedText
+                    ? ` (re: "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? '...' : ''}")`
+                    : '';
+                const sourceFile = annotation.sourceFile ? ` (${annotation.sourceFile})` : '';
+                return `${index + 1}. ${annotation.element}${sourceFile}: ${annotation.comment}${selectedText}`;
+            })
+                .join('\n'));
+    }
+    const sections = annotations.map((annotation, index) => {
+        const lines = [];
+        lines.push(`### ${index + 1}. ${annotation.element}`);
+        lines.push(`**Location:** ${annotation.elementPath}`);
+        if (annotation.sourceFile)
+            lines.push(`**Source:** ${annotation.sourceFile}`);
+        if (annotation.svelteComponent)
+            lines.push(`**Svelte:** ${annotation.svelteComponent}`);
+        if (annotation.reactComponents)
+            lines.push(`**React:** ${annotation.reactComponents}`);
+        if (annotation.dryuiComponent)
+            lines.push(`**DryUI:** ${annotation.dryuiComponent}`);
+        if (detail === 'detailed' || detail === 'forensic') {
+            if (annotation.cssClasses)
+                lines.push(`**Classes:** ${annotation.cssClasses}`);
+            if (annotation.boundingBox)
+                lines.push(`**Bounding box:** ${formatRect(annotation.boundingBox)}`);
+            if (annotation.selectedText)
+                lines.push(`**Selected text:** ${annotation.selectedText}`);
+            if (annotation.nearbyText && !annotation.selectedText) {
+                lines.push(`**Context:** ${annotation.nearbyText.slice(0, 140)}`);
+            }
+            if (annotation.isMultiSelect)
+                lines.push(`**Selection:** Multi-select`);
+            if (annotation.elementBoundingBoxes?.length) {
+                lines.push(`**Selection targets:** ${annotation.elementBoundingBoxes.length} elements`);
+            }
+        }
+        if (detail === 'forensic') {
+            if (annotation.accessibility) {
+                lines.push(...formatListSection('Accessibility', splitAccessibilityEntries(annotation.accessibility)));
+            }
+            if (annotation.nearbyElements) {
+                lines.push(...formatListSection('Nearby elements', splitNearbyElements(annotation.nearbyElements)));
+            }
+            if (annotation.nearbyText)
+                lines.push(`**Nearby text:** ${annotation.nearbyText}`);
+            if (annotation.computedStyles) {
+                lines.push(...formatListSection('Computed styles', splitComputedStyles(annotation.computedStyles)));
+            }
+            if (annotation.fullPath) {
+                lines.push(...formatFullPathSection(annotation.fullPath));
+            }
+            lines.push(`**Annotation at:** ${annotation.x.toFixed(1)}% from left, ${Math.round(annotation.y)}px from top`);
+            if (annotation.thread?.length) {
+                lines.push(`**Thread messages:** ${annotation.thread.length}`);
+            }
+            if (annotation.status)
+                lines.push(`**Status:** ${annotation.status}`);
+            if (annotation.resolvedBy)
+                lines.push(`**Resolved by:** ${annotation.resolvedBy}`);
+            if (annotation.resolvedAt)
+                lines.push(`**Resolved at:** ${annotation.resolvedAt}`);
+            if (annotation.resolutionNote)
+                lines.push(`**Resolution note:** ${annotation.resolutionNote}`);
+            if (annotation.intent)
+                lines.push(`**Intent:** ${annotation.intent}`);
+            if (annotation.severity)
+                lines.push(`**Severity:** ${annotation.severity}`);
+        }
+        lines.push(`**Feedback:** ${annotation.comment}`);
+        return lines.join('\n');
+    });
+    return formatFeedbackHeader(pathname, detail) + sections.join('\n\n---\n\n');
+}
+function getViewportSize() {
+    if (typeof window === 'undefined') {
+        return { width: 0, height: 0 };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+}
+export function generateDesignOutput(placements, detail, options = {}) {
+    return generateLayoutDesignOutput(placements, getViewportSize(), options, detail);
+}
+export function generateRearrangeOutput(state, detail) {
+    return generateLayoutRearrangeOutput(state, detail, getViewportSize());
+}
+export function generateOutput(annotations, pathname, detail, options = {}) {
+    const sections = [];
+    if (annotations.length > 0) {
+        sections.push(generateFeedbackOutput(annotations, pathname, detail));
+    }
+    const designOutput = generateDesignOutput(options.designPlacements ?? [], detail, {
+        blankCanvas: options.blankCanvas,
+        wireframePurpose: options.wireframePurpose,
+    });
+    if (designOutput) {
+        sections.push(designOutput);
+    }
+    if (options.rearrangeState) {
+        const rearrangeOutput = generateRearrangeOutput(options.rearrangeState, detail);
+        if (rearrangeOutput) {
+            sections.push(rearrangeOutput);
+        }
+    }
+    if (sections.length === 0) {
+        return '';
+    }
+    return sections.join('\n\n');
+}

package/dist/utils/selection.d.ts

@@ -0,0 +1,22 @@
+import type { Rect } from '../types.js';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface RectLike {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function normalizeText(text: string): string;
+export declare function toRect(rect: RectLike): Rect;
+export declare function rectFromPoints(start: Point, end: Point): Rect;
+export declare function unionRects(rects: readonly RectLike[]): Rect | null;
+export declare function hasMeaningfulArea(rect: Rect, threshold: number): boolean;
+export declare function intersectsRect(a: Rect, b: RectLike): boolean;
+export declare function getPopupPosition(rect: Rect, viewportWidth: number, popupWidth: number, viewportPadding?: number): {
+    x: number;
+    y: number;
+};
+export declare function uniqueLabels(labels: string[]): string[];

package/dist/utils/selection.js

@@ -0,0 +1,58 @@
+const DEFAULT_VIEWPORT_PADDING = 16;
+export function normalizeText(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+export function toRect(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export function rectFromPoints(start, end) {
+    const x = Math.min(start.x, end.x);
+    const y = Math.min(start.y, end.y);
+    return {
+        x,
+        y,
+        width: Math.abs(end.x - start.x),
+        height: Math.abs(end.y - start.y),
+    };
+}
+export function unionRects(rects) {
+    const [first, ...rest] = rects;
+    if (!first)
+        return null;
+    let left = first.x;
+    let top = first.y;
+    let right = first.x + first.width;
+    let bottom = first.y + first.height;
+    for (const rect of rest) {
+        left = Math.min(left, rect.x);
+        top = Math.min(top, rect.y);
+        right = Math.max(right, rect.x + rect.width);
+        bottom = Math.max(bottom, rect.y + rect.height);
+    }
+    return {
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+export function hasMeaningfulArea(rect, threshold) {
+    return rect.width >= threshold || rect.height >= threshold;
+}
+export function intersectsRect(a, b) {
+    return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+export function getPopupPosition(rect, viewportWidth, popupWidth, viewportPadding = DEFAULT_VIEWPORT_PADDING) {
+    return {
+        x: Math.min(rect.x + rect.width + 8, Math.max(viewportPadding, viewportWidth - popupWidth)),
+        y: Math.max(viewportPadding, rect.y),
+    };
+}
+export function uniqueLabels(labels) {
+    return labels.filter((label, index, all) => label.length > 0 && all.indexOf(label) === index);
+}

package/dist/utils/shadow-dom.d.ts

@@ -0,0 +1,4 @@
+export declare function deepElementFromPoint(x: number, y: number): Element | null;
+export declare function isInShadowDOM(el: Element): boolean;
+export declare function getShadowHost(el: Element): Element | null;
+export declare function closestCrossingShadow(el: Element, selector: string): Element | null;

package/dist/utils/shadow-dom.js

@@ -0,0 +1,39 @@
+export function deepElementFromPoint(x, y) {
+    let el = document.elementFromPoint(x, y);
+    if (!el)
+        return null;
+    while (el.shadowRoot) {
+        const inner = el.shadowRoot.elementFromPoint(x, y);
+        if (!inner || inner === el)
+            break;
+        el = inner;
+    }
+    return el;
+}
+export function isInShadowDOM(el) {
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot;
+}
+export function getShadowHost(el) {
+    const root = el.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root.host;
+    }
+    return null;
+}
+export function closestCrossingShadow(el, selector) {
+    let current = el;
+    while (current) {
+        const match = current.closest(selector);
+        if (match)
+            return match;
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+        }
+        else {
+            break;
+        }
+    }
+    return null;
+}

package/dist/utils/storage.d.ts

@@ -0,0 +1,30 @@
+import type { Annotation, DesignPlacement, FeedbackSettings, RearrangeState, WireframeState } from '../types.js';
+export declare function getStorageKey(pathname: string): string;
+export declare function loadAnnotations<T = Annotation>(pathname: string): T[];
+export declare function loadAllAnnotations<T = Annotation>(): Map<string, T[]>;
+export declare function saveAnnotations<T = Annotation>(pathname: string, annotations: T[]): void;
+export declare function saveAnnotationsWithSyncMarker(pathname: string, annotations: Annotation[], sessionId: string): void;
+export declare function getUnsyncedAnnotations(pathname: string, sessionId?: string): Annotation[];
+export declare function clearSyncMarkers(pathname: string): void;
+export declare function clearAnnotations(pathname: string): void;
+export declare function getDesignStorageKey(pathname: string): string;
+export declare function loadDesignPlacements(pathname: string): DesignPlacement[];
+export declare function saveDesignPlacements(pathname: string, placements: DesignPlacement[]): void;
+export declare function clearDesignPlacements(pathname: string): void;
+export declare function getRearrangeStorageKey(pathname: string): string;
+export declare function loadRearrangeState(pathname: string): RearrangeState | null;
+export declare function saveRearrangeState(pathname: string, state: RearrangeState): void;
+export declare function clearRearrangeState(pathname: string): void;
+export declare function getWireframeStorageKey(pathname: string): string;
+export declare function loadWireframeState(pathname: string): WireframeState | null;
+export declare function saveWireframeState(pathname: string, state: WireframeState): void;
+export declare function clearWireframeState(pathname: string): void;
+export declare function getSessionStorageKey(pathname: string): string;
+export declare function loadSessionId(pathname: string): string | null;
+export declare function saveSessionId(pathname: string, sessionId: string): void;
+export declare function clearSessionId(pathname: string): void;
+export declare function loadToolbarHidden(): boolean;
+export declare function saveToolbarHidden(hidden: boolean): void;
+export declare function loadSettings(): FeedbackSettings;
+export declare function saveSettings(settings: FeedbackSettings): void;
+export declare function clearSettings(): void;

package/dist/utils/storage.js

@@ -0,0 +1,206 @@
+import { DEFAULT_SETTINGS, normalizeAnnotationColor } from '../constants.js';
+const ANNOTATION_PREFIX = 'dryui-feedback-';
+const DESIGN_PREFIX = 'dryui-feedback-design-';
+const REARRANGE_PREFIX = 'dryui-feedback-rearrange-';
+const WIREFRAME_PREFIX = 'dryui-feedback-wireframe-';
+const SESSION_PREFIX = 'dryui-feedback-session-';
+const SETTINGS_KEY = 'dryui-feedback-settings';
+const TOOLBAR_HIDDEN_SESSION_KEY = `${SESSION_PREFIX}toolbar-hidden`;
+const RETENTION_MS = 7 * 24 * 60 * 60 * 1000;
+function hasStorage() {
+    return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+}
+function hasSessionStorage() {
+    return typeof window !== 'undefined' && typeof window.sessionStorage !== 'undefined';
+}
+function filterRetained(items) {
+    const cutoff = Date.now() - RETENTION_MS;
+    return items.filter((item) => !item.timestamp || item.timestamp > cutoff);
+}
+function normalizeAnnotationColors(items) {
+    return items.map((item) => {
+        if (!item || typeof item !== 'object' || !('color' in item))
+            return item;
+        const color = item.color;
+        if (typeof color !== 'string')
+            return item;
+        return {
+            ...item,
+            color: normalizeAnnotationColor(color),
+        };
+    });
+}
+function loadJson(key, fallback) {
+    if (!hasStorage())
+        return fallback;
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return fallback;
+        return JSON.parse(raw);
+    }
+    catch {
+        return fallback;
+    }
+}
+function saveJson(key, value) {
+    if (!hasStorage())
+        return;
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // localStorage can be unavailable or full
+    }
+}
+function removeStorageKey(key) {
+    if (!hasStorage())
+        return;
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore write failures
+    }
+}
+export function getStorageKey(pathname) {
+    return `${ANNOTATION_PREFIX}${pathname}`;
+}
+export function loadAnnotations(pathname) {
+    const annotations = loadJson(getStorageKey(pathname), []);
+    return normalizeAnnotationColors(filterRetained(annotations));
+}
+export function loadAllAnnotations() {
+    const result = new Map();
+    if (!hasStorage())
+        return result;
+    const cutoff = Date.now() - RETENTION_MS;
+    try {
+        for (let index = 0; index < localStorage.length; index += 1) {
+            const key = localStorage.key(index);
+            if (!key?.startsWith(ANNOTATION_PREFIX))
+                continue;
+            const pathname = key.slice(ANNOTATION_PREFIX.length);
+            const annotations = normalizeAnnotationColors(loadJson(key, []).filter((annotation) => !annotation.timestamp || annotation.timestamp > cutoff));
+            if (annotations.length > 0) {
+                result.set(pathname, annotations);
+            }
+        }
+    }
+    catch {
+        return result;
+    }
+    return result;
+}
+export function saveAnnotations(pathname, annotations) {
+    saveJson(getStorageKey(pathname), annotations);
+}
+export function saveAnnotationsWithSyncMarker(pathname, annotations, sessionId) {
+    saveAnnotations(pathname, annotations.map((annotation) => ({
+        ...annotation,
+        _syncedTo: sessionId,
+    })));
+}
+export function getUnsyncedAnnotations(pathname, sessionId) {
+    return loadAnnotations(pathname).filter((annotation) => {
+        if (!annotation._syncedTo)
+            return true;
+        return sessionId ? annotation._syncedTo !== sessionId : false;
+    });
+}
+export function clearSyncMarkers(pathname) {
+    const annotations = loadAnnotations(pathname).map((annotation) => {
+        const { _syncedTo, ...rest } = annotation;
+        return rest;
+    });
+    saveAnnotations(pathname, annotations);
+}
+export function clearAnnotations(pathname) {
+    removeStorageKey(getStorageKey(pathname));
+}
+export function getDesignStorageKey(pathname) {
+    return `${DESIGN_PREFIX}${pathname}`;
+}
+export function loadDesignPlacements(pathname) {
+    return loadJson(getDesignStorageKey(pathname), []);
+}
+export function saveDesignPlacements(pathname, placements) {
+    saveJson(getDesignStorageKey(pathname), placements);
+}
+export function clearDesignPlacements(pathname) {
+    removeStorageKey(getDesignStorageKey(pathname));
+}
+export function getRearrangeStorageKey(pathname) {
+    return `${REARRANGE_PREFIX}${pathname}`;
+}
+export function loadRearrangeState(pathname) {
+    return loadJson(getRearrangeStorageKey(pathname), null);
+}
+export function saveRearrangeState(pathname, state) {
+    saveJson(getRearrangeStorageKey(pathname), state);
+}
+export function clearRearrangeState(pathname) {
+    removeStorageKey(getRearrangeStorageKey(pathname));
+}
+export function getWireframeStorageKey(pathname) {
+    return `${WIREFRAME_PREFIX}${pathname}`;
+}
+export function loadWireframeState(pathname) {
+    return loadJson(getWireframeStorageKey(pathname), null);
+}
+export function saveWireframeState(pathname, state) {
+    saveJson(getWireframeStorageKey(pathname), state);
+}
+export function clearWireframeState(pathname) {
+    removeStorageKey(getWireframeStorageKey(pathname));
+}
+export function getSessionStorageKey(pathname) {
+    return `${SESSION_PREFIX}${pathname}`;
+}
+export function loadSessionId(pathname) {
+    return loadJson(getSessionStorageKey(pathname), null);
+}
+export function saveSessionId(pathname, sessionId) {
+    saveJson(getSessionStorageKey(pathname), sessionId);
+}
+export function clearSessionId(pathname) {
+    removeStorageKey(getSessionStorageKey(pathname));
+}
+export function loadToolbarHidden() {
+    if (!hasSessionStorage())
+        return false;
+    try {
+        return sessionStorage.getItem(TOOLBAR_HIDDEN_SESSION_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+export function saveToolbarHidden(hidden) {
+    if (!hasSessionStorage())
+        return;
+    try {
+        if (hidden) {
+            sessionStorage.setItem(TOOLBAR_HIDDEN_SESSION_KEY, '1');
+            return;
+        }
+        sessionStorage.removeItem(TOOLBAR_HIDDEN_SESSION_KEY);
+    }
+    catch {
+        // sessionStorage can be unavailable
+    }
+}
+export function loadSettings() {
+    const settings = loadJson(SETTINGS_KEY, {});
+    return {
+        ...DEFAULT_SETTINGS,
+        ...settings,
+        annotationColor: normalizeAnnotationColor(settings.annotationColor),
+    };
+}
+export function saveSettings(settings) {
+    saveJson(SETTINGS_KEY, settings);
+}
+export function clearSettings() {
+    removeStorageKey(SETTINGS_KEY);
+}

package/dist/utils/svelte-detection.d.ts

@@ -0,0 +1,8 @@
+export interface SvelteDetectionResult {
+    readonly sourceFile?: string;
+    readonly svelteComponent?: string;
+    readonly componentStack: readonly string[];
+    readonly sourceFiles: readonly string[];
+}
+export declare function detectSvelteMetadata(target: EventTarget | null): SvelteDetectionResult;
+export declare function hasSvelteMetadata(target: EventTarget | null): boolean;