@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260914095913 → 0.8.1-dev.20260916090938

package/dist/{DataBindingControls-TF7XLJ5C.mjs → DataBindingControls-2CSX5L5I.mjs}

@@ -3,10 +3,14 @@
 "use client";
 import {
   InputControl_default
-} from "./chunk-YRNDRPUE.mjs";
+} from "./chunk-6GVLDYCQ.mjs";
+import {
+  Button_default
+} from "./chunk-LSKD5U3S.mjs";
 import {
   InputControlType_default
 } from "./chunk-DTWPZPSX.mjs";
+import "./chunk-IMNQO57B.mjs";
 
 // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -40,6 +44,21 @@ var parseODataSearch = (value) => {
   }
   return trimmedValue;
 };
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
 var normalizeSortOption = (option) => {
   const direction = option.direction.trim();
   return {
@@ -139,19 +158,17 @@ var DataBindingControls = ({
     },
     [router]
   );
-  useEffect(() => {
+  const handleSearch = useCallback(async () => {
     const trimmedSearchText = searchText.trim();
     if (trimmedSearchText === currentSearch.trim()) {
-      return;
+      return { isSuccessful: true };
     }
-    const timeout = window.setTimeout(() => {
-      navigateWithoutReload(
-        getQueryUrl({
-          "$search": trimmedSearchText || void 0
-        })
-      );
-    }, 500);
-    return () => window.clearTimeout(timeout);
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
   }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
   const hasFacetControls = showFacets && facetGroups.length > 0;
   const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -193,20 +210,57 @@ var DataBindingControls = ({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
     shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        InputControl_default,
+      showSearchBar && /* @__PURE__ */ jsxs(
+        "form",
         {
-          name: "searchText",
-          controlType: InputControlType_default.lineTextInput,
-          value: searchText,
-          callback: (updatedValues) => setSearchText(updatedValues.value),
-          attributes: { placeholder: "Search" },
-          inputClasses: "!mt-0"
+          role: "search",
+          className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSearch();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+              /* @__PURE__ */ jsx(
+                InputControl_default,
+                {
+                  name: "searchText",
+                  controlType: InputControlType_default.lineTextInput,
+                  value: searchText,
+                  callback: (updatedValues) => setSearchText(updatedValues.value),
+                  attributes: {
+                    placeholder: "Search discussions, topics, or keywords..."
+                  },
+                  inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button_default,
+              {
+                ButtonType: "Primary" /* Solid */,
+                onClick: handleSearch,
+                className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsx("span", { children: "Search" })
+                ]
+              }
+            )
+          ]
         }
-      ) }),
-      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+      ),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
         /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "sortOptions",
+            className: "shrink-0 whitespace-nowrap font-medium",
+            children: "Sort by"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
           InputControl_default,
           {
             name: "sortOptions",
@@ -222,9 +276,9 @@ var DataBindingControls = ({
               })
             ),
             attributes: { placeholder: "Default" },
-            inputClasses: "!mt-0 min-w-44"
+            inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
           }
-        )
+        ) })
       ] })
     ] }),
     shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),

package/dist/{DataBindingControls-SKC472JJ.mjs → DataBindingControls-F72KPWHV.mjs}

@@ -2,6 +2,10 @@
 import {
   InputControlType_default
 } from "./chunk-IEY342PD.mjs";
