@dryui/feedback 0.0.2

package/dist/feedback.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FeedbackProps } from './types.js';
+declare const Feedback: import("svelte").Component<FeedbackProps, {}, "">;
+type Feedback = ReturnType<typeof Feedback>;
+export default Feedback;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Feedback } from './feedback.svelte';
+export type { Annotation, AnnotationColor, AnnotationKind, AnnotationIntent, AnnotationSeverity, AnnotationStatus, ConnectionStatus, DesignPlacement, DetectedSection, OutputDetail, Rect, FeedbackSettings, FeedbackTheme, FeedbackProps, MarkerClickBehavior, RearrangeState, Session, SessionStatus, SessionWithAnnotations, ThreadMessage, WireframeState, } from './types.js';
+export type { GenerateOutputOptions } from './utils/output.js';
+export type { ActionResponse } from './utils/sync.js';
+export { identifyElement, getElementPath, getNearbyText, getElementClasses } from './utils/element-id.js';
+export { deepElementFromPoint, isInShadowDOM, getShadowHost, closestCrossingShadow } from './utils/shadow-dom.js';
+export { clearAnnotations, clearDesignPlacements, clearRearrangeState, clearSessionId, clearSettings, clearSyncMarkers, clearWireframeState, getSessionStorageKey, getStorageKey, getUnsyncedAnnotations, loadAllAnnotations, loadAnnotations, loadDesignPlacements, loadRearrangeState, loadSessionId, loadSettings, loadToolbarHidden, loadWireframeState, saveAnnotations, saveAnnotationsWithSyncMarker, saveDesignPlacements, saveRearrangeState, saveSessionId, saveSettings, saveToolbarHidden, saveWireframeState, } from './utils/storage.js';
+export { OUTPUT_DETAIL_OPTIONS, generateDesignOutput, generateFeedbackOutput, generateOutput, generateRearrangeOutput, } from './utils/output.js';
+export { animationsAreFrozen, freezeAnimations, originalRequestAnimationFrame, originalSetInterval, originalSetTimeout, toggleAnimationsFrozen, unfreezeAnimations, } from './utils/freeze.js';
+export { createSession, deleteAnnotation, getSession, listSessions, requestAction, syncAnnotation, updateAnnotation, } from './utils/sync.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { default as Feedback } from './feedback.svelte';
+export { identifyElement, getElementPath, getNearbyText, getElementClasses } from './utils/element-id.js';
+export { deepElementFromPoint, isInShadowDOM, getShadowHost, closestCrossingShadow } from './utils/shadow-dom.js';
+export { clearAnnotations, clearDesignPlacements, clearRearrangeState, clearSessionId, clearSettings, clearSyncMarkers, clearWireframeState, getSessionStorageKey, getStorageKey, getUnsyncedAnnotations, loadAllAnnotations, loadAnnotations, loadDesignPlacements, loadRearrangeState, loadSessionId, loadSettings, loadToolbarHidden, loadWireframeState, saveAnnotations, saveAnnotationsWithSyncMarker, saveDesignPlacements, saveRearrangeState, saveSessionId, saveSettings, saveToolbarHidden, saveWireframeState, } from './utils/storage.js';
+export { OUTPUT_DETAIL_OPTIONS, generateDesignOutput, generateFeedbackOutput, generateOutput, generateRearrangeOutput, } from './utils/output.js';
+export { animationsAreFrozen, freezeAnimations, originalRequestAnimationFrame, originalSetInterval, originalSetTimeout, toggleAnimationsFrozen, unfreezeAnimations, } from './utils/freeze.js';
+export { createSession, deleteAnnotation, getSession, listSessions, requestAction, syncAnnotation, updateAnnotation, } from './utils/sync.js';

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

@@ -0,0 +1,16 @@
+import type { CatalogEntry } from './types.js';
+export declare function getCatalog(): CatalogEntry[];
+export declare function loadCatalog(): Promise<CatalogEntry[]>;
+/**
+ * Token-based keyword search over a loaded catalog. Returns entries sorted by
+ * descending relevance score (matches against name, tags, description, category).
+ */
+export declare function searchCatalog(catalog: CatalogEntry[], query: string): CatalogEntry[];
+/**
+ * Return alternatives for a given component name (empty array if unknown).
+ */
+export declare function getAlternatives(catalog: CatalogEntry[], name: string): CatalogEntry['alternatives'];
+/**
+ * Return anti-patterns for a given component name (empty array if unknown).
+ */
+export declare function getAntiPatterns(catalog: CatalogEntry[], name: string): CatalogEntry['antiPatterns'];

