@dryui/feedback 0.0.2

package/dist/components/highlight-overlay.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Rect } from '../types.js';
+
+  interface Props {
+    rect: Rect | null;
+    label?: string;
+  }
+
+  let { rect, label }: Props = $props();
+</script>
+
+{#if rect}
+  <div
+    data-feedback-highlight
+    data-dryui-feedback
+    style="
+      position: fixed;
+      left: {rect.x}px;
+      top: {rect.y}px;
+      width: {rect.width}px;
+      height: {rect.height}px;
+      background: var(--dry-color-fill-brand-weak, rgba(99, 102, 241, 0.1));
+      border: 2px solid var(--dry-color-stroke-brand, rgba(99, 102, 241, 0.5));
+      border-radius: var(--dry-radius-sm, 4px);
+      pointer-events: none;
+      z-index: 9999;
+    "
+  >
+    {#if label}
+      <span
+        style="
+          position: absolute;
+          top: -22px;
+          left: 0;
+          background: var(--dry-color-fill-brand);
+          color: var(--dry-color-on-brand, #fff);
+          font-size: 11px;
+          padding: 1px 6px;
+          border-radius: var(--dry-radius-sm, 4px);
+          white-space: nowrap;
+          pointer-events: none;
+        "
+      >
+        {label}
+      </span>
+    {/if}
+  </div>
+{/if}

package/dist/components/highlight-overlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Rect } from '../types.js';
+interface Props {
+    rect: Rect | null;
+    label?: string;
+}
+declare const HighlightOverlay: import("svelte").Component<Props, {}, "">;
+type HighlightOverlay = ReturnType<typeof HighlightOverlay>;
+export default HighlightOverlay;

package/dist/components/settings-panel.svelte

@@ -0,0 +1,446 @@
+<script lang="ts">
+  import { Badge } from '@dryui/ui/badge';
+  import { Button } from '@dryui/ui/button';
+  import { Field } from '@dryui/ui/field';
+  import { Flex } from '@dryui/ui/flex';
+  import { Input } from '@dryui/ui/input';
+  import { Label } from '@dryui/ui/label';
+  import { RadioGroup } from '@dryui/ui/radio-group';
+  import { SegmentedControl } from '@dryui/ui/segmented-control';
+  import { Separator } from '@dryui/ui/separator';
+  import { Stack } from '@dryui/ui/stack';
+  import { Text } from '@dryui/ui/text';
+  import { Toggle } from '@dryui/ui/toggle';
+  import { ANNOTATION_COLOR_OPTIONS, DEFAULT_SETTINGS } from '../constants.js';
+  import type { ConnectionStatus, FeedbackSettings } from '../types.js';
+
+  interface Props {
+    settings: FeedbackSettings;
+    markersVisible?: boolean;
+    onChange: (settings: FeedbackSettings) => void;
+    onClose: () => void;
+    onPause?: () => void;
+    onHide?: () => void;
+    onLayout?: () => void;
+    onRearrange?: () => void;
+    onToggleMarkers?: () => void;
+    placementCount?: number;
+    sectionCount?: number;
+    paused?: boolean;
+    hidden?: boolean;
+    layoutActive?: boolean;
+    rearrangeActive?: boolean;
+    connectionStatus?: ConnectionStatus;
+    endpoint?: string;
+    sessionId?: string | null;
+  }
+
+  let props: Props = $props();
+
+  const settings = $derived({ ...DEFAULT_SETTINGS, ...props.settings });
+  const placementCount = $derived(props.placementCount ?? 0);
+  const sectionCount = $derived(props.sectionCount ?? 0);
+  const paused = $derived(props.paused ?? false);
+  const layoutActive = $derived(props.layoutActive ?? false);
+  const rearrangeActive = $derived(props.rearrangeActive ?? false);
+  const connectionStatus = $derived(props.connectionStatus ?? 'disconnected');
+  const endpoint = $derived(props.endpoint);
+  const sessionId = $derived(props.sessionId ?? null);
+  const markersVisible = $derived(props.markersVisible ?? true);
+  let settingsPage = $state<'main' | 'automations'>('main');
+
+  const connectionTone = $derived(
+    connectionStatus === 'connected' ? 'success' : connectionStatus === 'connecting' ? 'warning' : 'info',
+  );
+  const connectionCopy = $derived(
+    connectionStatus === 'connected'
+      ? 'Connected'
+      : connectionStatus === 'connecting'
+        ? 'Connecting'
+        : 'Disconnected',
+  );
+
+  function patchSettings(patch: Partial<FeedbackSettings>) {
+    props.onChange({ ...settings, ...patch });
+  }
+
+  function openSettingsPage(page: 'main' | 'automations') {
+    settingsPage = page;
+  }
+</script>
+
+<div
+  class="settings-surface"
+  data-feedback-settings-panel
+  data-dryui-feedback
+>
+  <Stack gap="lg">
+    <Stack gap="sm">
+      <Text size="lg">Feedback settings</Text>
+      <Text size="sm" color="secondary">
+        Control output detail, marker behavior, and interaction blocking.
+      </Text>
+    </Stack>
+
+    <Separator />
+
+    <div class="settings-panel-container">
+      <div class:automations={settingsPage === 'automations'} class="settings-panel-track">
+        <section class="settings-page main-page" aria-label="Main settings">
+          <Stack gap="lg">
+            <Field.Root>
+              <Label>Output detail</Label>
+              <div data-testid="settings-output-detail">
+                <SegmentedControl.Root value={settings.outputDetail}>
+                  <SegmentedControl.Item value="compact" onclick={() => patchSettings({ outputDetail: 'compact' })}>
+                    Compact
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="standard" onclick={() => patchSettings({ outputDetail: 'standard' })}>
+                    Standard
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="detailed" onclick={() => patchSettings({ outputDetail: 'detailed' })}>
+                    Detailed
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="forensic" onclick={() => patchSettings({ outputDetail: 'forensic' })}>
+                    Forensic
+                  </SegmentedControl.Item>
+                </SegmentedControl.Root>
+              </div>
+              <Field.Description>
+                Standard keeps the summary readable. Forensic includes the most context.
+              </Field.Description>
+            </Field.Root>
+
+            <Field.Root>
+              <Label>Annotation color</Label>
+              <div class="color-grid">
+                <RadioGroup.Root
+                  orientation="vertical"
+                  value={settings.annotationColor}
+                  aria-label="Annotation color"
+                >
+                  {#each ANNOTATION_COLOR_OPTIONS as option (option.value)}
+                    <RadioGroup.Item
+                      value={option.value}
+                      onclick={() => patchSettings({ annotationColor: option.value })}
+                    >
+                      <span
+                        class="color-option"
+                        data-testid={`settings-color-${option.value}`}
+                        style={`--swatch:${option.swatch};`}
+                      >
+                        <span class="swatch" aria-hidden="true"></span>
+                        <span>{option.label}</span>
+                      </span>
+                    </RadioGroup.Item>
+                  {/each}
+                </RadioGroup.Root>
+              </div>
+            </Field.Root>
+
+            <Field.Root>
+              <Flex align="center" justify="between" gap="md">
+                <Stack gap="sm">
+                  <Text size="sm" weight="medium">Clear on copy or send</Text>
+                  <Field.Description>Start with a clean slate after exporting annotations.</Field.Description>
+                </Stack>
+                <Toggle
+                  data-testid="settings-auto-clear"
+                  aria-label="Clear on copy or send"
+                  pressed={settings.autoClearAfterCopy}
+                  onclick={() => {
+                    patchSettings({ autoClearAfterCopy: !settings.autoClearAfterCopy });
+                  }}
+                />
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Flex align="center" justify="between" gap="md">
+                <Stack gap="sm">
+                  <Text size="sm" weight="medium">Block page interactions</Text>
+                  <Field.Description>Prevent clicks from reaching the app while feedback is active.</Field.Description>
+                </Stack>
+                <Toggle
+                  data-testid="settings-block-interactions"
+                  aria-label="Block page interactions"
+                  pressed={settings.blockInteractions}
+                  onclick={() => {
+                    patchSettings({ blockInteractions: !settings.blockInteractions });
+                  }}
+                />
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Flex align="center" justify="between" gap="md">
+                <Stack gap="sm">
+                  <Text size="sm" weight="medium">Detect Svelte component names</Text>
+                  <Field.Description>Include the Svelte component hierarchy when it is available.</Field.Description>
+                </Stack>
+                <Toggle
+                  data-testid="settings-svelte-detection"
+                  aria-label="Detect Svelte component names"
+                  pressed={settings.svelteDetection}
+                  onclick={() => {
+                    patchSettings({ svelteDetection: !settings.svelteDetection });
+                  }}
+                />
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Flex align="center" justify="between" gap="md">
+                <Stack gap="sm">
+                  <Text size="sm" weight="medium">Show markers</Text>
+                  <Field.Description>Keep annotation markers visible while feedback mode is active.</Field.Description>
+                </Stack>
+                <Toggle
+                  data-testid="settings-markers-visible"
+                  aria-label="Show markers"
+                  pressed={markersVisible}
+                  onclick={() => {
+                    props.onToggleMarkers?.();
+                  }}
+                />
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                data-testid="settings-hide-until-restart"
+                onclick={() => {
+                  props.onHide?.();
+                }}
+                style="width: 100%; justify-content: flex-start;"
+              >
+                Hide until restart
+              </Button>
+              <Field.Description>Hide the toolbar until you open a new tab.</Field.Description>
+            </Field.Root>
+
+            <Field.Root>
+              <Label>Marker click behavior</Label>
+              <div data-testid="settings-marker-behavior">
+                <SegmentedControl.Root value={settings.markerClickBehavior}>
+                  <SegmentedControl.Item value="edit" onclick={() => patchSettings({ markerClickBehavior: 'edit' })}>
+                    Edit
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="delete" onclick={() => patchSettings({ markerClickBehavior: 'delete' })}>
+                    Delete
+                  </SegmentedControl.Item>
+                </SegmentedControl.Root>
+              </div>
+              <Field.Description>Choose whether marker clicks reopen a note or remove it.</Field.Description>
+            </Field.Root>
+
+            <Field.Root>
+              <Label>Theme</Label>
+              <div data-testid="settings-theme">
+                <SegmentedControl.Root value={settings.theme}>
+                  <SegmentedControl.Item value="dark" onclick={() => patchSettings({ theme: 'dark' })}>
+                    Dark
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="light" onclick={() => patchSettings({ theme: 'light' })}>
+                    Light
+                  </SegmentedControl.Item>
+                  <SegmentedControl.Item value="system" onclick={() => patchSettings({ theme: 'system' })}>
+                    System
+                  </SegmentedControl.Item>
+                </SegmentedControl.Root>
+              </div>
+              <Field.Description>Match the annotation UI to the surrounding application theme.</Field.Description>
+            </Field.Root>
+
+            {#if placementCount > 0 || sectionCount > 0}
+              <Field.Root>
+                <Label>Layout state</Label>
+                <Text size="sm" color="secondary">
+                  {placementCount} placement{placementCount === 1 ? '' : 's'} and {sectionCount} section{sectionCount === 1 ? '' : 's'} currently staged.
+                </Text>
+              </Field.Root>
+            {/if}
+
+            <Button
+              variant="ghost"
+              size="sm"
+              data-testid="settings-automations-btn"
+              onclick={() => openSettingsPage('automations')}
+              style="width: 100%; justify-content: space-between;"
+            >
+              <span>Manage MCP &amp; Webhooks</span>
+              <span aria-hidden="true">→</span>
+            </Button>
+
+            <Stack direction="horizontal" gap="sm" align="center" style="flex-wrap: wrap;">
+              <Button variant="outline" size="sm" data-testid="settings-layout-btn" aria-pressed={layoutActive} onclick={props.onLayout}>
+                Layout
+              </Button>
+              <Button variant="outline" size="sm" data-testid="settings-rearrange-btn" aria-pressed={rearrangeActive} onclick={props.onRearrange}>
+                Rearrange
+              </Button>
+              <Button variant="outline" size="sm" data-testid="settings-pause-btn" aria-pressed={paused} onclick={props.onPause}>
+                Pause
+              </Button>
+            </Stack>
+          </Stack>
+        </section>
+
+        <section class="settings-page automations-page" aria-label="MCP and webhooks">
+          <Stack gap="lg">
+            <Button
+              variant="ghost"
+              size="sm"
+              data-testid="settings-back-btn"
+              onclick={() => openSettingsPage('main')}
+              style="width: 100%; justify-content: space-between;"
+            >
+              <span aria-hidden="true">←</span>
+              <span>Manage MCP &amp; Webhooks</span>
+            </Button>
+
+            <Separator />
+
+            <Field.Root>
+              <Label>MCP Connection</Label>
+              <Stack direction="horizontal" gap="sm" align="center">
+                <Badge data-testid="settings-connection-status" variant="soft" color={connectionTone}>
+                  {connectionCopy}
+                </Badge>
+                {#if sessionId}
+                  <Text size="sm" color="secondary">{sessionId}</Text>
+                {/if}
+              </Stack>
+              <Field.Description>
+                {#if endpoint}
+                  {endpoint}
+                {:else}
+                  Configure an endpoint to let AI agents receive annotations in real time.
+                {/if}
+              </Field.Description>
+            </Field.Root>
+
+            <Field.Root>
+              <Flex align="center" justify="between" gap="md">
+                <Stack gap="sm">
+                  <Text size="sm" weight="medium">Enable webhooks</Text>
+                  <Field.Description>
+                    Turn on automatic submission to your configured endpoint. The toggle is disabled until a webhook URL is set.
+                  </Field.Description>
+                </Stack>
+                <Toggle
+                  data-testid="settings-webhooks-enabled"
+                  aria-label="Enable webhooks"
+                  pressed={settings.webhooksEnabled}
+                  disabled={!settings.webhookUrl}
+                  onclick={() => {
+                    if (!settings.webhookUrl) return;
+                    patchSettings({ webhooksEnabled: !settings.webhooksEnabled });
+                  }}
+                />
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Label>Webhook URL</Label>
+              <Input
+                type="url"
+                value={settings.webhookUrl}
+                data-testid="settings-webhook-url"
+                placeholder="https://example.com/webhook"
+                oninput={(event) => {
+                  patchSettings({ webhookUrl: (event.currentTarget as HTMLInputElement).value });
+                }}
+              />
+              <Field.Description>Used when webhooks are enabled and the feedback package submits output.</Field.Description>
+            </Field.Root>
+          </Stack>
+        </section>
+      </div>
+    </div>
+
+    <Separator />
+
+    <Button variant="ghost" size="sm" data-testid="settings-close-btn" onclick={props.onClose}>
+      Close
+    </Button>
+  </Stack>
+</div>
+
+<style>
+  .settings-surface {
+    width: 100%;
+  }
+
+  .settings-panel-container {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .settings-panel-track {
+    display: flex;
+    width: 200%;
+    transition: transform 0.2s ease;
+    will-change: transform;
+  }
+
+  .settings-panel-track.automations {
+    transform: translateX(-50%);
+  }
+
+  .settings-page {
+    box-sizing: border-box;
+    width: 50%;
+    flex-shrink: 0;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .main-page {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
+  }
+
+  .automations-page {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(24px);
+  }
+
+  .settings-panel-track.automations .main-page {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-24px);
+  }
+
+  .settings-panel-track.automations .automations-page {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(-24px);
+  }
+
+  .color-grid {
+    gap: 0.75rem;
+  }
+
+  .color-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 48px;
+  }
+
+  .swatch {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 9999px;
+    background: var(--swatch);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+    flex: none;
+  }
+</style>

package/dist/components/settings-panel.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ConnectionStatus, FeedbackSettings } from '../types.js';
+interface Props {
+    settings: FeedbackSettings;
+    markersVisible?: boolean;
+    onChange: (settings: FeedbackSettings) => void;
+    onClose: () => void;
+    onPause?: () => void;
+    onHide?: () => void;
+    onLayout?: () => void;
+    onRearrange?: () => void;
+    onToggleMarkers?: () => void;
+    placementCount?: number;
+    sectionCount?: number;
+    paused?: boolean;
+    hidden?: boolean;
+    layoutActive?: boolean;
+    rearrangeActive?: boolean;
+    connectionStatus?: ConnectionStatus;
+    endpoint?: string;
+    sessionId?: string | null;
+}
+declare const SettingsPanel: import("svelte").Component<Props, {}, "">;
+type SettingsPanel = ReturnType<typeof SettingsPanel>;
+export default SettingsPanel;