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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/{DataBindingControls-TF7XLJ5C.mjs → DataBindingControls-2CSX5L5I.mjs} +78 -24
  2. package/dist/{DataBindingControls-SKC472JJ.mjs → DataBindingControls-F72KPWHV.mjs} +77 -23
  3. package/dist/{HlsPlayer-IW52N5RG.mjs → HlsPlayer-AUZ42WTT.mjs} +83 -107
  4. package/dist/{HlsPlayer-BVS6BVF7.mjs → HlsPlayer-ZGFEVSKL.mjs} +83 -107
  5. package/dist/{chunk-YRNDRPUE.mjs → chunk-6GVLDYCQ.mjs} +1 -1
  6. package/dist/index.js +159 -131
  7. package/dist/index.mjs +11 -11
  8. package/dist/server.js +159 -131
  9. package/dist/server.mjs +4 -4
  10. package/package.json +1 -1
  11. package/dist/{InputControlClient-BC66BGHI.mjs → InputControlClient-DZGLI4DU.mjs} +5 -5
  12. package/dist/{Pagination-CQKMBXXJ.mjs → Pagination-PGAK7KDA.mjs} +1 -1
package/dist/{HlsPlayer-BVS6BVF7.mjs → HlsPlayer-ZGFEVSKL.mjs} RENAMED
@@ -280,10 +280,10 @@ var HlsPlayer = React.memo(
280
280
  }, [isMobile, resetInactivityTimer]);
281
281
  const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
282
282
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
283
- const playBtnSize = "clamp(44px, 8vmin, 80px)";
283
+ const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
284
284
  const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
285
285
  const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
