@dryui/feedback 0.0.2

package/dist/layout-mode/types.d.ts

@@ -0,0 +1,144 @@
+export type LayoutModeComponentType = 'navigation' | 'hero' | 'card' | 'button' | 'sidebar' | 'table' | 'form' | 'input' | 'modal' | 'footer' | 'avatar' | 'badge' | 'text' | 'image' | 'list' | 'tabs' | 'header' | 'section' | 'grid' | 'dropdown' | 'toggle' | 'breadcrumb' | 'pagination' | 'progress' | 'divider' | 'accordion' | 'carousel' | 'chart' | 'video' | 'search' | 'toast' | 'tooltip' | 'pricing' | 'testimonial' | 'cta' | 'alert' | 'banner' | 'stat' | 'stepper' | 'tag' | 'rating' | 'map' | 'timeline' | 'fileUpload' | 'codeBlock' | 'calendar' | 'notification' | 'productCard' | 'profile' | 'drawer' | 'popover' | 'logo' | 'faq' | 'gallery' | 'checkbox' | 'radio' | 'slider' | 'datePicker' | 'skeleton' | 'chip' | 'icon' | 'spinner' | 'feature' | 'team' | 'login' | 'contact';
+export type CanvasPurpose = 'new-page' | 'replace-current';
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface DesignPlacement {
+    id: string;
+    type: LayoutModeComponentType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scrollY: number;
+    timestamp: number;
+    text?: string;
+    note?: string;
+}
+export interface DetectedSection {
+    id: string;
+    label: string;
+    tagName: string;
+    selector: string;
+    role: string | null;
+    className: string | null;
+    textSnippet: string | null;
+    originalRect: Rect;
+    currentRect: Rect;
+    originalIndex: number;
+    isFixed?: boolean;
+    note?: string;
+}
+export interface RearrangeState {
+    sections: DetectedSection[];
+    originalOrder: string[];
+    detectedAt: number;
+}
+export interface ComponentDefinition {
+    type: LayoutModeComponentType;
+    label: string;
+    width: number;
+    height: number;
+    description: string;
+    sourceKind: 'component' | 'block';
+    sourceId: string;
+    sourceName: string;
+    sourceLabel: string;
+    sourceImport: string | null;
+    routePath: string | null;
+    tags: string[];
+    structure: string | null;
+    guidance: string;
+}
+export interface ComponentSection {
+    section: string;
+    items: ComponentDefinition[];
+}
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+export interface SpatialContext {
+    top: number | null;
+    right: number | null;
+    bottom: number | null;
+    left: number | null;
+    centerX: number;
+    centerY: number;
+    rowCount: number;
+    columnCount: number;
+}
+export interface CSSContext {
+    parentSelector: string;
+    parentDisplay: string;
+    flexDirection?: string | null;
+    gridCols?: string | null;
+    gap?: string | null;
+}
+export declare const DEFAULT_SIZES: Record<LayoutModeComponentType, {
+    width: number;
+    height: number;
+}>;
+export declare const COMPONENT_REGISTRY: ComponentSection[];
+export declare const COMPONENT_MAP: Record<LayoutModeComponentType, ComponentDefinition>;
+/** Responsive width presets for the sketch canvas */
+export type CanvasWidth = 375 | 768 | 1280 | 1536;
+export declare const CANVAS_WIDTHS: readonly [{
+    readonly label: "Mobile";
+    readonly value: 375;
+}, {
+    readonly label: "Tablet";
+    readonly value: 768;
+}, {
+    readonly label: "Desktop";
+    readonly value: 1280;
+}, {
+    readonly label: "Wide";
+    readonly value: 1536;
+}];
+/** Component action from context-aware click */
+export type ComponentAction = {
+    kind: 'swap';
+    targetSelector: string;
+    fromComponent: string;
+    toComponent: string;
+    reason: string;
+} | {
+    kind: 'refine';
+    targetSelector: string;
+    component: string;
+    comment: string;
+} | {
+    kind: 'delete';
+    targetSelector: string;
+    component: string;
+};
+/** Catalog entry: merged metadata from spec.json + composition-data */
+export interface CatalogEntry {
+    name: string;
+    category: string;
+    description: string;
+    tags: string[];
+    compound: boolean;
+    importPath: string;
+    structure: string | null;
+    alternatives: {
+        component: string;
+        useWhen: string;
+        rank: number;
+    }[];
+    antiPatterns: {
+        pattern: string;
+        reason: string;
+        fix: string;
+    }[];
+    combinesWith: string[];
+}
+/** Undo/redo history snapshot */
+export interface HistoryEntry {
+    placements: DesignPlacement[];
+    timestamp: number;
+}

