agent-canvas 0.1.43 → 0.1.45

package/daemon/client/annotationDom.ts

@@ -1,104 +0,0 @@
-import type { Annotation } from "./AnnotationProvider";
-import type { ActiveView } from "./App";
-
-/** All blocks that can be annotated via block-level comments */
-const ANNOTATABLE_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='table'] tbody tr, [data-md='callout'], [data-md='note'], [data-md='checklist-item'], [data-md='image']";
-
-/** Extract snippet identifier for a block element (mirrors PlanRenderer's getBlockSnippet) */
-function getBlockSnippet(block: HTMLElement): string | null {
-  const md = block.getAttribute("data-md");
-  if (md === "item") {
-    const label = block.getAttribute("data-md-label");
-    return label ? `[Item] ${label}` : null;
-  }
-  if (md === "section") {
-    const title = block.getAttribute("data-md-title");
-    return title ? `[Section] ${title}` : null;
-  }
-  if (md === "callout") {
-    const type = block.getAttribute("data-md-type") || "info";
-    const text = block.textContent?.trim().slice(0, 60) || "Callout";
-    return `[Callout:${type}] ${text}`;
-  }
-  if (md === "note") {
-    const text = block.textContent?.trim().slice(0, 60) || "Note";
-    return `[Note] ${text}`;
-  }
-  if (block.tagName === "TR") {
-    const cells = Array.from(block.querySelectorAll("td")).map((td) => td.textContent?.trim()).filter(Boolean);
-    return cells.length ? `[Row] ${cells.join(" | ")}` : null;
-  }
-  if (md === "checklist-item") {
-    const label = block.getAttribute("data-md-label");
-    return label ? `[Checklist] ${label}` : null;
-  }
-  if (md === "choice-option" || md === "multichoice-option") {
-    const label = block.getAttribute("data-md-label");
-    return label ? `[Option] ${label}` : null;
-  }
-  if (md === "userinput") {
-    const label = block.getAttribute("data-md-label");
-    return label ? `[Input] ${label}` : null;
-  }
-  if (md === "rangeinput") {
-    const label = block.getAttribute("data-md-label");
-    return label ? `[Range] ${label}` : null;
-  }
-  if (md === "image") {
-    const src = block.getAttribute("data-md-src");
-    return src ? `[Image] ${src}` : null;
-  }
-  return null;
-}
-
-/**
- * Find the DOM element for an annotation — either an inline mark (data-annotation-id)
- * or a block element matched by snippet.
- */
-export function findAnnotationElement(ann: Annotation): HTMLElement | null {
-  // Try inline mark first
-  const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
-  if (mark) return mark;
-
-  // For block annotations (snippet starts with "["), find by matching snippet against blocks
-  if (ann.snippet.startsWith("[")) {
-    for (const el of document.querySelectorAll(ANNOTATABLE_SELECTOR)) {
-      if (getBlockSnippet(el as HTMLElement) === ann.snippet) {
-        return el as HTMLElement;
-      }
-    }
-  }
-
-  return null;
-}
-
-/** Flash/pulse the element briefly — blinks bg via CSS animation */
-function flashElement(el: HTMLElement) {
-  el.classList.remove("ann-flash");
-  void el.offsetWidth; // force reflow to restart
-  el.classList.add("ann-flash");
-  el.addEventListener("animationend", () => { el.classList.remove("ann-flash"); }, { once: true });
-}
-
-/**
- * Scroll the canvas/file view to an annotation element and flash it.
- * Handles file annotations by switching view first.
- */
-export function scrollToAnnotation(ann: Annotation, setActiveView: (view: ActiveView) => void) {
-  if (ann.filePath) {
-    setActiveView({ type: "file", path: ann.filePath });
-    setTimeout(() => {
-      const el = findAnnotationElement(ann);
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth", block: "center" });
-        flashElement(el);
-      }
-    }, 150);
-  } else {
-    const el = findAnnotationElement(ann);
-    if (el) {
-      el.scrollIntoView({ behavior: "smooth", block: "center" });
-      flashElement(el);
-    }
-  }
-}

package/daemon/client/annotationDraft.test.ts

