@dryui/feedback 0.0.2

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

@@ -0,0 +1,38 @@
+import type { DetectedSection, Rect, DesignPlacement } from './types.js';
+export type Guide = {
+    axis: 'x' | 'y';
+    pos: number;
+};
+export type SnapRect = Rect;
+export declare const MIN_SIZE = 24;
+export declare const SNAP_THRESHOLD = 5;
+export declare const MIN_CAPTURE_SIZE = 16;
+export declare function computeSnap(rect: SnapRect, others: readonly DesignPlacement[], excludeIds: ReadonlySet<string>, activeEdges?: {
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+    bottom?: boolean;
+}, extraRects?: readonly SnapRect[]): {
+    dx: number;
+    dy: number;
+    guides: Guide[];
+};
+export declare function computeSectionSnap(rect: SnapRect, sections: readonly DetectedSection[], excludeIds: ReadonlySet<string>, activeEdges?: {
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+    bottom?: boolean;
+}, extraRects?: readonly SnapRect[]): {
+    dx: number;
+    dy: number;
+    guides: Guide[];
+};
+export declare function createRectFromPoint(start: {
+    x: number;
+    y: number;
+}, end: {
+    x: number;
+    y: number;
+}): Rect;
+export declare function isMeaningfulDrag(rect: Rect, threshold?: number): boolean;
+export declare function dedupeRects(rects: readonly Rect[]): Rect[];

package/dist/layout-mode/geometry.js