package/dist/layout-mode/types.js

@@ -0,0 +1,84 @@
+import { GENERATED_LAYOUT_LIBRARY } from './generated-library.js';
+export const DEFAULT_SIZES = {
+    navigation: { width: 800, height: 56 },
+    hero: { width: 800, height: 320 },
+    header: { width: 800, height: 80 },
+    section: { width: 800, height: 400 },
+    sidebar: { width: 240, height: 400 },
+    footer: { width: 800, height: 160 },
+    modal: { width: 480, height: 300 },
+    card: { width: 280, height: 240 },
+    text: { width: 400, height: 120 },
+    image: { width: 320, height: 200 },
+    video: { width: 480, height: 270 },
+    table: { width: 560, height: 220 },
+    grid: { width: 600, height: 300 },
+    list: { width: 300, height: 180 },
+    chart: { width: 400, height: 240 },
+    button: { width: 140, height: 40 },
+    input: { width: 280, height: 56 },
+    form: { width: 360, height: 320 },
+    tabs: { width: 480, height: 240 },
+    dropdown: { width: 200, height: 200 },
+    toggle: { width: 44, height: 24 },
+    search: { width: 320, height: 44 },
+    avatar: { width: 48, height: 48 },
+    badge: { width: 80, height: 28 },
+    breadcrumb: { width: 300, height: 24 },
+    pagination: { width: 300, height: 36 },
+    progress: { width: 240, height: 8 },
+    divider: { width: 600, height: 1 },
+    accordion: { width: 400, height: 200 },
+    carousel: { width: 600, height: 300 },
+    toast: { width: 320, height: 64 },
+    tooltip: { width: 180, height: 40 },
+    pricing: { width: 300, height: 360 },
+    testimonial: { width: 360, height: 200 },
+    cta: { width: 600, height: 160 },
+    alert: { width: 400, height: 56 },
+    banner: { width: 800, height: 48 },
+    stat: { width: 200, height: 120 },
+    stepper: { width: 480, height: 48 },
+    tag: { width: 72, height: 28 },
+    rating: { width: 160, height: 28 },
+    map: { width: 480, height: 300 },
+    timeline: { width: 360, height: 320 },
+    fileUpload: { width: 360, height: 180 },
+    codeBlock: { width: 480, height: 200 },
+    calendar: { width: 300, height: 300 },
+    notification: { width: 360, height: 72 },
+    productCard: { width: 280, height: 360 },
+    profile: { width: 280, height: 200 },
+    drawer: { width: 320, height: 400 },
+    popover: { width: 240, height: 160 },
+    logo: { width: 120, height: 40 },
+    faq: { width: 560, height: 320 },
+    gallery: { width: 560, height: 360 },
+    checkbox: { width: 20, height: 20 },
+    radio: { width: 20, height: 20 },
+    slider: { width: 240, height: 32 },
+    datePicker: { width: 300, height: 320 },
+    skeleton: { width: 320, height: 120 },
+    chip: { width: 96, height: 32 },
+    icon: { width: 24, height: 24 },
+    spinner: { width: 32, height: 32 },
+    feature: { width: 360, height: 200 },
+    team: { width: 560, height: 280 },
+    login: { width: 360, height: 360 },
+    contact: { width: 400, height: 320 },
+};
+export const COMPONENT_REGISTRY = GENERATED_LAYOUT_LIBRARY.map((section) => ({
+    section: section.section,
+    items: section.items.map(({ section: _section, ...item }) => ({
+        ...item,
+        tags: [...item.tags],
+        ...DEFAULT_SIZES[item.type],
+    })),
+}));
+export const COMPONENT_MAP = Object.fromEntries(COMPONENT_REGISTRY.flatMap((section) => section.items.map((item) => [item.type, item])));
+export const CANVAS_WIDTHS = [
+    { label: 'Mobile', value: 375 },
+    { label: 'Tablet', value: 768 },
+    { label: 'Desktop', value: 1280 },
+    { label: 'Wide', value: 1536 },
+];

package/dist/types.d.ts

