@coframe-gtm/annotations 1.0.4 → 1.1.0

package/src/ui/Composer.tsx

@@ -1,138 +0,0 @@
-/**
- * Composer popup — the comment + intent/severity form shown when a
- * target is captured. Local form state lives in preact/hooks; on
- * submit it pushes through the AFS API and clears the draft.
- */
-
-import type { ComponentChild } from "preact";
-import { useState } from "preact/hooks";
-
-import { api } from "../api.js";
-import type { CapturedTarget } from "../capture.js";
-import { author, draft } from "../store.js";
-import type {
-  AnnotationIntent,
-  AnnotationKind,
-  AnnotationSeverity,
-} from "../types.js";
-import {
-  INTENTS,
-  SEVERITIES,
-  SEVERITY_COLOR,
-  SEVERITY_NEUTRAL,
-} from "./constants.js";
-import { truncate } from "./helpers.js";
-
-interface ChipProps {
-  label: string;
-  on: boolean;
-  color: string;
-  onClick: () => void;
-}
-
-export function Chip({ label, on, color, onClick }: ChipProps): ComponentChild {
-  return (
-    <button
-      class={`cf-chip${on ? " on" : ""}`}
-      style={on ? `--cf-chip:${color};` : undefined}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  );
-}
-
-interface ComposerProps {
-  target: CapturedTarget;
-}
-
-export function Composer({ target }: ComposerProps): ComponentChild {
-  const [comment, setComment] = useState("");
-  const [intent, setIntent] = useState<AnnotationIntent>("change");
-  const [severity, setSeverity] = useState<AnnotationSeverity>("important");
-
-  const submit = (): void => {
-    const text = comment.trim();
-    if (!text) return;
-    api.addAnnotation({
-      ...target,
-      comment: text,
-      intent,
-      severity,
-      kind: "feedback" satisfies AnnotationKind,
-      author: author.value,
-    });
-    draft.value = null;
-  };
-
-  const cancel = (): void => {
-    draft.value = null;
-  };
-
-  const label = target.isMultiSelect
-    ? `${target.elementBoundingBoxes?.length ?? 0} elements`
-    : target.selectedText
-      ? `"${truncate(target.selectedText, 40)}"`
-      : `<${target.element}>`;
-
-  return (
-    <div class="cf-popup cf-composer">
-      <div key="head" class="cf-popup-head">
-        <span key="t" class="cf-popup-target">{label}</span>
-        <button key="x" class="cf-icon-btn" onClick={cancel} title="Cancel">
-          ✕
-        </button>
-      </div>
-      <textarea
-        key="ta"
-        class="cf-textarea"
-        placeholder="Describe the change… (Markdown supported)"
-        autofocus
-        value={comment}
-        onInput={(e: Event) => setComment((e.target as HTMLTextAreaElement).value)}
-        onKeyDown={(e: KeyboardEvent) => {
-          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit();
-        }}
-      />
-      <div key="intent" class="cf-field">
-        <span key="l" class="cf-field-label">Intent</span>
-        <div key="g" class="cf-chipset">
-          {INTENTS.map((it) => (
-            <Chip
-              key={it}
-              label={it}
-              on={intent === it}
-              color={SEVERITY_NEUTRAL}
-              onClick={() => setIntent(it)}
-            />
-          ))}
-        </div>
-      </div>
-      <div key="sev" class="cf-field">
-        <span key="l" class="cf-field-label">Severity</span>
-        <div key="g" class="cf-chipset">
-          {SEVERITIES.map((s) => (
-            <Chip
-              key={s}
-              label={s}
-              on={severity === s}
-              color={SEVERITY_COLOR[s]}
-              onClick={() => setSeverity(s)}
-            />
-          ))}
-        </div>
-      </div>
-      <div key="actions" class="cf-popup-actions">
-        <button key="c" class="cf-btn" onClick={cancel}>Cancel</button>
-        <button
-          key="s"
-          class="cf-btn cf-btn-primary"
-          disabled={!comment.trim()}
-          onClick={submit}
-        >
-          Comment
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/ui/Cursors.tsx

@@ -1,50 +0,0 @@
-/**
- * Live presence cursors — one labeled arrow per remote actor (human
- * reviewers + spun-off agents) collaborating on the same page.
- */
-
-import type { ComponentChild } from "preact";
-
-import type { PresenceCursor } from "../store.js";
-import { CURSOR_PALETTE } from "./constants.js";
-import { hashId } from "./helpers.js";
-
-interface CursorProps {
-  c: PresenceCursor;
-}
-
-export function Cursor({ c }: CursorProps): ComponentChild {
-  // x is % of viewport width; y is px from document top.
-  const left = (c.x / 100) * window.innerWidth;
-  const top = c.y - window.scrollY;
-  const color =
-    c.color ??
-    (c.kind === "agent"
-      ? CURSOR_PALETTE[Math.abs(hashId(c.id)) % CURSOR_PALETTE.length]!
-      : "#ffffff");
-  return (
-    <div
-      class={`cf-cursor cf-cursor-${c.kind}`}
-      style={`top:${top}px;left:${left}px;--cf-cursor:${color};`}
-    >
-      {/* Arrow pointer. */}
-      <svg
-        key="arrow"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        class="cf-cursor-arrow"
-      >
-        <path
-          d="M2 2 L2 14 L6 10 L9 16 L11 15 L8 9 L14 9 Z"
-          fill={color}
-          stroke="rgba(0,0,0,0.35)"
-          stroke-width="0.75"
-        />
-      </svg>
-      <span key="label" class="cf-cursor-label">
-        {`${c.kind === "agent" ? "🤖 " : ""}${c.label}`}
-      </span>
-    </div>
-  );
-}

package/src/ui/Pins.tsx

@@ -1,58 +0,0 @@
-/**
- * Pins + multi-select boxes.
- *
- *   - `Pin`      — one numbered marker per annotation, re-anchored to
- *                  its live element each render.
- *   - `MultiBox` — a pulsing outline around each element in the
- *                  current multi-selection set.
- */
-
-import type { ComponentChild } from "preact";
-
-import { activeThreadId } from "../store.js";
-import type { Annotation } from "../types.js";
-import { DEFAULT_DOT, SEVERITY_COLOR } from "./constants.js";
-import { boxStyle, firstLine, pinPosition } from "./helpers.js";
-
-interface PinProps {
-  a: Annotation;
-  index: number;
-}
-
-export function Pin({ a, index }: PinProps): ComponentChild {
-  const pos = pinPosition(a);
-  if (!pos) return null;
-  const color = a.severity ? SEVERITY_COLOR[a.severity] : DEFAULT_DOT;
-  const resolved = a.status === "resolved" || a.status === "dismissed";
-  return (
-    <button
-      class={`cf-pin${resolved ? " resolved" : ""}${a.author?.kind === "agent" ? " agent" : ""}`}
-      style={`top:${pos.top}px;left:${pos.left}px;--cf-pin:${color};`}
-      title={firstLine(a.comment)}
-      onClick={() => {
-        activeThreadId.value = activeThreadId.value === a.id ? null : a.id;
-      }}
-    >
-      {a.author?.kind === "agent" ? "★" : String(index)}
-    </button>
-  );
-}
-
-interface MultiBoxProps {
-  el: Element;
-}
-
-export function MultiBox({ el }: MultiBoxProps): ComponentChild {
-  const rect = el.getBoundingClientRect();
-  return (
-    <div
-      class="cf-multi-box"
-      style={boxStyle({
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-      })}
-    />
-  );
-}

package/src/ui/ThreadPanel.tsx

@@ -1,124 +0,0 @@
-/**
- * Thread panel — the per-pin discussion (human ↔ agent). Shows the
- * root annotation comment plus the reply thread, with a compose box
- * and a resolve affordance. Reads the active annotation from the
- * `../store.js` signals by id.
- */
-
-import type { ComponentChild } from "preact";
-import { useState } from "preact/hooks";
-
-import { api } from "../api.js";
-import { activeThreadId, annotations, author } from "../store.js";
-import { SEVERITY_COLOR } from "./constants.js";
-
-interface MessageProps {
-  role: "human" | "agent";
-  name: string;
-  content: string;
-}
-
-export function Message({ role, name, content }: MessageProps): ComponentChild {
-  return (
-    <div class={`cf-msg cf-msg-${role}`}>
-      <div key="meta" class="cf-msg-meta">
-        <span key="av" class={`cf-avatar cf-avatar-${role}`}>
-          {role === "agent" ? "🤖" : "🧑"}
-        </span>
-        <span key="n" class="cf-msg-name">{name}</span>
-      </div>
-      <div key="c" class="cf-msg-body">{content}</div>
-    </div>
-  );
-}
-
-interface ThreadPanelProps {
-  id: string;
-}
-
-export function ThreadPanel({ id }: ThreadPanelProps): ComponentChild {
-  const [reply, setReply] = useState("");
-  const a = annotations.value.find((x) => x.id === id);
-  if (!a) return null;
-
-  const send = (): void => {
-    const text = reply.trim();
-    if (!text) return;
-    api.replyToAnnotation(id, { role: author.value.kind, content: text });
-    setReply("");
-  };
-
-  return (
-    <div class="cf-popup cf-thread">
-      <div key="head" class="cf-popup-head">
-        <span key="t" class="cf-popup-target">{`<${a.element}>`}</span>
-        {a.severity ? (
-          <span
-            key="sev"
-            class="cf-tag"
-            style={`--cf-tag:${SEVERITY_COLOR[a.severity]};`}
-          >
-            {a.severity}
-          </span>
-        ) : null}
-        <button
-          key="x"
-          class="cf-icon-btn"
-          onClick={() => (activeThreadId.value = null)}
-          title="Close"
-        >
-          ✕
-        </button>
-      </div>
-      <div key="body" class="cf-thread-body">
-        <Message
-          key="root"
-          role={a.author?.kind ?? "human"}
-          name={a.author?.displayName ?? "You"}
-          content={a.comment}
-        />
-        {(a.thread ?? []).map((m) => (
-          <Message
-            key={m.id}
-            role={m.role}
-            name={m.role === "agent" ? "Agent" : "You"}
-            content={m.content}
-          />
-        ))}
-      </div>
-      <div key="compose" class="cf-thread-compose">
-        <textarea
-          key="ta"
-          class="cf-textarea cf-textarea-sm"
-          placeholder="Reply…"
-          value={reply}
-          onInput={(e: Event) => setReply((e.target as HTMLTextAreaElement).value)}
-          onKeyDown={(e: KeyboardEvent) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") send();
-          }}
-        />
-        <div key="row" class="cf-thread-actions">
-          {a.status !== "resolved" ? (
-            <button
-              key="resolve"
-              class="cf-btn cf-btn-ghost"
-              onClick={() => api.resolveAnnotation(id, author.value.kind)}
-            >
-              Resolve
-            </button>
-          ) : (
-            <span key="resolved" class="cf-resolved-tag">✓ resolved</span>
-          )}
-          <button
-            key="send"
-            class="cf-btn cf-btn-primary"
-            disabled={!reply.trim()}
-            onClick={send}
-          >
-            Reply
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/Toolbar.tsx

@@ -1,116 +0,0 @@
-/**
- * Toolbar — mode + tool switches, annotation count, and a contextual
- * hint. Reads cross-cutting state from the `../store.js` signals and
- * commits multi-selections through `../picker.js`.
- */
-
-import type { ComponentChild } from "preact";
-
-import {
-  annotations,
-  feedbackTool,
-  hoverBox,
-  mode,
-  multiSelection,
-} from "../store.js";
-import { commitMultiSelection } from "../picker.js";
-
-export function hintFor(tool: string): string {
-  if (tool === "text") return "Select text on the page to annotate it.";
-  if (tool === "multi") return "Click elements to group them, then commit.";
-  return "Click any element to comment. Esc to exit.";
-}
-
-interface SegButtonProps {
-  label: string;
-  on: boolean;
-  onClick: () => void;
-}
-
-export function SegButton({ label, on, onClick }: SegButtonProps): ComponentChild {
-  return (
-    <button class={`cf-seg-btn${on ? " on" : ""}`} onClick={onClick}>
-      {label}
-    </button>
-  );
-}
-
-export function Toolbar(): ComponentChild {
-  const active = mode.value === "feedback";
-  const count = annotations.value.length;
-  const multi = multiSelection.value.length;
-
-  return (
-    <div key="toolbar" class="cf-toolbar">
-      <div key="head" class="cf-toolbar-head">
-        <span key="dot" class="cf-logo-dot" />
-        <span key="label">Annotations</span>
-        <span key="count" class="cf-count">{String(count)}</span>
-      </div>
-      <div key="modes" class="cf-seg">
-        <SegButton
-          key="View"
-          label="View"
-          on={mode.value === "view"}
-          onClick={() => {
-            mode.value = "view";
-            hoverBox.value = null;
-            multiSelection.value = [];
-          }}
-        />
-        <SegButton
-          key="Comment"
-          label="Comment"
-          on={active}
-          onClick={() => {
-            mode.value = "feedback";
-          }}
-        />
-      </div>
-      {active ? (
-        <div key="tools" class="cf-seg cf-tools">
-          <SegButton
-            key="Element"
-            label="Element"
-            on={feedbackTool.value === "element"}
-            onClick={() => {
-              feedbackTool.value = "element";
-              multiSelection.value = [];
-            }}
-          />
-          <SegButton
-            key="Text"
-            label="Text"
-            on={feedbackTool.value === "text"}
-            onClick={() => {
-              feedbackTool.value = "text";
-              multiSelection.value = [];
-            }}
-          />
-          <SegButton
-            key="Multi"
-            label="Multi"
-            on={feedbackTool.value === "multi"}
-            onClick={() => {
-              feedbackTool.value = "multi";
-            }}
-          />
-        </div>
-      ) : null}
-      {active && feedbackTool.value === "multi" && multi ? (
-        <button
-          key="commit"
-          class="cf-btn cf-btn-primary cf-commit"
-          onClick={commitMultiSelection}
-        >
-          {`Comment ${multi} element${multi === 1 ? "" : "s"}`}
-        </button>
-      ) : null}
-      {active ? (
-        <div key="hint" class="cf-hint">
-          {hintFor(feedbackTool.value)}
-        </div>
-      ) : null}
-    </div>
-  );
-}