@@ -0,0 +1,133 @@
+export const MIN_SIZE = 24;
+export const SNAP_THRESHOLD = 5;
+export const MIN_CAPTURE_SIZE = 16;
+function snapAxes(rect, targets, activeEdges, extraRects) {
+    let bestDx = Infinity;
+    let bestDy = Infinity;
+    const middleLeft = rect.x;
+    const middleRight = rect.x + rect.width;
+    const middleCenterX = rect.x + rect.width / 2;
+    const middleTop = rect.y;
+    const middleBottom = rect.y + rect.height;
+    const middleCenterY = rect.y + rect.height / 2;
+    const allTargets = [];
+    for (const target of targets) {
+        allTargets.push(target);
+    }
+    if (extraRects) {
+        allTargets.push(...extraRects);
+    }
+    const fromX = activeEdges
+        ? [
+            ...(activeEdges.left ? [middleLeft] : []),
+            ...(activeEdges.right ? [middleRight] : []),
+        ]
+        : [middleLeft, middleRight, middleCenterX];
+    const fromY = activeEdges
+        ? [
+            ...(activeEdges.top ? [middleTop] : []),
+            ...(activeEdges.bottom ? [middleBottom] : []),
+        ]
+        : [middleTop, middleBottom, middleCenterY];
+    for (const target of allTargets) {
+        const left = target.x;
+        const right = target.x + target.width;
+        const centerX = target.x + target.width / 2;
+        const top = target.y;
+        const bottom = target.y + target.height;
+        const centerY = target.y + target.height / 2;
+        for (const from of fromX) {
+            for (const to of [left, right, centerX]) {
+                const delta = to - from;
+                if (Math.abs(delta) < SNAP_THRESHOLD && Math.abs(delta) < Math.abs(bestDx)) {
+                    bestDx = delta;
+                }
+            }
+        }
+        for (const from of fromY) {
+            for (const to of [top, bottom, centerY]) {
+                const delta = to - from;
+                if (Math.abs(delta) < SNAP_THRESHOLD && Math.abs(delta) < Math.abs(bestDy)) {
+                    bestDy = delta;
+                }
+            }
+        }
+    }
+    const dx = Math.abs(bestDx) < SNAP_THRESHOLD ? bestDx : 0;
+    const dy = Math.abs(bestDy) < SNAP_THRESHOLD ? bestDy : 0;
+    const guides = [];
+    const seen = new Set();
+    const snappedLeft = middleLeft + dx;
+    const snappedRight = middleRight + dx;
+    const snappedCenterX = middleCenterX + dx;
+    const snappedTop = middleTop + dy;
+    const snappedBottom = middleBottom + dy;
+    const snappedCenterY = middleCenterY + dy;
+    for (const target of allTargets) {
+        const left = target.x;
+        const right = target.x + target.width;
+        const centerX = target.x + target.width / 2;
+        const top = target.y;
+        const bottom = target.y + target.height;
+        const centerY = target.y + target.height / 2;
+        for (const xPos of [left, centerX, right]) {
+            for (const snapped of [snappedLeft, snappedCenterX, snappedRight]) {
+                if (Math.abs(snapped - xPos) < 0.5) {
+                    const key = `x:${Math.round(xPos)}`;
+                    if (!seen.has(key)) {
+                        seen.add(key);
+                        guides.push({ axis: 'x', pos: xPos });
+                    }
+                }
+            }
+        }
+        for (const yPos of [top, centerY, bottom]) {
+            for (const snapped of [snappedTop, snappedCenterY, snappedBottom]) {
+                if (Math.abs(snapped - yPos) < 0.5) {
+                    const key = `y:${Math.round(yPos)}`;
+                    if (!seen.has(key)) {
+                        seen.add(key);
+                        guides.push({ axis: 'y', pos: yPos });
+                    }
+                }
+            }
+        }
+    }
+    return { dx, dy, guides };
+}
+export function computeSnap(rect, others, excludeIds, activeEdges, extraRects) {
+    const targets = others.filter((placement) => !excludeIds.has(placement.id)).map((placement) => ({
+        x: placement.x,
+        y: placement.y,
+        width: placement.width,
+        height: placement.height,
+    }));
+    return snapAxes(rect, targets, activeEdges, extraRects);
+}
+export function computeSectionSnap(rect, sections, excludeIds, activeEdges, extraRects) {
+    const targets = sections.filter((section) => !excludeIds.has(section.id)).map((section) => section.currentRect);
+    return snapAxes(rect, targets, activeEdges, extraRects);
+}
+export function createRectFromPoint(start, end) {
+    return {
+        x: Math.min(start.x, end.x),
+        y: Math.min(start.y, end.y),
+        width: Math.abs(end.x - start.x),
+        height: Math.abs(end.y - start.y),
+    };
+}
+export function isMeaningfulDrag(rect, threshold = MIN_SIZE) {
+    return rect.width >= threshold && rect.height >= threshold;
+}
+export function dedupeRects(rects) {
+    const seen = new Set();
+    const result = [];
+    for (const rect of rects) {
+        const key = `${Math.round(rect.x)}:${Math.round(rect.y)}:${Math.round(rect.width)}:${Math.round(rect.height)}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        result.push(rect);
+    }
+    return result;
+}

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

@@ -0,0 +1,10 @@
+import type { DesignPlacement } from './types.js';
+export interface History {
+    push(placements: DesignPlacement[]): void;
+    undo(): DesignPlacement[] | null;
+    redo(): DesignPlacement[] | null;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+}
+export declare function createHistory(maxEntries?: number): History;

package/dist/layout-mode/history.js

@@ -0,0 +1,45 @@
+function clonePlacements(placements) {
+    return placements.map((p) => ({ ...p }));
+}
+export function createHistory(maxEntries = 50) {
+    const undoStack = [];
+    const redoStack = [];
+    return {
+        push(placements) {
+            undoStack.push(clonePlacements(placements));
+            redoStack.length = 0;
+            if (undoStack.length > maxEntries + 1) {
+                undoStack.shift();
+            }
+        },
+        undo() {
+            if (undoStack.length < 2)
+                return null;
+            const current = undoStack.pop();
+            if (!current)
+                return null;
+            redoStack.push(current);
+            const previous = undoStack[undoStack.length - 1];
+            return previous ? clonePlacements(previous) : null;
+        },
+        redo() {
+            if (redoStack.length === 0)
+                return null;
+            const next = redoStack.pop();
+            if (!next)
+                return null;
+            undoStack.push(next);
+            return clonePlacements(next);
+        },
+        canUndo() {
+            return undoStack.length >= 2;
+        },
+        canRedo() {
+            return redoStack.length > 0;
+        },
+        clear() {
+            undoStack.length = 0;
+            redoStack.length = 0;
+        },
+    };
+}

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

@@ -0,0 +1,23 @@
+export { default as DesignPalette } from './design-palette.svelte';
+export { default as DesignMode } from './design-mode.svelte';
+export { default as RearrangeOverlay } from './rearrange-overlay.svelte';
+export { default as ComponentPicker } from './component-picker.svelte';
+export { default as RouteCreator } from './route-creator.svelte';
+export { default as ComponentActions } from './component-actions.svelte';
+export { default as ResponsiveBar } from './responsive-bar.svelte';
+export type { LayoutModeComponentType, CanvasPurpose, CanvasWidth, CatalogEntry, ComponentAction, ComponentDefinition, ComponentSection, CSSContext, DesignPlacement, DetectedSection, HistoryEntry, RearrangeState, Rect, SpatialContext, ViewportSize, } from './types.js';
+export { CANVAS_WIDTHS, COMPONENT_MAP, COMPONENT_REGISTRY, DEFAULT_SIZES, } from './types.js';
+export { captureElement, detectPageSections, generateSelector, getSectionLabels, labelSection, } from './section-detection.js';
+export { computeSectionSnap, computeSnap, createRectFromPoint, dedupeRects, MIN_CAPTURE_SIZE, MIN_SIZE, SNAP_THRESHOLD, isMeaningfulDrag, } from './geometry.js';
+export type { Guide } from './geometry.js';
+export { analyzeLayoutPatterns, formatCSSPosition, formatPositionSummary, formatSpatialLines, getElementCSSContext, getPageLayout, getPopupPosition, getSpatialContext, hasMeaningfulArea, intersectsRect, normalizeText, rectFromPoints, toRect, unionRects, uniqueLabels, } from './spatial.js';
+export { generateDesignOutput, generateRearrangeOutput, } from './output.js';
+export { getCatalog, loadCatalog, searchCatalog, getAlternatives, getAntiPatterns, } from './catalog.js';
+export { createHistory } from './history.js';
+export type { History } from './history.js';
+export { createMountManager, } from './live-mount.js';
+export type { MountManager, ReconcileDiff } from './live-mount.js';
+export { generateSketchBrief, generateEditBrief, } from './output.js';
+export type { SketchBriefOptions, EditAnnotation, EditBriefOptions } from './output.js';
+export { INTERACTIVE_TAGS, isElementFixed, isSelectableAreaTarget, rectFromElement, } from './element-heuristics.js';
+export { freezeLayoutModeAnimations, isLayoutModeFrozen, originalRequestAnimationFrame, originalSetInterval, originalSetTimeout, unfreezeLayoutModeAnimations, } from './freeze.js';

package/dist/layout-mode/index.js

@@ -0,0 +1,18 @@
+export { default as DesignPalette } from './design-palette.svelte';
+export { default as DesignMode } from './design-mode.svelte';
+export { default as RearrangeOverlay } from './rearrange-overlay.svelte';
+export { default as ComponentPicker } from './component-picker.svelte';
+export { default as RouteCreator } from './route-creator.svelte';
+export { default as ComponentActions } from './component-actions.svelte';
+export { default as ResponsiveBar } from './responsive-bar.svelte';
+export { CANVAS_WIDTHS, COMPONENT_MAP, COMPONENT_REGISTRY, DEFAULT_SIZES, } from './types.js';
+export { captureElement, detectPageSections, generateSelector, getSectionLabels, labelSection, } from './section-detection.js';
+export { computeSectionSnap, computeSnap, createRectFromPoint, dedupeRects, MIN_CAPTURE_SIZE, MIN_SIZE, SNAP_THRESHOLD, isMeaningfulDrag, } from './geometry.js';
+export { analyzeLayoutPatterns, formatCSSPosition, formatPositionSummary, formatSpatialLines, getElementCSSContext, getPageLayout, getPopupPosition, getSpatialContext, hasMeaningfulArea, intersectsRect, normalizeText, rectFromPoints, toRect, unionRects, uniqueLabels, } from './spatial.js';
+export { generateDesignOutput, generateRearrangeOutput, } from './output.js';
+export { getCatalog, loadCatalog, searchCatalog, getAlternatives, getAntiPatterns, } from './catalog.js';
+export { createHistory } from './history.js';
+export { createMountManager, } from './live-mount.js';
+export { generateSketchBrief, generateEditBrief, } from './output.js';
+export { INTERACTIVE_TAGS, isElementFixed, isSelectableAreaTarget, rectFromElement, } from './element-heuristics.js';
+export { freezeLayoutModeAnimations, isLayoutModeFrozen, originalRequestAnimationFrame, originalSetInterval, originalSetTimeout, unfreezeLayoutModeAnimations, } from './freeze.js';

package/dist/layout-mode/live-mount.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Manages mounting/unmounting Svelte components into placement wrapper divs.
+ *
+ * The reconcile/tracking logic is browser-agnostic and testable in bun.
+ * The mount/unmount calls are try/caught since svelte's mount() is a browser API
+ * that is unavailable in the bun test environment.
+ */
+export interface ReconcileDiff {
+    added: string[];
+    removed: string[];
+}
+export interface MountManager {
+    mountComponent(id: string, componentName: string, target: HTMLElement): void;
+    unmountComponent(id: string): void;
+    unmountAll(): void;
+    hasMounted(id: string): boolean;
+    markMounted(id: string): void;
+    reconcile(currentIds: string[], previousIds: Set<string>): ReconcileDiff;
+}
+export declare function createMountManager(): MountManager;

package/dist/layout-mode/live-mount.js

@@ -0,0 +1,70 @@
+/**
+ * Manages mounting/unmounting Svelte components into placement wrapper divs.
+ *
+ * The reconcile/tracking logic is browser-agnostic and testable in bun.
+ * The mount/unmount calls are try/caught since svelte's mount() is a browser API
+ * that is unavailable in the bun test environment.
+ */
+export function createMountManager() {
+    const mounted = new Map();
+    function mountComponent(id, componentName, target) {
+        if (mounted.has(id))
+            return;
+        try {
+            // Dynamic import deferred to avoid top-level svelte import breaking bun tests
+            const { mount } = require('svelte');
+            const { thumbnailMap } = require('@dryui/ui/thumbnail');
+            const component = thumbnailMap[componentName];
+            if (!component)
+                return;
+            const instance = mount(component, { target, props: {} });
+            mounted.set(id, { instance });
+        }
+        catch {
+            // Silently fail in environments where svelte mount is unavailable (e.g. bun tests)
+        }
+    }
+    function unmountComponent(id) {
+        const entry = mounted.get(id);
+        if (!entry)
+            return;
+        try {
+            const { unmount } = require('svelte');
+            unmount(entry.instance);
+        }
+        catch {
+            // Silently fail in environments where svelte unmount is unavailable
+        }
+        finally {
+            mounted.delete(id);
+        }
+    }
+    function unmountAll() {
+        for (const id of mounted.keys()) {
+            unmountComponent(id);
+        }
+        mounted.clear();
+    }
+    function hasMounted(id) {
+        return mounted.has(id);
+    }
+    function markMounted(id) {
+        if (!mounted.has(id)) {
+            mounted.set(id, { instance: null });
+        }
+    }
+    function reconcile(currentIds, previousIds) {
+        const currentSet = new Set(currentIds);
+        const added = currentIds.filter((id) => !previousIds.has(id));
+        const removed = [...previousIds].filter((id) => !currentSet.has(id));
+        return { added, removed };
+    }
+    return {
+        mountComponent,
+        unmountComponent,
+        unmountAll,
+        hasMounted,
+        markMounted,
+        reconcile,
+    };
+}

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

@@ -0,0 +1,26 @@
+import type { CanvasWidth, ComponentAction, DesignPlacement, RearrangeState, ViewportSize } from './types.js';
+type OutputDetail = 'compact' | 'standard' | 'detailed' | 'forensic';
+export declare function generateDesignOutput(placements: readonly DesignPlacement[], viewport: ViewportSize, options?: {
+    blankCanvas?: boolean;
+    wireframePurpose?: string;
+}, detailLevel?: OutputDetail): string;
+export declare function generateRearrangeOutput(state: RearrangeState, detailLevel?: OutputDetail, viewport?: ViewportSize): string;
+export interface SketchBriefOptions {
+    placements: DesignPlacement[];
+    route: string;
+    canvasWidth: CanvasWidth;
+    recipeName?: string;
+}
+export interface EditAnnotation {
+    selector: string;
+    note: string;
+}
+export interface EditBriefOptions {
+    actions: ComponentAction[];
+    annotations: EditAnnotation[];
+    currentUrl: string;
+    canvasWidth: CanvasWidth;
+}
+export declare function generateSketchBrief(options: SketchBriefOptions): string;
+export declare function generateEditBrief(options: EditBriefOptions): string;
+export {};