@ifc-lite/viewer 1.17.6 → 1.18.0

package/src/components/viewer/annotations/AnnotationPin.tsx

@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Single annotation pin — a 14px circle anchored to a screen point.
+ *
+ * The dot itself is small; we wrap it in a 24×24 invisible hit-target
+ * so it stays comfortable on touch and doesn't fight pointer events
+ * on the surrounding canvas. The pin sits in the canvas overlay layer
+ * (`AnnotationLayer`) which positions it absolutely each frame.
+ */
+
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface AnnotationPinProps {
+  /** Index in the rendered list — 1-based. Shown inside the dot when ≤ 9. */
+  index: number;
+  /** Highlights the dot with the emerald ring used for selection across the viewer. */
+  selected?: boolean;
+  /** Tooltip preview when the user hovers (author + first ~40 chars of note). */
+  preview?: string;
+  /** Called when the dot is clicked. */
+  onClick?: () => void;
+  /** Called when the dot is right-clicked — used by the layer for "delete via menu". */
+  onContextMenu?: (e: React.MouseEvent) => void;
+  /** Visual variant. `draft` is a slightly washed-out pin used while the note input is open. */
+  variant?: 'idle' | 'draft';
+}
+
+export const AnnotationPin = forwardRef<HTMLButtonElement, AnnotationPinProps>(
+  function AnnotationPin({ index, selected, preview, onClick, onContextMenu, variant = 'idle' }, ref) {
+    // 1-character glyph: the index for ≤ 9, ellipsis otherwise. Keeps
+    // the pin readable at 14px without feeling crowded.
+    const glyph = index <= 9 ? String(index) : '·';
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        title={preview}
+        aria-label={preview ? `Annotation ${index}: ${preview}` : `Annotation ${index}`}
+        onClick={onClick}
+        onContextMenu={onContextMenu}
+        className={cn(
+          // 24×24 invisible hit-target around a 14px dot — touch comfort
+          // without bloating the visual.
+          'group relative inline-flex h-6 w-6 items-center justify-center',
+          // Keyboard focus ring uses the same emerald accent as selection.
+          'cursor-pointer outline-none rounded-full',
+          'focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        )}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            // Inner dot: 14px disc, amber accent, white glyph centered.
+            // Drop shadow grounds it against the rendered scene; without
+            // it the pin floats and reads as a UI bug.
+            'flex h-3.5 w-3.5 items-center justify-center rounded-full',
+            'text-[8px] font-mono font-bold leading-none text-white tabular-nums',
+            'shadow-[0_1px_4px_rgba(0,0,0,0.35),0_0_0_1px_rgba(0,0,0,0.15)]',
+            'transition-transform duration-150 ease-out',
+            'group-hover:scale-[1.18]',
+            // Idle pulse on first paint — drawn from the layer's
+            // animation-delay so a freshly committed pin announces
+            // itself once and then settles.
+            variant === 'idle' && 'annotation-pin-idle',
+            variant === 'draft' && 'opacity-70',
+          )}
+          style={{
+            backgroundColor: variant === 'draft' ? '#fbbf24' : '#f59e0b',
+          }}
+        >
+          {glyph}
+        </span>
+        {selected && (
+          <span
+            aria-hidden
+            // Selection ring — emerald, matches the existing
+            // "constructive" accent (Raw STEP nav, duplicate path).
+            // Sits one pixel outside the dot via `ring-offset`.
+            className="pointer-events-none absolute inset-[5px] rounded-full ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent"
+          />
+        )}
+      </button>
+    );
+  },
+);

package/src/components/viewer/annotations/AnnotationPopover.tsx

