@dryui/feedback 0.0.2

package/dist/layout-mode/rearrange-overlay.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { RearrangeState, Rect } from './types.js';
+interface Props {
+    rearrangeState: RearrangeState;
+    onChange: (state: RearrangeState) => void;
+    blankCanvas?: boolean;
+    extraSnapRects?: Rect[];
+    deselectSignal?: number;
+    clearSignal?: number;
+    exiting?: boolean;
+    class?: string;
+    onSelectionChange?: (selectedIds: Set<string>, isShift: boolean) => void;
+    onInteractionChange?: (active: boolean) => void;
+    onDragMove?: (dx: number, dy: number) => void;
+    onDragEnd?: (dx: number, dy: number, committed: boolean) => void;
+}
+declare const RearrangeOverlay: import("svelte").Component<Props, {}, "">;
+type RearrangeOverlay = ReturnType<typeof RearrangeOverlay>;
+export default RearrangeOverlay;

package/dist/layout-mode/responsive-bar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { SegmentedControl } from '@dryui/ui';
+  import { CANVAS_WIDTHS, type CanvasWidth } from './types.js';
+
+  interface Props {
+    value: CanvasWidth;
+    onchange: (width: CanvasWidth) => void;
+  }
+
+  let { value, onchange }: Props = $props();
+
+  const stringValue = $derived(String(value));
+
+  function handleChange(next: string) {
+    const num = Number(next) as CanvasWidth;
+    if (num !== value) onchange(num);
+  }
+</script>
+
+<div class="responsive-bar" data-dryui-feedback>
+  <SegmentedControl.Root value={stringValue} onValueChange={handleChange}>
+    {#each CANVAS_WIDTHS as option (option.value)}
+      <SegmentedControl.Item value={String(option.value)}>
+        {option.label}
+      </SegmentedControl.Item>
+    {/each}
+  </SegmentedControl.Root>
+</div>
+
+<style>
+  .responsive-bar {
+    position: fixed;
+    inset-block-start: 0.75rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    z-index: 10001;
+    pointer-events: auto;
+  }
+</style>

package/dist/layout-mode/responsive-bar.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CanvasWidth } from './types.js';
+interface Props {
+    value: CanvasWidth;
+    onchange: (width: CanvasWidth) => void;
+}
+declare const ResponsiveBar: import("svelte").Component<Props, {}, "">;
+type ResponsiveBar = ReturnType<typeof ResponsiveBar>;
+export default ResponsiveBar;