@@ -1,149 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
-
-class MemoryStorage {
-  private readonly values = new Map<string, string>();
-
-  getItem(key: string): string | null {
-    return this.values.get(key) ?? null;
-  }
-
-  setItem(key: string, value: string): void {
-    this.values.set(key, value);
-  }
-
-  removeItem(key: string): void {
-    this.values.delete(key);
-  }
-}
-
-const sessionId = "session";
-const key = (revision: number) => `canvas:${sessionId}:rev:${revision}`;
-
-describe("carryUnsubmittedDraft", () => {
-  test("clears a submitted draft and its carry marker", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(2), JSON.stringify({ generalNote: "Submitted" }));
-    storage.setItem(`${key(2)}:draft-handled`, "1");
-
-    clearPersistedDraft(storage, sessionId, 2);
-
-    expect(storage.getItem(key(2))).toBeNull();
-    expect(storage.getItem(`${key(2)}:draft-handled`)).toBeNull();
-  });
-
-  test("carries the latest unsent draft into a new revision", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(2), JSON.stringify({
-      annotations: [{ id: "annotation-1" }],
-      generalNote: "Review in progress",
-      responses: [["choice", { value: "keep" }]],
-      feedbackEntries: [["old", { markdown: "stale generated content" }]],
-    }));
-    storage.setItem(key(3), JSON.stringify({
-      annotations: [],
-      generalNote: "",
-      responses: [["new-choice", { value: null }]],
-      feedbackEntries: [["new", { markdown: "generated content" }]],
-    }));
-
-    const sourceRevision = carryUnsubmittedDraft(storage, sessionId, 3, [
-      { revision: 1, hasFeedback: true },
-      { revision: 2, hasFeedback: false },
-      { revision: 3, hasFeedback: false },
-    ]);
-
-    expect(sourceRevision).toBe(2);
-    expect(JSON.parse(storage.getItem(key(3)) ?? "")).toEqual({
-      annotations: [{ id: "annotation-1" }],
-      generalNote: "Review in progress",
-      responses: [["choice", { value: "keep" }]],
-      feedbackEntries: [],
-    });
-  });
-
-  test("does not cross a submitted revision", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(1), JSON.stringify({
-      annotations: [{ id: "stale-annotation" }],
-      generalNote: "",
-      responses: [],
-    }));
-
-    expect(carryUnsubmittedDraft(storage, sessionId, 3, [
-      { revision: 1, hasFeedback: false },
-      { revision: 2, hasFeedback: true },
-      { revision: 3, hasFeedback: false },
-    ])).toBeNull();
-    expect(storage.getItem(key(3))).toBeNull();
-  });
-
-  test("does not overwrite meaningful target data", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(2), JSON.stringify({
-      annotations: [{ id: "old-annotation" }],
-      generalNote: "",
-      responses: [],
-    }));
-    const current = JSON.stringify({
-      annotations: [{ id: "current-annotation" }],
-      generalNote: "",
-      responses: [],
-    });
-    storage.setItem(key(3), current);
-
-    expect(carryUnsubmittedDraft(storage, sessionId, 3, [
-      { revision: 2, hasFeedback: false },
-      { revision: 3, hasFeedback: false },
-    ])).toBeNull();
-    expect(storage.getItem(key(3))).toBe(current);
-  });
-
-  test("skips empty intermediate revision state", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(2), JSON.stringify({
-      annotations: [],
-      generalNote: "Still drafting",
-      responses: [],
-    }));
-    storage.setItem(key(3), JSON.stringify({
-      annotations: [],
-      generalNote: "",
-      responses: [["choice", { value: [] }]],
-      feedbackEntries: [["generated", { markdown: "not user input" }]],
-    }));
-
-    expect(carryUnsubmittedDraft(storage, sessionId, 4, [
-      { revision: 1, hasFeedback: true },
-      { revision: 2, hasFeedback: false },
-      { revision: 3, hasFeedback: false },
-      { revision: 4, hasFeedback: false },
-    ])).toBe(2);
-  });
-
-  test("does not resurrect a carried draft after it is cleared", () => {
-    const storage = new MemoryStorage();
-    storage.setItem(key(2), JSON.stringify({
-      annotations: [{ id: "annotation-1" }],
-      generalNote: "",
-      responses: [],
-    }));
-    const revisions = [
-      { revision: 1, hasFeedback: true },
-      { revision: 2, hasFeedback: false },
-      { revision: 3, hasFeedback: false },
-    ];
-
-    expect(carryUnsubmittedDraft(storage, sessionId, 3, revisions)).toBe(2);
-    const cleared = JSON.stringify({ annotations: [], generalNote: "", responses: [] });
-    storage.setItem(key(3), cleared);
-
-    expect(carryUnsubmittedDraft(storage, sessionId, 3, revisions)).toBeNull();
-    expect(storage.getItem(key(3))).toBe(cleared);
-    expect(carryUnsubmittedDraft(storage, sessionId, 4, [
-      ...revisions,
-      { revision: 4, hasFeedback: false },
-    ])).toBeNull();
-    expect(storage.getItem(key(4))).toBeNull();
-  });
-});