package/dist/layout-mode/catalog.js

@@ -0,0 +1,81 @@
+let cachedCatalog = null;
+export function getCatalog() {
+    return cachedCatalog ?? [];
+}
+export async function loadCatalog() {
+    if (cachedCatalog)
+        return cachedCatalog;
+    const [specMod, compMod] = await Promise.all([
+        import('@dryui/mcp/spec'),
+        import('@dryui/mcp/composition-data'),
+    ]);
+    const spec = (specMod.default ?? specMod);
+    const compositions = compMod.componentCompositions;
+    const compositionMap = new Map(compositions.map((c) => [c.component, c]));
+    const entries = Object.entries(spec.components).map(([name, meta]) => {
+        const comp = compositionMap.get(name);
+        return {
+            name,
+            category: meta.category,
+            description: meta.description,
+            tags: meta.tags,
+            compound: meta.compound,
+            importPath: meta.import,
+            structure: meta.structure ? meta.structure.tree.join('\n') : null,
+            alternatives: comp?.alternatives.map(({ rank, component, useWhen }) => ({ rank, component, useWhen })) ?? [],
+            antiPatterns: comp?.antiPatterns ?? [],
+            combinesWith: comp?.combinesWith ?? [],
+        };
+    });
+    cachedCatalog = entries;
+    return entries;
+}
+/**
+ * Token-based keyword search over a loaded catalog. Returns entries sorted by
+ * descending relevance score (matches against name, tags, description, category).
+ */
+export function searchCatalog(catalog, query) {
+    const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return catalog;
+    const scored = catalog.map((entry) => {
+        const name = entry.name.toLowerCase();
+        const desc = entry.description.toLowerCase();
+        const tags = entry.tags.map((t) => t.toLowerCase());
+        const category = entry.category.toLowerCase();
+        let score = 0;
+        for (const token of tokens) {
+            if (name === token)
+                score += 10;
+            else if (name.startsWith(token))
+                score += 6;
+            else if (name.includes(token))
+                score += 4;
+            if (tags.includes(token))
+                score += 5;
+            else if (tags.some((t) => t.includes(token)))
+                score += 2;
+            if (category === token)
+                score += 3;
+            if (desc.includes(token))
+                score += 1;
+        }
+        return { entry, score };
+    });
+    return scored
+        .filter(({ score }) => score > 0)
+        .sort((a, b) => b.score - a.score)
+        .map(({ entry }) => entry);
+}
+/**
+ * Return alternatives for a given component name (empty array if unknown).
+ */
+export function getAlternatives(catalog, name) {
+    return catalog.find((e) => e.name === name)?.alternatives ?? [];
+}
+/**
+ * Return anti-patterns for a given component name (empty array if unknown).
+ */
+export function getAntiPatterns(catalog, name) {
+    return catalog.find((e) => e.name === name)?.antiPatterns ?? [];
+}

