@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260827101734 → 0.8.1-dev.20260829044749

package/dist/CommentRendererClient-JBEXVDPU.mjs

@@ -0,0 +1,948 @@
+"use client";
+import {
+  asElementNode,
+  isTextNode,
+  parseSerializedContent
+} from "./chunk-7OCDXSTR.mjs";
+import {
+  AssetUtility_default
+} from "./chunk-TQ6BXQ3A.mjs";
+
+// src/components/controls/view/CommentRendererClient.tsx
+import React4 from "react";
+
+// src/components/controls/view/commentImages.ts
+var INDIVIDUAL_IMAGE_THRESHOLD = 1;
+var MAX_VISIBLE_GALLERY_IMAGES = 4;
+var isImageNode = (node) => !!node && !isTextNode(node) && asElementNode(node).type === "image";
+var flattenText = (node) => {
+  if (!node) return "";
+  if (isTextNode(node)) return node.text ?? "";
+  return (asElementNode(node).children ?? []).map(flattenText).join("");
+};
+var isBlankFiller = (node) => {
+  if (!node || isTextNode(node)) return false;
+  const element = asElementNode(node);
+  if (element.type === "linebreak" || element.type === "line-break") return true;
+  if (element.type === "paragraph") return flattenText(node).trim() === "";
+  return false;
+};
+var groupConsecutiveImages = (nodes) => {
+  const groups = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (!isImageNode(node)) {
+      groups.push({ kind: "other", node });
+      i += 1;
+      continue;
+    }
+    const runImages = [asElementNode(node)];
+    let cursor = i + 1;
+    while (cursor < nodes.length) {
+      if (isImageNode(nodes[cursor])) {
+        runImages.push(asElementNode(nodes[cursor]));
+        cursor += 1;
+        continue;
+      }
+      if (isBlankFiller(nodes[cursor])) {
+        let peek = cursor + 1;
+        while (peek < nodes.length && isBlankFiller(nodes[peek])) {
+          peek += 1;
+        }
+        if (peek < nodes.length && isImageNode(nodes[peek])) {
+          cursor = peek;
+          continue;
+        }
+      }
+      break;
+    }
+    groups.push({ kind: "images", nodes: runImages });
+    i = cursor;
+  }
+  return groups;
+};
+var pickUrl = (node) => typeof node.url === "string" && node.url || typeof node.src === "string" && node.src || typeof node.assetUrl === "string" && node.assetUrl || "";
+var pickAlt = (node) => typeof node.fileName === "string" && node.fileName || typeof node.altText === "string" && node.altText || typeof node.alt === "string" && node.alt || "";
+var resolveCommentImageUrl = (node, assetBaseUrl) => {
+  const raw = pickUrl(node);
+  if (!raw) return void 0;
+  return AssetUtility_default.resolveUrl(assetBaseUrl, raw);
+};
+var collectCommentImages = (nodes, assetBaseUrl) => {
+  if (!nodes || nodes.length === 0) {
+    return [];
+  }
+  const images = [];
+  const walk = (list) => {
+    for (const node of list) {
+      if (!node || isTextNode(node)) continue;
+      const element = asElementNode(node);
+      if (element.type === "image") {
+        const src = resolveCommentImageUrl(element, assetBaseUrl);
+        if (src) {
+          images.push({ src, alt: pickAlt(element) });
+        }
+      }
+      if (Array.isArray(element.children)) {
+        walk(element.children);
+      }
+    }
+  };
+  walk(nodes);
+  return images;
+};
+
+// src/components/controls/view/CommentNodeRenderer.tsx
+import React3 from "react";
+
+// src/components/controls/view/CommentImagePreviewContext.tsx
+import React2 from "react";
+
+// src/components/controls/view/CommentImageLightbox.tsx
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 1e3,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(0, 0, 0, 0.85)",
+  padding: "2rem",
+  cursor: "zoom-out"
+};
+var imgStyle = {
+  maxWidth: "100%",
+  maxHeight: "100%",
+  objectFit: "contain",
+  borderRadius: "0.25rem",
+  boxShadow: "0 10px 40px rgba(0, 0, 0, 0.4)",
+  cursor: "default",
+  zIndex: 1
+};
+var roundBtnStyle = {
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "9999px",
+  background: "rgba(255, 255, 255, 0.12)",
+  color: "#fff",
+  border: "none",
+  cursor: "pointer",
+  lineHeight: 1,
+  zIndex: 2
+};
+var closeStyle = {
+  ...roundBtnStyle,
+  top: "1rem",
+  right: "1.25rem",
+  width: "2.5rem",
+  height: "2.5rem",
+  fontSize: "1.5rem"
+};
+var navStyle = (side, disabled) => ({
+  ...roundBtnStyle,
+  top: "50%",
+  transform: "translateY(-50%)",
+  [side]: "1rem",
+  width: "2.75rem",
+  height: "2.75rem",
+  fontSize: "1.75rem",
+  opacity: disabled ? 0.25 : 1,
+  cursor: disabled ? "default" : "pointer"
+});
+var counterStyle = {
+  position: "fixed",
+  bottom: "1.25rem",
+  left: "50%",
+  transform: "translateX(-50%)",
+  padding: "0.25rem 0.75rem",
+  borderRadius: "9999px",
+  background: "rgba(255, 255, 255, 0.12)",
+  color: "#fff",
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  zIndex: 2
+};
+var CommentImageLightbox = ({
+  images,
+  index,
+  onIndexChange,
+  onClose
+}) => {
+  const hasPrev = index > 0;
+  const hasNext = index < images.length - 1;
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      } else if (event.key === "ArrowLeft" && hasPrev) {
+        onIndexChange(index - 1);
+      } else if (event.key === "ArrowRight" && hasNext) {
+        onIndexChange(index + 1);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, onIndexChange, index, hasPrev, hasNext]);
+  const current = images[index];
+  if (typeof document === "undefined" || !current) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "comment-image-lightbox",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": current.alt || "Image preview",
+        style: overlayStyle,
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close preview",
+              className: "comment-image-lightbox-close",
+              style: closeStyle,
+              onClick: onClose,
+              children: "\xD7"
+            }
+          ),
+          images.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous image",
+                disabled: !hasPrev,
+                className: "comment-image-lightbox-nav",
+                style: navStyle("left", !hasPrev),
+                onClick: (event) => {
+                  event.stopPropagation();
+                  if (hasPrev) {
+                    onIndexChange(index - 1);
+                  }
+                },
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next image",
+                disabled: !hasNext,
+                className: "comment-image-lightbox-nav",
+                style: navStyle("right", !hasNext),
+                onClick: (event) => {
+                  event.stopPropagation();
+                  if (hasNext) {
+                    onIndexChange(index + 1);
+                  }
+                },
+                children: "\u203A"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "comment-image-lightbox-counter", style: counterStyle, children: [
+              index + 1,
+              " / ",
+              images.length
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: current.src,
+              alt: current.alt,
+              className: "comment-image-lightbox-img",
+              style: imgStyle,
+              onClick: (event) => event.stopPropagation()
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+var CommentImageLightbox_default = CommentImageLightbox;
+
+// src/components/controls/view/CommentImagePreviewContext.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CommentImagePreviewContext = React2.createContext(null);
+var useCommentImagePreview = () => React2.useContext(CommentImagePreviewContext);
+var CommentImagePreviewProvider = ({ images, children }) => {
+  const [previewIndex, setPreviewIndex] = React2.useState(null);
+  const value = React2.useMemo(
+    () => ({
+      hasPreview: images.length > 0,
+      openPreview: (src) => {
+        const idx = images.findIndex((image) => image.src === src);
+        if (idx >= 0) {
+          setPreviewIndex(idx);
+        }
+      }
+    }),
+    [images]
+  );
+  return /* @__PURE__ */ jsxs2(CommentImagePreviewContext.Provider, { value, children: [
+    children,
+    previewIndex !== null ? /* @__PURE__ */ jsx2(
+      CommentImageLightbox_default,
+      {
+        images,
+        index: previewIndex,
+        onIndexChange: setPreviewIndex,
+        onClose: () => setPreviewIndex(null)
+      }
+    ) : null
+  ] });
+};
+
+// src/components/controls/view/CommentImageNode.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CommentImageNode = ({ node, assetBaseUrl }) => {
+  const preview = useCommentImagePreview();
+  const rawUrl = typeof node.url === "string" && node.url || typeof node.src === "string" && node.src || typeof node.assetUrl === "string" && node.assetUrl || "";
+  if (!rawUrl) {
+    return null;
+  }
+  const resolvedUrl = AssetUtility_default.resolveUrl(assetBaseUrl, rawUrl);
+  if (!resolvedUrl) {
+    return null;
+  }
+  const alt = typeof node.fileName === "string" && node.fileName || typeof node.altText === "string" && node.altText || typeof node.alt === "string" && node.alt || "";
+  const clickable = !!preview?.hasPreview;
+  return /* @__PURE__ */ jsx3(
+    "img",
+    {
+      className: "comment-node-image",
+      src: resolvedUrl,
+      alt,
+      loading: "lazy",
+      onClick: clickable ? () => preview?.openPreview(resolvedUrl) : void 0,
+      style: {
+        display: "block",
+        width: "auto",
+        height: "auto",
+        objectFit: "cover",
+        borderRadius: "0.375rem",
+        margin: "0.5rem 0",
+        cursor: clickable ? "zoom-in" : "default"
+      }
+    }
+  );
+};
+var CommentImageNode_default = CommentImageNode;
+
+// src/components/controls/view/FileIcon.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PdfIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#e53935",
+          d: "M38,42H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28	C42,40.209,40.209,42,38,42z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#fff",
+          d: "M34.841,26.799c-1.692-1.757-6.314-1.041-7.42-0.911c-1.627-1.562-2.734-3.45-3.124-4.101 c0.586-1.757,0.976-3.515,1.041-5.402c0-1.627-0.651-3.385-2.473-3.385c-0.651,0-1.237,0.391-1.562,0.911 c-0.781,1.367-0.456,4.101,0.781,6.899c-0.716,2.018-1.367,3.97-3.189,7.42c-1.888,0.781-5.858,2.604-6.183,4.556 c-0.13,0.586,0.065,1.172,0.521,1.627C13.688,34.805,14.273,35,14.859,35c2.408,0,4.751-3.32,6.379-6.118 c1.367-0.456,3.515-1.107,5.663-1.497c2.538,2.213,4.751,2.538,5.923,2.538c1.562,0,2.148-0.651,2.343-1.237 C35.492,28.036,35.297,27.32,34.841,26.799z M33.214,27.905c-0.065,0.456-0.651,0.911-1.692,0.651 c-1.237-0.325-2.343-0.911-3.32-1.692c0.846-0.13,2.734-0.325,4.101-0.065C32.824,26.929,33.344,27.254,33.214,27.905z M22.344,14.497c0.13-0.195,0.325-0.325,0.521-0.325c0.586,0,0.716,0.716,0.716,1.302c-0.065,1.367-0.325,2.734-0.781,4.036 C21.824,16.905,22.019,15.083,22.344,14.497z M22.214,27.124c0.521-1.041,1.237-2.864,1.497-3.645 c0.586,0.976,1.562,2.148,2.083,2.669C25.794,26.213,23.776,26.604,22.214,27.124z M18.374,29.728 c-1.497,2.473-3.059,4.036-3.905,4.036c-0.13,0-0.26-0.065-0.391-0.13c-0.195-0.13-0.26-0.325-0.195-0.586 C14.078,32.136,15.77,30.899,18.374,29.728z"
+        }
+      )
+    ]
+  }
+);
+var ExcelIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#169154",
+          d: "M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#18482a",
+          d: "M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
+        }
+      ),
+      /* @__PURE__ */ jsx4("path", { fill: "#0c8045", d: "M14 15.003H29V24.005000000000003H14z" }),
+      /* @__PURE__ */ jsx4("path", { fill: "#17472a", d: "M14 24.005H29V33.055H14z" }),
+      /* @__PURE__ */ jsxs3("g", { children: [
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            fill: "#29c27f",
+            d: "M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            fill: "#27663f",
+            d: "M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
+          }
+        ),
+        /* @__PURE__ */ jsx4("path", { fill: "#19ac65", d: "M29 15.003H44V24.005000000000003H29z" }),
+        /* @__PURE__ */ jsx4("path", { fill: "#129652", d: "M29 24.005H44V33.055H29z" })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#0c7238",
+          d: "M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#fff",
+          d: "M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
+        }
+      )
+    ]
+  }
+);
+var WordIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    baseProfile: "basic",
+    children: [
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#283593",
+          d: "M9,33.595l14.911-18.706L41,26v13.306C41,41.346,39.346,43,37.306,43H15.332	C11.835,43,9,40.164,9,36.667C9,36.667,9,33.595,9,33.595z"
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "linearGradient",
+        {
+          id: "qh2LT5tehRDFkLLfb-odWa",
+          x1: "9",
+          x2: "33.506",
+          y1: "364.445",
+          y2: "364.445",
+          gradientTransform: "translate(0 -339.89)",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx4("stop", { offset: "0", "stop-color": "#66c0ff" }),
+            /* @__PURE__ */ jsx4("stop", { offset: ".26", "stop-color": "#0094f0" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "url(#qh2LT5tehRDFkLLfb-odWa)",
+          d: "M9,20.208c0-2.624,2.126-4.75,4.749-4.75h21.857L41,12.778v13.527	C41,28.346,39.346,30,37.306,30H15.332C11.835,30,9,32.836,9,36.333L9,20.208L9,20.208z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#1e88e5",
+          "fill-opacity": ".6",
+          d: "M9,20.208c0-2.624,2.126-4.75,4.749-4.75h21.857L41,12.778v13.527	C41,28.346,39.346,30,37.306,30H15.332C11.835,30,9,32.836,9,36.333L9,20.208L9,20.208z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#00e5ff",
+          d: "M9,10.333C9,6.836,11.835,4,15.332,4h21.975C39.346,4,41,5.654,41,7.694v5.611	C41,15.346,39.346,17,37.306,17H15.332C11.835,17,9,19.836,9,23.333C9,23.333,9,10.333,9,10.333z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#1565c0",
+          d: "M7.5,23h10c1.933,0,3.5,1.567,3.5,3.5v10c0,1.933-1.567,3.5-3.5,3.5h-10C5.567,40,4,38.433,4,36.5	v-10C4,24.567,5.567,23,7.5,23z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#fff",
+          d: "M18.327,26.643l-2.092,9.713l-2.501,0.002L12.5,30.529l-1.293,5.829H8.683l-2.01-9.713h2.062	l1.24,6.41l1.232-6.41h2.528l1.291,6.41l1.21-6.41L18.327,26.643L18.327,26.643z"
+        }
+      )
+    ]
+  }
+);
+var StandardIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4("path", { fill: "#90CAF9", d: "M40 45L8 45 8 3 30 3 40 13z" }),
+      /* @__PURE__ */ jsx4("path", { fill: "#E1F5FE", d: "M38.5 14L29 14 29 4.5z" })
+    ]
+  }
+);
+var PowerPointIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#dc4c2c",
+          d: "M8,24c0,9.941,8.059,18,18,18s18-8.059,18-18H26H8z"
+        }
+      ),
+      /* @__PURE__ */ jsx4("path", { fill: "#f7a278", d: "M26,6v18h18C44,14.059,35.941,6,26,6z" }),
+      /* @__PURE__ */ jsx4("path", { fill: "#c06346", d: "M26,6C16.059,6,8,14.059,8,24h18V6z" }),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#9b341f",
+          d: "M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#fff",
+          d: "M14.673,19.012H10v10h2.024v-3.521H14.3c1.876,0,3.397-1.521,3.397-3.397v-0.058 C17.697,20.366,16.343,19.012,14.673,19.012z M15.57,22.358c0,0.859-0.697,1.556-1.556,1.556h-1.99v-3.325h1.99 c0.859,0,1.556,0.697,1.556,1.556V22.358z"
+        }
+      )
+    ]
+  }
+);
+var TextIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4("path", { fill: "#90CAF9", d: "M40 45L8 45 8 3 30 3 40 13z" }),
+      /* @__PURE__ */ jsx4("path", { fill: "#E1F5FE", d: "M38.5 14L29 14 29 4.5z" }),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#1976D2",
+          d: "M16 21H33V23H16zM16 25H29V27H16zM16 29H33V31H16zM16 33H29V35H16z"
+        }
+      )
+    ]
+  }
+);
+var ArchiveIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    zoomAndPan: "magnify",
+    viewBox: "0 0 75 74.999997",
+    preserveAspectRatio: "xMidYMid meet",
+    version: "1.0",
+    className: "w-10 h-10",
+    children: [
+      /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("clipPath", { id: "273d29c8a6", children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          d: "M 8.90625 0 L 65.90625 0 L 65.90625 75 L 8.90625 75 Z M 8.90625 0 ",
+          "clip-rule": "nonzero"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx4("g", { "clip-path": "url(#273d29c8a6)", children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#ff9100",
+          d: "M 65.882812 75 L 8.929688 75 L 8.929688 0 L 48.085938 0 L 65.882812 17.855469 Z M 65.882812 75 ",
+          "fill-opacity": "1",
+          "fill-rule": "nonzero"
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#fbe9e7",
+          d: "M 63.214844 19.644531 L 46.304688 19.644531 L 46.304688 2.679688 Z M 63.214844 19.644531 ",
+          "fill-opacity": "1",
+          "fill-rule": "nonzero"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#ffe0b2",
+          d: "M 26.523438 50.59375 L 33.824219 50.59375 L 33.824219 53.570312 L 22.339844 53.570312 L 22.339844 51.410156 L 29.566406 38.789062 L 22.265625 38.789062 L 22.265625 35.796875 L 33.691406 35.796875 L 33.691406 37.910156 Z M 26.523438 50.59375 ",
+          "fill-opacity": "1",
+          "fill-rule": "nonzero"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#ffe0b2",
+          d: "M 36.183594 35.796875 L 39.757812 35.796875 L 39.757812 53.570312 L 36.183594 53.570312 Z M 36.183594 35.796875 ",
+          "fill-opacity": "1",
+          "fill-rule": "nonzero"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "#ffe0b2",
+          d: "M 46.34375 47.320312 L 46.34375 53.570312 L 42.765625 53.570312 L 42.765625 35.796875 L 48.800781 35.796875 C 50.550781 35.796875 51.953125 36.34375 52.992188 37.433594 C 54.035156 38.523438 54.554688 39.9375 54.554688 41.683594 C 54.554688 43.425781 54.039062 44.796875 53.011719 45.808594 C 51.980469 46.820312 50.550781 47.320312 48.726562 47.320312 Z M 46.34375 44.332031 L 48.800781 44.332031 C 49.484375 44.332031 50.007812 44.105469 50.382812 43.660156 C 50.757812 43.210938 50.941406 42.5625 50.941406 41.707031 C 50.941406 40.816406 50.753906 40.113281 50.371094 39.585938 C 49.988281 39.0625 49.476562 38.796875 48.839844 38.789062 L 46.34375 38.789062 Z M 46.34375 44.332031 ",
+          "fill-opacity": "1",
+          "fill-rule": "nonzero"
+        }
+      )
+    ]
+  }
+);
+var getFileDetails = (url) => {
+  const extMatch = url.match(/\.([a-zA-Z0-9]+)(?:[\?#]|$)/);
+  const ext = extMatch ? extMatch[1].toLowerCase() : "";
+  let Icon = StandardIcon;
+  let extLabel = "FILE";
+  if (ext === "pdf") {
+    Icon = PdfIcon;
+    extLabel = "PDF";
+  } else if (["xls", "xlsx", "csv"].includes(ext)) {
+    Icon = ExcelIcon;
+    extLabel = "Excel";
+  } else if (["doc", "docx"].includes(ext)) {
+    Icon = WordIcon;
+    extLabel = "Word";
+  } else if (["ppt", "pptx"].includes(ext)) {
+    Icon = PowerPointIcon;
+    extLabel = "PowerPoint";
+  } else if (["txt", "rtf"].includes(ext)) {
+    Icon = TextIcon;
+    extLabel = "Text";
+  } else if (["zip", "rar", "7z"].includes(ext)) {
+    Icon = ArchiveIcon;
+    extLabel = "Archive";
+  } else if (ext) {
+    extLabel = ext.toUpperCase();
+  }
+  return { Icon, extLabel };
+};
+var FileIcon = ({ fileName, className }) => {
+  const { Icon } = getFileDetails(fileName);
+  return /* @__PURE__ */ jsx4("span", { className, children: /* @__PURE__ */ jsx4(Icon, {}) });
+};
+var FileIcon_default = FileIcon;
+
+// src/components/controls/view/CommentFileNode.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var formatFileSize = (sizeBytes) => {
+  const bytes = typeof sizeBytes === "number" ? sizeBytes : Number(sizeBytes);
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return "";
+  }
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+  return `${value.toFixed(value < 10 ? 1 : 0)} ${units[unitIndex]}`;
+};
+var CommentFileNode = ({ node, assetBaseUrl }) => {
+  const rawUrl = typeof node.url === "string" && node.url || typeof node.src === "string" && node.src || typeof node.assetUrl === "string" && node.assetUrl || "";
+  if (!rawUrl) {
+    return null;
+  }
+  const href = AssetUtility_default.resolveUrl(assetBaseUrl, rawUrl);
+  if (!href) {
+    return null;
+  }
+  const fileName = typeof node.fileName === "string" && node.fileName || typeof node.name === "string" && node.name || rawUrl.split("/").pop() || "file";
+  const sizeLabel = formatFileSize(node.fileSize);
+  return /* @__PURE__ */ jsxs4(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      download: fileName,
+      className: "comment-node-file",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 12px",
+        border: "1px solid rgba(0,0,0,0.12)",
+        borderRadius: "8px",
+        textDecoration: "none",
+        color: "inherit",
+        maxWidth: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx5(FileIcon_default, { fileName, className: "comment-node-file-icon" }),
+        /* @__PURE__ */ jsxs4(
+          "span",
+          {
+            className: "comment-node-file-text",
+            style: { display: "flex", flexDirection: "column", minWidth: 0 },
+            children: [
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: "comment-node-file-name",
+                  style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                  children: fileName
+                }
+              ),
+              sizeLabel ? /* @__PURE__ */ jsx5("span", { className: "comment-node-file-size", style: { fontSize: "0.8em", opacity: 0.7 }, children: sizeLabel }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentFileNode_default = CommentFileNode;
+
+// src/components/controls/view/CommentNodeRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextLeafNode = ({ node }) => {
+  let content = node.text;
+  if (node.code) content = /* @__PURE__ */ jsx6("code", { className: "comment-node-code", children: content });
+  if (node.bold) content = /* @__PURE__ */ jsx6("strong", { children: content });
+  if (node.italic) content = /* @__PURE__ */ jsx6("em", { children: content });
+  if (node.underline) content = /* @__PURE__ */ jsx6("u", { children: content });
+  if (node.strikethrough) content = /* @__PURE__ */ jsx6("s", { children: content });
+  return /* @__PURE__ */ jsx6(React3.Fragment, { children: content });
+};
+var renderChildren = (children, keyPrefix, assetBaseUrl) => {
+  if (!children || children.length === 0) {
+    return null;
+  }
+  return children.map((child, index) => {
+    const childKey = isTextNode(child) ? void 0 : asElementNode(child).id;
+    return /* @__PURE__ */ jsx6(
+      CommentNodeRenderer,
+      {
+        node: child,
+        assetBaseUrl
+      },
+      childKey ?? `${keyPrefix}-${index}`
+    );
+  });
+};
+var headingLevelFromTag = (tag) => {
+  const match = typeof tag === "string" ? tag.match(/\d/) : null;
+  const parsed = match ? Number(match[0]) : Number(tag);
+  return Number.isFinite(parsed) && parsed >= 1 && parsed <= 6 ? parsed : 3;
+};
+var CommentNodeRenderer = ({ node, assetBaseUrl }) => {
+  if (!node || typeof node !== "object") {
+    return null;
+  }
+  if (isTextNode(node)) {
+    return /* @__PURE__ */ jsx6(TextLeafNode, { node });
+  }
+  const element = asElementNode(node);
+  const key = element.id ?? element.type;
+  switch (element.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx6("p", { className: "comment-node-paragraph", children: renderChildren(element.children, key, assetBaseUrl) ?? /* @__PURE__ */ jsx6("br", {}) });
+    case "heading": {
+      const level = headingLevelFromTag(element.tag ?? element.level);
+      const HeadingTag = `h${level}`;
+      return /* @__PURE__ */ jsx6(HeadingTag, { className: "comment-node-heading", children: renderChildren(element.children, key, assetBaseUrl) });
+    }
+    case "list": {
+      const ordered = element.listType === "number" || element.ordered === true;
+      const ListTag = ordered ? "ol" : "ul";
+      return /* @__PURE__ */ jsx6(ListTag, { className: "comment-node-list", children: renderChildren(element.children, key, assetBaseUrl) });
+    }
+    case "listitem":
+    case "list-item":
+      return /* @__PURE__ */ jsx6("li", { className: "comment-node-listitem", children: renderChildren(element.children, key, assetBaseUrl) });
+    case "quote":
+    case "blockquote":
+      return /* @__PURE__ */ jsx6("blockquote", { className: "comment-node-quote", children: renderChildren(element.children, key, assetBaseUrl) });
+    case "code":
+    case "code-block":
+      return /* @__PURE__ */ jsx6("pre", { className: "comment-node-codeblock", children: /* @__PURE__ */ jsx6("code", { children: renderChildren(element.children, key, assetBaseUrl) }) });
+    case "image":
+      return /* @__PURE__ */ jsx6(CommentImageNode_default, { node: element, assetBaseUrl });
+    case "file":
+      return /* @__PURE__ */ jsx6(CommentFileNode_default, { node: element, assetBaseUrl });
+    case "link": {
+      const url = typeof element.url === "string" ? element.url : "#";
+      return /* @__PURE__ */ jsx6("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "comment-node-link", children: renderChildren(element.children, key, assetBaseUrl) });
+    }
+    case "mention": {
+      const label = element.label ?? element.mentionName ?? element.text ?? "";
+      return /* @__PURE__ */ jsxs5("span", { className: "comment-node-mention", children: [
+        "@",
+        label
+      ] });
+    }
+    case "linebreak":
+    case "line-break":
+      return /* @__PURE__ */ jsx6("br", {});
+    default:
+      return /* @__PURE__ */ jsx6(React3.Fragment, { children: renderChildren(element.children, key, assetBaseUrl) });
+  }
+};
+var CommentNodeRenderer_default = CommentNodeRenderer;
+
+// src/components/controls/view/CommentImageGallery.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(2, 1fr)",
+  gap: "2px",
+  borderRadius: "0.375rem",
+  overflow: "hidden",
+  margin: "0.5rem 0"
+};
+var cellStyle = {
+  position: "relative",
+  display: "block",
+  aspectRatio: "1",
+  width: "100%",
+  padding: 0,
+  border: "none",
+  background: "none",
+  cursor: "zoom-in",
+  overflow: "hidden"
+};
+var cellImgStyle = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var moreOverlayStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(0, 0, 0, 0.5)",
+  color: "#fff",
+  fontSize: "1.25rem",
+  fontWeight: 600
+};
+var CommentImageGallery = ({ nodes, assetBaseUrl }) => {
+  const preview = useCommentImagePreview();
+  const cells = nodes.map((node) => ({
+    id: typeof node.id === "string" && node.id || void 0,
+    src: resolveCommentImageUrl(node, assetBaseUrl),
+    alt: typeof node.fileName === "string" && node.fileName || typeof node.alt === "string" && node.alt || ""
+  })).filter((cell) => !!cell.src);
+  if (cells.length === 0) {
+    return null;
+  }
+  const visibleCount = Math.min(cells.length, MAX_VISIBLE_GALLERY_IMAGES);
+  const remaining = cells.length - MAX_VISIBLE_GALLERY_IMAGES;
+  return /* @__PURE__ */ jsx7("div", { className: "comment-image-gallery", style: gridStyle, children: cells.slice(0, visibleCount).map((cell, i) => {
+    const isLastVisible = i === visibleCount - 1;
+    const showMoreOverlay = isLastVisible && remaining > 0;
+    return /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        className: "comment-image-gallery-cell",
+        style: cellStyle,
+        "aria-label": showMoreOverlay ? `Show ${remaining} more photo${remaining === 1 ? "" : "s"}` : cell.alt || "View image",
+        onClick: () => preview?.openPreview(cell.src),
+        children: [
+          /* @__PURE__ */ jsx7("img", { src: cell.src, alt: cell.alt, loading: "lazy", style: cellImgStyle }),
+          showMoreOverlay ? /* @__PURE__ */ jsxs6("span", { className: "comment-image-gallery-more-overlay", style: moreOverlayStyle, children: [
+            "+",
+            remaining
+          ] }) : null
+        ]
+      },
+      cell.id ?? `comment-gallery-${i}`
+    );
+  }) });
+};
+var CommentImageGallery_default = CommentImageGallery;
+
+// src/components/controls/view/CommentRendererClient.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CommentRendererClient = ({ value, className, assetBaseUrl, apiBaseUrl }) => {
+  const nodes = React4.useMemo(() => parseSerializedContent(value), [value]);
+  const resolvedAssetBaseUrl = assetBaseUrl ?? apiBaseUrl;
+  const images = React4.useMemo(
+    () => collectCommentImages(nodes, resolvedAssetBaseUrl),
+    [nodes, resolvedAssetBaseUrl]
+  );
+  const groups = React4.useMemo(() => groupConsecutiveImages(nodes), [nodes]);
+  if (!nodes || nodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8(CommentImagePreviewProvider, { images, children: /* @__PURE__ */ jsx8("div", { className: className ?? "comment-renderer", children: groups.map((group, groupIndex) => {
+    if (group.kind === "images") {
+      const key = group.nodes[0]?.id ?? `comment-group-${groupIndex}`;
+      if (group.nodes.length <= INDIVIDUAL_IMAGE_THRESHOLD) {
+        return group.nodes.map((node2, i) => /* @__PURE__ */ jsx8(
+          CommentNodeRenderer_default,
+          {
+            node: node2,
+            assetBaseUrl: resolvedAssetBaseUrl
+          },
+          node2.id ?? `${key}-${i}`
+        ));
+      }
+      return /* @__PURE__ */ jsx8(
+        CommentImageGallery_default,
+        {
+          nodes: group.nodes,
+          assetBaseUrl: resolvedAssetBaseUrl
+        },
+        key
+      );
+    }
+    const node = group.node;
+    return /* @__PURE__ */ jsx8(
+      CommentNodeRenderer_default,
+      {
+        node,
+        assetBaseUrl: resolvedAssetBaseUrl
+      },
+      node.id ?? `comment-group-${groupIndex}`
+    );
+  }) }) });
+};
+var CommentRendererClient_default = CommentRendererClient;
+export {
+  CommentRendererClient_default as default
+};