@fabrika/canvas-kernel 0.1.45 → 0.2.0

package/src/client/AnnotationEditor.tsx

@@ -1,320 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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)}</>;
-}