@fabrika/canvas-kernel 0.1.44

package/src/client/AnnotationEditor.tsx

@@ -0,0 +1,320 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { autoResizeTextarea, hostAcceptsUploads } from "./utils";
+import { useCanvasHost, type CanvasHost } from "./hostContext";
+
+interface AnnotationEditorProps {
+  note: string;
+  onNoteChange: (note: string) => void;
+  images: string[];
+  onAddImage: (path: string) => void;
+  onRemoveImage: (path: string) => void;
+  sessionId: string;
+
+  placeholder?: string;
+  autoFocus?: boolean;
+  autoResize?: boolean;
+  readOnly?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
+  textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null>;
+  textareaClassName?: string;
+  textareaStyle?: React.CSSProperties;
+  minHeight?: number;
+  /** "always" (default), "on-focus" (sidebar), or "none" (popover — use openFilePickerRef) */
+  attachButton?: "always" | "on-focus" | "none";
+  /** Parent can store the open-file-picker function for external trigger */
+  openFilePickerRef?: React.MutableRefObject<(() => void) | null>;
+}
+
+export function imageToUrl(path: string): string {
+  // Shared-mode uploads come back from the worker as absolute URLs under
+  // /s/:shareId/uploads/... — return them as-is. Local daemon uploads are
+  // stored as absolute filesystem paths; translate to the served URL.
+  if (path.startsWith("/s/") || path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+  const filename = path.split("/").pop();
+  return `/api/uploads/${filename}`;
+}
+
+async function uploadImage(host: CanvasHost, file: File): Promise<string | null> {
+  const endpoint = host.uploadUrl;
+  if (!endpoint) return null;
+  const formData = new FormData();
+  formData.append("image", file);
+  try {
+    const resp = await fetch(endpoint(), { method: "POST", body: formData });
+    const data = await resp.json();
+    // Local daemon returns { path }; worker returns { url }. Normalise to
+    // a single string that `imageToUrl` can resolve.
+    if (host.isShared) return data.url || null;
+    return data.path || null;
+  } catch {
+    return null;
+  }
+}
+
+export function AnnotationEditor({
+  note, onNoteChange, images, onAddImage, onRemoveImage, sessionId,
+  placeholder = "Add your note...", autoFocus = false, autoResize = false,
+  readOnly = false, onKeyDown, onTextareaClick, textareaRef: externalRef,
+  textareaClassName, textareaStyle, minHeight,
+  attachButton = "always", openFilePickerRef,
+}: AnnotationEditorProps) {
+  const host = useCanvasHost();
+  // Button, paste and drop all end in the same upload; a host with no endpoint
+  // for it gets none of them rather than three ways to fail silently.
+  const canAttach = !readOnly && hostAcceptsUploads(host);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const dragCounter = useRef(0);
+  const internalRef = useRef<HTMLTextAreaElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const openFilePicker = useCallback(() => fileInputRef.current?.click(), []);
+
+  // Expose file picker to parent
+  if (openFilePickerRef) openFilePickerRef.current = openFilePicker;
+
+  const setRef = useCallback((el: HTMLTextAreaElement | null) => {
+    internalRef.current = el;
+    if (externalRef) externalRef.current = el;
+    if (el && autoResize) autoResizeTextarea(el, minHeight);
+  }, [externalRef, autoResize, minHeight]);
+
+  useEffect(() => {
+    if (autoFocus && internalRef.current) {
+      const ta = internalRef.current;
+      ta.focus();
+      if (ta.value) ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, [autoFocus]);
+
+  const doUpload = useCallback(async (file: File) => {
+    if (!file.type.startsWith("image/")) return;
+    setIsUploading(true);
+    try {
+      const path = await uploadImage(host, file);
+      if (path) onAddImage(path);
+    } finally {
+      setIsUploading(false);
+    }
+  }, [host, onAddImage]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    for (const item of e.clipboardData?.items ?? []) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) doUpload(file);
+        return;
+      }
+    }
+  }, [doUpload]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragCounter.current++;
+    if (dragCounter.current === 1) setIsDragging(true);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragCounter.current--;
+    if (dragCounter.current === 0) setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragCounter.current = 0;
+    setIsDragging(false);
+    for (const file of e.dataTransfer?.files ?? []) {
+      if (file.type.startsWith("image/")) doUpload(file);
+    }
+  }, [doUpload]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onNoteChange(e.currentTarget.value);
+    if (autoResize) {
+      e.currentTarget.style.height = "auto";
+      e.currentTarget.style.height = (minHeight ? Math.max(minHeight, e.currentTarget.scrollHeight) : e.currentTarget.scrollHeight) + "px";
+    }
+  }, [onNoteChange, autoResize, minHeight]);
+
+  const defaultClassName = "w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none";
+  const defaultStyle: React.CSSProperties = {
+    width: "100%", background: "transparent", border: "none",
+    color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
+    fontSize: "13px", lineHeight: "1.5", outline: "none",
+    ...(autoResize ? { resize: "none" as const, overflow: "hidden" } : { resize: "vertical" as const }),
+  };
+
+  const showButton = canAttach && (
+    attachButton === "always" ||
+    (attachButton === "on-focus" && isFocused)
+  );
+
+  return (
+    <div
+      style={{ position: "relative" }}
+      onDragEnter={canAttach ? handleDragEnter : undefined}
+      onDragOver={canAttach ? handleDragOver : undefined}
+      onDragLeave={canAttach ? handleDragLeave : undefined}
+      onDrop={canAttach ? handleDrop : undefined}
+    >
+      <textarea
+        ref={setRef}
+        value={note}
+        onChange={readOnly ? undefined : handleChange}
+        onPaste={canAttach ? handlePaste : undefined}
+        onKeyDown={onKeyDown}
+        onClick={onTextareaClick}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => {
+          // Delay so click on attach button registers before hiding
+          setTimeout(() => setIsFocused(false), 150);
+        }}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        className={textareaClassName ?? defaultClassName}
+        style={textareaStyle ?? defaultStyle}
+        rows={autoResize ? 1 : undefined}
+      />
+
+      {/* Hidden file input — always rendered for paste/drop + external trigger */}
+      {canAttach && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const files = e.currentTarget.files;
+            if (files) for (const f of files) doUpload(f);
+            e.currentTarget.value = "";
+          }}
+        />
+      )}
+
+      {/* Image thumbnails + inline attach button */}
+      {(images.length > 0 || showButton) && (
+        <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", marginTop: "6px", alignItems: "center" }}>
+          {images.map((img) => (
+            <div
+              key={img}
+              style={{
+                position: "relative", width: "56px", height: "56px",
+                borderRadius: "6px", overflow: "hidden",
+                border: "1px solid var(--color-border-subtle)",
+                flexShrink: 0,
+              }}
+            >
+              <img
+                src={imageToUrl(img)}
+                alt=""
+                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+              />
+              {!readOnly && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onRemoveImage(img); }}
+                  style={{
+                    position: "absolute", top: "2px", right: "2px",
+                    width: "16px", height: "16px", borderRadius: "50%",
+                    background: "rgba(0,0,0,0.6)", color: "white",
+                    border: "none", cursor: "pointer", fontSize: "11px",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    lineHeight: 1, padding: 0,
+                  }}
+                  title="Remove image"
+                >
+                  &times;
+                </button>
+              )}
+            </div>
+          ))}
+          {showButton && <AttachButton onClick={openFilePicker} />}
+        </div>
+      )}
+
+      {isUploading && (
+        <div style={{
+          fontSize: "11px", color: "var(--color-text-tertiary)",
+          fontFamily: "'Inter', sans-serif", marginTop: "4px",
+        }}>
+          Uploading...
+        </div>
+      )}
+
+      {isDragging && (
+        <div style={{
+          position: "absolute", inset: 0, display: "flex",
+          alignItems: "center", justifyContent: "center",
+          background: "var(--color-highlight-bg)", opacity: 0.9,
+          border: "2px dashed var(--color-highlight-border)",
+          borderRadius: "6px", zIndex: 10, pointerEvents: "none",
+          fontSize: "12px", fontFamily: "'Inter', sans-serif",
+          color: "var(--color-text-secondary)",
+        }}>
+          Drop image
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Small attach-image button — reusable in editor and popover button bar */
+export function AttachButton({ onClick, size = 16 }: { onClick: () => void; size?: number }) {
+  return (
+    <button
+      onClick={(e) => { e.stopPropagation(); onClick(); }}
+      style={{
+        width: `${size * 2}px`, height: `${size * 2}px`, borderRadius: "6px",
+        border: "none",
+        background: "transparent", cursor: "pointer",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        color: "var(--color-text-tertiary)", flexShrink: 0,
+        transition: "color 0.15s",
+      }}
+      title="Attach image"
+      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--color-text-secondary)"; }}
+      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--color-text-tertiary)"; }}
+    >
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <polyline points="21 15 16 10 5 21" />
+      </svg>
+    </button>
+  );
+}
+
+/** Read-only image thumbnails for display in read-only annotations */
+export function ImageThumbnails({ images }: { images: string[] }) {
+  if (!images.length) return null;
+  return (
+    <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", marginTop: "6px" }}>
+      {images.map((img) => (
+        <div
+          key={img}
+          style={{
+            width: "56px", height: "56px", borderRadius: "6px",
+            overflow: "hidden", border: "1px solid var(--color-border-subtle)",
+            flexShrink: 0,
+          }}
+        >
+          <img
+            src={imageToUrl(img)}
+            alt=""
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/client/AnnotationList.tsx

@@ -0,0 +1,190 @@
+import { useContext, useEffect, useRef } from "react";
+import { useAnnotations } from "./AnnotationProvider";
+import type { Annotation } from "./AnnotationProvider";
+import { SessionContext } from "#canvas/runtime";
+import { setMarkActive } from "./highlightRange";
+import { describeSnippet } from "./annotationDom";
+import { AnnotationEditor, ImageThumbnails } from "./AnnotationEditor";
+
+/**
+ * The annotations a host has collected, as a list of editable cards.
+ *
+ * Flat by design: what an annotation belongs to — a file, a screen, a section —
+ * is the host's taxonomy, so the host slices the annotations into groups and
+ * renders one list per group. The card itself is the same everywhere.
+ */
+
+/** The one line a card shows for what its annotation points at. */
+function snippetLabel(snippet: string): string {
+  const label = describeSnippet(snippet);
+  return label.length > 80 ? label.slice(0, 80) + "..." : label;
+}
+
+export interface AnnotationListProps {
+  annotations: Annotation[];
+  /** Frozen view: notes read as text, nothing is deletable, and the list does
+   *  not chase the active card. */
+  readOnly?: boolean;
+  /** A card just became the active one — hosts reveal what it points at here. */
+  onSelect?: (ann: Annotation) => void;
+  /** Backs the reveal button. Omit it and no button is drawn. */
+  onReveal?: (ann: Annotation) => void;
+  /** Remote annotations ticked for submission. Pass both or neither — a host
+   *  with no notion of remote annotations passes neither and gets none of the
+   *  remote affordances. */
+  includedRemoteIds?: Set<string>;
+  onToggleRemoteId?: (id: string) => void;
+}
+
+export function AnnotationList({
+  annotations, readOnly = false, onSelect, onReveal,
+  includedRemoteIds, onToggleRemoteId,
+}: AnnotationListProps) {
+  const {
+    updateAnnotation, removeAnnotation,
+    addAnnotationImage, removeAnnotationImage,
+    activeAnnotationId, setActiveAnnotationId,
+  } = useAnnotations();
+  const sessionId = useContext(SessionContext);
+  const annRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // Follow the active annotation, which is as often picked in the document as
+  // in this list.
+  useEffect(() => {
+    if (readOnly || !activeAnnotationId) return;
+    const el = annRefs.current.get(activeAnnotationId);
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [activeAnnotationId, readOnly]);
+
+  // Hover on a card → highlight the mark it points at.
+  const handleMouseEnter = (annId: string) => {
+    setActiveAnnotationId(annId);
+    setMarkActive(annId, true);
+  };
+
+  const handleMouseLeave = (annId: string) => {
+    setActiveAnnotationId(null);
+    setMarkActive(annId, false);
+  };
+
+  const handleClick = (ann: Annotation) => {
+    if (ann.id === activeAnnotationId) {
+      setActiveAnnotationId(null);
+      return;
+    }
+    setActiveAnnotationId(ann.id);
+    onSelect?.(ann);
+  };
+
+  // Remote is only a concept for hosts that handle it.
+  const handlesRemote = !!includedRemoteIds && !!onToggleRemoteId;
+
+  const renderAnnotation = (ann: Annotation) => {
+    const isRemote = handlesRemote && ann.source === "remote";
+    return (
+      <div
+        key={ann.id}
+        ref={(el) => { if (el) annRefs.current.set(ann.id, el); else annRefs.current.delete(ann.id); }}
+        className={`group/ann relative px-3 py-2.5 transition-colors duration-150 ${readOnly ? "cursor-pointer " : ""}${
+          activeAnnotationId === ann.id
+            ? "bg-highlight-selected"
+            : isRemote
+              ? "bg-accent-purple-muted/30 hover:bg-accent-purple-muted/50"
+              : "odd:bg-bg-elevated-half hover:bg-bg-input"
+        }`}
+        onMouseEnter={() => handleMouseEnter(ann.id)}
+        onMouseLeave={() => handleMouseLeave(ann.id)}
+        onClick={() => handleClick(ann)}
+      >
+        {isRemote && ann.author && (
+          <div className="flex items-center gap-1.5 mb-1.5">
+            <input
+              type="checkbox"
+              checked={includedRemoteIds.has(ann.id)}
+              onChange={(e) => { e.stopPropagation(); onToggleRemoteId(ann.id); }}
+              onClick={(e) => e.stopPropagation()}
+              className="accent-accent-purple flex-shrink-0"
+              title="Include in submission"
+            />
+            <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-accent-purple text-white text-[9px] font-medium uppercase">
+              {ann.author.name.charAt(0)}
+            </span>
+            <span className="text-[11px] font-medium text-accent-purple font-body">
+              {ann.author.name}
+            </span>
+            <span className="text-[10px] text-text-tertiary font-body uppercase tracking-widest">
+              Remote
+            </span>
+          </div>
+        )}
+
+        {/* Snippet quote */}
+        <div className="text-[11px] text-text-tertiary italic line-clamp-2 mb-1.5 leading-snug font-body border-l-2 border-border-medium pl-2">
+          {snippetLabel(ann.snippet)}
+        </div>
+
+        {/* Editable note + images — only the reader's own live annotations. */}
+        {readOnly ? (
+          <>
+            {ann.note.trim() && (
+              <div className="text-[13px] font-body text-text-primary leading-relaxed">
+                {ann.note}
+              </div>
+            )}
+            <ImageThumbnails images={ann.images || []} />
+          </>
+        ) : isRemote ? (
+          <div className="text-[13px] font-body text-text-primary leading-relaxed whitespace-pre-wrap">
+            {ann.note}
+          </div>
+        ) : (
+          <div onClick={(e) => e.stopPropagation()}>
+            <AnnotationEditor
+              note={ann.note}
+              onNoteChange={(note) => updateAnnotation(ann.id, note)}
+              images={ann.images || []}
+              onAddImage={(path) => addAnnotationImage(ann.id, path)}
+              onRemoveImage={(path) => removeAnnotationImage(ann.id, path)}
+              sessionId={sessionId}
+              autoResize
+              minHeight={20}
+              textareaClassName="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
+              textareaStyle={{ height: "auto", overflow: "hidden" }}
+              placeholder="Add your note..."
+              attachButton="on-focus"
+            />
+          </div>
+        )}
+
+        {/* Actions — top right on hover */}
+        <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/ann:opacity-100 transition-opacity duration-100 flex items-center gap-0.5">
+          {onReveal && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onReveal(ann); }}
+              className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-input transition-colors"
+              title="Scroll to annotation"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="3" /><path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
+              </svg>
+            </button>
+          )}
+          {!readOnly && !isRemote && (
+            <button
+              onClick={(e) => { e.stopPropagation(); removeAnnotation(ann.id); }}
+              className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-accent-red hover:bg-accent-red-muted transition-colors"
+              title="Delete annotation"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="3 6 5 6 21 6"/>
+                <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return <>{annotations.map(renderAnnotation)}</>;
+}