@opengeni/react 3.7.0-canary.7 → 3.8.0-canary.1

package/dist/timeline-annotation-markers-DRSTLEM6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/timeline-annotation-markers.tsx"],"sourcesContent":["import type { DraftTimelineAnnotation } from \"@opengeni/sdk\";\nimport { useLayoutEffect, useState, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport {\n  annotationBoxIntersects,\n  annotationViewportBox,\n  layoutAnnotationBadges,\n  type AnnotationBadgeAnchor,\n  type AnnotationBox,\n} from \"./timeline-annotation-layout\";\nimport {\n  annotationDisplayOrdinal,\n  annotationHasNote,\n  annotatableText,\n  buildQuoteRange,\n  cssEscapeAttribute,\n  matchingQuoteInSource,\n  occurrenceOffsets,\n} from \"./timeline-annotation-shared\";\n\nfunction lastVisibleRect(range: Range): DOMRect | null {\n  try {\n    const rects = range.getClientRects();\n    for (let index = rects.length - 1; index >= 0; index--) {\n      const rect = rects.item(index);\n      if (rect && (rect.width > 0 || rect.height > 0)) return rect;\n    }\n  } catch {\n    // jsdom ranges may omit client rects.\n  }\n  try {\n    const bounding = range.getBoundingClientRect();\n    if (bounding.width > 0 || bounding.height > 0) return bounding;\n  } catch {\n    // jsdom ranges may omit layout geometry.\n  }\n  return null;\n}\n\nfunction occurrenceForAnnotation(\n  sourceEl: HTMLElement,\n  annotation: DraftTimelineAnnotation,\n): number {\n  const { text } = annotatableText(sourceEl);\n  const quote = matchingQuoteInSource(text, annotation.quote) ?? annotation.quote;\n  const offsets = occurrenceOffsets(text, quote);\n  if (offsets.length <= 1) return 0;\n  let best = 0;\n  let bestDistance = Number.POSITIVE_INFINITY;\n  offsets.forEach((offset, index) => {\n    const distance = Math.abs(offset - annotation.source.startOffset);\n    if (distance < bestDistance) {\n      best = index;\n      bestDistance = distance;\n    }\n  });\n  return best;\n}\n\nfunction timelineScroller(root: HTMLElement): HTMLElement {\n  if (root.matches(\"[data-og-timeline-scroller]\")) return root;\n  const nested = root.querySelector(\"[data-og-timeline-scroller]\");\n  return nested instanceof HTMLElement ? nested : root;\n}\n\nfunction currentAnnotationViewport(root: HTMLElement): AnnotationBox {\n  const scroller = timelineScroller(root);\n  const rect = scroller.getBoundingClientRect();\n  const scrollerBox = {\n    left: rect.left,\n    right: rect.right,\n    top: rect.top,\n    bottom: rect.bottom,\n  } satisfies AnnotationBox;\n  return annotationViewportBox(window.innerWidth || 1024, window.innerHeight || 768, scrollerBox);\n}\n\nfunction sourceInTimeline(root: HTMLElement, eventId: string): HTMLElement | null {\n  const source = root.querySelector(\n    `[data-og-annotation-source-key=\"${cssEscapeAttribute(eventId)}\"]`,\n  );\n  return source instanceof HTMLElement ? source : null;\n}\n\nfunction collectMarkers(\n  root: HTMLElement | null,\n  annotations: readonly DraftTimelineAnnotation[],\n): AnnotationBadgeAnchor[] {\n  if (!root) return [];\n  const viewport = currentAnnotationViewport(root);\n  const next: AnnotationBadgeAnchor[] = [];\n  for (const [index, annotation] of annotations.entries()) {\n    const source = sourceInTimeline(root, annotation.source.eventId);\n    if (!source) continue;\n    const quote =\n      matchingQuoteInSource(annotatableText(source).text, annotation.quote) ?? annotation.quote;\n    const range = buildQuoteRange(source, quote, occurrenceForAnnotation(source, annotation));\n    if (!range) continue;\n    const rect = lastVisibleRect(range);\n    if (!rect) continue;\n    if (\n      !annotationBoxIntersects(\n        { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom },\n        viewport,\n      )\n    ) {\n      continue;\n    }\n    next.push({\n      id: annotation.id,\n      ordinal: annotationDisplayOrdinal(annotation, index),\n      left: rect.right,\n      top: rect.top,\n      incomplete: !annotationHasNote(annotation.note),\n    });\n  }\n  return layoutAnnotationBadges(next, viewport);\n}\n\nexport function TimelineAnnotationMarkers({\n  annotations,\n  onSelect,\n  rootRef,\n}: {\n  annotations: readonly DraftTimelineAnnotation[];\n  onSelect?: ((id: string) => void) | undefined;\n  rootRef: RefObject<HTMLElement | null>;\n}) {\n  const [markers, setMarkers] = useState<AnnotationBadgeAnchor[]>([]);\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root || annotations.length === 0) {\n      setMarkers([]);\n      return;\n    }\n    const update = () => setMarkers(collectMarkers(root, annotations));\n    update();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    const observer = typeof ResizeObserver === \"function\" ? new ResizeObserver(update) : null;\n    observer?.observe(root);\n    for (const annotation of annotations) {\n      const source = sourceInTimeline(root, annotation.source.eventId);\n      if (source) observer?.observe(source);\n    }\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      observer?.disconnect();\n    };\n  }, [annotations, rootRef]);\n\n  if (markers.length === 0 || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div className=\"og-root pointer-events-none fixed inset-0 z-[35]\">\n      {markers.map((marker) => (\n        <button\n          key={marker.id}\n          type=\"button\"\n          data-og-annotation-badge=\"\"\n          data-og-annotation-badge-ordinal={marker.ordinal}\n          style={{ left: marker.left, top: marker.top, zIndex: marker.ordinal }}\n          className={cn(\n            \"pointer-events-auto absolute flex h-4 min-w-4 -translate-x-1/2 -translate-y-[110%] items-center justify-center rounded-full bg-og-accent px-0.5 text-[10px] font-semibold tabular-nums text-white shadow-sm outline-hidden select-none after:absolute after:-inset-2 after:content-[''] focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:after:-inset-2.5\",\n            marker.incomplete && \"ring-1 ring-og-accent-fg/35\",\n          )}\n          aria-label={`Annotation ${marker.ordinal}`}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            onSelect?.(marker.id);\n          }}\n        >\n          {marker.ordinal}\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n}\n\nexport default TimelineAnnotationMarkers;\n"],"mappings":"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","names":[]}