@@ -0,0 +1,296 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Annotation popover — appears next to a pin when the user clicks
+ * an existing annotation. Read mode shows the note + relative time
+ * + entity context; edit mode swaps in a textarea with Enter-to-save
+ * / Shift+Enter-newline / Esc-cancel semantics.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Pencil, Trash2, X, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { Annotation } from '@/store/slices/annotationsSlice';
+
+const MAX_NOTE_LEN = 2000;
+const SOFT_NOTE_LIMIT = 200;
+
+export interface AnnotationPopoverProps {
+  annotation: Annotation;
+  /** Anchor in canvas-relative pixel coordinates. */
+  anchorX: number;
+  anchorY: number;
+  /** Canvas dimensions for edge clamping (so the popover never falls off-screen). */
+  canvasWidth: number;
+  canvasHeight: number;
+  /** Resolved entity type, when the pin is anchored to a known IfcRoot. */
+  entityType?: string | null;
+  onSave: (note: string) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+const POPOVER_WIDTH = 280;
+const POPOVER_OFFSET_X = 16;
+
+function formatRelativeTime(timestamp: number): string {
+  const diff = Date.now() - timestamp;
+  const minute = 60_000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const week = 7 * day;
+  if (diff < minute) return 'just now';
+  if (diff < hour) return `${Math.floor(diff / minute)}m ago`;
+  if (diff < day) return `${Math.floor(diff / hour)}h ago`;
+  if (diff < week) return `${Math.floor(diff / day)}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function AnnotationPopover({
+  annotation,
+  anchorX,
+  anchorY,
+  canvasWidth,
+  canvasHeight,
+  entityType,
+  onSave,
+  onDelete,
+  onClose,
+}: AnnotationPopoverProps) {
+  const [editing, setEditing] = useState(annotation.note.length === 0);
+  const [draft, setDraft] = useState(annotation.note);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Reset editor state when the popover is reused for a different
+  // annotation. Without this, switching pins would carry the previous
+  // pin's draft into the new popover.
+  useEffect(() => {
+    setEditing(annotation.note.length === 0);
+    setDraft(annotation.note);
+  }, [annotation.id, annotation.note]);
+
+  // When the user enters edit mode, focus + select the textarea so
+  // typing replaces the existing body cleanly.
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, [editing]);
+
+  // Close on outside click. Listening at the document level keeps
+  // the popover predictable when the user mouses anywhere else.
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const node = containerRef.current;
+      if (!node) return;
+      if (node.contains(e.target as Node)) return;
+      // Don't close when the click landed on the same pin — the
+      // pin's onClick handler controls open/close itself.
+      const closestPin = (e.target as HTMLElement).closest?.('[data-annotation-pin-id]');
+      if (closestPin?.getAttribute('data-annotation-pin-id') === annotation.id) return;
+      onClose();
+    };
+    // Defer registration to next tick so the click that opened the
+    // popover doesn't immediately close it.
+    const id = window.setTimeout(() => {
+      document.addEventListener('mousedown', handler);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener('mousedown', handler);
+    };
+  }, [annotation.id, onClose]);
+
+  const handleSave = useCallback(() => {
+    onSave(draft);
+    setEditing(false);
+  }, [draft, onSave]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(annotation.note);
+    setEditing(false);
+    if (annotation.note.length === 0) {
+      // No saved body — user backed out of an edit on a freshly
+      // committed pin with no body. Close the popover entirely.
+      onClose();
+    }
+  }, [annotation.note, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleSave, handleCancel],
+  );
+
+  // Edge clamp the popover. Default: anchor to the right of the pin
+  // with a 16px gap; flip left when the right edge would clip.
+  const wantsLeft = anchorX + POPOVER_OFFSET_X + POPOVER_WIDTH > canvasWidth;
+  const left = wantsLeft
+    ? Math.max(8, anchorX - POPOVER_OFFSET_X - POPOVER_WIDTH)
+    : Math.min(anchorX + POPOVER_OFFSET_X, canvasWidth - POPOVER_WIDTH - 8);
+  const top = Math.min(Math.max(8, anchorY - 12), canvasHeight - 100);
+
+  const charCountVisible = editing && draft.length >= SOFT_NOTE_LIMIT;
+  const overSoftLimit = draft.length > SOFT_NOTE_LIMIT;
+  const overHardLimit = draft.length > MAX_NOTE_LEN;
+
+  return (
+    <div
+      ref={containerRef}
+      role="dialog"
+      aria-label="Annotation"
+      style={{ left, top, width: POPOVER_WIDTH }}
+      className={cn(
+        'absolute z-[60] pointer-events-auto',
+        'rounded-md border border-amber-300/60 dark:border-amber-700/40',
+        'bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md',
+        'shadow-[0_8px_32px_rgba(0,0,0,0.18)]',
+        'overflow-hidden',
+        'animate-in fade-in-0 zoom-in-95 duration-150',
+      )}
+    >
+      {/* Header — entity context + close. Amber accent strip on the
+          left signals this is an annotation surface. */}
+      <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-amber-50/40 dark:bg-amber-950/20">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="h-2 w-2 rounded-full bg-amber-500 shrink-0" aria-hidden />
+          <span className="font-mono text-[10px] uppercase tracking-wider text-amber-700 dark:text-amber-300 truncate">
+            {entityType ? entityType : 'Annotation'}
+            {annotation.entityExpressId !== null && (
+              <span className="ml-1 text-zinc-400 dark:text-zinc-500">
+                #{annotation.entityExpressId}
+              </span>
+            )}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5 p-0 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
+          onClick={onClose}
+          title="Close"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+
+      {/* Body */}
+      <div className="px-3 py-2.5">
+        {editing ? (
+          <>
+            <textarea
+              ref={textareaRef}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Note about this point…"
+              rows={4}
+              maxLength={MAX_NOTE_LEN + 100}
+              className={cn(
+                'w-full resize-none font-mono text-[11px] leading-relaxed',
+                'bg-zinc-50 dark:bg-zinc-900/60 text-zinc-800 dark:text-zinc-200',
+                'border border-zinc-200 dark:border-zinc-800 rounded-sm',
+                'px-2 py-1.5 outline-none focus:ring-1',
+                overHardLimit
+                  ? 'focus:ring-red-400 border-red-300 dark:border-red-700/60'
+                  : 'focus:ring-amber-400/50 focus:border-amber-300/60',
+              )}
+              spellCheck
+              autoCorrect="on"
+            />
+            <div className="mt-1.5 flex items-center justify-between gap-2 text-[10px] font-mono">
+              <span className="text-zinc-400 dark:text-zinc-500">
+                ⏎ save · ⇧⏎ newline · esc cancel
+              </span>
+              {charCountVisible && (
+                <span
+                  className={cn(
+                    'tabular-nums',
+                    overHardLimit
+                      ? 'text-red-500'
+                      : overSoftLimit
+                        ? 'text-amber-600 dark:text-amber-400'
+                        : 'text-zinc-400',
+                  )}
+                >
+                  {draft.length}/{MAX_NOTE_LEN}
+                </span>
+              )}
+            </div>
+            <div className="mt-2 flex items-center justify-end gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-[11px]"
+                onClick={handleCancel}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                className="h-7 px-2 text-[11px] bg-amber-500 hover:bg-amber-500/90 text-white"
+                onClick={handleSave}
+                disabled={overHardLimit}
+              >
+                <Check className="h-3 w-3 mr-1" />
+                Save
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            {annotation.note ? (
+              <p className="font-mono text-[11px] leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
+                {annotation.note}
+              </p>
+            ) : (
+              <p className="font-mono text-[11px] italic text-zinc-400 dark:text-zinc-500">
+                (no note — click the pen icon to add one)
+              </p>
+            )}
+            <div className="mt-2 pt-2 border-t border-zinc-200/60 dark:border-zinc-800/60 flex items-center justify-between gap-2">
+              <span className="text-[9.5px] font-mono uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+                {formatRelativeTime(annotation.updatedAt)}
+                {annotation.updatedAt !== annotation.createdAt && (
+                  <span className="ml-1">· edited</span>
+                )}
+              </span>
+              <div className="flex items-center gap-0.5">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 p-0 text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
+                  onClick={() => setEditing(true)}
+                  title="Edit note"
+                >
+                  <Pencil className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 p-0 text-zinc-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
+                  onClick={onDelete}
+                  title="Delete annotation"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/bcf/BCFTopicDetail.tsx

@@ -215,7 +215,7 @@ export function BCFTopicDetail({
                           <img
                             src={vp.snapshot}
                             alt="Viewpoint"
-                            className="w-full max-h-48 object-contain bg-muted cursor-pointer hover:opacity-90 transition-opacity"
+                            className="w-full object-contain cursor-pointer hover:opacity-90 transition-opacity"
                             onClick={() => onActivateViewpoint(vp)}
                           />
                         ) : (

package/src/components/viewer/lists/ListPanel.tsx

@@ -67,34 +67,27 @@ export function ListPanel({ onClose }: ListPanelProps) {
 
   const importInputRef = React.useRef<HTMLInputElement>(null);
 
-  // Collect all available data providers for multi-model support
-  const allProviders = useMemo(() => {
-    const providers: ListDataProvider[] = [];
+  // Build the {modelId, provider} pairs in a single pass so the two
+  // arrays can never drift out of alignment (skipping a model without
+  // an ifcDataStore must not shift every later model's provider index).
+  const modelProviderPairs = useMemo(() => {
+    const pairs: Array<{ modelId: string; provider: ListDataProvider }> = [];
     if (models.size > 0) {
-      for (const [, model] of models) {
-        providers.push(createListDataProvider(model.ifcDataStore));
+      for (const [modelId, model] of models) {
+        // Skip native-metadata models — they don't have a parsed
+        // IfcDataStore, so the list provider can't query them.
+        if (!model.ifcDataStore) continue;
+        pairs.push({ modelId, provider: createListDataProvider(model.ifcDataStore) });
       }
     } else if (ifcDataStore) {
-      providers.push(createListDataProvider(ifcDataStore));
+      pairs.push({ modelId: 'default', provider: createListDataProvider(ifcDataStore) });
     }
-    return providers;
+    return pairs;
   }, [models, ifcDataStore]);
 
-  const hasData = allProviders.length > 0;
+  const allProviders = useMemo(() => modelProviderPairs.map((p) => p.provider), [modelProviderPairs]);
 
-  // Build a stable map of modelId → provider index for execution
-  const modelProviderPairs = useMemo(() => {
-    const pairs: Array<{ modelId: string; provider: ListDataProvider }> = [];
-    if (models.size > 0) {
-      let i = 0;
-      for (const [modelId] of models) {
-        pairs.push({ modelId, provider: allProviders[i++] });
-      }
-    } else if (allProviders.length > 0) {
-      pairs.push({ modelId: 'default', provider: allProviders[0] });
-    }
-    return pairs;
-  }, [models, allProviders]);
+  const hasData = allProviders.length > 0;
 
   const handleExecuteList = useCallback((definition: ListDefinition) => {
     if (!hasData) return;