@@ -0,0 +1,157 @@
+export type AnnotationColor = 'brand' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+export type AnnotationKind = 'feedback' | 'placement' | 'rearrange';
+export type OutputDetail = 'compact' | 'standard' | 'detailed' | 'forensic';
+export type AnnotationIntent = 'fix' | 'change' | 'question' | 'approve';
+export type AnnotationSeverity = 'blocking' | 'important' | 'suggestion';
+export type AnnotationStatus = 'pending' | 'acknowledged' | 'resolved' | 'dismissed' | 'failed';
+export type SessionStatus = 'active' | 'approved' | 'closed';
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected';
+export type ResolvedBy = 'human' | 'agent';
+export type FeedbackTheme = 'dark' | 'light' | 'system';
+export type MarkerClickBehavior = 'edit' | 'delete';
+export type FeedbackLayoutMode = 'idle' | 'design' | 'rearrange';
+export type LayoutModeComponentType = import('./layout-mode/types.js').LayoutModeComponentType;
+export type CanvasPurpose = import('./layout-mode/types.js').CanvasPurpose;
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ThreadMessage {
+    id: string;
+    role: 'human' | 'agent';
+    content: string;
+    timestamp: number;
+}
+export interface DesignPlacement {
+    id: string;
+    type: LayoutModeComponentType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scrollY: number;
+    timestamp: number;
+    text?: string;
+    note?: string;
+}
+export interface DetectedSection {
+    id: string;
+    label: string;
+    tagName: string;
+    selector: string;
+    role: string | null;
+    className: string | null;
+    textSnippet: string | null;
+    originalRect: Rect;
+    currentRect: Rect;
+    originalIndex: number;
+    isFixed?: boolean;
+    note?: string;
+}
+export interface RearrangeState {
+    sections: DetectedSection[];
+    originalOrder: string[];
+    detectedAt: number;
+}
+export interface WireframeState {
+    rearrange: RearrangeState | null;
+    placements: DesignPlacement[];
+    purpose: CanvasPurpose;
+    prompt: string;
+}
+export interface Session {
+    id: string;
+    url: string;
+    status: SessionStatus;
+    createdAt: string;
+    updatedAt?: string;
+    projectId?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface SessionWithAnnotations extends Session {
+    annotations: Annotation[];
+}
+export interface Annotation {
+    id: string;
+    x: number;
+    y: number;
+    isFixed: boolean;
+    timestamp: number;
+    element: string;
+    elementPath: string;
+    comment: string;
+    kind?: AnnotationKind;
+    color: AnnotationColor;
+    selectedText?: string;
+    boundingBox?: Rect;
+    nearbyText?: string;
+    cssClasses?: string;
+    nearbyElements?: string;
+    computedStyles?: string;
+    accessibility?: string;
+    fullPath?: string;
+    reactComponents?: string;
+    svelteComponent?: string;
+    sourceFile?: string;
+    dryuiComponent?: string;
+    isMultiSelect?: boolean;
+    drawingIndex?: number;
+    elementBoundingBoxes?: Rect[];
+    placement?: DesignPlacement;
+    rearrange?: {
+        selector: string;
+        label: string;
+        tagName: string;
+        originalRect: Rect;
+        currentRect: Rect;
+    };
+    sessionId?: string;
+    url?: string;
+    status?: AnnotationStatus;
+    intent?: AnnotationIntent;
+    severity?: AnnotationSeverity;
+    thread?: ThreadMessage[];
+    createdAt?: string;
+    updatedAt?: string;
+    resolvedAt?: string;
+    resolvedBy?: ResolvedBy;
+    resolutionNote?: string;
+    authorId?: string;
+    _syncedTo?: string;
+}
+export interface FeedbackSettings {
+    outputDetail: OutputDetail;
+    autoClearAfterCopy: boolean;
+    annotationColor: AnnotationColor;
+    blockInteractions: boolean;
+    svelteDetection: boolean;
+    markerClickBehavior: MarkerClickBehavior;
+    theme: FeedbackTheme;
+    webhookUrl: string;
+    webhooksEnabled: boolean;
+}
+export interface FeedbackProps {
+    annotations?: Annotation[];
+    onAnnotationAdd?: (annotation: Annotation) => void;
+    onAnnotationUpdate?: (annotation: Annotation) => void;
+    onAnnotationReply?: (annotation: Annotation, message: ThreadMessage) => void;
+    onAnnotationDelete?: (annotation: Annotation) => void;
+    onAnnotationsClear?: (annotations: Annotation[]) => void;
+    onCopy?: (markdown: string) => void;
+    onSubmit?: (output: string, annotations: Annotation[]) => void;
+    onSessionCreated?: (sessionId: string) => void;
+    defaultDetail?: OutputDetail;
+    defaultColor?: AnnotationColor;
+    defaultTheme?: FeedbackTheme;
+    copyToClipboard?: boolean;
+    enableDesignMode?: boolean;
+    enableRearrange?: boolean;
+    enableSvelteDetection?: boolean;
+    endpoint?: string;
+    sessionId?: string;
+    webhookUrl?: string;
+    shortcut?: string;
+    class?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare function detectDryUIComponent(target: EventTarget | null): string | undefined;

package/dist/utils/dryui-detection.js

@@ -0,0 +1,219 @@
+import { collectRawSvelteLocations, findTargetElement } from './svelte-meta.js';
+const DRYUI_FILE_PATTERNS = [
+    /\/packages\/ui\/src\/([^/]+)\//i,
+    /\/node_modules\/@dryui\/ui\/src\/([^/]+)\//i,
+    /\/@dryui\/ui\/src\/([^/]+)\//i,
+];
+const ATTRIBUTE_KEYS = [
+    'variant',
+    'size',
+    'color',
+    'tone',
+    'align',
+    'orientation',
+    'shape',
+    'position',
+    'status',
+    'side',
+    'part',
+    'state',
+];
+const CLASS_PROP_GROUPS = {
+    variant: new Set(['solid', 'outline', 'ghost', 'soft', 'secondary', 'link', 'default', 'elevated', 'interactive']),
+    size: new Set(['sm', 'md', 'lg', 'icon', 'icon-sm', 'icon-lg']),
+    color: new Set(['primary', 'danger', 'gray', 'brand', 'info', 'success', 'warning', 'error', 'neutral', 'blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'indigo']),
+    align: new Set(['left', 'center', 'right']),
+    orientation: new Set(['horizontal', 'vertical']),
+};
+function isPropLikeLocalToken(token) {
+    return Object.values(CLASS_PROP_GROUPS).some((group) => group.has(token));
+}
+function collectRawSvelteFiles(target) {
+    return collectRawSvelteLocations(target).map((location) => location.file);
+}
+function toComponentName(value) {
+    return value
+        .split(/[-_]+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+function detectComponentFromFiles(target) {
+    for (const file of collectRawSvelteFiles(target)) {
+        for (const pattern of DRYUI_FILE_PATTERNS) {
+            const match = file.match(pattern);
+            if (match?.[1]) {
+                return toComponentName(match[1]);
+            }
+        }
+    }
+    return null;
+}
+function normalizeClassToken(token) {
+    const trimmed = token.trim();
+    const normalized = trimmed.replace(/^_+/, '');
+    if (trimmed.startsWith('_')) {
+        const localOnlyMatch = normalized.match(/^([A-Za-z0-9-]+)_[A-Za-z0-9-]+(?:_\d+)?$/);
+        if (localOnlyMatch?.[1]) {
+            return ['', localOnlyMatch[1]];
+        }
+    }
+    const moduleMatch = normalized.match(/^([a-z0-9-]+)_([A-Za-z0-9-]+)(?:__|_[A-Za-z0-9-]+$)/);
+    if (moduleMatch) {
+        return [moduleMatch[1] ?? '', moduleMatch[2] ?? ''];
+    }
+    const localOnlyMatch = normalized.match(/^([A-Za-z0-9-]+)_[A-Za-z0-9-]+(?:_\d+)?$/);
+    if (localOnlyMatch?.[1]) {
+        return ['', localOnlyMatch[1]];
+    }
+    if (/^[a-z][a-z0-9-]*$/.test(normalized)) {
+        return ['', normalized];
+    }
+    return [];
+}
+function collectClassTokenGroups(element) {
+    const groups = new Map();
+    let current = element;
+    let depth = 0;
+    while (current && depth < 3) {
+        for (const token of getClassTokens(current)) {
+            const [prefix, local] = normalizeClassToken(token);
+            if (!prefix || !local)
+                continue;
+            let group = groups.get(prefix);
+            if (!group) {
+                group = new Set();
+                groups.set(prefix, group);
+            }
+            group.add(normalizePropValue(local));
+        }
+        current = current.parentElement;
+        depth += 1;
+    }
+    return groups;
+}
+function collectLocalClassTokens(element, depthLimit) {
+    const locals = new Set();
+    let current = element;
+    let depth = 0;
+    while (current && depth < depthLimit) {
+        for (const token of getClassTokens(current)) {
+            const [, local] = normalizeClassToken(token);
+            if (local) {
+                locals.add(normalizePropValue(local));
+            }
+        }
+        current = current.parentElement;
+        depth += 1;
+    }
+    return locals;
+}
+function getRuntimeSignatureToken(token) {
+    const trimmed = token.trim();
+    if (!trimmed.startsWith('_')) {
+        return null;
+    }
+    const normalized = trimmed.replace(/^_+/, '');
+    const match = normalized.match(/^([A-Za-z0-9-]+)_([A-Za-z0-9-]+)(?:_\d+)?$/);
+    if (!match?.[1] || !match[2]) {
+        return null;
+    }
+    return {
+        signature: match[2],
+        local: normalizePropValue(match[1]),
+    };
+}
+function collectRuntimeSignatureGroups(element, depthLimit) {
+    const groups = new Map();
+    let current = element;
+    let depth = 0;
+    while (current && depth < depthLimit) {
+        for (const token of getClassTokens(current)) {
+            const normalized = getRuntimeSignatureToken(token);
+            if (!normalized)
+                continue;
+            let group = groups.get(normalized.signature);
+            if (!group) {
+                group = new Set();
+                groups.set(normalized.signature, group);
+            }
+            group.add(normalized.local);
+        }
+        current = current.parentElement;
+        depth += 1;
+    }
+    return groups;
+}
+function detectComponentFromClassTokens(element) {
+    for (const [prefix, locals] of collectClassTokenGroups(element)) {
+        if (!locals.has('wrapper'))
+            continue;
+        if (!locals.has(prefix) && !locals.has('root'))
+            continue;
+        return toComponentName(prefix);
+    }
+    const tagName = element.tagName.toLowerCase();
+    const currentRuntimeGroups = collectRuntimeSignatureGroups(element, 1);
+    const nearbyRuntimeGroups = collectRuntimeSignatureGroups(element, 3);
+    for (const [signature, currentLocals] of currentRuntimeGroups) {
+        const nearbyLocals = nearbyRuntimeGroups.get(signature);
+        if (!nearbyLocals?.has('wrapper'))
+            continue;
+        const hasPropToken = Array.from(currentLocals).some((local) => isPropLikeLocalToken(local));
+        if (currentLocals.has(tagName) && hasPropToken) {
+            return toComponentName(tagName);
+        }
+    }
+    return null;
+}
+function getClassTokens(element) {
+    return (element.getAttribute('class') ?? '')
+        .split(/\s+/)
+        .map((token) => token.trim())
+        .filter(Boolean);
+}
+function normalizePropValue(value) {
+    return value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`).replace(/^-/, '');
+}
+function collectProps(element) {
+    const props = new Set();
+    let current = element;
+    let depth = 0;
+    while (current && depth < 4) {
+        for (const key of ATTRIBUTE_KEYS) {
+            const value = current.getAttribute(`data-${key}`);
+            if (value === null)
+                continue;
+            props.add(value === '' ? key : `${key}=${normalizePropValue(value)}`);
+        }
+        for (const token of getClassTokens(current)) {
+            const [, local] = normalizeClassToken(token);
+            if (!local)
+                continue;
+            const normalized = normalizePropValue(local);
+            if (CLASS_PROP_GROUPS.variant.has(normalized))
+                props.add(`variant=${normalized}`);
+            if (CLASS_PROP_GROUPS.size.has(normalized))
+                props.add(`size=${normalized}`);
+            if (CLASS_PROP_GROUPS.color.has(normalized))
+                props.add(`color=${normalized}`);
+            if (CLASS_PROP_GROUPS.align.has(normalized))
+                props.add(`align=${normalized}`);
+            if (CLASS_PROP_GROUPS.orientation.has(normalized))
+                props.add(`orientation=${normalized}`);
+        }
+        current = current.parentElement;
+        depth += 1;
+    }
+    return Array.from(props);
+}
+export function detectDryUIComponent(target) {
+    const element = findTargetElement(target);
+    if (!element)
+        return undefined;
+    const component = detectComponentFromFiles(target) ?? detectComponentFromClassTokens(element);
+    if (!component)
+        return undefined;
+    const props = collectProps(element);
+    return props.length > 0 ? `${component} ${props.join(' ')}` : component;
+}

package/dist/utils/element-id.d.ts

@@ -0,0 +1,12 @@
+export declare function identifyElement(el: Element): {
+    name: string;
+    path: string;
+};
+export declare function getElementPath(el: Element, maxDepth?: number): string;
+export declare function getFullElementPath(el: Element): string;
+export declare function getNearbyText(el: Element): string;
+export declare function getNearbyElements(el: Element): string;
+export declare function getElementClasses(el: Element): string;
+export declare function getDetailedComputedStyles(el: Element): Record<string, string>;
+export declare function getForensicComputedStyles(el: Element): string;
+export declare function getAccessibilityInfo(el: Element): string;