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

package/dist/{CommentRendererClient-DY2NS3WO.mjs → CommentRendererClient-JBEXVDPU.mjs}

@@ -12,6 +12,56 @@ import {
 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) => {
@@ -279,9 +329,12 @@ var CommentImageNode = ({ node, assetBaseUrl }) => {
       loading: "lazy",
       onClick: clickable ? () => preview?.openPreview(resolvedUrl) : void 0,
       style: {
-        maxWidth: "100%",
-        height: "auto",
         display: "block",
+        width: "auto",
+        height: "auto",
+        objectFit: "cover",
+        borderRadius: "0.375rem",
+        margin: "0.5rem 0",
         cursor: clickable ? "zoom-in" : "default"
       }
     }
@@ -768,8 +821,83 @@ var CommentNodeRenderer = ({ node, 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 jsx7 } from "react/jsx-runtime";
+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;
@@ -777,17 +905,42 @@ var CommentRendererClient = ({ value, className, assetBaseUrl, apiBaseUrl }) =>
     () => collectCommentImages(nodes, resolvedAssetBaseUrl),
     [nodes, resolvedAssetBaseUrl]
   );
+  const groups = React4.useMemo(() => groupConsecutiveImages(nodes), [nodes]);
   if (!nodes || nodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(CommentImagePreviewProvider, { images, children: /* @__PURE__ */ jsx7("div", { className: className ?? "comment-renderer", children: nodes.map((node, index) => /* @__PURE__ */ jsx7(
-    CommentNodeRenderer_default,
-    {
-      node,
-      assetBaseUrl: resolvedAssetBaseUrl
-    },
-    node.id ?? `comment-node-${index}`
-  )) }) });
+  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 {

package/dist/{CommentRendererClient-2XBMECUR.mjs → CommentRendererClient-LO3DHVJE.mjs}

@@ -14,6 +14,56 @@ import {
 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) => {
@@ -281,9 +331,12 @@ var CommentImageNode = ({ node, assetBaseUrl }) => {
       loading: "lazy",
       onClick: clickable ? () => preview?.openPreview(resolvedUrl) : void 0,
       style: {
-        maxWidth: "100%",
-        height: "auto",
         display: "block",
+        width: "auto",
+        height: "auto",
+        objectFit: "cover",
+        borderRadius: "0.375rem",
+        margin: "0.5rem 0",
         cursor: clickable ? "zoom-in" : "default"
       }
     }
@@ -770,8 +823,83 @@ var CommentNodeRenderer = ({ node, 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 jsx7 } from "react/jsx-runtime";
+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;
@@ -779,17 +907,42 @@ var CommentRendererClient = ({ value, className, assetBaseUrl, apiBaseUrl }) =>
     () => collectCommentImages(nodes, resolvedAssetBaseUrl),
     [nodes, resolvedAssetBaseUrl]
   );
+  const groups = React4.useMemo(() => groupConsecutiveImages(nodes), [nodes]);
   if (!nodes || nodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(CommentImagePreviewProvider, { images, children: /* @__PURE__ */ jsx7("div", { className: className ?? "comment-renderer", children: nodes.map((node, index) => /* @__PURE__ */ jsx7(
-    CommentNodeRenderer_default,
-    {
-      node,
-      assetBaseUrl: resolvedAssetBaseUrl
-    },
-    node.id ?? `comment-node-${index}`
-  )) }) });
+  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 {