@websolutespa/bom-mixer-llm 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-llm
 
+## 0.0.11
+
+### Patch Changes
+
+- Modified: theme & cards
+
 ## 0.0.10
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -888,8 +888,7 @@ llm-embed {
   position: absolute;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * (8), 24px);
   width: calc(100vw - 40px);
-  min-width: 240px;
-  max-width: 460px;
+  max-width: var(--llm-popup-max-width);
   left: 50%;
   bottom: calc(100% + 12px);
   translate: -50% 0%;
@@ -907,8 +906,7 @@ llm-embed {
 }
 .llm .llm__trigger-welcome > div + div {
   width: calc(100vw - 40px);
-  min-width: 240px;
-  max-width: 460px;
+  max-width: var(--llm-popup-max-width);
   translate: -50% 10%;
   opacity: 0;
 }
@@ -1771,7 +1769,7 @@ llm-embed {
   display: flex;
   justify-content: center;
   align-items: center;
-  aspect-ratio: 240/165;
+  aspect-ratio: var(--llm-card-aspect-ratio);
   border-radius: 24px;
   overflow: hidden;
   background: var(--llm-color-neutral-200);
@@ -1796,7 +1794,7 @@ llm-embed {
 }
 .llm .llm__card--video .llm__card-asset {
   border-radius: 0;
-  aspect-ratio: 16/9;
+  aspect-ratio: var(--llm-card-video-aspect-ratio);
 }
 .llm .llm__card--full .llm__card-media {
   position: absolute;
@@ -2014,33 +2012,33 @@ llm-embed {
   cursor: pointer;
 }
 
-.llm .llm__thron-player .th-video .th-video-player .th-video-poster {
+.llm__thron-player .th-video .th-video-player .th-video-poster {
   background-size: cover;
 }
-.llm .llm__thron-player .th-player-external-element.th-std-bars,
-.llm .llm__thron-player .th-player.th-std-bars {
+.llm__thron-player .th-player-external-element.th-std-bars,
+.llm__thron-player .th-player.th-std-bars {
   width: 100%;
   height: 100%;
   border-radius: 0;
   margin: 0;
 }
-.llm .llm__thron-player .th-video .th-video-player .th-display-icon-wrapper {
+.llm__thron-player .th-video .th-video-player .th-display-icon-wrapper {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal.th-top {
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal.th-top {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-time-info {
+.llm__thron-player:not(.-enlarged) .th-time-info {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-button,
-.llm .llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-toggle-button:not(.th-fullscreen-button) {
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-button,
+.llm__thron-player:not(.-enlarged) .th-control-bar.th-horizontal .th-group .th-toggle-button:not(.th-fullscreen-button) {
   display: none;
 }
-.llm .llm__thron-player:not(.-enlarged) .th-time-rail {
+.llm__thron-player:not(.-enlarged) .th-time-rail {
   display: none;
 }
-.llm .llm__thron-player.-enlarged {
+.llm__thron-player.-enlarged {
   position: fixed;
   width: calc(100vw - 40px);
   height: calc((100vw - 40px) / 16 * 9);

package/dist/cjs/index.js

@@ -223,6 +223,9 @@ const defaultTheme = {
     foreground: 'var(--llm-color-base-100)',
     boxShadow: '0 0 30px rgba(0, 0, 0, 0.3)'
   },
+  popup: {
+    maxWidth: '210px'
+  },
   hint: {
     fontFamily: 'var(--llm-font-primary)',
     background: 'linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)',
@@ -248,7 +251,11 @@ const defaultTheme = {
   },
   card: {
     background: 'var(--llm-color-neutral-100)',
-    foreground: 'var(--llm-color-neutral-900)'
+    foreground: 'var(--llm-color-neutral-900)',
+    aspectRatio: '240 / 165'
+  },
+  cardVideo: {
+    aspectRatio: '16 / 9'
   },
   markdown: {
     marginTop: '0.5rem',
@@ -3688,6 +3695,40 @@ const Dialog = _a => {
   })) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), portal);
 };
 
+const StaticNode = _a => {
+  var {
+      outerRef,
+      playing
+    } = _a,
+    props = __rest(_a, ["outerRef", "playing"]);
+  const innerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (innerRef.current && outerRef.current) {
+      outerRef.current.removeAttribute('style');
+      innerRef.current.appendChild(outerRef.current);
+    }
+  }, [innerRef, outerRef]);
+  const onClose = () => {
+    if (typeof props.onClose === 'function') {
+      props.onClose();
+    }
+  };
+  const classNames = bomCore.getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
+    '-playing': playing
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      ref: innerRef,
+      className: classNames
+    }), jsxRuntime.jsx("button", {
+      type: "button",
+      className: "llm__video-reduce",
+      onClick: () => onClose(),
+      "aria-label": "Reduce",
+      children: jsxRuntime.jsx(bomMixerIcons.IconLlmMinimize, {})
+    })]
+  });
+};
 const ThronPlayer = props => {
   const id = react.useMemo(() => {
     return `video-${props.media.xcontentId}-${Math.round(Math.random() * 10000)}`;
@@ -3814,40 +3855,6 @@ const ThronPlayer = props => {
     })]
   });
 };
-const StaticNode = _a => {
-  var {
-      outerRef,
-      playing
-    } = _a,
-    props = __rest(_a, ["outerRef", "playing"]);
-  const innerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (innerRef.current && outerRef.current) {
-      outerRef.current.removeAttribute('style');
-      innerRef.current.appendChild(outerRef.current);
-    }
-  }, [innerRef, outerRef]);
-  const onClose = () => {
-    if (typeof props.onClose === 'function') {
-      props.onClose();
-    }
-  };
-  const classNames = bomCore.getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
-    '-playing': playing
-  });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("div", {
-      ref: innerRef,
-      className: classNames
-    }), jsxRuntime.jsx("button", {
-      type: "button",
-      className: "llm__video-reduce",
-      onClick: () => onClose(),
-      "aria-label": "Reduce",
-      children: jsxRuntime.jsx(bomMixerIcons.IconLlmMinimize, {})
-    })]
-  });
-};
 
 const VideoPlayer = props => {
   const id = react.useId();
@@ -3977,7 +3984,7 @@ const Card = props => {
         dangerouslySetInnerHTML: {
           __html: props.abstract
         }
-      }), props.cardType !== 'full' && props.cta.url && jsxRuntime.jsxs("a", {
+      }), props.cta && props.cta.url && jsxRuntime.jsxs("a", {
         className: "llm__card-cta",
         href: props.cta.url,
         target: "_blank",
@@ -4885,6 +4892,7 @@ const Main = () => {
     animate: "show",
     exit: "exit",
     className: classNames,
+    "data-lenis-prevent": true,
     children: [visible && jsxRuntime.jsx(Canvas, {}), !embedded && jsxRuntime.jsx(framerMotion.motion.div, {
       className: "llm__top",
       variants: slideIn(-1),
@@ -5007,40 +5015,6 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
       document.documentElement.style.overflow = opened ? 'hidden' : 'auto';
     }
   }, [opened, embedded]);
-  /*
-  useEffect(() => {
-    if (innerRef.current) {
-      const observer = new MutationObserver((mutations) => {
-        const target = mutations[0].target as HTMLDivElement;
-        const mutatedVars: Partial<LlmVars> = {};
-        Object.entries(vars).forEach(([k, v]) => {
-          const newValue = target.style.getPropertyValue(k);
-          if (v !== newValue) {
-            mutatedVars[k] = newValue;
-          }
-          if (
-            k === '--llm-color-base-100' ||
-            k === '--llm-color-base-200' ||
-            k === '--llm-color-base-300' ||
-            k === '--llm-color-base-400'
-          ) {
-            console.log(k, newValue, v);
-          }
-        });
-        if (Object.keys(mutatedVars).length > 0) {
-          setVars(mutatedVars);
-        }
-      });
-      observer.observe(innerRef.current, {
-        attributes: true,
-        attributeFilter: ['style'],
-      });
-      return () => observer.disconnect();
-    } else {
-      return () => { };
-    }
-  }, []);
-  */
   const shouldShowTrigger = !opened && !idle && !embed || (app === null || app === void 0 ? void 0 : app.contents.customIntro) && !introed;
   const classNames = bomCore.getClassNames('llm', {
     '-open': opened,