package/daemon/client/annotationDraft.ts

@@ -1,110 +0,0 @@
-interface RevisionState {
-  revision: number;
-  hasFeedback: boolean;
-}
-
-interface AnnotationStorage {
-  getItem(key: string): string | null;
-  setItem(key: string, value: string): void;
-}
-
-interface RemovableAnnotationStorage {
-  removeItem(key: string): void;
-}
-
-function storageKey(sessionId: string, revision: number): string {
-  return `canvas:${sessionId}:rev:${revision}`;
-}
-
-function handledKey(sessionId: string, revision: number): string {
-  return `${storageKey(sessionId, revision)}:draft-handled`;
-}
-
-export function clearPersistedDraft(
-  storage: RemovableAnnotationStorage,
-  sessionId: string,
-  revision: number,
-): void {
-  try {
-    storage.removeItem(storageKey(sessionId, revision));
-    storage.removeItem(handledKey(sessionId, revision));
-  } catch {}
-}
-
-function parseState(raw: string | null): object | null {
-  if (!raw) return null;
-  try {
-    const value: unknown = JSON.parse(raw);
-    return typeof value === "object" && value !== null && !Array.isArray(value)
-      ? value
-      : null;
-  } catch {
-    return null;
-  }
-}
-
-function hasResponseValue(entry: unknown): boolean {
-  if (!Array.isArray(entry) || entry.length < 2) return false;
-  const response: unknown = entry[1];
-  if (typeof response !== "object" || response === null || Array.isArray(response)) return false;
-
-  const note = Reflect.get(response, "note");
-  if (typeof note === "string" && note.trim().length > 0) return true;
-
-  const value = Reflect.get(response, "value");
-  if (typeof value === "string") return value.trim().length > 0;
-  if (Array.isArray(value)) return value.length > 0;
-  return value !== null && value !== undefined;
-}
-
-function hasDraftContent(state: object | null): boolean {
-  if (!state) return false;
-  const annotations = Reflect.get(state, "annotations");
-  if (Array.isArray(annotations) && annotations.length > 0) return true;
-
-  const generalNote = Reflect.get(state, "generalNote");
-  if (typeof generalNote === "string" && generalNote.trim().length > 0) return true;
-
-  const responses = Reflect.get(state, "responses");
-  return Array.isArray(responses) && responses.some(hasResponseValue);
-}
-
-/** Carry an unsent draft forward without crossing submitted revisions. */
-export function carryUnsubmittedDraft(
-  storage: AnnotationStorage,
-  sessionId: string,
-  targetRevision: number,
-  revisions: RevisionState[],
-): number | null {
-  try {
-    const targetKey = storageKey(sessionId, targetRevision);
-    if (hasDraftContent(parseState(storage.getItem(targetKey)))) {
-      storage.setItem(handledKey(sessionId, targetRevision), "1");
-      return null;
-    }
-    if (storage.getItem(handledKey(sessionId, targetRevision)) !== null) return null;
-
-    const previous = revisions
-      .filter((revision) => revision.revision < targetRevision)
-      .sort((left, right) => right.revision - left.revision);
-
-    for (const revision of previous) {
-      if (revision.hasFeedback) return null;
-
-      const source = parseState(storage.getItem(storageKey(sessionId, revision.revision)));
-      if (!hasDraftContent(source)) {
-        if (storage.getItem(handledKey(sessionId, revision.revision)) !== null) return null;
-        continue;
-      }
-
-      storage.setItem(targetKey, JSON.stringify({
-        ...source,
-        feedbackEntries: [],
-      }));
-      storage.setItem(handledKey(sessionId, targetRevision), "1");
-      return revision.revision;
-    }
-  } catch {}
-
-  return null;
-}

package/daemon/client/compat/preact-all.ts

@@ -1,4 +0,0 @@
-export * from "preact/compat";
-export { default } from "preact/compat";
-export { jsx, jsxs } from "preact/jsx-runtime";
-export { createRoot, hydrateRoot } from "preact/compat/client";