package/dist/layout-mode/route-creator.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { CommandPalette, Badge, Flex, Text } from '@dryui/ui';
+  import { compositionRecipes } from '@dryui/mcp/composition-data';
+
+  interface Props {
+    open: boolean;
+    onCreate: (routePath: string, recipeName: string | null) => void;
+    onClose: () => void;
+  }
+
+  let { open = $bindable(false), onCreate, onClose }: Props = $props();
+
+  let routePath = $state('');
+
+  const isRoute = $derived(routePath.startsWith('/'));
+
+  function handleInput(e: Event) {
+    routePath = (e.target as HTMLInputElement).value;
+  }
+</script>
+
+<CommandPalette.Root bind:open onclose={onClose}>
+  <CommandPalette.Input
+    placeholder="Type route path, e.g. /dashboard/settings"
+    oninput={handleInput}
+  />
+  <CommandPalette.List>
+    <CommandPalette.Empty>No matching recipes found.</CommandPalette.Empty>
+    <CommandPalette.Group heading="Options">
+      {#if isRoute}
+        <CommandPalette.Item
+          value="blank {routePath}"
+          onSelect={() => {
+            onCreate(routePath, null);
+            open = false;
+          }}
+        >
+          <Flex align="center" gap="sm">
+            <Text weight="semibold" size="sm">Blank canvas</Text>
+            <Badge variant="outline" size="sm">{routePath}</Badge>
+          </Flex>
+        </CommandPalette.Item>
+      {/if}
+
+      {#each compositionRecipes as recipe (recipe.name)}
+        <CommandPalette.Item
+          value="{recipe.name} {recipe.description} {recipe.tags.join(' ')}"
+          onSelect={() => {
+            onCreate(routePath || '/new-page', recipe.name);
+            open = false;
+          }}
+        >
+          <Flex direction="column" gap="sm">
+            <Text weight="semibold" size="sm">{recipe.name}</Text>
+            {#if recipe.description}
+              <Text size="xs" color="secondary">{recipe.description}</Text>
+            {/if}
+            {#if recipe.components.length > 0}
+              <Flex gap="sm" wrap="wrap">
+                {#each recipe.components.slice(0, 5) as component (component)}
+                  <Badge variant="soft" size="sm">{component}</Badge>
+                {/each}
+              </Flex>
+            {/if}
+          </Flex>
+        </CommandPalette.Item>
+      {/each}
+    </CommandPalette.Group>
+  </CommandPalette.List>
+</CommandPalette.Root>

package/dist/layout-mode/route-creator.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    open: boolean;
+    onCreate: (routePath: string, recipeName: string | null) => void;
+    onClose: () => void;
+}
+declare const RouteCreator: import("svelte").Component<Props, {}, "open">;
+type RouteCreator = ReturnType<typeof RouteCreator>;
+export default RouteCreator;

package/dist/layout-mode/section-detection.d.ts

@@ -0,0 +1,6 @@
+import type { DetectedSection } from './types.js';
+export declare function generateSelector(el: HTMLElement): string;
+export declare function labelSection(el: HTMLElement): string;
+export declare function detectPageSections(): DetectedSection[];
+export declare function captureElement(el: HTMLElement): DetectedSection;
+export declare function getSectionLabels(sections: readonly DetectedSection[]): string[];

package/dist/layout-mode/section-detection.js

@@ -0,0 +1,214 @@
+const SECTION_TAGS = new Set(['nav', 'header', 'main', 'section', 'article', 'footer', 'aside']);
+const SECTION_ROLES = {
+    banner: 'Header',
+    navigation: 'Navigation',
+    main: 'Main Content',
+    contentinfo: 'Footer',
+    complementary: 'Sidebar',
+    region: 'Section',
+};
+const TAG_LABELS = {
+    nav: 'Navigation',
+    header: 'Header',
+    main: 'Main Content',
+    section: 'Section',
+    article: 'Article',
+    footer: 'Footer',
+    aside: 'Sidebar',
+};
+const SKIP_TAGS = new Set(['script', 'style', 'noscript', 'link', 'meta']);
+const MIN_SECTION_HEIGHT = 40;
+const MAX_UNWRAP_DEPTH = 6;
+function isElementFixed(el) {
+    let current = el;
+    while (current && current !== document.body && current !== document.documentElement) {
+        const pos = window.getComputedStyle(current).position;
+        if (pos === 'fixed' || pos === 'sticky')
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+function cleanClassName(el) {
+    const className = el.className;
+    if (typeof className !== 'string' || !className)
+        return null;
+    const meaningful = className
+        .split(/\s+/)
+        .map((value) => value.replace(/[_][a-zA-Z0-9]{5,}.*$/, ''))
+        .find((value) => value.length > 2 && !/^[a-z]{1,2}$/.test(value));
+    return meaningful || null;
+}
+function textSnippet(el) {
+    const text = el.textContent?.trim();
+    if (!text)
+        return null;
+    const clean = text.replace(/\s+/g, ' ');
+    return clean.length <= 30 ? clean : `${clean.slice(0, 30)}...`;
+}
+function isSectionElement(el) {
+    const tag = el.tagName.toLowerCase();
+    if (SECTION_TAGS.has(tag))
+        return true;
+    const role = el.getAttribute('role');
+    return Boolean(role && SECTION_ROLES[role]);
+}
+function expandTopLevelCandidates(elements, depth = 0) {
+    const expanded = [];
+    for (const el of elements) {
+        if (!(el instanceof HTMLElement))
+            continue;
+        const tag = el.tagName.toLowerCase();
+        if (SKIP_TAGS.has(tag))
+            continue;
+        if (el.closest('[data-dryui-feedback]'))
+            continue;
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            continue;
+        if (style.display === 'contents') {
+            expanded.push(...expandTopLevelCandidates(Array.from(el.children), depth + 1));
+            continue;
+        }
+        expanded.push(el);
+    }
+    if (expanded.length !== 1 || depth >= MAX_UNWRAP_DEPTH) {
+        return expanded;
+    }
+    const [only] = expanded;
+    if (!only) {
+        return expanded;
+    }
+    if (isSectionElement(only) || isElementFixed(only)) {
+        return expanded;
+    }
+    const children = Array.from(only.children).filter((child) => child instanceof HTMLElement);
+    if (children.length === 0) {
+        return expanded;
+    }
+    return expandTopLevelCandidates(children, depth + 1);
+}
+export function generateSelector(el) {
+    const tag = el.tagName.toLowerCase();
+    if (['nav', 'header', 'footer', 'main'].includes(tag) && document.querySelectorAll(tag).length === 1) {
+        return tag;
+    }
+    if (el.id) {
+        return `#${CSS.escape(el.id)}`;
+    }
+    if (typeof el.className === 'string' && el.className) {
+        const classes = el.className.split(/\s+/).filter(Boolean);
+        const meaningful = classes.find((value) => value.length > 2 && !/^[a-zA-Z0-9]{6,}$/.test(value) && !/^[a-z]{1,2}$/.test(value));
+        if (meaningful) {
+            const selector = `${tag}.${CSS.escape(meaningful)}`;
+            if (document.querySelectorAll(selector).length === 1) {
+                return selector;
+            }
+        }
+    }
+    const parent = el.parentElement;
+    if (parent) {
+        const children = Array.from(parent.children);
+        const index = children.indexOf(el) + 1;
+        const parentSelector = parent === document.body ? 'body' : generateSelector(parent);
+        return `${parentSelector} > ${tag}:nth-child(${index})`;
+    }
+    return tag;
+}
+export function labelSection(el) {
+    const tag = el.tagName.toLowerCase();
+    const ariaLabel = el.getAttribute('aria-label');
+    if (ariaLabel)
+        return ariaLabel;
+    const role = el.getAttribute('role');
+    if (role && SECTION_ROLES[role])
+        return SECTION_ROLES[role];
+    if (TAG_LABELS[tag])
+        return TAG_LABELS[tag];
+    const heading = el.querySelector('h1, h2, h3, h4, h5, h6');
+    if (heading) {
+        const text = heading.textContent?.trim();
+        if (text && text.length <= 50)
+            return text;
+        if (text)
+            return `${text.slice(0, 47)}...`;
+    }
+    const text = el.textContent?.trim();
+    return text ? (text.split(/\s+/)[0] ?? tag) : tag;
+}
+export function detectPageSections() {
+    const root = document.querySelector('main') || document.body;
+    const candidates = Array.from(root.children);
+    const allCandidates = root !== document.body && candidates.length < 3 ? Array.from(document.body.children) : candidates;
+    const topLevelCandidates = expandTopLevelCandidates(allCandidates);
+    const sections = [];
+    topLevelCandidates.forEach((el, index) => {
+        if (!(el instanceof HTMLElement))
+            return;
+        const tag = el.tagName.toLowerCase();
+        if (SKIP_TAGS.has(tag))
+            return;
+        if (el.closest('[data-dryui-feedback]'))
+            return;
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return;
+        const rect = el.getBoundingClientRect();
+        if (rect.height < MIN_SECTION_HEIGHT)
+            return;
+        const isSemantic = SECTION_TAGS.has(tag);
+        const hasRole = Boolean(el.getAttribute('role') && SECTION_ROLES[el.getAttribute('role') ?? '']);
+        const isSignificantDiv = tag === 'div' && rect.height >= 60;
+        if (!isSemantic && !hasRole && !isSignificantDiv)
+            return;
+        const isFixed = isElementFixed(el);
+        const sectionRect = {
+            x: rect.x,
+            y: isFixed ? rect.y : rect.y + window.scrollY,
+            width: rect.width,
+            height: rect.height,
+        };
+        sections.push({
+            id: `rs-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+            label: labelSection(el),
+            tagName: tag,
+            selector: generateSelector(el),
+            role: el.getAttribute('role'),
+            className: cleanClassName(el),
+            textSnippet: textSnippet(el),
+            originalRect: sectionRect,
+            currentRect: { ...sectionRect },
+            originalIndex: index,
+            isFixed,
+        });
+    });
+    return sections;
+}
+export function captureElement(el) {
+    const rect = el.getBoundingClientRect();
+    const isFixed = isElementFixed(el);
+    const sectionRect = {
+        x: rect.x,
+        y: isFixed ? rect.y : rect.y + window.scrollY,
+        width: rect.width,
+        height: rect.height,
+    };
+    const parent = el.parentElement;
+    const originalIndex = parent ? Array.from(parent.children).indexOf(el) : 0;
+    return {
+        id: `rs-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        label: labelSection(el),
+        tagName: el.tagName.toLowerCase(),
+        selector: generateSelector(el),
+        role: el.getAttribute('role'),
+        className: cleanClassName(el),
+        textSnippet: textSnippet(el),
+        originalRect: sectionRect,
+        currentRect: { ...sectionRect },
+        originalIndex,
+        isFixed,
+    };
+}
+export function getSectionLabels(sections) {
+    return sections.map((section) => section.label);
+}

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

@@ -0,0 +1,42 @@
+import type { CSSContext, Rect, SpatialContext, ViewportSize } from './types.js';
+export declare function intersectsRect(a: Rect, b: Rect): boolean;
+export declare function rectFromPoints(a: {
+    x: number;
+    y: number;
+}, b: {
+    x: number;
+    y: number;
+}): Rect;
+export declare function hasMeaningfulArea(rect: Rect, threshold?: number): boolean;
+export declare function toRect(rect: DOMRect | Rect): Rect;
+export declare function unionRects(rects: readonly Rect[]): Rect | null;
+export declare function uniqueLabels(labels: readonly string[]): string[];
+export declare function normalizeText(value: string): string;
+export declare function getPopupPosition(rect: Rect, viewportWidth: number, popupWidth?: number): {
+    x: number;
+    y: number;
+};
+export declare function getSpatialContext(rect: Rect, viewport?: ViewportSize): SpatialContext;
+export declare function formatSpatialLines(context: SpatialContext, options?: {
+    includeLeftRight?: boolean;
+}): string[];
+export declare function formatPositionSummary(rect: Rect): string;
+export declare function analyzeLayoutPatterns(rects: readonly Rect[]): string[];
+export declare function getPageLayout(viewport: ViewportSize): {
+    viewport: ViewportSize;
+    contentArea: {
+        selector: string;
+        width: number;
+        left: number;
+        right: number;
+        centerX: number;
+    } | null;
+};
+export declare function getElementCSSContext(selector: string): CSSContext | null;
+export declare function formatCSSPosition(rect: Rect, layout: {
+    viewport: ViewportSize;
+    contentArea: {
+        left: number;
+        width: number;
+    } | null;
+}): string | null;

package/dist/layout-mode/spatial.js

@@ -0,0 +1,156 @@
+function round(value) {
+    return Math.round(value);
+}
+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 rectFromPoints(a, b) {
+    return {
+        x: Math.min(a.x, b.x),
+        y: Math.min(a.y, b.y),
+        width: Math.abs(b.x - a.x),
+        height: Math.abs(b.y - a.y),
+    };
+}
+export function hasMeaningfulArea(rect, threshold = 8) {
+    return rect.width >= threshold && rect.height >= threshold;
+}
+export function toRect(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export function unionRects(rects) {
+    if (rects.length === 0)
+        return null;
+    const x = Math.min(...rects.map((rect) => rect.x));
+    const y = Math.min(...rects.map((rect) => rect.y));
+    const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+    const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+    return { x, y, width: right - x, height: bottom - y };
+}
+export function uniqueLabels(labels) {
+    return Array.from(new Set(labels.filter(Boolean)));
+}
+export function normalizeText(value) {
+    return value.replace(/\s+/g, ' ').trim();
+}
+export function getPopupPosition(rect, viewportWidth, popupWidth = 340) {
+    const x = rect.x + rect.width + 16 > viewportWidth ? Math.max(16, rect.x - popupWidth - 16) : Math.min(rect.x + rect.width + 16, viewportWidth - popupWidth - 16);
+    const y = Math.max(16, rect.y);
+    return { x, y };
+}
+export function getSpatialContext(rect, viewport = {
+    width: typeof window === 'undefined' ? 0 : window.innerWidth,
+    height: typeof window === 'undefined' ? 0 : window.innerHeight,
+}) {
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
+    return {
+        top: rect.y,
+        right: viewport.width - (rect.x + rect.width),
+        bottom: viewport.height - (rect.y + rect.height),
+        left: rect.x,
+        centerX,
+        centerY,
+        rowCount: Math.max(1, Math.round(rect.height / 96)),
+        columnCount: Math.max(1, Math.round(rect.width / 160)),
+    };
+}
+export function formatSpatialLines(context, options) {
+    const lines = [
+        `Top: ${round(context.top ?? 0)}px`,
+        `Bottom: ${round(context.bottom ?? 0)}px`,
+        `Center: ${round(context.centerX)} x ${round(context.centerY)}`,
+        `Approx layout: ${context.rowCount} row${context.rowCount === 1 ? '' : 's'} x ${context.columnCount} column${context.columnCount === 1 ? '' : 's'}`,
+    ];
+    if (options?.includeLeftRight) {
+        lines.splice(1, 0, `Left: ${round(context.left ?? 0)}px`, `Right: ${round(context.right ?? 0)}px`);
+    }
+    return lines;
+}
+export function formatPositionSummary(rect) {
+    return `${round(rect.width)}x${round(rect.height)} at (${round(rect.x)}, ${round(rect.y)})`;
+}
+export function analyzeLayoutPatterns(rects) {
+    if (rects.length === 0)
+        return [];
+    const ordered = [...rects].sort((a, b) => (Math.abs(a.y - b.y) < 20 ? a.x - b.x : a.y - b.y));
+    const rows = [];
+    for (const rect of ordered) {
+        const row = rows.find((group) => {
+            const first = group[0];
+            return first ? Math.abs(first.y - rect.y) < 30 : false;
+        });
+        if (row) {
+            row.push(rect);
+        }
+        else {
+            rows.push([rect]);
+        }
+    }
+    return rows.map((row, index) => {
+        if (row.length === 1) {
+            return `Row ${index + 1}: single element`;
+        }
+        return `Row ${index + 1}: ${row.length} items side by side`;
+    });
+}
+export function getPageLayout(viewport) {
+    if (typeof document === 'undefined') {
+        return { viewport, contentArea: null };
+    }
+    const roots = Array.from(document.body.children).filter((el) => el instanceof HTMLElement);
+    const content = roots
+        .map((el) => ({ el, rect: el.getBoundingClientRect() }))
+        .filter(({ rect }) => rect.width > viewport.width * 0.35 && rect.width < viewport.width * 0.95 && rect.left > 0 && rect.right < viewport.width)
+        .sort((a, b) => Math.abs(a.rect.width - viewport.width * 0.7) - Math.abs(b.rect.width - viewport.width * 0.7))[0];
+    if (!content)
+        return { viewport, contentArea: null };
+    return {
+        viewport,
+        contentArea: {
+            selector: content.el.tagName.toLowerCase(),
+            width: content.rect.width,
+            left: content.rect.left,
+            right: content.rect.right,
+            centerX: content.rect.left + content.rect.width / 2,
+        },
+    };
+}
+export function getElementCSSContext(selector) {
+    if (typeof document === 'undefined' ||
+        typeof window === 'undefined' ||
+        typeof HTMLElement === 'undefined') {
+        return null;
+    }
+    const element = document.querySelector(selector);
+    if (!(element instanceof HTMLElement))
+        return null;
+    const parent = element.parentElement;
+    if (!(parent instanceof HTMLElement))
+        return null;
+    const style = window.getComputedStyle(parent);
+    return {
+        parentSelector: parent === document.body ? 'body' : parent.tagName.toLowerCase(),
+        parentDisplay: style.display || 'block',
+        flexDirection: style.flexDirection || null,
+        gridCols: style.gridTemplateColumns || null,
+        gap: style.gap || null,
+    };
+}
+export function formatCSSPosition(rect, layout) {
+    if (!layout.contentArea) {
+        if (layout.viewport.width <= 0)
+            return null;
+        return `width: ${Math.max(0, Math.round((rect.width / layout.viewport.width) * 100))}%`;
+    }
+    if (layout.contentArea.width <= 0)
+        return null;
+    const x = round(rect.x - layout.contentArea.left);
+    const width = Math.max(0, round((rect.width / layout.contentArea.width) * 100));
+    return `left: ${x}px; width: ${width}%`;
+}