+import {
+  Button_default
+} from "./chunk-4WMSS6CE.mjs";
+import "./chunk-56HSDML5.mjs";
 
 // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -44,6 +48,21 @@ var parseODataSearch = (value) => {
   }
   return trimmedValue;
 };
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
 var normalizeSortOption = (option) => {
   const direction = option.direction.trim();
   return {
@@ -143,19 +162,17 @@ var DataBindingControls = ({
     },
     [router]
   );
-  useEffect(() => {
+  const handleSearch = useCallback(async () => {
     const trimmedSearchText = searchText.trim();
     if (trimmedSearchText === currentSearch.trim()) {
-      return;
+      return { isSuccessful: true };
     }
-    const timeout = window.setTimeout(() => {
-      navigateWithoutReload(
-        getQueryUrl({
-          "$search": trimmedSearchText || void 0
-        })
-      );
-    }, 500);
-    return () => window.clearTimeout(timeout);
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
   }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
   const hasFacetControls = showFacets && facetGroups.length > 0;
   const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -197,20 +214,57 @@ var DataBindingControls = ({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
     shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        InputControl_default,
+      showSearchBar && /* @__PURE__ */ jsxs(
+        "form",
         {
-          name: "searchText",
-          controlType: InputControlType_default.lineTextInput,
-          value: searchText,
-          callback: (updatedValues) => setSearchText(updatedValues.value),
-          attributes: { placeholder: "Search" },
-          inputClasses: "!mt-0"
+          role: "search",
+          className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSearch();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+              /* @__PURE__ */ jsx(
+                InputControl_default,
+                {
+                  name: "searchText",
+                  controlType: InputControlType_default.lineTextInput,
+                  value: searchText,
+                  callback: (updatedValues) => setSearchText(updatedValues.value),
+                  attributes: {
+                    placeholder: "Search discussions, topics, or keywords..."
+                  },
+                  inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button_default,
+              {
+                ButtonType: "Primary" /* Solid */,
+                onClick: handleSearch,
+                className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsx("span", { children: "Search" })
+                ]
+              }
+            )
+          ]
         }
-      ) }),
-      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+      ),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
         /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "sortOptions",
+            className: "shrink-0 whitespace-nowrap font-medium",
+            children: "Sort by"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
           InputControl_default,
           {
             name: "sortOptions",
@@ -226,9 +280,9 @@ var DataBindingControls = ({
               })
             ),
             attributes: { placeholder: "Default" },
-            inputClasses: "!mt-0 min-w-44"
+            inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
           }
-        )
+        ) })
       ] })
     ] }),
     shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),

package/dist/{HlsPlayer-IW52N5RG.mjs → HlsPlayer-AUZ42WTT.mjs}

@@ -282,10 +282,10 @@ var HlsPlayer = React.memo(
     }, [isMobile, resetInactivityTimer]);
     const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
     const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
-    const playBtnSize = "clamp(44px, 8vmin, 80px)";
+    const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
     const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
     const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