package/dist/timeline-annotation-selection-IHLUGVND.js

@@ -0,0 +1,236 @@
+import {
+  clipRangeToSource,
+  matchingQuoteInSource,
+  occurrenceOffsets,
+  quoteOccurrenceIndex,
+  truncateAnnotationQuote,
+  visibleClientRect
+} from "./chunk-NOSYBS2D.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-VZTQ73XT.js";
+
+// src/components/timeline-annotation-selection.tsx
+import { QuoteIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CONTROL_SELECTOR = "button,input,textarea,select,summary,[contenteditable='true']";
+var SOURCE_CONTEXT_BYTES = 160;
+var MAX_QUOTE_BYTES = 16 * 1024;
+var POPOVER_WIDTH = 280;
+var POPOVER_HEIGHT = 64;
+function utf8Prefix(value, maxBytes) {
+  let output = "";
+  let bytes = 0;
+  for (const character of value) {
+    const next = new TextEncoder().encode(character).byteLength;
+    if (bytes + next > maxBytes) break;
+    output += character;
+    bytes += next;
+  }
+  return output;
+}
+function utf8Suffix(value, maxBytes) {
+  let output = "";
+  let bytes = 0;
+  for (const character of [...value].reverse()) {
+    const next = new TextEncoder().encode(character).byteLength;
+    if (bytes + next > maxBytes) break;
+    output = character + output;
+    bytes += next;
+  }
+  return output;
+}
+function selectionElement(node) {
+  return node instanceof Element ? node : node?.parentElement ?? null;
+}
+function containingSource(node) {
+  const element = selectionElement(node);
+  const source = element?.closest("[data-og-annotation-source-key]");
+  return source instanceof HTMLElement ? source : null;
+}
+function resolveSourceBoundary(range, root) {
+  const start = containingSource(range.startContainer);
+  const end = containingSource(range.endContainer);
+  if (start && end && start !== end) return null;
+  const boundary = start ?? end;
+  if (!boundary || !root.contains(boundary)) return null;
+  return boundary;
+}
+function isWhollyInsideControl(range, boundary) {
+  const start = selectionElement(range.startContainer)?.closest(CONTROL_SELECTOR);
+  const end = selectionElement(range.endContainer)?.closest(CONTROL_SELECTOR);
+  return start instanceof Element && start === end && boundary.contains(start) && start !== boundary;
+}
+function annotationId() {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+  return `annotation-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function popoverPosition(rect) {
+  const half = POPOVER_WIDTH / 2;
+  const left = clamp(rect.left + rect.width / 2, 12 + half, window.innerWidth - 12 - half);
+  const preferBelow = rect.bottom + 8 + POPOVER_HEIGHT <= window.innerHeight - 12;
+  const top = preferBelow ? rect.bottom + 8 : Math.max(12, rect.top - POPOVER_HEIGHT - 8);
+  return { left, top };
+}
+function buildCandidate(root, sources, keyboard) {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount !== 1 || selection.isCollapsed) return null;
+  const range = selection.getRangeAt(0);
+  const startBoundary = resolveSourceBoundary(range, root);
+  if (!startBoundary) return null;
+  if (isWhollyInsideControl(range, startBoundary)) return null;
+  const clipped = clipRangeToSource(range, startBoundary);
+  if (!clipped) return null;
+  const sourceKey = startBoundary.dataset.ogAnnotationSourceKey;
+  const source = sourceKey ? sources.get(sourceKey) : void 0;
+  const rawQuote = clipped.toString();
+  const quote = (source ? matchingQuoteInSource(source.text, rawQuote) : null) ?? rawQuote;
+  if (!source || quote.trim().length === 0 || new TextEncoder().encode(quote).byteLength > MAX_QUOTE_BYTES) {
+    return null;
+  }
+  const sourceOffsets = occurrenceOffsets(source.text, quote);
+  if (sourceOffsets.length === 0) return null;
+  const occurrence = quoteOccurrenceIndex(startBoundary, clipped, quote);
+  const startOffset = sourceOffsets[Math.min(occurrence, sourceOffsets.length - 1)];
+  const endOffset = startOffset + quote.length;
+  const rect = visibleClientRect(range) ?? visibleClientRect(clipped);
+  if (!rect) return null;
+  const position = popoverPosition(rect);
+  return {
+    annotation: {
+      id: annotationId(),
+      quote,
+      note: "",
+      source: {
+        kind: source.kind,
+        eventId: source.eventId,
+        eventType: source.eventType,
+        sequence: source.sequence,
+        turnId: source.turnId,
+        startOffset,
+        endOffset,
+        contextBefore: utf8Suffix(source.text.slice(0, startOffset), SOURCE_CONTEXT_BYTES),
+        contextAfter: utf8Prefix(source.text.slice(endOffset), SOURCE_CONTEXT_BYTES),
+        ...source.label ? { label: source.label } : {}
+      }
+    },
+    left: position.left,
+    top: position.top,
+    keyboard
+  };
+}
+function TimelineAnnotationSelection({
+  rootRef,
+  sources,
+  onAnnotate
+}) {
+  const [candidate, setCandidate] = useState(null);
+  const buttonRef = useRef(null);
+  const pointerOriginRef = useRef("unset");
+  const portalStyle = usePortalTokenStyle(rootRef.current);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !onAnnotate) {
+      setCandidate(null);
+      return;
+    }
+    const update = (keyboard) => {
+      setCandidate(buildCandidate(root, sources, keyboard));
+    };
+    const onRootPointerUp = (event) => {
+      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) return;
+      if (pointerOriginRef.current === "outside") return;
+      window.setTimeout(() => update(false), 0);
+    };
+    const onDocumentPointerUp = (event) => {
+      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) return;
+      const startedInRoot = pointerOriginRef.current === "inside";
+      pointerOriginRef.current = "unset";
+      if (!startedInRoot) return;
+      window.setTimeout(() => update(false), 0);
+    };
+    const onKeyUp = (event) => {
+      if (event.key === "Escape") {
+        setCandidate(null);
+        return;
+      }
+      window.setTimeout(() => update(true), 0);
+    };
+    const onPointerDown = (event) => {
+      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) {
+        event.preventDefault();
+        return;
+      }
+      pointerOriginRef.current = event.target instanceof Node && root.contains(event.target) ? "inside" : "outside";
+      setCandidate(null);
+    };
+    const onDocumentKeyDown = (event) => {
+      if (event.key === "Escape") setCandidate(null);
+    };
+    const onSelectionChange = () => {
+      if (buttonRef.current && document.activeElement === buttonRef.current) return;
+      const selection = document.getSelection();
+      if (!selection || selection.isCollapsed) setCandidate(null);
+    };
+    root.addEventListener("pointerup", onRootPointerUp);
+    root.addEventListener("keyup", onKeyUp);
+    document.addEventListener("pointerup", onDocumentPointerUp);
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onDocumentKeyDown);
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      root.removeEventListener("pointerup", onRootPointerUp);
+      root.removeEventListener("keyup", onKeyUp);
+      document.removeEventListener("pointerup", onDocumentPointerUp);
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, [onAnnotate, rootRef, sources]);
+  useEffect(() => {
+    if (candidate?.keyboard) buttonRef.current?.focus();
+  }, [candidate]);
+  if (!candidate || !onAnnotate || typeof document === "undefined") return null;
+  const preview = truncateAnnotationQuote(candidate.annotation.quote, 72);
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        "data-og-annotation-popover": "",
+        style: { left: candidate.left, top: candidate.top, ...portalStyle },
+        className: "og-root fixed z-[80] flex max-w-[min(18rem,calc(100vw-1.5rem))] -translate-x-1/2 items-start gap-2 rounded-2xl border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm font-medium text-og-fg shadow-xl outline-hidden transition hover:border-og-accent/40 hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]",
+        "aria-label": `Add a note about \u201C${preview}\u201D`,
+        title: candidate.annotation.quote,
+        onPointerDown: (event) => event.preventDefault(),
+        onClick: () => {
+          onAnnotate(candidate.annotation);
+          document.getSelection()?.removeAllRanges();
+          setCandidate(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(QuoteIcon, { className: "mt-0.5 size-3.5 shrink-0 text-og-accent", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 text-left", children: [
+            /* @__PURE__ */ jsx("span", { className: "block leading-5", children: "Add note" }),
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-og-xs font-normal text-og-fg-muted", children: preview })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var timeline_annotation_selection_default = TimelineAnnotationSelection;
+export {
+  TimelineAnnotationSelection,
+  timeline_annotation_selection_default as default
+};
+//# sourceMappingURL=timeline-annotation-selection-IHLUGVND.js.map

package/dist/timeline-annotation-selection-IHLUGVND.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/timeline-annotation-selection.tsx"],"sourcesContent":["import type { DraftTimelineAnnotation } from \"@opengeni/sdk\";\nimport { QuoteIcon } from \"lucide-react\";\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalTokenStyle } from \"../lib/use-portal-token-style\";\nimport type { TimelineAnnotationSourceDescriptor } from \"../timeline\";\nimport {\n  clipRangeToSource,\n  matchingQuoteInSource,\n  occurrenceOffsets,\n  quoteOccurrenceIndex,\n  truncateAnnotationQuote,\n  visibleClientRect,\n} from \"./timeline-annotation-shared\";\n\ntype SelectionCandidate = {\n  annotation: DraftTimelineAnnotation;\n  left: number;\n  top: number;\n  keyboard: boolean;\n};\n\nconst CONTROL_SELECTOR = \"button,input,textarea,select,summary,[contenteditable='true']\";\nconst SOURCE_CONTEXT_BYTES = 160;\nconst MAX_QUOTE_BYTES = 16 * 1024;\nconst POPOVER_WIDTH = 280;\nconst POPOVER_HEIGHT = 64;\n\nfunction utf8Prefix(value: string, maxBytes: number): string {\n  let output = \"\";\n  let bytes = 0;\n  for (const character of value) {\n    const next = new TextEncoder().encode(character).byteLength;\n    if (bytes + next > maxBytes) break;\n    output += character;\n    bytes += next;\n  }\n  return output;\n}\n\nfunction utf8Suffix(value: string, maxBytes: number): string {\n  let output = \"\";\n  let bytes = 0;\n  for (const character of [...value].reverse()) {\n    const next = new TextEncoder().encode(character).byteLength;\n    if (bytes + next > maxBytes) break;\n    output = character + output;\n    bytes += next;\n  }\n  return output;\n}\n\nfunction selectionElement(node: Node | null): Element | null {\n  return node instanceof Element ? node : (node?.parentElement ?? null);\n}\n\nfunction containingSource(node: Node | null): HTMLElement | null {\n  const element = selectionElement(node);\n  const source = element?.closest(\"[data-og-annotation-source-key]\");\n  return source instanceof HTMLElement ? source : null;\n}\n\nfunction resolveSourceBoundary(range: Range, root: HTMLElement): HTMLElement | null {\n  const start = containingSource(range.startContainer);\n  const end = containingSource(range.endContainer);\n  if (start && end && start !== end) return null;\n  const boundary = start ?? end;\n  if (!boundary || !root.contains(boundary)) return null;\n  return boundary;\n}\n\nfunction isWhollyInsideControl(range: Range, boundary: HTMLElement): boolean {\n  const start = selectionElement(range.startContainer)?.closest(CONTROL_SELECTOR);\n  const end = selectionElement(range.endContainer)?.closest(CONTROL_SELECTOR);\n  return (\n    start instanceof Element && start === end && boundary.contains(start) && start !== boundary\n  );\n}\n\nfunction annotationId(): string {\n  if (typeof globalThis.crypto?.randomUUID === \"function\") {\n    return globalThis.crypto.randomUUID();\n  }\n  return `annotation-${Date.now()}-${Math.random().toString(16).slice(2)}`;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction popoverPosition(rect: DOMRect): { left: number; top: number } {\n  const half = POPOVER_WIDTH / 2;\n  const left = clamp(rect.left + rect.width / 2, 12 + half, window.innerWidth - 12 - half);\n  const preferBelow = rect.bottom + 8 + POPOVER_HEIGHT <= window.innerHeight - 12;\n  const top = preferBelow ? rect.bottom + 8 : Math.max(12, rect.top - POPOVER_HEIGHT - 8);\n  return { left, top };\n}\n\nfunction buildCandidate(\n  root: HTMLElement,\n  sources: ReadonlyMap<string, TimelineAnnotationSourceDescriptor>,\n  keyboard: boolean,\n): SelectionCandidate | null {\n  const selection = document.getSelection();\n  if (!selection || selection.rangeCount !== 1 || selection.isCollapsed) return null;\n  const range = selection.getRangeAt(0);\n  const startBoundary = resolveSourceBoundary(range, root);\n  if (!startBoundary) return null;\n  if (isWhollyInsideControl(range, startBoundary)) return null;\n  const clipped = clipRangeToSource(range, startBoundary);\n  if (!clipped) return null;\n  const sourceKey = startBoundary.dataset.ogAnnotationSourceKey;\n  const source = sourceKey ? sources.get(sourceKey) : undefined;\n  const rawQuote = clipped.toString();\n  const quote = (source ? matchingQuoteInSource(source.text, rawQuote) : null) ?? rawQuote;\n  if (\n    !source ||\n    quote.trim().length === 0 ||\n    new TextEncoder().encode(quote).byteLength > MAX_QUOTE_BYTES\n  ) {\n    return null;\n  }\n  const sourceOffsets = occurrenceOffsets(source.text, quote);\n  if (sourceOffsets.length === 0) return null;\n  const occurrence = quoteOccurrenceIndex(startBoundary, clipped, quote);\n  const startOffset = sourceOffsets[Math.min(occurrence, sourceOffsets.length - 1)]!;\n  const endOffset = startOffset + quote.length;\n  const rect = visibleClientRect(range) ?? visibleClientRect(clipped);\n  if (!rect) return null;\n  const position = popoverPosition(rect);\n  return {\n    annotation: {\n      id: annotationId(),\n      quote,\n      note: \"\",\n      source: {\n        kind: source.kind,\n        eventId: source.eventId,\n        eventType: source.eventType,\n        sequence: source.sequence,\n        turnId: source.turnId,\n        startOffset,\n        endOffset,\n        contextBefore: utf8Suffix(source.text.slice(0, startOffset), SOURCE_CONTEXT_BYTES),\n        contextAfter: utf8Prefix(source.text.slice(endOffset), SOURCE_CONTEXT_BYTES),\n        ...(source.label ? { label: source.label } : {}),\n      },\n    },\n    left: position.left,\n    top: position.top,\n    keyboard,\n  };\n}\n\nexport function TimelineAnnotationSelection({\n  rootRef,\n  sources,\n  onAnnotate,\n}: {\n  rootRef: RefObject<HTMLElement | null>;\n  sources: ReadonlyMap<string, TimelineAnnotationSourceDescriptor>;\n  onAnnotate?: ((annotation: DraftTimelineAnnotation) => void) | undefined;\n}) {\n  const [candidate, setCandidate] = useState<SelectionCandidate | null>(null);\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const pointerOriginRef = useRef<\"unset\" | \"inside\" | \"outside\">(\"unset\");\n  const portalStyle = usePortalTokenStyle(rootRef.current);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root || !onAnnotate) {\n      setCandidate(null);\n      return;\n    }\n    const update = (keyboard: boolean) => {\n      setCandidate(buildCandidate(root, sources, keyboard));\n    };\n    const onRootPointerUp = (event: PointerEvent) => {\n      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) return;\n      // Tests may fire only pointerup on the source. A real click that started\n      // outside the timeline must not resurrect leftover selection.\n      if (pointerOriginRef.current === \"outside\") return;\n      window.setTimeout(() => update(false), 0);\n    };\n    const onDocumentPointerUp = (event: PointerEvent) => {\n      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) return;\n      const startedInRoot = pointerOriginRef.current === \"inside\";\n      pointerOriginRef.current = \"unset\";\n      if (!startedInRoot) return;\n      window.setTimeout(() => update(false), 0);\n    };\n    const onKeyUp = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setCandidate(null);\n        return;\n      }\n      window.setTimeout(() => update(true), 0);\n    };\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.target instanceof Node && buttonRef.current?.contains(event.target)) {\n        event.preventDefault();\n        return;\n      }\n      pointerOriginRef.current =\n        event.target instanceof Node && root.contains(event.target) ? \"inside\" : \"outside\";\n      setCandidate(null);\n    };\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setCandidate(null);\n    };\n    const onSelectionChange = () => {\n      if (buttonRef.current && document.activeElement === buttonRef.current) return;\n      const selection = document.getSelection();\n      if (!selection || selection.isCollapsed) setCandidate(null);\n    };\n    root.addEventListener(\"pointerup\", onRootPointerUp);\n    root.addEventListener(\"keyup\", onKeyUp);\n    document.addEventListener(\"pointerup\", onDocumentPointerUp);\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onDocumentKeyDown);\n    document.addEventListener(\"selectionchange\", onSelectionChange);\n    return () => {\n      root.removeEventListener(\"pointerup\", onRootPointerUp);\n      root.removeEventListener(\"keyup\", onKeyUp);\n      document.removeEventListener(\"pointerup\", onDocumentPointerUp);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onDocumentKeyDown);\n      document.removeEventListener(\"selectionchange\", onSelectionChange);\n    };\n  }, [onAnnotate, rootRef, sources]);\n\n  useEffect(() => {\n    if (candidate?.keyboard) buttonRef.current?.focus();\n  }, [candidate]);\n\n  if (!candidate || !onAnnotate || typeof document === \"undefined\") return null;\n  const preview = truncateAnnotationQuote(candidate.annotation.quote, 72);\n  return createPortal(\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      data-og-annotation-popover=\"\"\n      style={{ left: candidate.left, top: candidate.top, ...portalStyle }}\n      className=\"og-root fixed z-[80] flex max-w-[min(18rem,calc(100vw-1.5rem))] -translate-x-1/2 items-start gap-2 rounded-2xl border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm font-medium text-og-fg shadow-xl outline-hidden transition hover:border-og-accent/40 hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]\"\n      aria-label={`Add a note about “${preview}”`}\n      title={candidate.annotation.quote}\n      onPointerDown={(event) => event.preventDefault()}\n      onClick={() => {\n        onAnnotate(candidate.annotation);\n        document.getSelection()?.removeAllRanges();\n        setCandidate(null);\n      }}\n    >\n      <QuoteIcon className=\"mt-0.5 size-3.5 shrink-0 text-og-accent\" aria-hidden=\"true\" />\n      <span className=\"min-w-0 text-left\">\n        <span className=\"block leading-5\">Add note</span>\n        <span className=\"mt-0.5 block truncate text-og-xs font-normal text-og-fg-muted\">\n          {preview}\n        </span>\n      </span>\n    </button>,\n    document.body,\n  );\n}\n\nexport default TimelineAnnotationSelection;\n"],"mappings":"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","names":[]}

package/dist/timeline-annotations-dialog-6Q53N5FG.js

@@ -0,0 +1,262 @@
+import {
+  AnnotationAccentRow,
+  AnnotationNoteField,
+  AnnotationNotePreview,
+  AnnotationQuoteSourceButton
+} from "./chunk-5M6VTFJ5.js";
+import {
+  ANNOTATION_REVIEW_DIALOG_WIDTH_PX,
+  clampAnnotationDialogPlacement,
+  scrollAnnotationRowIntoList
+} from "./chunk-ZYRGEKWS.js";
+import {
+  annotationDisplayOrdinal,
+  cssEscapeAttribute
+} from "./chunk-NOSYBS2D.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-VZTQ73XT.js";
+import "./chunk-22KP6LR5.js";
+
+// src/components/timeline-annotations-dialog.tsx
+import { XIcon } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function focusableElements(root) {
+  return [
+    ...root.querySelectorAll(
+      'button:not([disabled]),textarea:not([disabled]),input:not([disabled]),[href],[tabindex]:not([tabindex="-1"])'
+    )
+  ].filter((element) => element.tabIndex >= 0 && !element.closest("[inert]"));
+}
+function TimelineAnnotationsDialog({
+  annotations,
+  editable,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  triggerRef,
+  countLabel,
+  onDismiss
+}) {
+  const [unavailableId, setUnavailableId] = useState(null);
+  const [position, setPosition] = useState({ left: 12, top: 12, maxHeight: 0 });
+  const panelRef = useRef(null);
+  const headerRef = useRef(null);
+  const listRef = useRef(null);
+  const noteRefs = useRef(/* @__PURE__ */ new Map());
+  const portalStyle = usePortalTokenStyle(triggerRef.current);
+  const revealNote = (id) => {
+    const row = listRef.current?.querySelector(
+      `[data-og-annotation-id="${cssEscapeAttribute(id)}"]`
+    );
+    scrollAnnotationRowIntoList(listRef.current, row);
+    noteRefs.current.get(id)?.focus();
+  };
+  const commitNotes = (fromId) => {
+    const incomplete = annotations.filter((annotation) => {
+      const live = noteRefs.current.get(annotation.id);
+      return (live?.value ?? annotation.note).trim().length === 0;
+    });
+    if (incomplete.length === 0) {
+      onDismiss(true);
+      return;
+    }
+    const fromIndex = annotations.findIndex((annotation) => annotation.id === fromId);
+    const next = incomplete.find(
+      (item) => annotations.findIndex((annotation) => annotation.id === item.id) > fromIndex
+    ) ?? incomplete[0];
+    revealNote(next.id);
+  };
+  useLayoutEffect(() => {
+    const updatePosition = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const contentHeight = (headerRef.current?.offsetHeight ?? 44) + (listRef.current?.scrollHeight ?? 200);
+      setPosition(
+        clampAnnotationDialogPlacement({
+          triggerLeft: rect.left,
+          triggerTop: rect.top,
+          triggerBottom: rect.bottom,
+          contentHeight,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          panelWidth: ANNOTATION_REVIEW_DIALOG_WIDTH_PX
+        })
+      );
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [annotations, triggerRef]);
+  useLayoutEffect(() => {
+    if (!focusAnnotationId || position.maxHeight <= 0) return;
+    revealNote(focusAnnotationId);
+    const note = noteRefs.current.get(focusAnnotationId);
+    if (note && document.activeElement === note) onFocusConsumed?.();
+  }, [focusAnnotationId, onFocusConsumed, annotations.length, position.maxHeight]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onDismiss(true);
+        return;
+      }
+      if (event.key !== "Tab" || !panelRef.current) return;
+      const focusable = focusableElements(panelRef.current);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {
+        return;
+      }
+      onDismiss(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    if (!focusAnnotationId) {
+      window.setTimeout(() => {
+        if (document.activeElement === triggerRef.current) panelRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [focusAnnotationId, onDismiss, triggerRef]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        tabIndex: -1,
+        "data-og-annotation-review": "",
+        style: {
+          left: position.left,
+          top: position.top,
+          maxHeight: position.maxHeight,
+          ...portalStyle
+        },
+        className: "og-root fixed z-[75] box-border flex w-[min(25rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg shadow-xl outline-hidden",
+        "aria-label": editable ? "Edit quoted notes" : "Quoted notes",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: headerRef,
+              "data-og-annotation-review-header": "",
+              className: "flex shrink-0 items-start justify-between gap-3 px-3 pt-3 pb-2",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "min-w-0 pt-0.5 text-og-sm font-medium text-og-fg-muted", children: countLabel }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-muted outline-hidden hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11",
+                    "aria-label": "Close",
+                    onClick: () => onDismiss(true),
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              "data-og-annotation-review-list": "",
+              className: "grid min-h-0 flex-1 gap-2.5 overflow-x-hidden overflow-y-auto overscroll-contain px-3 pb-3",
+              children: annotations.map((annotation, index) => {
+                const ordinal = annotationDisplayOrdinal(annotation, index);
+                return /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    "data-og-annotation-id": annotation.id,
+                    "aria-label": `Annotation ${ordinal}`,
+                    children: /* @__PURE__ */ jsxs(AnnotationAccentRow, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxs("p", { className: "mb-0.5 text-og-xs font-medium tabular-nums text-og-fg-subtle", children: [
+                            "Annotation ",
+                            ordinal
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            AnnotationQuoteSourceButton,
+                            {
+                              annotation,
+                              lines: 2,
+                              onRevealSource,
+                              onUnavailable: setUnavailableId
+                            }
+                          )
+                        ] }),
+                        editable && onRemove ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "inline-flex size-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11",
+                            "aria-label": `Remove annotation ${ordinal}`,
+                            onClick: () => onRemove(annotation.id),
+                            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+                          }
+                        ) : null
+                      ] }),
+                      unavailableId === annotation.id ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-og-xs text-og-status-waiting", children: "Source is outside the loaded timeline window." }) : null,
+                      editable && onUpdate ? /* @__PURE__ */ jsx(
+                        AnnotationNoteField,
+                        {
+                          annotation,
+                          inputRef: (node) => {
+                            if (node) noteRefs.current.set(annotation.id, node);
+                            else noteRefs.current.delete(annotation.id);
+                          },
+                          onUpdate,
+                          onCommit: () => commitNotes(annotation.id)
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        AnnotationNotePreview,
+                        {
+                          note: annotation.note,
+                          annotationId: annotation.id,
+                          ordinal
+                        }
+                      )
+                    ] })
+                  },
+                  annotation.id
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var timeline_annotations_dialog_default = TimelineAnnotationsDialog;
+export {
+  TimelineAnnotationsDialog,
+  timeline_annotations_dialog_default as default
+};
+//# sourceMappingURL=timeline-annotations-dialog-6Q53N5FG.js.map

package/dist/timeline-annotations-dialog-6Q53N5FG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/timeline-annotations-dialog.tsx"],"sourcesContent":["import type { TimelineAnnotationSource } from \"@opengeni/sdk\";\nimport { XIcon } from \"lucide-react\";\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalTokenStyle } from \"../lib/use-portal-token-style\";\nimport {\n  AnnotationAccentRow,\n  AnnotationNoteField,\n  AnnotationNotePreview,\n  AnnotationQuoteSourceButton,\n  type TimelineAnnotationLike,\n} from \"./timeline-annotation-chrome\";\nimport {\n  ANNOTATION_REVIEW_DIALOG_WIDTH_PX,\n  clampAnnotationDialogPlacement,\n  scrollAnnotationRowIntoList,\n} from \"./timeline-annotation-layout\";\nimport { annotationDisplayOrdinal, cssEscapeAttribute } from \"./timeline-annotation-shared\";\n\nfunction focusableElements(root: HTMLElement): HTMLElement[] {\n  return [\n    ...root.querySelectorAll<HTMLElement>(\n      'button:not([disabled]),textarea:not([disabled]),input:not([disabled]),[href],[tabindex]:not([tabindex=\"-1\"])',\n    ),\n  ].filter((element) => element.tabIndex >= 0 && !element.closest(\"[inert]\"));\n}\n\nexport function TimelineAnnotationsDialog({\n  annotations,\n  editable,\n  focusAnnotationId,\n  onFocusConsumed,\n  onUpdate,\n  onRemove,\n  onRevealSource,\n  triggerRef,\n  countLabel,\n  onDismiss,\n}: {\n  annotations: readonly TimelineAnnotationLike[];\n  editable: boolean;\n  focusAnnotationId?: string | null | undefined;\n  onFocusConsumed?: (() => void) | undefined;\n  onUpdate?: ((id: string, note: string) => void) | undefined;\n  onRemove?: ((id: string) => void) | undefined;\n  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  countLabel: string;\n  onDismiss: (restoreFocus: boolean) => void;\n}) {\n  const [unavailableId, setUnavailableId] = useState<string | null>(null);\n  const [position, setPosition] = useState({ left: 12, top: 12, maxHeight: 0 });\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const noteRefs = useRef(new Map<string, HTMLTextAreaElement>());\n  const portalStyle = usePortalTokenStyle(triggerRef.current);\n  const revealNote = (id: string) => {\n    const row = listRef.current?.querySelector<HTMLElement>(\n      `[data-og-annotation-id=\"${cssEscapeAttribute(id)}\"]`,\n    );\n    scrollAnnotationRowIntoList(listRef.current, row);\n    noteRefs.current.get(id)?.focus();\n  };\n\n  const commitNotes = (fromId: string) => {\n    const incomplete = annotations.filter((annotation) => {\n      const live = noteRefs.current.get(annotation.id);\n      return (live?.value ?? annotation.note).trim().length === 0;\n    });\n    if (incomplete.length === 0) {\n      onDismiss(true);\n      return;\n    }\n    const fromIndex = annotations.findIndex((annotation) => annotation.id === fromId);\n    const next =\n      incomplete.find(\n        (item) => annotations.findIndex((annotation) => annotation.id === item.id) > fromIndex,\n      ) ?? incomplete[0]!;\n    revealNote(next.id);\n  };\n\n  useLayoutEffect(() => {\n    const updatePosition = () => {\n      const rect = triggerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      const contentHeight =\n        (headerRef.current?.offsetHeight ?? 44) + (listRef.current?.scrollHeight ?? 200);\n      setPosition(\n        clampAnnotationDialogPlacement({\n          triggerLeft: rect.left,\n          triggerTop: rect.top,\n          triggerBottom: rect.bottom,\n          contentHeight,\n          viewportWidth: window.innerWidth,\n          viewportHeight: window.innerHeight,\n          panelWidth: ANNOTATION_REVIEW_DIALOG_WIDTH_PX,\n        }),\n      );\n    };\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [annotations, triggerRef]);\n\n  useLayoutEffect(() => {\n    if (!focusAnnotationId || position.maxHeight <= 0) return;\n    revealNote(focusAnnotationId);\n    const note = noteRefs.current.get(focusAnnotationId);\n    if (note && document.activeElement === note) onFocusConsumed?.();\n  }, [focusAnnotationId, onFocusConsumed, annotations.length, position.maxHeight]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n        onDismiss(true);\n        return;\n      }\n      if (event.key !== \"Tab\" || !panelRef.current) return;\n      const focusable = focusableElements(panelRef.current);\n      if (focusable.length === 0) return;\n      const first = focusable[0]!;\n      const last = focusable[focusable.length - 1]!;\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    const onPointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) return;\n      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {\n        return;\n      }\n      onDismiss(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    if (!focusAnnotationId) {\n      window.setTimeout(() => {\n        if (document.activeElement === triggerRef.current) panelRef.current?.focus();\n      }, 0);\n    }\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [focusAnnotationId, onDismiss, triggerRef]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={panelRef}\n      role=\"dialog\"\n      tabIndex={-1}\n      data-og-annotation-review=\"\"\n      style={{\n        left: position.left,\n        top: position.top,\n        maxHeight: position.maxHeight,\n        ...portalStyle,\n      }}\n      className=\"og-root fixed z-[75] box-border flex w-[min(25rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg shadow-xl outline-hidden\"\n      aria-label={editable ? \"Edit quoted notes\" : \"Quoted notes\"}\n    >\n      <div\n        ref={headerRef}\n        data-og-annotation-review-header=\"\"\n        className=\"flex shrink-0 items-start justify-between gap-3 px-3 pt-3 pb-2\"\n      >\n        <p className=\"min-w-0 pt-0.5 text-og-sm font-medium text-og-fg-muted\">{countLabel}</p>\n        <button\n          type=\"button\"\n          className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-muted outline-hidden hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11\"\n          aria-label=\"Close\"\n          onClick={() => onDismiss(true)}\n        >\n          <XIcon className=\"size-3.5\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div\n        ref={listRef}\n        data-og-annotation-review-list=\"\"\n        className=\"grid min-h-0 flex-1 gap-2.5 overflow-x-hidden overflow-y-auto overscroll-contain px-3 pb-3\"\n      >\n        {annotations.map((annotation, index) => {\n          const ordinal = annotationDisplayOrdinal(annotation, index);\n          return (\n            <section\n              key={annotation.id}\n              data-og-annotation-id={annotation.id}\n              aria-label={`Annotation ${ordinal}`}\n            >\n              <AnnotationAccentRow>\n                <div className=\"flex items-start gap-1\">\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"mb-0.5 text-og-xs font-medium tabular-nums text-og-fg-subtle\">\n                      Annotation {ordinal}\n                    </p>\n                    <AnnotationQuoteSourceButton\n                      annotation={annotation}\n                      lines={2}\n                      onRevealSource={onRevealSource}\n                      onUnavailable={setUnavailableId}\n                    />\n                  </div>\n                  {editable && onRemove ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11\"\n                      aria-label={`Remove annotation ${ordinal}`}\n                      onClick={() => onRemove(annotation.id)}\n                    >\n                      <XIcon className=\"size-3.5\" aria-hidden=\"true\" />\n                    </button>\n                  ) : null}\n                </div>\n                {unavailableId === annotation.id ? (\n                  <p role=\"status\" className=\"text-og-xs text-og-status-waiting\">\n                    Source is outside the loaded timeline window.\n                  </p>\n                ) : null}\n                {editable && onUpdate ? (\n                  <AnnotationNoteField\n                    annotation={annotation}\n                    inputRef={(node) => {\n                      if (node) noteRefs.current.set(annotation.id, node);\n                      else noteRefs.current.delete(annotation.id);\n                    }}\n                    onUpdate={onUpdate}\n                    onCommit={() => commitNotes(annotation.id)}\n                  />\n                ) : (\n                  <AnnotationNotePreview\n                    note={annotation.note}\n                    annotationId={annotation.id}\n                    ordinal={ordinal}\n                  />\n                )}\n              </AnnotationAccentRow>\n            </section>\n          );\n        })}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport default TimelineAnnotationsDialog;\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "3.7.0-canary.7",
+  "version": "3.8.0-canary.1",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -124,7 +124,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^3.7.0-canary.7",
+    "@opengeni/sdk": "^3.8.0-canary.1",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/chat-composer.tsx

@@ -157,8 +157,11 @@ export function ChatComposer({
             <RestoredResources />
             <Attachments />
             {header}
-            {composer.annotations && composer.annotations.length > 0 ? (
-              <div className="px-3 pt-2 sm:px-4">
+            {composer.annotations &&
+            composer.annotations.length > 0 &&
+            composer.updateAnnotation &&
+            composer.removeAnnotation ? (
+              <div className="px-3.5 pt-2 md:px-4">
                 <TimelineAnnotationsChip
                   annotations={composer.annotations}
                   editable