@dryui/feedback 0.0.2

package/dist/components/annotation-popup.svelte

@@ -0,0 +1,669 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Badge } from '@dryui/ui/badge';
+  import { Button } from '@dryui/ui/button';
+  import { Card } from '@dryui/ui/card';
+  import { ChatMessage } from '@dryui/ui/chat-message';
+  import { Collapsible } from '@dryui/ui/collapsible';
+  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 { SwatchStrip } from '@dryui/ui/swatch-strip';
+  import { RelativeTime } from '@dryui/ui/relative-time';
+  import { Stack } from '@dryui/ui/stack';
+  import { Text } from '@dryui/ui/text';
+  import { Textarea } from '@dryui/ui/textarea';
+  import { ANNOTATION_COLOR_OPTIONS, DEFAULT_SETTINGS } from '../constants.js';
+  import type { Annotation } from '../types.js';
+
+  interface Props {
+    element: string;
+    initialValue?: string;
+    selectedText?: string;
+    computedStyles?: string;
+    color?: Annotation['color'];
+    status?: Annotation['status'];
+    thread?: Annotation['thread'];
+    resolvedAt?: Annotation['resolvedAt'];
+    resolvedBy?: Annotation['resolvedBy'];
+    resolutionNote?: Annotation['resolutionNote'];
+    showDelete?: boolean;
+    showStatusActions?: boolean;
+    fieldLabel?: string;
+    helperText?: string;
+    placeholder?: string;
+    position: { x: number; y: number };
+    submitLabel?: string;
+    oncolorchange?: (color: Annotation['color']) => void;
+    onsubmit: (text: string, meta?: { resolutionNote?: string }) => void;
+    oncancel: () => void;
+    ondelete?: () => void;
+    onacknowledge?: (meta?: { resolutionNote?: string }) => void;
+    onresolve?: (meta?: { resolutionNote?: string }) => void;
+    ondismiss?: (meta?: { resolutionNote?: string }) => void;
+    onreply?: (text: string) => void;
+  }
+
+  const EXIT_DURATION_MS = 150;
+  const SHAKE_DURATION_MS = 250;
+
+  let {
+    element,
+    initialValue = '',
+    selectedText,
+    computedStyles,
+    color = DEFAULT_SETTINGS.annotationColor,
+    status = 'pending',
+    thread = [],
+    resolvedAt,
+    resolvedBy,
+    resolutionNote,
+    showDelete = false,
+    showStatusActions = false,
+    fieldLabel = 'Feedback',
+    helperText = 'Enter submits. Shift+Enter inserts a new line.',
+    placeholder = 'Add feedback...',
+    position,
+    submitLabel,
+    oncolorchange,
+    onsubmit,
+    oncancel,
+    ondelete,
+    onacknowledge,
+    onresolve,
+    ondismiss,
+    onreply,
+  }: Props = $props();
+
+  let comment = $state('');
+  let replyText = $state('');
+  let resolutionNoteText = $state('');
+  let stylesExpanded = $state(false);
+  let phase = $state<'enter' | 'entered' | 'exit'>('enter');
+  let shaking = $state(false);
+  let surface = $state<HTMLDivElement>();
+  let textarea = $state<HTMLTextAreaElement>();
+  let popupOpen = $state(true);
+  let surfaceVersion = $state(0);
+
+  let closing = false;
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+  let shakeTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const computedStyleEntries = $derived(
+    computedStyles
+      ? computedStyles
+          .split(';')
+          .map((entry) => entry.trim())
+          .filter(Boolean)
+      : [],
+  );
+  const threadMessages = $derived(thread ?? []);
+  const statusLabel = $derived(
+    status === 'acknowledged'
+      ? 'Acknowledged'
+      : status === 'resolved'
+        ? 'Resolved'
+        : status === 'dismissed'
+          ? 'Dismissed'
+          : status === 'failed'
+            ? 'Failed'
+            : 'Pending',
+  );
+  const statusColor = $derived(
+    status === 'acknowledged'
+      ? 'yellow'
+      : status === 'resolved'
+        ? 'green'
+        : status === 'dismissed'
+          ? 'gray'
+          : status === 'failed'
+            ? 'red'
+            : 'blue',
+  );
+  const showLifecycleBlock = $derived(
+    showStatusActions ||
+      threadMessages.length > 0 ||
+      Boolean(resolvedAt) ||
+      Boolean(resolvedBy) ||
+      Boolean(resolutionNote),
+  );
+  const showResolutionField = $derived(showStatusActions || Boolean(resolutionNote));
+
+  function focusTextarea() {
+    if (!textarea) return;
+    textarea.focus();
+    const end = textarea.value.length;
+    textarea.setSelectionRange(end, end);
+  }
+
+  function attachTextarea(node: HTMLTextAreaElement) {
+    textarea = node;
+    return () => {
+      if (textarea === node) {
+        textarea = undefined;
+      }
+    };
+  }
+
+  function getResolvedPosition() {
+    const measuredWidth = surface?.offsetWidth || surface?.getBoundingClientRect().width || Math.min(392, window.innerWidth - 24);
+    const measuredHeight = surface?.offsetHeight || surface?.getBoundingClientRect().height || 0;
+    const width = measuredWidth + 16;
+    const height = measuredHeight + 16;
+    const padding = 12;
+
+    return {
+      x: Math.max(padding, Math.min(position.x, window.innerWidth - width - padding)),
+      y: Math.max(padding, Math.min(position.y, window.innerHeight - height - padding)),
+    };
+  }
+
+  const resolvedPosition = $derived.by(() => {
+    surfaceVersion;
+    return getResolvedPosition();
+  });
+
+  function attachSurface(node: HTMLDivElement) {
+    surface = node;
+
+    const update = () => {
+      requestAnimationFrame(() => {
+        if (surface === node) {
+          surfaceVersion += 1;
+        }
+      });
+    };
+
+    const resizeObserver = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(update)
+      : null;
+
+    resizeObserver?.observe(node);
+    window.addEventListener('resize', update);
+    update();
+
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', update);
+      if (surface === node) {
+        surface = undefined;
+      }
+    };
+  }
+
+  function scheduleCancel() {
+    if (closing) return;
+    closing = true;
+    phase = 'exit';
+    closeTimer = setTimeout(() => {
+      popupOpen = false;
+      oncancel();
+    }, EXIT_DURATION_MS);
+  }
+
+  function handleDismiss() {
+    scheduleCancel();
+  }
+
+  function shake() {
+    if (shakeTimer) clearTimeout(shakeTimer);
+    shaking = true;
+    shakeTimer = setTimeout(() => {
+      shaking = false;
+      focusTextarea();
+    }, SHAKE_DURATION_MS);
+  }
+
+  function handleSubmit() {
+    const trimmed = comment.trim();
+    if (!trimmed) {
+      shake();
+      return;
+    }
+
+    onsubmit(trimmed, currentMeta());
+  }
+
+  function currentMeta(): { resolutionNote?: string } | undefined {
+    const nextResolutionNote = resolutionNoteText.trim();
+    return nextResolutionNote ? { resolutionNote: nextResolutionNote } : undefined;
+  }
+
+  function handleAcknowledge() {
+    onacknowledge?.(currentMeta());
+  }
+
+  function handleResolve() {
+    onresolve?.(currentMeta());
+  }
+
+  function handleDismissStatus() {
+    ondismiss?.(currentMeta());
+  }
+
+  function handleReply() {
+    const trimmed = replyText.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    onreply?.(trimmed);
+    replyText = '';
+  }
+
+  function formatThreadTimestamp(timestamp: number): string {
+    return new Intl.DateTimeFormat(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+    }).format(timestamp);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+      if (event.target !== textarea) {
+        return;
+      }
+
+      event.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  onMount(() => {
+    comment = initialValue;
+    resolutionNoteText = resolutionNote ?? '';
+    const focusTimer = setTimeout(() => {
+      focusTextarea();
+      phase = 'entered';
+    }, 40);
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (target instanceof Element && target.closest('[data-feedback-popup]')) {
+        return;
+      }
+
+      handleDismiss();
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      handleDismiss();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape, true);
+
+    return () => {
+      clearTimeout(focusTimer);
+      if (closeTimer) clearTimeout(closeTimer);
+      if (shakeTimer) clearTimeout(shakeTimer);
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape, true);
+    };
+  });
+</script>
+
+{#if popupOpen}
+  <div
+    data-feedback-popup
+    data-dryui-feedback
+    role="dialog"
+    aria-label="Annotation form"
+    class="popup-shell"
+    tabindex="-1"
+    style={`left:${resolvedPosition.x}px; top:${resolvedPosition.y}px;`}
+    onkeydown={handleKeydown}
+    onclick={(event) => event.stopPropagation()}
+  >
+    <div
+      {@attach attachSurface}
+      class="popup-surface"
+      class:enter={phase === 'enter'}
+      class:entered={phase === 'entered'}
+      class:exit={phase === 'exit'}
+      class:shake={shaking}
+    >
+      <Card.Root variant="elevated" size="sm" style="width: 100%;">
+        <Card.Header>
+          <Stack gap="sm">
+            <Text size="sm" color="secondary">Annotation target</Text>
+            <Text size="md">{element}</Text>
+          </Stack>
+        </Card.Header>
+
+        <Card.Content>
+          <Stack gap="md">
+            {#if selectedText}
+              <Stack gap="sm">
+                <Text size="sm" color="secondary">Selected text</Text>
+                <div class="quote-block">
+                  <Text size="sm">"{selectedText}"</Text>
+                </div>
+              </Stack>
+            {/if}
+
+            {#if showLifecycleBlock}
+              <Stack gap="sm">
+                <Stack direction="horizontal" gap="sm" align="center">
+                  <Text size="sm" color="secondary">Annotation status</Text>
+                  <Badge
+                    variant="soft"
+                    color={statusColor}
+                    size="sm"
+                    data-testid="popup-status-badge"
+                  >
+                    {statusLabel}
+                  </Badge>
+                </Stack>
+
+                {#if resolvedBy || resolvedAt}
+                  <Stack direction="horizontal" gap="sm" align="center">
+                    <Text size="sm" color="secondary">
+                      {statusLabel}
+                      {#if resolvedBy}
+                        by {resolvedBy}
+                      {/if}
+                    </Text>
+                    {#if resolvedAt}
+                      <Text size="sm" color="secondary">
+                        <RelativeTime date={resolvedAt} />
+                      </Text>
+                    {/if}
+                  </Stack>
+                {/if}
+
+                {#if threadMessages.length > 0}
+                  <Stack gap="sm">
+                    <Stack direction="horizontal" gap="sm" align="center">
+                      <Text size="sm" color="secondary">Thread</Text>
+                      <Badge variant="outline" color="gray" size="sm" data-testid="popup-thread-count">
+                        {threadMessages.length}
+                      </Badge>
+                    </Stack>
+
+                    <div class="thread-block">
+                      <Stack gap="sm" data-testid="popup-thread">
+                        {#each threadMessages as message (message.id)}
+                          <ChatMessage
+                            role={message.role === 'human' ? 'user' : 'assistant'}
+                            variant={message.role === 'human' ? 'sent' : 'received'}
+                            name={message.role === 'human' ? 'You' : 'Agent'}
+                            timestamp={formatThreadTimestamp(message.timestamp)}
+                          >
+                            {message.content}
+                          </ChatMessage>
+                        {/each}
+                      </Stack>
+                    </div>
+                  </Stack>
+                {/if}
+              </Stack>
+            {/if}
+
+            <Field.Root>
+              <Label>Marker color</Label>
+              <Flex wrap="wrap" gap="md">
+                {#each ANNOTATION_COLOR_OPTIONS as option (option.value)}
+                  <Button
+                    variant="bare"
+                    data-testid={`popup-color-${option.value}`}
+                    onclick={() => oncolorchange?.(option.value)}
+                  >
+                    <Stack align="center" gap="sm">
+                      <SwatchStrip
+                        colors={[option.swatch]}
+                        size="sm"
+                        rounded={false}
+                      />
+                      <Text as="span" size="sm" font="mono" color={color === option.value ? 'default' : 'muted'}>
+                        {option.label.toLowerCase()}
+                      </Text>
+                    </Stack>
+                  </Button>
+                {/each}
+              </Flex>
+            </Field.Root>
+
+            <Field.Root>
+              <Label>{fieldLabel}</Label>
+              <Textarea
+                {@attach attachTextarea}
+                bind:value={comment}
+                size="md"
+                {placeholder}
+                style="min-height: 7rem;"
+              />
+            </Field.Root>
+
+            {#if showResolutionField}
+              <Field.Root>
+                <Label>Resolution note</Label>
+                <Input
+                  bind:value={resolutionNoteText}
+                  size="md"
+                  placeholder="Summarize what changed or why the note was dismissed"
+                  data-testid="resolution-note-input"
+                />
+              </Field.Root>
+            {/if}
+
+            {#if onreply}
+              <Field.Root>
+                <Label>Reply</Label>
+                <Stack direction="horizontal" gap="sm" align="end">
+                  <Input
+                    bind:value={replyText}
+                    size="md"
+                    placeholder="Reply in the thread"
+                    data-testid="reply-input"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    data-testid="reply-btn"
+                    onclick={handleReply}
+                  >
+                    Add reply
+                  </Button>
+                </Stack>
+              </Field.Root>
+            {/if}
+
+            <Text size="sm" color="secondary">
+              {helperText}
+            </Text>
+
+            {#if computedStyleEntries.length > 0}
+              <Collapsible.Root open={stylesExpanded}>
+                <Collapsible.Trigger
+                  type="button"
+                  data-testid="popup-computed-styles"
+                  onclick={() => {
+                    stylesExpanded = !stylesExpanded;
+                  }}
+                  style="
+                    width: 100%;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0.625rem 0.75rem;
+                    border-radius: var(--dry-radius-md, 12px);
+                    border: 1px solid var(--dry-color-stroke-weak, rgba(148, 163, 184, 0.28));
+                    background: var(--dry-color-bg-base, rgba(15, 23, 42, 0.02));
+                    color: inherit;
+                    font: inherit;
+                  "
+                >
+                  <span>Computed styles</span>
+                  <span aria-hidden="true">{stylesExpanded ? '-' : '+'}</span>
+                </Collapsible.Trigger>
+                <Collapsible.Content>
+                  <div class="styles-block">
+                    {#each computedStyleEntries as entry (entry)}
+                      <Text size="sm" style="font-family: var(--dry-font-mono, 'SFMono-Regular', 'Consolas', monospace);">
+                        {entry}
+                      </Text>
+                    {/each}
+                  </div>
+                </Collapsible.Content>
+              </Collapsible.Root>
+            {/if}
+          </Stack>
+        </Card.Content>
+
+        <Card.Footer>
+          <Stack gap="sm">
+            {#if showStatusActions}
+              <Flex wrap="wrap" gap="sm">
+                {#if onacknowledge && status !== 'acknowledged'}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    data-testid="acknowledge-btn"
+                    onclick={handleAcknowledge}
+                  >
+                    Acknowledge feedback
+                  </Button>
+                {/if}
+
+                {#if onresolve && status !== 'resolved'}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    data-testid="resolve-btn"
+                    onclick={handleResolve}
+                  >
+                    Resolve feedback
+                  </Button>
+                {/if}
+
+                {#if ondismiss && status !== 'dismissed'}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    color="danger"
+                    size="sm"
+                    data-testid="dismiss-btn"
+                    onclick={handleDismissStatus}
+                  >
+                    Dismiss feedback
+                  </Button>
+                {/if}
+              </Flex>
+            {/if}
+
+            <Stack direction="horizontal" gap="sm" align="center">
+              <Button type="button" variant="solid" size="sm" data-testid="submit-btn" onclick={handleSubmit}>
+                {submitLabel ?? (initialValue ? 'Save' : 'Add')}
+              </Button>
+              <Button type="button" variant="ghost" size="sm" data-testid="cancel-btn" onclick={handleDismiss}>
+                Cancel
+              </Button>
+              {#if showDelete && ondelete}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  color="danger"
+                  size="sm"
+                  data-testid="delete-btn"
+                  onclick={ondelete}
+                >
+                  Delete
+                </Button>
+              {/if}
+            </Stack>
+          </Stack>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .popup-shell {
+    position: fixed;
+    inset: unset;
+    margin: 0;
+    z-index: 10001;
+    min-width: 0;
+    width: min(344px, calc(100vw - 24px));
+  }
+
+  .popup-surface {
+    width: 100%;
+    max-height: calc(100vh - 24px);
+    overflow: auto;
+    pointer-events: auto;
+    transform-origin: top left;
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+  }
+
+  .popup-surface.enter,
+  .popup-surface.entered {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .popup-surface.enter {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  .popup-surface.exit {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  .popup-surface.shake {
+    animation: popup-shake 0.25s ease;
+  }
+
+  .quote-block {
+    padding: 0.75rem;
+    border-radius: var(--dry-radius-md, 12px);
+    background: var(--dry-color-bg-subtle, rgba(148, 163, 184, 0.14));
+    border: 1px solid var(--dry-color-stroke-weak, rgba(148, 163, 184, 0.28));
+  }
+
+  .styles-block {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    border-radius: var(--dry-radius-md, 12px);
+    background: var(--dry-color-bg-subtle, rgba(148, 163, 184, 0.14));
+    border: 1px solid var(--dry-color-stroke-weak, rgba(148, 163, 184, 0.28));
+  }
+
+  .thread-block {
+    max-height: 13rem;
+    padding: 0.5rem;
+    border-radius: var(--dry-radius-md, 12px);
+    background: var(--dry-color-bg-subtle, rgba(148, 163, 184, 0.14));
+    border: 1px solid var(--dry-color-stroke-weak, rgba(148, 163, 184, 0.28));
+  }
+
+  @keyframes popup-shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+
+    25% {
+      transform: translateX(-6px);
+    }
+
+    75% {
+      transform: translateX(6px);
+    }
+  }
+</style>

package/dist/components/annotation-popup.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Annotation } from '../types.js';
+interface Props {
+    element: string;
+    initialValue?: string;
+    selectedText?: string;
+    computedStyles?: string;
+    color?: Annotation['color'];
+    status?: Annotation['status'];
+    thread?: Annotation['thread'];
+    resolvedAt?: Annotation['resolvedAt'];
+    resolvedBy?: Annotation['resolvedBy'];
+    resolutionNote?: Annotation['resolutionNote'];
+    showDelete?: boolean;
+    showStatusActions?: boolean;
+    fieldLabel?: string;
+    helperText?: string;
+    placeholder?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    submitLabel?: string;
+    oncolorchange?: (color: Annotation['color']) => void;
+    onsubmit: (text: string, meta?: {
+        resolutionNote?: string;
+    }) => void;
+    oncancel: () => void;
+    ondelete?: () => void;
+    onacknowledge?: (meta?: {
+        resolutionNote?: string;
+    }) => void;
+    onresolve?: (meta?: {
+        resolutionNote?: string;
+    }) => void;
+    ondismiss?: (meta?: {
+        resolutionNote?: string;
+    }) => void;
+    onreply?: (text: string) => void;
+}
+declare const AnnotationPopup: import("svelte").Component<Props, {}, "">;
+type AnnotationPopup = ReturnType<typeof AnnotationPopup>;
+export default AnnotationPopup;