286
- const playIconSize = "clamp(24px, 4.5vmin, 44px)";
286
+ const playIconSize = "clamp(18px, 3.2vmin, 32px)";
287
287
  const iconButtonStyle = {
288
288
  pointerEvents: isControlsVisible ? "auto" : "none",
289
289
  width: iconBtnSize,
@@ -373,11 +373,24 @@ var HlsPlayer = React.memo(
373
373
  ),
374
374
  /* @__PURE__ */ jsx("style", { children: `
375
375
  .hls-play-btn {
376
- will-change: transform;
377
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
376
+ transform: translateZ(0);
377
+ -webkit-transform: translateZ(0);
378
+ backface-visibility: hidden;
379
+ -webkit-backface-visibility: hidden;
380
+ transform-origin: center center;
381
+ transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
382
+ box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
383
+ background-color 0.2s ease;
378
384
  }
379
385
  .hls-play-btn:hover {
380
- transform: scale(1.08);
386
+ transform: scale(1.05) translateZ(0);
387
+ -webkit-transform: scale(1.05) translateZ(0);
388
+ background-color: #ffffff !important;
389
+ 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;
390
+ }
391
+ .hls-play-btn:active {
392
+ transform: scale(0.96) translateZ(0);
393
+ -webkit-transform: scale(0.96) translateZ(0);
381
394
  }
382
395
  ` }),
383
396
  isBuffering && /* @__PURE__ */ jsxs(
@@ -391,51 +404,39 @@ var HlsPlayer = React.memo(
391
404
  to { transform: rotate(360deg); }
392
405
  }
393
406
  .hls-spinner {
394
- animation: hls-spin 1s linear infinite;
395
- filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
396
- drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
407
+ animation: hls-spin 0.85s linear infinite;
408
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
397
409
  }
398
410
  ` }),
399
411
  /* @__PURE__ */ jsxs(
400
412
  "svg",
401
413
  {
402
414
  className: "hls-spinner",
403
- width: "clamp(44px, 8vmin, 72px)",
404
- height: "clamp(44px, 8vmin, 72px)",
405
- viewBox: "0 0 72 72",
415
+ width: "clamp(44px, 8vmin, 64px)",
416
+ height: "clamp(44px, 8vmin, 64px)",
417
+ viewBox: "0 0 48 48",
406
418
  fill: "none",
407
419
  xmlns: "http://www.w3.org/2000/svg",
408
420
  children: [
409
- /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
410
- /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
411
- /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
412
- /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
413
- ] }) }),
414
- Array.from({ length: 18 }).map((_, i) => {
415
- const angle = i / 18 * 360;
416
- const opacity = 0.15 + i / 17 * 0.85;
417
- const rad = (angle - 90) * (Math.PI / 180);
418
- const r = 30;
419
- const cx = 36 + r * Math.cos(rad);
420
- const cy = 36 + r * Math.sin(rad);
421
- const t = i / 17;
422
- const r1 = Math.round(243 * (1 - t) + 143 * t);
423
- const g1 = Math.round(31 * (1 - t) + 38 * t);
424
- const b1 = Math.round(73 * (1 - t) + 237 * t);
425
- return /* @__PURE__ */ jsx(
426
- "rect",
427
- {
428
- x: cx - 2.2,
429
- y: cy - 5.5,
430
- width: 4.4,
431
- height: 11,
432
- rx: 2.2,
433
- fill: `rgba(${r1},${g1},${b1},${opacity})`,
434
- transform: `rotate(${angle}, ${cx}, ${cy})`
435
- },
436
- i
437
- );
438
- })
421
+ /* @__PURE__ */ jsx(
422
+ "circle",
423
+ {
424
+ cx: "24",
425
+ cy: "24",
426
+ r: "18",
427
+ stroke: "rgba(255, 255, 255, 0.25)",
428
+ strokeWidth: "3.5"
429
+ }
430
+ ),
431
+ /* @__PURE__ */ jsx(
432
+ "path",
433
+ {
434
+ d: "M24 6a18 18 0 0 1 18 18",
435
+ stroke: "#ffffff",
436
+ strokeWidth: "3.5",
437
+ strokeLinecap: "round"
438
+ }
439
+ )
439
440
  ]
440
441
  }
441
442
  )
@@ -450,7 +451,7 @@ var HlsPlayer = React.memo(
450
451
  opacity: isControlsVisible ? 1 : 0,
451
452
  transition: "opacity 0.3s ease"
452
453
  },
453
- children: /* @__PURE__ */ jsxs(
454
+ children: /* @__PURE__ */ jsx(
454
455
  "button",
455
456
  {
456
457
  type: "button",
@@ -466,83 +467,58 @@ var HlsPlayer = React.memo(
466
467
  width: playBtnSize,
467
468
  height: playBtnSize,
468
469
  borderRadius: "50%",
469
- border: "none",
470
+ border: "1px solid rgba(255, 255, 255, 0.8)",
470
471
  cursor: "pointer",
471
472
  display: "flex",
472
473
  alignItems: "center",
473
474
  justifyContent: "center",
474
- background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
475
+ background: "rgba(255, 255, 255, 0.92)",
476
+ backdropFilter: "blur(12px)",
477
+ WebkitBackdropFilter: "blur(12px)",
478
+ 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)",
475
479
  flexShrink: 0,
476
- position: "relative",
477
- overflow: "hidden"
480
+ position: "relative"
478
481
  },
479
- children: [
480
- /* @__PURE__ */ jsx(
481
- "div",
482
+ children: isPlaying ? (
483
+ /* Pause — clean rounded dual bars */
484
+ /* @__PURE__ */ jsxs(
485
+ "svg",
482
486
  {
483
- style: {
484
- position: "absolute",
485
- inset: 0,
486
- borderRadius: "50%",
487
- 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%)",
488
- pointerEvents: "none"
489
- }
487
+ width: playIconSize,
488
+ height: playIconSize,
489
+ viewBox: "0 0 24 24",
490
+ fill: "none",
491
+ xmlns: "http://www.w3.org/2000/svg",
492
+ children: [
493
+ /* @__PURE__ */ jsx("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
494
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
495
+ ]
490
496
  }
491
- ),
497
+ )
498
+ ) : (
499
+ /* Play — clean rounded triangle with standard optical balance */
492
500
  /* @__PURE__ */ jsx(
493
- "div",
501
+ "svg",
494
502
  {
495
- style: {
496
- position: "absolute",
497
- inset: 0,
498
- borderRadius: "50%",
499
- background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
500
- pointerEvents: "none"
501
- }
503
+ width: playIconSize,
504
+ height: playIconSize,
505
+ viewBox: "0 0 24 24",
506
+ fill: "none",
507
+ xmlns: "http://www.w3.org/2000/svg",
508
+ children: /* @__PURE__ */ jsx(
509
+ "polygon",
510
+ {
511
+ points: "6 3 20 12 6 21 6 3",
512
+ fill: "#0f172a",
513
+ stroke: "#0f172a",
514
+ strokeWidth: "2",
515
+ strokeLinejoin: "round",
516
+ strokeLinecap: "round"
517
+ }
518
+ )
502
519
  }
503
- ),
504
- isPlaying ? (
505
- /* Pause — two rounded bars, sized to match play icon proportions */
506
- /* @__PURE__ */ jsxs(
507
- "svg",
508
- {
509
- width: playIconSize,
510
- height: playIconSize,
511
- viewBox: "0 0 20 20",
512
- fill: "none",
513
- xmlns: "http://www.w3.org/2000/svg",
514
- children: [
515
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
516
- /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
517
- ]
518
- }
519
- )
520
- ) : (
521
- /*
522
- * Play — rounded-corner triangle from the provided SVG path.
523
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
524
- * We flatten the transform: effective drawing area is 240×250 units.
525
- */
526
- /* @__PURE__ */ jsx(
527
- "svg",
528
- {
529
- width: playIconSize,
530
- height: playIconSize,
531
- viewBox: "0 0 240 250",
532
- fill: "none",
533
- xmlns: "http://www.w3.org/2000/svg",
534
- style: { transform: "translateX(4%)" },
535
- children: /* @__PURE__ */ jsx(
536
- "path",
537
- {
538
- 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",
539
- fill: "white"
540
- }
541
- )
542
- }
543
- )
544
520
  )
545
- ]
521
+ )
546
522
  }
547
523
  )
548
524
  }
package/dist/{chunk-YRNDRPUE.mjs → chunk-6GVLDYCQ.mjs} RENAMED
@@ -3,7 +3,7 @@
3
3
 
4
4
  // src/components/controls/edit/InputControl.tsx
5
5
  import dynamic from "next/dynamic";
6
- var InputControl = dynamic(() => import("./InputControlClient-BC66BGHI.mjs"), {
6
+ var InputControl = dynamic(() => import("./InputControlClient-DZGLI4DU.mjs"), {
7
7
  ssr: false
8
8
  });
9
9
  var InputControl_default = InputControl;