package/daemon/client/components/Callout.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { renderMarkdownChildren } from "./renderMarkdownChildren";
-
-interface CalloutProps {
-  type?: "info" | "warning" | "danger" | "tip";
-  children?: React.ReactNode;
-}
-
-const config = {
-  info:    { bg: "bg-accent-blue-muted", icon: "i",  iconColor: "text-accent-blue" },
-  warning: { bg: "bg-accent-amber-muted", icon: "!", iconColor: "text-accent-amber" },
-  danger:  { bg: "bg-accent-red-muted", icon: "\u2715", iconColor: "text-accent-red" },
-  tip:     { bg: "bg-accent-green-muted", icon: "\u2713", iconColor: "text-accent-green" },
-};
-
-export function Callout({ type = "info", children }: CalloutProps) {
-  const cfg = config[type];
-  return (
-    <div className={`${cfg.bg} relative rounded-lg px-5 py-4 mt-3 flex gap-3 items-start`} data-md="callout" data-md-type={type}>
-      <span className={`${cfg.iconColor} opacity-70 text-base leading-relaxed flex-shrink-0 mt-px`}>
-        {cfg.icon}
-      </span>
-      <div className="text-body text-text-secondary leading-relaxed">{renderMarkdownChildren(children)}</div>
-    </div>
-  );
-}

