@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20261013090602 → 0.8.1-dev.20261014075053

package/dist/MediaAccordionNodeClient-NI5ZWLOR.mjs

@@ -0,0 +1,144 @@
+"use client";
+
+"use client";
+import {
+  AssetUtility_default
+} from "./chunk-UPCAOGEY.mjs";
+
+// src/components/pageRenderingEngine/nodes/MediaAccordionNodeClient.tsx
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HlsPlayer = dynamic(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
+var isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(url);
+var isVideoUrl = (url) => /\.(mp4|webm|ogv)(?:$|[?#])/i.test(url);
+var MediaAccordionNodeClient = (props) => {
+  const items = Array.isArray(props.node.items) ? props.node.items : [];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeItem = items[activeIndex] ?? items[0];
+  const buttonBackground = props.node.buttonBackgroundLayers?.length ? props.node.buttonBackgroundLayers.slice(0, 1).map((layer) => {
+    const colors = layer.value.colors.map((stop) => `color-mix(in srgb, ${stop.color}, transparent ${stop.transparency ?? 0}%) ${stop.position}%`).join(", ");
+    return `linear-gradient(${layer.value.direction}deg, ${colors})`;
+  }).filter(Boolean).join(", ") : props.node.buttonBackgroundGradient ? `linear-gradient(135deg, ${props.node.buttonGradientStart || "var(--primary-action-fill)"}, ${props.node.buttonGradientEnd || "var(--primary-action-fill)"})` : props.node.buttonBackgroundColor || "var(--primary-action-fill)";
+  const assetBaseUrl = props.assetBaseUrl || `${props.apiBaseUrl}/digitalassets-management`;
+  const resolveUrl = (url) => url ? AssetUtility_default.resolveUrl(assetBaseUrl, url) : void 0;
+  const renderMedia = (item) => {
+    const mediaUrl = resolveUrl(item.mediaUrl);
+    const posterUrl = resolveUrl(item.posterUrl);
+    if (!mediaUrl) return null;
+    if (item.mediaType === "image") {
+      return /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "story-accordion__media-image",
+          src: mediaUrl,
+          alt: item.title,
+          loading: "lazy",
+          fill: true,
+          sizes: "(max-width: 700px) 100vw, 60vw",
+          unoptimized: true
+        }
+      );
+    }
+    if (isHlsUrl(mediaUrl)) {
+      return /* @__PURE__ */ jsx(
+        HlsPlayer,
+        {
+          assetUrl: mediaUrl,
+          posterUrl,
+          showControls: true,
+          apiBaseUrl: props.apiBaseUrl,
+          session: ""
+        }
+      );
+    }
+    if (item.mediaType === "video" || isVideoUrl(mediaUrl)) {
+      return /* @__PURE__ */ jsx(
+        "video",
+        {
+          className: "story-accordion__media-video",
+          src: mediaUrl,
+          poster: posterUrl,
+          controls: true,
+          playsInline: true,
+          preload: "metadata"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: "story-accordion__media-image",
+        src: posterUrl || mediaUrl,
+        alt: item.title,
+        loading: "lazy",
+        fill: true,
+        sizes: "(max-width: 700px) 100vw, 60vw",
+        unoptimized: true
+      }
+    );
+  };
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "story-accordion",
+      "aria-label": "Featured stories",
+      style: {
+        "--story-button-background": buttonBackground,
+        "--story-button-text": props.node.buttonTextTransparency ? `color-mix(in srgb, ${props.node.buttonTextColor || "var(--primary-action-text)"}, transparent ${props.node.buttonTextTransparency}%)` : props.node.buttonTextColor || "var(--primary-action-text)",
+        "--story-button-border": props.node.buttonBorderColor || "var(--neutral-border)",
+        "--story-button-clip": props.node.buttonBackgroundClipText ? "text" : "border-box",
+        "--story-inactive-button-background": props.node.buttonInactiveBackgroundColor || "var(--neutral)",
+        "--story-inactive-button-text": props.node.buttonInactiveTextColor || "var(--neutral-text-base)",
+        "--story-inactive-button-border": props.node.buttonInactiveBorderColor || "var(--neutral-border)",
+        "--story-media-ratio": `${Math.min(3, Math.max(0.75, props.node.mediaColumnRatio ?? 1.45))}fr`,
+        "--story-media-fit": ["cover", "contain", "fill", "none", "scale-down"].includes(props.node.mediaObjectFit || "") ? props.node.mediaObjectFit : "cover",
+        "--story-button-padding": `${props.node.buttonPaddingTop ?? props.node.buttonPaddingAll ?? 12}px ${props.node.buttonPaddingRight ?? props.node.buttonPaddingAll ?? 16}px ${props.node.buttonPaddingBottom ?? props.node.buttonPaddingAll ?? 12}px ${props.node.buttonPaddingLeft ?? props.node.buttonPaddingAll ?? 16}px`,
+        "--story-button-radius": `${Math.max(0, props.node.buttonBorderRadius ?? 9)}px`,
+        "--story-button-border-width": `${Math.max(0, props.node.buttonBorderWidth ?? 1)}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        .story-accordion { display:grid; grid-template-columns:minmax(0,var(--story-media-ratio,1.45fr)) minmax(260px,1fr); gap:20px; align-items:stretch; width:100%; padding:16px; border-radius:14px; background:var(--neutral); }
+        .story-accordion__media { position:relative; min-height:320px; overflow:hidden; border-radius:10px; background:var(--neutral-border); }
+        .story-accordion__media > * { display:block; width:100%; height:100%; min-height:320px; }
+        .story-accordion__media-image, .story-accordion__media-video { object-fit:var(--story-media-fit,cover); }
+        .story-accordion__list { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
+        .story-accordion__item { width:100%; min-height:54px; padding:var(--story-button-padding,12px 16px); border:var(--story-button-border-width,1px) solid var(--neutral-border); border-radius:var(--story-button-radius,9px); background:var(--neutral); color:var(--neutral-text-base); text-align:left; font:inherit; line-height:1.35; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
+        .story-accordion__item:hover { border-color:var(--primary-action-fill); }
+        .story-accordion__item[aria-pressed="true"] { border-color:var(--story-button-border,var(--neutral-border)); background:var(--story-button-background); color:var(--story-button-text); background-clip:var(--story-button-clip); -webkit-background-clip:var(--story-button-clip); }
+        .story-accordion__item.is-inactive.is-custom { border-color:var(--story-inactive-button-border,var(--neutral-border)); background:var(--story-inactive-button-background); color:var(--story-inactive-button-text); }
+        .story-accordion__item:focus-visible { outline:3px solid var(--primary-action-fill); outline-offset:2px; }
+        @media(max-width:700px) { .story-accordion { grid-template-columns:minmax(0,1fr); gap:14px; padding:10px; } .story-accordion__media, .story-accordion__media > * { min-height:220px; } .story-accordion__list { gap:8px; } .story-accordion__item { min-height:48px; } }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "story-accordion__media", children: activeItem ? renderMedia(activeItem) : null }),
+        /* @__PURE__ */ jsx("div", { className: "story-accordion__list", role: "group", "aria-label": "Choose a story", children: items.map((item, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `story-accordion__item ${index === activeIndex ? "is-active" : "is-inactive"} ${props.node.buttonInactiveStyleEnabled && index !== activeIndex ? "is-custom" : ""}`,
+            "aria-pressed": index === activeIndex,
+            style: {
+              borderWidth: `${Math.max(0, props.node.buttonBorderWidth ?? 1)}px`,
+              borderStyle: "solid",
+              borderColor: index === activeIndex || !props.node.buttonInactiveStyleEnabled ? props.node.buttonBorderColor || "var(--neutral-border)" : props.node.buttonInactiveBorderColor || "var(--neutral-border)",
+              ...index !== activeIndex && props.node.buttonInactiveStyleEnabled ? {
+                background: props.node.buttonInactiveBackgroundColor || "var(--neutral)",
+                color: props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
+              } : {}
+            },
+            onClick: () => setActiveIndex(index),
+            children: item.title
+          },
+          item.id || `${item.title}-${index}`
+        )) })
+      ]
+    }
+  );
+};
+var MediaAccordionNodeClient_default = MediaAccordionNodeClient;
+export {
+  MediaAccordionNodeClient_default as default
+};

package/dist/MediaAccordionNodeClient-ZVKS3IEH.mjs

@@ -0,0 +1,142 @@
+"use client";
+import {
+  AssetUtility_default
+} from "./chunk-TQ6BXQ3A.mjs";
+
+// src/components/pageRenderingEngine/nodes/MediaAccordionNodeClient.tsx
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HlsPlayer = dynamic(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
+var isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(url);
+var isVideoUrl = (url) => /\.(mp4|webm|ogv)(?:$|[?#])/i.test(url);
+var MediaAccordionNodeClient = (props) => {
+  const items = Array.isArray(props.node.items) ? props.node.items : [];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeItem = items[activeIndex] ?? items[0];
+  const buttonBackground = props.node.buttonBackgroundLayers?.length ? props.node.buttonBackgroundLayers.slice(0, 1).map((layer) => {
+    const colors = layer.value.colors.map((stop) => `color-mix(in srgb, ${stop.color}, transparent ${stop.transparency ?? 0}%) ${stop.position}%`).join(", ");
+    return `linear-gradient(${layer.value.direction}deg, ${colors})`;
+  }).filter(Boolean).join(", ") : props.node.buttonBackgroundGradient ? `linear-gradient(135deg, ${props.node.buttonGradientStart || "var(--primary-action-fill)"}, ${props.node.buttonGradientEnd || "var(--primary-action-fill)"})` : props.node.buttonBackgroundColor || "var(--primary-action-fill)";
+  const assetBaseUrl = props.assetBaseUrl || `${props.apiBaseUrl}/digitalassets-management`;
+  const resolveUrl = (url) => url ? AssetUtility_default.resolveUrl(assetBaseUrl, url) : void 0;
+  const renderMedia = (item) => {
+    const mediaUrl = resolveUrl(item.mediaUrl);
+    const posterUrl = resolveUrl(item.posterUrl);
+    if (!mediaUrl) return null;
+    if (item.mediaType === "image") {
+      return /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "story-accordion__media-image",
+          src: mediaUrl,
+          alt: item.title,
+          loading: "lazy",
+          fill: true,
+          sizes: "(max-width: 700px) 100vw, 60vw",
+          unoptimized: true
+        }
+      );
+    }
+    if (isHlsUrl(mediaUrl)) {
+      return /* @__PURE__ */ jsx(
+        HlsPlayer,
+        {
+          assetUrl: mediaUrl,
+          posterUrl,
+          showControls: true,
+          apiBaseUrl: props.apiBaseUrl,
+          session: ""
+        }
+      );
+    }
+    if (item.mediaType === "video" || isVideoUrl(mediaUrl)) {
+      return /* @__PURE__ */ jsx(
+        "video",
+        {
+          className: "story-accordion__media-video",
+          src: mediaUrl,
+          poster: posterUrl,
+          controls: true,
+          playsInline: true,
+          preload: "metadata"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: "story-accordion__media-image",
+        src: posterUrl || mediaUrl,
+        alt: item.title,
+        loading: "lazy",
+        fill: true,
+        sizes: "(max-width: 700px) 100vw, 60vw",
+        unoptimized: true
+      }
+    );
+  };
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "story-accordion",
+      "aria-label": "Featured stories",
+      style: {
+        "--story-button-background": buttonBackground,
+        "--story-button-text": props.node.buttonTextTransparency ? `color-mix(in srgb, ${props.node.buttonTextColor || "var(--primary-action-text)"}, transparent ${props.node.buttonTextTransparency}%)` : props.node.buttonTextColor || "var(--primary-action-text)",
+        "--story-button-border": props.node.buttonBorderColor || "var(--neutral-border)",
+        "--story-button-clip": props.node.buttonBackgroundClipText ? "text" : "border-box",
+        "--story-inactive-button-background": props.node.buttonInactiveBackgroundColor || "var(--neutral)",
+        "--story-inactive-button-text": props.node.buttonInactiveTextColor || "var(--neutral-text-base)",
+        "--story-inactive-button-border": props.node.buttonInactiveBorderColor || "var(--neutral-border)",
+        "--story-media-ratio": `${Math.min(3, Math.max(0.75, props.node.mediaColumnRatio ?? 1.45))}fr`,
+        "--story-media-fit": ["cover", "contain", "fill", "none", "scale-down"].includes(props.node.mediaObjectFit || "") ? props.node.mediaObjectFit : "cover",
+        "--story-button-padding": `${props.node.buttonPaddingTop ?? props.node.buttonPaddingAll ?? 12}px ${props.node.buttonPaddingRight ?? props.node.buttonPaddingAll ?? 16}px ${props.node.buttonPaddingBottom ?? props.node.buttonPaddingAll ?? 12}px ${props.node.buttonPaddingLeft ?? props.node.buttonPaddingAll ?? 16}px`,
+        "--story-button-radius": `${Math.max(0, props.node.buttonBorderRadius ?? 9)}px`,
+        "--story-button-border-width": `${Math.max(0, props.node.buttonBorderWidth ?? 1)}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        .story-accordion { display:grid; grid-template-columns:minmax(0,var(--story-media-ratio,1.45fr)) minmax(260px,1fr); gap:20px; align-items:stretch; width:100%; padding:16px; border-radius:14px; background:var(--neutral); }
+        .story-accordion__media { position:relative; min-height:320px; overflow:hidden; border-radius:10px; background:var(--neutral-border); }
+        .story-accordion__media > * { display:block; width:100%; height:100%; min-height:320px; }
+        .story-accordion__media-image, .story-accordion__media-video { object-fit:var(--story-media-fit,cover); }
+        .story-accordion__list { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
+        .story-accordion__item { width:100%; min-height:54px; padding:var(--story-button-padding,12px 16px); border:var(--story-button-border-width,1px) solid var(--neutral-border); border-radius:var(--story-button-radius,9px); background:var(--neutral); color:var(--neutral-text-base); text-align:left; font:inherit; line-height:1.35; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
+        .story-accordion__item:hover { border-color:var(--primary-action-fill); }
+        .story-accordion__item[aria-pressed="true"] { border-color:var(--story-button-border,var(--neutral-border)); background:var(--story-button-background); color:var(--story-button-text); background-clip:var(--story-button-clip); -webkit-background-clip:var(--story-button-clip); }
+        .story-accordion__item.is-inactive.is-custom { border-color:var(--story-inactive-button-border,var(--neutral-border)); background:var(--story-inactive-button-background); color:var(--story-inactive-button-text); }
+        .story-accordion__item:focus-visible { outline:3px solid var(--primary-action-fill); outline-offset:2px; }
+        @media(max-width:700px) { .story-accordion { grid-template-columns:minmax(0,1fr); gap:14px; padding:10px; } .story-accordion__media, .story-accordion__media > * { min-height:220px; } .story-accordion__list { gap:8px; } .story-accordion__item { min-height:48px; } }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "story-accordion__media", children: activeItem ? renderMedia(activeItem) : null }),
+        /* @__PURE__ */ jsx("div", { className: "story-accordion__list", role: "group", "aria-label": "Choose a story", children: items.map((item, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `story-accordion__item ${index === activeIndex ? "is-active" : "is-inactive"} ${props.node.buttonInactiveStyleEnabled && index !== activeIndex ? "is-custom" : ""}`,
+            "aria-pressed": index === activeIndex,
+            style: {
+              borderWidth: `${Math.max(0, props.node.buttonBorderWidth ?? 1)}px`,
+              borderStyle: "solid",
+              borderColor: index === activeIndex || !props.node.buttonInactiveStyleEnabled ? props.node.buttonBorderColor || "var(--neutral-border)" : props.node.buttonInactiveBorderColor || "var(--neutral-border)",
+              ...index !== activeIndex && props.node.buttonInactiveStyleEnabled ? {
+                background: props.node.buttonInactiveBackgroundColor || "var(--neutral)",
+                color: props.node.buttonInactiveTextColor || "var(--neutral-text-base)"
+              } : {}
+            },
+            onClick: () => setActiveIndex(index),
+            children: item.title
+          },
+          item.id || `${item.title}-${index}`
+        )) })
+      ]
+    }
+  );
+};
+var MediaAccordionNodeClient_default = MediaAccordionNodeClient;
+export {
+  MediaAccordionNodeClient_default as default
+};