@websolutespa/bom-llm 0.0.16 → 0.0.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-llm
 
+## 0.0.17
+
+### Patch Changes
+
+- Modified: theme & cards
+
 ## 0.0.16
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1022,8 +1022,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%;
@@ -1041,8 +1040,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;
 }
@@ -1905,7 +1903,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);
@@ -1930,7 +1928,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;
@@ -2148,33 +2146,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/umd/index.js

@@ -23083,6 +23083,9 @@
 	    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%)',
@@ -23108,7 +23111,11 @@
 	  },
 	  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',
@@ -27313,6 +27320,40 @@ void main(void) {
 	  }) : /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}), portal);
 	};
 
+	const StaticNode = _ref => {
+	  let {
+	    outerRef,
+	    playing,
+	    ...props
+	  } = _ref;
+	  const innerRef = reactExports.useRef(null);
+	  reactExports.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 = getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
+	    '-playing': playing
+	  });
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+	    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	      ref: innerRef,
+	      className: classNames
+	    }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+	      type: "button",
+	      className: "llm__video-reduce",
+	      onClick: () => onClose(),
+	      "aria-label": "Reduce",
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmMinimize, {})
+	    })]
+	  });
+	};
 	const ThronPlayer = props => {
 	  const id = reactExports.useMemo(() => {
 	    return `video-${props.media.xcontentId}-${Math.round(Math.random() * 10000)}`;
@@ -27439,40 +27480,6 @@ void main(void) {
 	    })]
 	  });
 	};
-	const StaticNode = _ref => {
-	  let {
-	    outerRef,
-	    playing,
-	    ...props
-	  } = _ref;
-	  const innerRef = reactExports.useRef(null);
-	  reactExports.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 = getClassNames('llm__thron-player', 'llm__video', '-enlarged', {
-	    '-playing': playing
-	  });
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-	    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-	      ref: innerRef,
-	      className: classNames
-	    }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
-	      type: "button",
-	      className: "llm__video-reduce",
-	      onClick: () => onClose(),
-	      "aria-label": "Reduce",
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmMinimize, {})
-	    })]
-	  });
-	};
 
 	const VideoPlayer = props => {
 	  const id = reactExports.useId();
@@ -27607,7 +27614,7 @@ void main(void) {
 	        dangerouslySetInnerHTML: {
 	          __html: props.abstract
 	        }
-	      }), props.cardType !== 'full' && props.cta.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	      }), props.cta && props.cta.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
 	        className: "llm__card-cta",
 	        href: props.cta.url,
 	        target: "_blank",
@@ -30876,6 +30883,7 @@ void main(void) {
 	    animate: "show",
 	    exit: "exit",
 	    className: classNames,
+	    "data-lenis-prevent": true,
 	    children: [visible && /*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}), !embedded && /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
 	      className: "llm__top",
 	      variants: slideIn(-1),
@@ -30998,42 +31006,6 @@ void main(void) {
 	      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?.contents.customIntro && !introed;
 	  const classNames = getClassNames('llm', {
 	    '-open': opened,