package/dist/layout-mode/component-actions.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { Button } from '@dryui/ui/button';
+  import { Separator } from '@dryui/ui/separator';
+  import { Stack } from '@dryui/ui/stack';
+  import { Text } from '@dryui/ui/text';
+
+  interface Props {
+    component: { name: string; selector: string; props: Record<string, string> };
+    position: { x: number; y: number };
+    onSwap: () => void;
+    onRefine: (comment: string) => void;
+    onDelete: () => void;
+    onClose: () => void;
+  }
+
+  let { component, position, onSwap, onRefine, onDelete, onClose }: Props = $props();
+
+  const propsLabel = $derived(
+    Object.entries(component.props)
+      .map(([k, v]) => `${k}=${v}`)
+      .join(', '),
+  );
+
+  function trapClicks(node: HTMLElement) {
+    function stop(e: Event) { e.stopPropagation(); }
+    node.addEventListener('click', stop);
+    node.addEventListener('mousedown', stop);
+    return { destroy() {
+      node.removeEventListener('click', stop);
+      node.removeEventListener('mousedown', stop);
+    }};
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="component-actions"
+  data-dryui-feedback
+  use:trapClicks
+  style="left: {position.x}px; top: {position.y}px;"
+>
+  <Stack gap="2">
+    <Stack gap="1">
+      <Text weight="semibold" size="sm">{component.name}</Text>
+      {#if propsLabel}
+        <Text size="xs" color="weak">{propsLabel}</Text>
+      {/if}
+    </Stack>
+
+    <Separator />
+
+    <Stack gap="1">
+      <Button variant="ghost" size="sm" onclick={onSwap} style="justify-content: flex-start;">
+        Swap component...
+      </Button>
+      <Button variant="ghost" size="sm" onclick={() => onRefine('')} style="justify-content: flex-start;">
+        Refine with note
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        color="error"
+        onclick={onDelete}
+        style="justify-content: flex-start;"
+      >
+        Delete
+      </Button>
+    </Stack>
+  </Stack>
+</div>
+
+<style>
+  .component-actions {
+    position: fixed;
+    z-index: 10003;
+    background: var(--dry-color-bg-raised);
+    border: 1px solid var(--dry-color-stroke-weak);
+    border-radius: var(--dry-radius-lg);
+    box-shadow: var(--dry-shadow-lg);
+    min-width: 200px;
+    padding: var(--dry-space-3);
+  }
+</style>

package/dist/layout-mode/component-actions.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    component: {
+        name: string;
+        selector: string;
+        props: Record<string, string>;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    onSwap: () => void;
+    onRefine: (comment: string) => void;
+    onDelete: () => void;
+    onClose: () => void;
+}
+declare const ComponentActions: import("svelte").Component<Props, {}, "">;
+type ComponentActions = ReturnType<typeof ComponentActions>;
+export default ComponentActions;

package/dist/layout-mode/component-picker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { CommandPalette, Flex, Text } from '@dryui/ui';
+  import { thumbnailMap } from '@dryui/ui/thumbnail';
+  import { loadCatalog } from './catalog.js';
+  import type { CatalogEntry } from './types.js';
+
+  interface Props {
+    open: boolean;
+    filter?: string;
+    onSelect: (entry: CatalogEntry) => void;
+    onClose: () => void;
+  }
+
+  let { open = $bindable(false), filter = '', onSelect, onClose }: Props = $props();
+
+  let catalog: CatalogEntry[] = $state([]);
+
+  $effect(() => {
+    loadCatalog()
+      .then((c) => { catalog = c; })
+      .catch(() => {});
+  });
+
+  const grouped = $derived(
+    catalog.reduce<Record<string, CatalogEntry[]>>((acc, entry) => {
+      const key = entry.category || 'Other';
+      (acc[key] ??= []).push(entry);
+      return acc;
+    }, {}),
+  );
+
+  function itemValue(entry: CatalogEntry): string {
+    return [entry.name, entry.description, ...entry.tags, entry.category].join(' ');
+  }
+</script>
+
+<CommandPalette.Root bind:open onclose={onClose}>
+  <CommandPalette.Input
+    placeholder="Search components..."
+    value={filter || undefined}
+  />
+  <CommandPalette.List>
+    <CommandPalette.Empty>No components found.</CommandPalette.Empty>
+    {#each Object.entries(grouped) as [category, entries]}
+      <CommandPalette.Group heading={category}>
+        {#each entries as entry (entry.name)}
+          <CommandPalette.Item
+            value={itemValue(entry)}
+            onSelect={() => {
+              onSelect(entry);
+              open = false;
+            }}
+          >
+            <Flex align="center" gap="sm">
+              {#if thumbnailMap[entry.name]}
+                {@const Thumb = thumbnailMap[entry.name]}
+                <div style="width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border-radius: var(--dry-radius-sm);">
+                  <svelte:component this={Thumb} size="sm" />
+                </div>
+              {/if}
+              <Flex direction="column">
+                <Text weight="semibold" size="sm">{entry.name}</Text>
+                {#if entry.description}
+                  <Text size="xs" color="secondary">{entry.description}</Text>
+                {/if}
+              </Flex>
+            </Flex>
+          </CommandPalette.Item>
+        {/each}
+      </CommandPalette.Group>
+    {/each}
+  </CommandPalette.List>
+</CommandPalette.Root>

package/dist/layout-mode/component-picker.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CatalogEntry } from './types.js';
+interface Props {
+    open: boolean;
+    filter?: string;
+    onSelect: (entry: CatalogEntry) => void;
+    onClose: () => void;
+}
+declare const ComponentPicker: import("svelte").Component<Props, {}, "open">;
+type ComponentPicker = ReturnType<typeof ComponentPicker>;
+export default ComponentPicker;