hazo_pdf 1.0.1 → 1.1.0

package/dist/index.js

@@ -8,8 +8,8 @@ import {
 } from "./chunk-2POHPGR3.js";
 
 // src/components/pdf_viewer/pdf_viewer.tsx
-import { useState as useState5, useEffect as useEffect5, useRef as useRef6, useCallback as useCallback2 } from "react";
-import { Save, Undo2 as Undo22, Redo2 } from "lucide-react";
+import { useState as useState6, useEffect as useEffect6, useRef as useRef7, useCallback as useCallback2 } from "react";
+import { Save, Undo2 as Undo22, Redo2, PanelRight } from "lucide-react";
 
 // src/components/pdf_viewer/pdf_worker_setup.ts
 var worker_configured = false;
@@ -1501,6 +1501,232 @@ var TextAnnotationDialog = ({
   return createPortal2(dialog_content, document.body);
 };
 
+// src/components/pdf_viewer/metadata_sidepanel.tsx
+import { useState as useState5, useRef as useRef6, useEffect as useEffect5 } from "react";
+import { ChevronLeft, ChevronRight, ChevronDown, ChevronUp, Pencil, CheckCircle2, X as X2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var FormatText = ({ style, children, className }) => {
+  const baseClassName = cn("cls_metadata_text", className);
+  switch (style) {
+    case "h1":
+      return /* @__PURE__ */ jsx6("h1", { className: cn(baseClassName, "cls_metadata_h1"), children });
+    case "h2":
+      return /* @__PURE__ */ jsx6("h2", { className: cn(baseClassName, "cls_metadata_h2"), children });
+    case "h3":
+      return /* @__PURE__ */ jsx6("h3", { className: cn(baseClassName, "cls_metadata_h3"), children });
+    case "h4":
+      return /* @__PURE__ */ jsx6("h4", { className: cn(baseClassName, "cls_metadata_h4"), children });
+    case "h5":
+      return /* @__PURE__ */ jsx6("h5", { className: cn(baseClassName, "cls_metadata_h5"), children });
+    case "body":
+    default:
+      return /* @__PURE__ */ jsx6("p", { className: cn(baseClassName, "cls_metadata_body"), children });
+  }
+};
+var MetadataSidepanel = ({
+  is_open,
+  on_toggle,
+  metadata,
+  on_change,
+  width,
+  on_width_change
+}) => {
+  const [expanded_items, setExpandedItems] = useState5(/* @__PURE__ */ new Set());
+  const [editing_index, setEditingIndex] = useState5(null);
+  const [edit_value, setEditValue] = useState5("");
+  const resize_ref = useRef6(null);
+  const is_resizing_ref = useRef6(false);
+  const start_width_ref = useRef6(0);
+  const start_x_ref = useRef6(0);
+  const toggle_item = (index) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+  const start_edit = (index, current_value) => {
+    setEditingIndex(index);
+    setEditValue(current_value);
+  };
+  const cancel_edit = () => {
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const save_edit = () => {
+    if (editing_index === null) return;
+    const updated_data = [...metadata.data];
+    const updated_row = { ...updated_data[editing_index], value: edit_value };
+    updated_data[editing_index] = updated_row;
+    const updated_metadata = {
+      header: metadata.header,
+      data: updated_data,
+      footer: metadata.footer
+    };
+    const result = on_change(updated_row, updated_metadata);
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const handle_resize_start = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    is_resizing_ref.current = true;
+    start_width_ref.current = width;
+    start_x_ref.current = e.clientX;
+    document.addEventListener("mousemove", handle_resize_move);
+    document.addEventListener("mouseup", handle_resize_end);
+    document.body.style.cursor = "ew-resize";
+    document.body.style.userSelect = "none";
+  };
+  const handle_resize_move = (e) => {
+    if (!is_resizing_ref.current) return;
+    const delta_x = start_x_ref.current - e.clientX;
+    const new_width = Math.max(200, Math.min(800, start_width_ref.current + delta_x));
+    on_width_change(new_width);
+  };
+  const handle_resize_end = () => {
+    is_resizing_ref.current = false;
+    document.removeEventListener("mousemove", handle_resize_move);
+    document.removeEventListener("mouseup", handle_resize_end);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  useEffect5(() => {
+    return () => {
+      document.removeEventListener("mousemove", handle_resize_move);
+      document.removeEventListener("mouseup", handle_resize_end);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    !is_open && /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: on_toggle,
+        className: "cls_metadata_sidepanel_toggle_edge",
+        "aria-label": "Open metadata panel",
+        title: "Open metadata panel",
+        children: /* @__PURE__ */ jsx6(ChevronLeft, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: cn("cls_metadata_sidepanel", is_open && "cls_metadata_sidepanel_open"),
+        style: { width: is_open ? `${width}px` : "0", display: is_open ? "flex" : "none" },
+        children: [
+          is_open && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              ref: resize_ref,
+              className: "cls_metadata_sidepanel_resize_handle",
+              onMouseDown: handle_resize_start,
+              "aria-label": "Resize panel"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_sidepanel_content", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_sidepanel_header", children: [
+              /* @__PURE__ */ jsx6("span", { className: "cls_metadata_sidepanel_title", children: "Metadata" }),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: on_toggle,
+                  className: "cls_metadata_sidepanel_close",
+                  "aria-label": "Close metadata panel",
+                  children: /* @__PURE__ */ jsx6(ChevronRight, { size: 20 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_sidepanel_body", children: [
+              metadata.header && metadata.header.length > 0 && /* @__PURE__ */ jsx6("div", { className: "cls_metadata_section cls_metadata_header_section", children: metadata.header.map((item, index) => /* @__PURE__ */ jsx6(FormatText, { style: item.style, children: item.label }, `header-${index}`)) }),
+              metadata.data && metadata.data.length > 0 && /* @__PURE__ */ jsx6("div", { className: "cls_metadata_section cls_metadata_data_section", children: metadata.data.map((item, index) => {
+                const is_expanded = expanded_items.has(index);
+                const is_editing = editing_index === index;
+                return /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_accordion", children: [
+                  /* @__PURE__ */ jsxs5(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggle_item(index),
+                      className: "cls_metadata_accordion_header",
+                      "aria-expanded": is_expanded,
+                      children: [
+                        /* @__PURE__ */ jsx6(FormatText, { style: item.style, className: "cls_metadata_accordion_label", children: item.label }),
+                        is_expanded ? /* @__PURE__ */ jsx6(ChevronUp, { className: "cls_metadata_accordion_icon", size: 16 }) : /* @__PURE__ */ jsx6(ChevronDown, { className: "cls_metadata_accordion_icon", size: 16 })
+                      ]
+                    }
+                  ),
+                  is_expanded && /* @__PURE__ */ jsx6("div", { className: "cls_metadata_accordion_content", children: is_editing ? /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_edit_mode", children: [
+                    /* @__PURE__ */ jsx6(
+                      "input",
+                      {
+                        type: "text",
+                        value: edit_value,
+                        onChange: (e) => setEditValue(e.target.value),
+                        className: "cls_metadata_edit_input",
+                        autoFocus: true,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") {
+                            save_edit();
+                          } else if (e.key === "Escape") {
+                            cancel_edit();
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_edit_buttons", children: [
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: save_edit,
+                          className: "cls_metadata_edit_save",
+                          "aria-label": "Save",
+                          children: /* @__PURE__ */ jsx6(CheckCircle2, { size: 18, className: "text-green-600" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: cancel_edit,
+                          className: "cls_metadata_edit_cancel",
+                          "aria-label": "Cancel",
+                          children: /* @__PURE__ */ jsx6(X2, { size: 18, className: "text-red-600" })
+                        }
+                      )
+                    ] })
+                  ] }) : /* @__PURE__ */ jsxs5("div", { className: "cls_metadata_value_container", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "cls_metadata_value", children: item.value }),
+                    item.editable && /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => start_edit(index, item.value),
+                        className: "cls_metadata_edit_button",
+                        "aria-label": "Edit",
+                        children: /* @__PURE__ */ jsx6(Pencil, { size: 16 })
+                      }
+                    )
+                  ] }) })
+                ] }, `data-${index}`);
+              }) }),
+              metadata.footer && metadata.footer.length > 0 && /* @__PURE__ */ jsx6("div", { className: "cls_metadata_section cls_metadata_footer_section", children: metadata.footer.map((item, index) => /* @__PURE__ */ jsx6(FormatText, { style: item.style, children: item.label }, `footer-${index}`)) })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/utils/config_loader.ts
 function parse_ini_browser(ini_text) {
   const result = {};
@@ -1908,7 +2134,7 @@ function load_pdf_config(config_file) {
 }
 
 // src/components/pdf_viewer/pdf_viewer.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var PdfViewer = ({
   url,
   className = "",
@@ -1924,17 +2150,22 @@ var PdfViewer = ({
   config_file,
   append_timestamp_to_text_edits,
   annotation_text_suffix_fixed_text,
-  right_click_custom_stamps
+  right_click_custom_stamps,
+  sidepanel_metadata_enabled = false,
+  metadata_input,
+  on_metadata_change
 }) => {
-  const [pdf_document, setPdfDocument] = useState5(null);
-  const [loading, setLoading] = useState5(true);
-  const [error, setError] = useState5(null);
-  const [scale, setScale] = useState5(initial_scale);
-  const [annotations, setAnnotations] = useState5(initial_annotations);
-  const [current_tool, setCurrentTool] = useState5(null);
-  const [saving, setSaving] = useState5(false);
-  const config_ref = useRef6(null);
-  useEffect5(() => {
+  const [pdf_document, setPdfDocument] = useState6(null);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6(null);
+  const [scale, setScale] = useState6(initial_scale);
+  const [annotations, setAnnotations] = useState6(initial_annotations);
+  const [current_tool, setCurrentTool] = useState6(null);
+  const [saving, setSaving] = useState6(false);
+  const [sidepanel_open, setSidepanelOpen] = useState6(false);
+  const [sidepanel_width, setSidepanelWidth] = useState6(300);
+  const config_ref = useRef7(null);
+  useEffect6(() => {
     if (!config_file) {
       config_ref.current = load_pdf_config();
       return;
@@ -2196,12 +2427,12 @@ ${suffix_line}`;
     });
     return result;
   };
-  const [history, setHistory] = useState5([initial_annotations]);
-  const [history_index, setHistoryIndex] = useState5(0);
-  const history_ref = useRef6({ saving: false });
-  const [context_menu, setContextMenu] = useState5(null);
-  const [text_dialog, setTextDialog] = useState5(null);
-  useEffect5(() => {
+  const [history, setHistory] = useState6([initial_annotations]);
+  const [history_index, setHistoryIndex] = useState6(0);
+  const history_ref = useRef7({ saving: false });
+  const [context_menu, setContextMenu] = useState6(null);
+  const [text_dialog, setTextDialog] = useState6(null);
+  useEffect6(() => {
     if (history.length === 1 && history[0].length === 0 && initial_annotations.length === 0) {
       return;
     }
@@ -2209,7 +2440,7 @@ ${suffix_line}`;
     setHistoryIndex(0);
     history_ref.current.saving = false;
   }, [url]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -2307,7 +2538,7 @@ ${suffix_line}`;
       }, 0);
     }
   }, [history_index, history]);
-  useEffect5(() => {
+  useEffect6(() => {
     const handle_keydown = (e) => {
       const target = e.target;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
@@ -2336,6 +2567,18 @@ ${suffix_line}`;
   const handle_zoom_reset = () => {
     setScale(1);
   };
+  const handle_sidepanel_toggle = () => {
+    setSidepanelOpen((prev) => !prev);
+  };
+  const handle_sidepanel_width_change = (width) => {
+    setSidepanelWidth(width);
+  };
+  const handle_metadata_change = (updatedRow, allData) => {
+    if (on_metadata_change) {
+      return on_metadata_change(updatedRow, allData);
+    }
+    return { updatedRow, allData };
+  };
   const handle_save = async () => {
     if (annotations.length === 0) {
       console.warn("PdfViewer: No annotations to save");
@@ -2367,21 +2610,21 @@ ${suffix_line}`;
     }
   };
   if (loading) {
-    return /* @__PURE__ */ jsx6("div", { className: cn("cls_pdf_viewer", "cls_pdf_viewer_loading", className), children: /* @__PURE__ */ jsx6("div", { className: "cls_pdf_viewer_spinner", children: "Loading PDF document..." }) });
+    return /* @__PURE__ */ jsx7("div", { className: cn("cls_pdf_viewer", "cls_pdf_viewer_loading", className), children: /* @__PURE__ */ jsx7("div", { className: "cls_pdf_viewer_spinner", children: "Loading PDF document..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx6("div", { className: cn("cls_pdf_viewer", "cls_pdf_viewer_error", className), children: /* @__PURE__ */ jsxs5("div", { className: "cls_pdf_viewer_error_message", children: [
+    return /* @__PURE__ */ jsx7("div", { className: cn("cls_pdf_viewer", "cls_pdf_viewer_error", className), children: /* @__PURE__ */ jsxs6("div", { className: "cls_pdf_viewer_error_message", children: [
       "Error loading PDF: ",
       error.message
     ] }) });
   }
   if (!pdf_document) {
-    return /* @__PURE__ */ jsx6("div", { className: cn("cls_pdf_viewer", className), children: /* @__PURE__ */ jsx6("div", { className: "cls_pdf_viewer_no_document", children: "No PDF document loaded" }) });
+    return /* @__PURE__ */ jsx7("div", { className: cn("cls_pdf_viewer", className), children: /* @__PURE__ */ jsx7("div", { className: "cls_pdf_viewer_no_document", children: "No PDF document loaded" }) });
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cn("cls_pdf_viewer", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "cls_pdf_viewer_toolbar", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "cls_pdf_viewer_toolbar_group", children: [
-        /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6("div", { className: cn("cls_pdf_viewer", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "cls_pdf_viewer_toolbar", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "cls_pdf_viewer_toolbar_group", children: [
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2391,11 +2634,11 @@ ${suffix_line}`;
             children: "\u2212"
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "cls_pdf_viewer_zoom_level", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "cls_pdf_viewer_zoom_level", children: [
           Math.round(scale * 100),
           "%"
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2405,7 +2648,7 @@ ${suffix_line}`;
             children: "+"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2416,7 +2659,7 @@ ${suffix_line}`;
           }
         )
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "cls_pdf_viewer_toolbar_group", children: /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("div", { className: "cls_pdf_viewer_toolbar_group", children: /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -2429,8 +2672,8 @@ ${suffix_line}`;
           children: "Square"
         }
       ) }),
-      /* @__PURE__ */ jsxs5("div", { className: "cls_pdf_viewer_toolbar_group", children: [
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6("div", { className: "cls_pdf_viewer_toolbar_group", children: [
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -2443,12 +2686,12 @@ ${suffix_line}`;
             "aria-label": "Undo last annotation",
             title: "Undo (Ctrl+Z)",
             children: [
-              /* @__PURE__ */ jsx6(Undo22, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
-              /* @__PURE__ */ jsx6("span", { className: "cls_pdf_viewer_toolbar_button_text", children: "Undo" })
+              /* @__PURE__ */ jsx7(Undo22, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
+              /* @__PURE__ */ jsx7("span", { className: "cls_pdf_viewer_toolbar_button_text", children: "Undo" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -2461,13 +2704,13 @@ ${suffix_line}`;
             "aria-label": "Redo last undone annotation",
             title: "Redo (Ctrl+Y)",
             children: [
-              /* @__PURE__ */ jsx6(Redo2, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
-              /* @__PURE__ */ jsx6("span", { className: "cls_pdf_viewer_toolbar_button_text", children: "Redo" })
+              /* @__PURE__ */ jsx7(Redo2, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
+              /* @__PURE__ */ jsx7("span", { className: "cls_pdf_viewer_toolbar_button_text", children: "Redo" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "cls_pdf_viewer_toolbar_group", children: /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsx7("div", { className: "cls_pdf_viewer_toolbar_group", children: /* @__PURE__ */ jsxs6(
         "button",
         {
           type: "button",
@@ -2481,58 +2724,95 @@ ${suffix_line}`;
           "aria-label": "Save annotations to PDF",
           title: annotations.length === 0 ? "No annotations to save" : "Save annotations to PDF",
           children: [
-            /* @__PURE__ */ jsx6(Save, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
-            /* @__PURE__ */ jsx6("span", { className: "cls_pdf_viewer_toolbar_button_text", children: saving ? "Saving..." : "Save" })
+            /* @__PURE__ */ jsx7(Save, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
+            /* @__PURE__ */ jsx7("span", { className: "cls_pdf_viewer_toolbar_button_text", children: saving ? "Saving..." : "Save" })
+          ]
+        }
+      ) }),
+      sidepanel_metadata_enabled && metadata_input && /* @__PURE__ */ jsx7("div", { className: "cls_pdf_viewer_toolbar_group", children: /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          onClick: handle_sidepanel_toggle,
+          className: cn(
+            "cls_pdf_viewer_toolbar_button",
+            sidepanel_open && "cls_pdf_viewer_toolbar_button_active"
+          ),
+          "aria-label": "Toggle metadata panel",
+          title: "Toggle metadata panel",
+          children: [
+            /* @__PURE__ */ jsx7(PanelRight, { className: "cls_pdf_viewer_toolbar_icon", size: 16 }),
+            /* @__PURE__ */ jsx7("span", { className: "cls_pdf_viewer_toolbar_button_text", children: "Metadata" })
           ]
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "cls_pdf_viewer_content", children: /* @__PURE__ */ jsx6(
-      PdfViewerLayout,
-      {
-        pdf_document,
-        scale,
-        annotations,
-        current_tool,
-        background_color: effective_background_color,
-        config: config_ref.current,
-        on_annotation_create: handle_annotation_create,
-        on_annotation_click: (annotation, screen_x, screen_y, mapper) => {
-          console.log(
-            `\u{1F7E0} [AnnotationClick] opening editor id=${annotation.id}, page=${annotation.page_index}, screen=(${screen_x.toFixed(
-              1
-            )}, ${screen_y.toFixed(1)})`
-          );
-          const dialog_x = window.innerWidth / 2;
-          const dialog_y = Math.max(50, screen_y);
-          setTextDialog({
-            open: true,
-            page_index: annotation.page_index,
-            x: dialog_x,
-            y: dialog_y,
-            screen_x,
-            screen_y,
-            mapper,
-            editing_annotation: annotation
-          });
-        },
-        on_context_menu: (e, page_index, screen_x, screen_y, mapper) => {
-          const menu_x = e.clientX;
-          const menu_y = e.clientY;
-          setContextMenu({
-            visible: true,
-            x: menu_x,
-            y: menu_y,
-            page_index,
-            screen_x,
-            screen_y,
-            mapper
-          });
+    /* @__PURE__ */ jsxs6("div", { className: cn("cls_pdf_viewer_content_wrapper", sidepanel_open && "cls_pdf_viewer_content_wrapper_with_sidepanel"), children: [
+      /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: cn("cls_pdf_viewer_content", sidepanel_open && "cls_pdf_viewer_content_with_sidepanel"),
+          style: sidepanel_open ? { width: `calc(100% - ${sidepanel_width}px)` } : void 0,
+          children: /* @__PURE__ */ jsx7(
+            PdfViewerLayout,
+            {
+              pdf_document,
+              scale,
+              annotations,
+              current_tool,
+              background_color: effective_background_color,
+              config: config_ref.current,
+              on_annotation_create: handle_annotation_create,
+              on_annotation_click: (annotation, screen_x, screen_y, mapper) => {
+                console.log(
+                  `\u{1F7E0} [AnnotationClick] opening editor id=${annotation.id}, page=${annotation.page_index}, screen=(${screen_x.toFixed(
+                    1
+                  )}, ${screen_y.toFixed(1)})`
+                );
+                const dialog_x = window.innerWidth / 2;
+                const dialog_y = Math.max(50, screen_y);
+                setTextDialog({
+                  open: true,
+                  page_index: annotation.page_index,
+                  x: dialog_x,
+                  y: dialog_y,
+                  screen_x,
+                  screen_y,
+                  mapper,
+                  editing_annotation: annotation
+                });
+              },
+              on_context_menu: (e, page_index, screen_x, screen_y, mapper) => {
+                const menu_x = e.clientX;
+                const menu_y = e.clientY;
+                setContextMenu({
+                  visible: true,
+                  x: menu_x,
+                  y: menu_y,
+                  page_index,
+                  screen_x,
+                  screen_y,
+                  mapper
+                });
+              }
+            }
+          )
         }
-      }
-    ) }),
-    context_menu?.visible && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx6(
+      ),
+      sidepanel_metadata_enabled && metadata_input && /* @__PURE__ */ jsx7(
+        MetadataSidepanel,
+        {
+          is_open: sidepanel_open,
+          on_toggle: handle_sidepanel_toggle,
+          metadata: metadata_input,
+          on_change: handle_metadata_change,
+          width: sidepanel_width,
+          on_width_change: handle_sidepanel_width_change
+        }
+      )
+    ] }),
+    context_menu?.visible && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsx7(
         "div",
         {
           className: "cls_pdf_viewer_context_menu_backdrop",
@@ -2543,7 +2823,7 @@ ${suffix_line}`;
           }
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         ContextMenu,
         {
           x: context_menu.x,
@@ -2608,7 +2888,7 @@ ${suffix_line}`;
         }
       )
     ] }),
-    text_dialog && /* @__PURE__ */ jsx6(
+    text_dialog && /* @__PURE__ */ jsx7(
       TextAnnotationDialog,
       {
         open: text_dialog.open,