package/daemon/client/components/Checklist.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-
-interface ChecklistItem {
-  label: string;
-  checked: boolean;
-}
-
-interface ChecklistProps {
-  items: ChecklistItem[];
-}
-
-export function Checklist({ items }: ChecklistProps) {
-  return (
-    <ul className="space-y-1 mt-3" data-md="checklist">
-      {items.map((item, i) => (
-        <li key={i} data-md="checklist-item" data-md-label={item.label} className="relative flex items-start gap-2.5 py-1">
-          <span className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
-            item.checked
-              ? "bg-accent-green"
-              : "border-[1.5px] border-border-hover"
-          }`}>
-            {item.checked && (
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                <path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: "var(--color-text-inverse)" }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            )}
-          </span>
-          <span className={`text-body font-body ${
-            item.checked ? "text-text-tertiary line-through decoration-border-hover" : "text-text-secondary"
-          }`}>
-            {item.label}
-          </span>
-        </li>
-      ))}
-    </ul>
-  );
-}

package/daemon/client/components/Choice.tsx

@@ -1,176 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useAnnotations } from "#canvas/runtime";
-import { ResponseNote } from "./ResponseNote";
-
-export type ChoiceOption = string | { value: string; label?: string };
-
-type NormalizedOption = { value: string; label: string };
-
-function normalizeOptions(options: ChoiceOption[]): NormalizedOption[] {
-  return options.map((opt) =>
-    typeof opt === "string"
-      ? { value: opt, label: opt }
-      : { value: opt.value, label: opt.label ?? opt.value },
-  );
-}
-
-/** Radio — pick one option */
-interface ChoiceProps {
-  id: string;
-  label: string;
-  options: ChoiceOption[];
-  required?: boolean;
-}
-
-export function Choice({ id, label, options, required }: ChoiceProps) {
-  const { responses, setResponse } = useAnnotations();
-  const normalized = useMemo(() => normalizeOptions(options), [options]);
-  const current = responses.get(id);
-  const selected = current?.value as string | undefined;
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "radio", label, value: null, options: normalized.map((o) => o.value), required });
-  }
-
-  const handleSelect = (value: string) => {
-    setResponse(id, { ...current!, value });
-  };
-
-  // Keyboard selection via custom event from PlanRenderer
-  useEffect(() => {
-    const el = wrapperRef.current;
-    if (!el) return;
-    const handler = (e: Event) => {
-      const target = (e.target as HTMLElement).closest("[data-md-label]");
-      const labelAttr = target?.getAttribute("data-md-label");
-      const match = normalized.find((o) => o.label === labelAttr);
-      if (match) handleSelect(match.value);
-    };
-    el.addEventListener("kb-select", handler);
-    return () => el.removeEventListener("kb-select", handler);
-  }, [normalized, handleSelect]);
-
-  const showError = current?.required && !selected;
-
-  return (
-    <div ref={wrapperRef} data-md="choice" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline gap-2 mb-2">
-        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-      </div>
-      <div className="space-y-1">
-        {normalized.map(({ value, label: optLabel }) => (
-          <label
-            key={value}
-            data-md="choice-option"
-            data-md-label={optLabel}
-            onClick={() => handleSelect(value)}
-            className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
-              selected === value
-                ? "bg-highlight-selected"
-                : "hover:bg-bg-elevated"
-            }`}
-          >
-            <span className={`w-4 h-4 rounded-full border-[1.5px] flex items-center justify-center flex-shrink-0 transition-all ${
-              selected === value
-                ? "border-accent-amber bg-accent-amber"
-                : "border-border-strong"
-            }`}>
-              {selected === value && <span className="w-1.5 h-1.5 rounded-full bg-text-inverse" />}
-            </span>
-            <span className="text-[13px] font-body text-text-secondary">{optLabel}</span>
-          </label>
-        ))}
-      </div>
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select an option.</p>}
-    </div>
-  );
-}
-
-/** Checkbox — pick multiple options */
-interface MultiChoiceProps {
-  id: string;
-  label: string;
-  options: ChoiceOption[];
-  required?: boolean;
-}
-
-export function MultiChoice({ id, label, options, required }: MultiChoiceProps) {
-  const { responses, setResponse } = useAnnotations();
-  const normalized = useMemo(() => normalizeOptions(options), [options]);
-  const current = responses.get(id);
-  const selected: string[] = (current?.value as string[]) || [];
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "checkbox", label, value: [], options: normalized.map((o) => o.value), required });
-  }
-
-  const toggle = (value: string) => {
-    const next = selected.includes(value) ? selected.filter((o) => o !== value) : [...selected, value];
-    setResponse(id, { ...current!, value: next });
-  };
-
-  // Keyboard selection via custom event from PlanRenderer
-  useEffect(() => {
-    const el = wrapperRef.current;
-    if (!el) return;
-    const handler = (e: Event) => {
-      const target = (e.target as HTMLElement).closest("[data-md-label]");
-      const labelAttr = target?.getAttribute("data-md-label");
-      const match = normalized.find((o) => o.label === labelAttr);
-      if (match) toggle(match.value);
-    };
-    el.addEventListener("kb-select", handler);
-    return () => el.removeEventListener("kb-select", handler);
-  }, [normalized, toggle]);
-
-  const showError = current?.required && selected.length === 0;
-
-  return (
-    <div ref={wrapperRef} data-md="multichoice" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline gap-2 mb-2">
-        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-      </div>
-      <div className="space-y-1">
-        {normalized.map(({ value, label: optLabel }) => {
-          const checked = selected.includes(value);
-          return (
-            <label
-              key={value}
-              data-md="multichoice-option"
-              data-md-label={optLabel}
-              onClick={() => toggle(value)}
-              className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
-                checked ? "bg-highlight-selected" : "hover:bg-bg-elevated"
-              }`}
-            >
-              <span className={`w-4 h-4 rounded flex items-center justify-center flex-shrink-0 transition-all ${
-                checked
-                  ? "bg-accent-amber"
-                  : "border-[1.5px] border-border-strong"
-              }`}>
-                {checked && (
-                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                    <path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: "var(--color-text-inverse)" }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                )}
-              </span>
-              <span className="text-[13px] font-body text-text-secondary">{optLabel}</span>
-            </label>
-          );
-        })}
-      </div>
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select at least one option.</p>}
-    </div>
-  );
-}
-

package/daemon/client/components/CodeBlock.tsx

@@ -1,35 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-interface CodeBlockProps {
-  language?: string;
-  children?: React.ReactNode;
-}
-
-export function CodeBlock({ language, children }: CodeBlockProps) {
-  const code = typeof children === "string" ? children : String(children ?? "");
-  const codeRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const el = codeRef.current;
-    const hljs = (window as any).hljs;
-    if (!el || !hljs) return;
-    // Reset previous highlighting
-    el.removeAttribute("data-highlighted");
-    el.className = language ? `language-${language}` : "";
-    el.textContent = code;
-    hljs.highlightElement(el);
-  }, [code, language]);
-
-  return (
-    <div className="relative mt-3 group/code" data-md="codeblock" data-md-language={language || ""}>
-      {language && (
-        <span className="absolute top-2 right-3 text-tiny text-text-tertiary opacity-0 group-hover/code:opacity-60 transition-opacity duration-150 z-10 font-mono">
-          {language}
-        </span>
-      )}
-      <pre className="bg-bg-code rounded-md p-4 overflow-x-auto text-code font-mono leading-relaxed">
-        <code ref={codeRef} className={language ? `language-${language}` : ""}>{code}</code>
-      </pre>
-    </div>
-  );
-}