-    const playIconSize = "clamp(24px, 4.5vmin, 44px)";
+    const playIconSize = "clamp(18px, 3.2vmin, 32px)";
     const iconButtonStyle = {
       pointerEvents: isControlsVisible ? "auto" : "none",
       width: iconBtnSize,
@@ -375,11 +375,24 @@ var HlsPlayer = React.memo(
           ),
           /* @__PURE__ */ jsx("style", { children: `
           .hls-play-btn {
-            will-change: transform;
-            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            transform-origin: center center;
+            transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
+                        box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
+                        background-color 0.2s ease;
           }
           .hls-play-btn:hover {
-            transform: scale(1.08);
+            transform: scale(1.05) translateZ(0);
+            -webkit-transform: scale(1.05) translateZ(0);
+            background-color: #ffffff !important;
+            box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
+          }
+          .hls-play-btn:active {
+            transform: scale(0.96) translateZ(0);
+            -webkit-transform: scale(0.96) translateZ(0);
           }
         ` }),
           isBuffering && /* @__PURE__ */ jsxs(
@@ -393,51 +406,39 @@ var HlsPlayer = React.memo(
                 to { transform: rotate(360deg); }
               }
               .hls-spinner {
-                animation: hls-spin 1s linear infinite;
-                filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
-                        drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
+                animation: hls-spin 0.85s linear infinite;
+                filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
               }
             ` }),
                 /* @__PURE__ */ jsxs(
                   "svg",
                   {
                     className: "hls-spinner",
-                    width: "clamp(44px, 8vmin, 72px)",
-                    height: "clamp(44px, 8vmin, 72px)",
-                    viewBox: "0 0 72 72",
+                    width: "clamp(44px, 8vmin, 64px)",
+                    height: "clamp(44px, 8vmin, 64px)",
+                    viewBox: "0 0 48 48",
                     fill: "none",
                     xmlns: "http://www.w3.org/2000/svg",
                     children: [
-                      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
-                        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
-                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
-                      ] }) }),
-                      Array.from({ length: 18 }).map((_, i) => {
-                        const angle = i / 18 * 360;
-                        const opacity = 0.15 + i / 17 * 0.85;
-                        const rad = (angle - 90) * (Math.PI / 180);
-                        const r = 30;
-                        const cx = 36 + r * Math.cos(rad);
-                        const cy = 36 + r * Math.sin(rad);
-                        const t = i / 17;
-                        const r1 = Math.round(243 * (1 - t) + 143 * t);
-                        const g1 = Math.round(31 * (1 - t) + 38 * t);
-                        const b1 = Math.round(73 * (1 - t) + 237 * t);
-                        return /* @__PURE__ */ jsx(
-                          "rect",
-                          {
-                            x: cx - 2.2,
-                            y: cy - 5.5,
-                            width: 4.4,
-                            height: 11,
-                            rx: 2.2,
-                            fill: `rgba(${r1},${g1},${b1},${opacity})`,
-                            transform: `rotate(${angle}, ${cx}, ${cy})`
-                          },
-                          i
-                        );
-                      })
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "24",
+                          cy: "24",
+                          r: "18",
+                          stroke: "rgba(255, 255, 255, 0.25)",
+                          strokeWidth: "3.5"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M24 6a18 18 0 0 1 18 18",
+                          stroke: "#ffffff",
+                          strokeWidth: "3.5",
+                          strokeLinecap: "round"
+                        }
+                      )
                     ]
                   }
                 )
@@ -452,7 +453,7 @@ var HlsPlayer = React.memo(
                 opacity: isControlsVisible ? 1 : 0,
                 transition: "opacity 0.3s ease"
               },
-              children: /* @__PURE__ */ jsxs(
+              children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -468,83 +469,58 @@ var HlsPlayer = React.memo(
                     width: playBtnSize,
                     height: playBtnSize,
                     borderRadius: "50%",
-                    border: "none",
+                    border: "1px solid rgba(255, 255, 255, 0.8)",
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
+                    background: "rgba(255, 255, 255, 0.92)",
+                    backdropFilter: "blur(12px)",
+                    WebkitBackdropFilter: "blur(12px)",
+                    boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
                     flexShrink: 0,
-                    position: "relative",
-                    overflow: "hidden"
+                    position: "relative"
                   },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
+                  children: isPlaying ? (
+                    /* Pause — clean rounded dual bars */
+                    /* @__PURE__ */ jsxs(
+                      "svg",
                       {
-                        style: {
-                          position: "absolute",
-                          inset: 0,
-                          borderRadius: "50%",
-                          background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
-                          pointerEvents: "none"
-                        }
+                        width: playIconSize,
+                        height: playIconSize,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
+                          /* @__PURE__ */ jsx("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
+                        ]
                       }
-                    ),
+                    )
+                  ) : (
+                    /* Play — clean rounded triangle with standard optical balance */
                     /* @__PURE__ */ jsx(
-                      "div",
+                      "svg",
                       {
-                        style: {
-                          position: "absolute",
-                          inset: 0,
-                          borderRadius: "50%",
-                          background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
-                          pointerEvents: "none"
-                        }
+                        width: playIconSize,
+                        height: playIconSize,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ jsx(
+                          "polygon",
+                          {
+                            points: "6 3 20 12 6 21 6 3",
+                            fill: "#0f172a",
+                            stroke: "#0f172a",
+                            strokeWidth: "2",
+                            strokeLinejoin: "round",
+                            strokeLinecap: "round"
+                          }
+                        )
                       }
-                    ),
-                    isPlaying ? (
-                      /* Pause — two rounded bars, sized to match play icon proportions */
-                      /* @__PURE__ */ jsxs(
-                        "svg",
-                        {
-                          width: playIconSize,
-                          height: playIconSize,
-                          viewBox: "0 0 20 20",
-                          fill: "none",
-                          xmlns: "http://www.w3.org/2000/svg",
-                          children: [
-                            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
-                            /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
-                          ]
-                        }
-                      )
-                    ) : (
-                      /*
-                       * Play — rounded-corner triangle from the provided SVG path.
-                       * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
-                       * We flatten the transform: effective drawing area is 240×250 units.
-                       */
-                      /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          width: playIconSize,
-                          height: playIconSize,
-                          viewBox: "0 0 240 250",
-                          fill: "none",
-                          xmlns: "http://www.w3.org/2000/svg",
-                          style: { transform: "translateX(4%)" },
-                          children: /* @__PURE__ */ jsx(
-                            "path",
-                            {
-                              d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
-                              fill: "white"
-                            }
-                          )
-                        }
-                      )
                     )
-                  ]
+                  )
                 }
               )
             }