@nuraly/lumenui 0.2.2 → 0.3.3

package/dist/src/components/video/bundle.js

@@ -1,9 +1,9 @@
-import{css as e,html as t,LitElement as i}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";
+import{css as t,html as e,LitElement as i}from"lit";import{property as s,state as o,customElement as r}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const d=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},l=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!l())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,o):console.error(o.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const o=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,o)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const o=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,o)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},p=new Set,u=new Map;
+ */const d=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},h=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!h())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},c=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},p=new Set,u=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -14,7 +14,7 @@ import{css as e,html as t,LitElement as i}from"lit";import{property as o,state a
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=m(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const s=u.get(e),r=`doc:${e}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var b=e`
+const v=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=m(i);t&&function(t,e,i){var s;if(!u.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),u.set(t,i)}const o=u.get(t),r=`doc:${t}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],p.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],p.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function m(t){return Array.isArray(t)?t.map(t=>m(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}var b=t`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -129,15 +129,15 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
     from { opacity: 0; }
     to { opacity: 1; }
   }
-`,g=function(e,t,i,o){for(var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let w=class extends((e=>h(d(c(v(e)))))(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}render(){const e={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?t`
-        <div part="container" class=${n(e)}>
+`,g=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n},w=function(t,e,i,s){return new(i||(i=Promise))(function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(n,a)}d((s=s.apply(t,e||[])).next())})};const f=()=>import("hls.js");let y=class extends((t=>l(d(c(v(t)))))(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+",this.hlsInstance=null,this.previewHlsInstance=null}get isHLS(){return!!this.src&&(this.src.endsWith(".m3u8")||this.src.includes(".m3u8?"))}disconnectedCallback(){super.disconnectedCallback(),this.destroyHls(),this.destroyPreviewHls()}updated(t){super.updated(t),t.has("src")&&this.src&&(this.hasError=!1,this.attachHlsIfNeeded())}destroyHls(){this.hlsInstance&&(this.hlsInstance.destroy(),this.hlsInstance=null)}destroyPreviewHls(){this.previewHlsInstance&&(this.previewHlsInstance.destroy(),this.previewHlsInstance=null)}attachHlsIfNeeded(){return w(this,void 0,void 0,function*(){var t;const e=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector('video[part="video"]');if(e&&this.isHLS)if(e.canPlayType("application/vnd.apple.mpegurl"))e.src=this.src;else try{const{default:t}=yield f();if(!t.isSupported())return void this.handleError();this.destroyHls();const i=new t({enableWorker:!0});this.hlsInstance=i,i.loadSource(this.src),i.attachMedia(e),i.on(t.Events.ERROR,(e,s)=>{if(s.fatal)switch(s.type){case t.ErrorTypes.NETWORK_ERROR:i.startLoad();break;case t.ErrorTypes.MEDIA_ERROR:i.recoverMediaError();break;default:this.handleError()}})}catch(t){e.src=this.src}else this.destroyHls()})}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})),this.updateComplete.then(()=>this.attachPreviewHls()))}closePreviewModal(){this.showPreview=!1,this.destroyPreviewHls(),this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}attachPreviewHls(){return w(this,void 0,void 0,function*(){var t;const e=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector('video[part="preview-video"]');if(e&&this.isHLS)if(e.canPlayType("application/vnd.apple.mpegurl"))e.src=this.src;else try{const{default:t}=yield f();if(!t.isSupported())return;this.destroyPreviewHls();const i=new t({enableWorker:!0});this.previewHlsInstance=i,i.loadSource(this.src),i.attachMedia(e)}catch(t){e.src=this.src}})}firstUpdated(){this.src&&this.attachHlsIfNeeded()}render(){const t={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?e`
+        <div part="container" class=${n(t)}>
           <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
             <p>Unable to load video</p>
           </div>
         </div>
-      `:t`
-      <div part="container" class=${n(e)}>
+      `:e`
+      <div part="container" class=${n(t)}>
         <video
           part="video"
           style=${a(i)}
@@ -152,10 +152,10 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
           @pause=${this.handlePause}
           @ended=${this.handleEnded}
         >
-          <source src=${this.src} />
+          ${this.isHLS?"":e`<source src=${this.src} />`}
           Your browser does not support the video tag.
         </video>
-        ${this.previewable?t`
+        ${this.previewable?e`
           <button part="preview-button" class="preview-button" @click=${this.showPreviewModal}>
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
@@ -164,19 +164,20 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
             Fullscreen
           </button>
         `:""}
-        ${this.showPreview?t`
+        ${this.showPreview?e`
           <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
             <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
+              part="preview-video"
               ?autoplay=${!0}
               ?loop=${this.loop}
               ?muted=${this.muted}
               controls
               poster=${this.poster||""}
             >
-              <source src=${this.src} />
+              ${this.isHLS?"":e`<source src=${this.src} />`}
             </video>
           </div>
         `:""}
       </div>
-    `}};w.styles=b,w.useShadowDom=!0,g([o({type:String})],w.prototype,"src",void 0),g([o({type:String})],w.prototype,"poster",void 0),g([o({type:String})],w.prototype,"width",void 0),g([o({type:String})],w.prototype,"height",void 0),g([o({type:Boolean})],w.prototype,"autoplay",void 0),g([o({type:Boolean})],w.prototype,"loop",void 0),g([o({type:Boolean})],w.prototype,"muted",void 0),g([o({type:Boolean})],w.prototype,"controls",void 0),g([o({type:String})],w.prototype,"preload",void 0),g([o({type:Boolean})],w.prototype,"previewable",void 0),g([o({type:Boolean,reflect:!0})],w.prototype,"block",void 0),g([s()],w.prototype,"showPreview",void 0),g([s()],w.prototype,"hasError",void 0),w=g([r("nr-video")],w);export{w as NrVideoElement};
+    `}};y.styles=b,y.useShadowDom=!0,g([s({type:String})],y.prototype,"src",void 0),g([s({type:String})],y.prototype,"poster",void 0),g([s({type:String})],y.prototype,"width",void 0),g([s({type:String})],y.prototype,"height",void 0),g([s({type:Boolean})],y.prototype,"autoplay",void 0),g([s({type:Boolean})],y.prototype,"loop",void 0),g([s({type:Boolean})],y.prototype,"muted",void 0),g([s({type:Boolean})],y.prototype,"controls",void 0),g([s({type:String})],y.prototype,"preload",void 0),g([s({type:Boolean})],y.prototype,"previewable",void 0),g([s({type:Boolean,reflect:!0})],y.prototype,"block",void 0),g([o()],y.prototype,"showPreview",void 0),g([o()],y.prototype,"hasError",void 0),y=g([r("nr-video")],y);export{y as NrVideoElement};

package/dist/src/components/video/video.component.d.ts

@@ -2,7 +2,11 @@ import { LitElement } from "lit";
 import { VideoPreload } from "./video.types.js";
 declare const NrVideoElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
- * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ * Video player component with poster, autoplay, loop, fullscreen preview, and HLS streaming support.
+ *
+ * When the `src` is an HLS manifest (.m3u8), the component automatically uses hls.js for
+ * adaptive bitrate streaming. Safari uses native HLS support. Falls back to a direct <source>
+ * for non-HLS sources.
  *
  * @csspart container - The root wrapper div of the video player
  * @csspart video - The native video element
@@ -28,12 +32,22 @@ export declare class NrVideoElement extends NrVideoElement_base {
     private showPreview;
     private hasError;
     private readonly defaultFallback;
+    private hlsInstance;
+    private previewHlsInstance;
+    private get isHLS();
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private destroyHls;
+    private destroyPreviewHls;
+    private attachHlsIfNeeded;
     private handleError;
     private handlePlay;
     private handlePause;
     private handleEnded;
     private showPreviewModal;
     private closePreviewModal;
+    private attachPreviewHls;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/src/components/video/video.component.js

@@ -4,14 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import styles from "./video.style.js";
+// hls.js module specifier — stored as a variable so bundlers (Vite/Rollup)
+// cannot statically resolve it and fail if the package is not installed.
+// eslint-disable-next-line prefer-const
+let _hlsModule = 'hls.js';
+const importHls = () => import(/* @vite-ignore */ _hlsModule);
 /**
- * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ * Video player component with poster, autoplay, loop, fullscreen preview, and HLS streaming support.
+ *
+ * When the `src` is an HLS manifest (.m3u8), the component automatically uses hls.js for
+ * adaptive bitrate streaming. Safari uses native HLS support. Falls back to a direct <source>
+ * for non-HLS sources.
  *
  * @csspart container - The root wrapper div of the video player
  * @csspart video - The native video element
@@ -35,6 +53,82 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
         this.showPreview = false;
         this.hasError = false;
         this.defaultFallback = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+';
+        this.hlsInstance = null;
+        this.previewHlsInstance = null;
+    }
+    get isHLS() {
+        return !!this.src && (this.src.endsWith('.m3u8') || this.src.includes('.m3u8?'));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyHls();
+        this.destroyPreviewHls();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('src') && this.src) {
+            this.hasError = false;
+            this.attachHlsIfNeeded();
+        }
+    }
+    destroyHls() {
+        if (this.hlsInstance) {
+            this.hlsInstance.destroy();
+            this.hlsInstance = null;
+        }
+    }
+    destroyPreviewHls() {
+        if (this.previewHlsInstance) {
+            this.previewHlsInstance.destroy();
+            this.previewHlsInstance = null;
+        }
+    }
+    attachHlsIfNeeded() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const video = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('video[part="video"]');
+            if (!video || !this.isHLS) {
+                this.destroyHls();
+                return;
+            }
+            // Safari supports HLS natively
+            if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = this.src;
+                return;
+            }
+            // Dynamic import of hls.js — it's an optional peer dep
+            try {
+                const { default: Hls } = yield importHls();
+                if (!Hls.isSupported()) {
+                    this.handleError();
+                    return;
+                }
+                this.destroyHls();
+                const hls = new Hls({ enableWorker: true });
+                this.hlsInstance = hls;
+                hls.loadSource(this.src);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.ERROR, (_event, data) => {
+                    if (data.fatal) {
+                        switch (data.type) {
+                            case Hls.ErrorTypes.NETWORK_ERROR:
+                                hls.startLoad();
+                                break;
+                            case Hls.ErrorTypes.MEDIA_ERROR:
+                                hls.recoverMediaError();
+                                break;
+                            default:
+                                this.handleError();
+                                break;
+                        }
+                    }
+                });
+            }
+            catch (_b) {
+                // hls.js not installed — fall back to direct source (will likely fail for HLS)
+                video.src = this.src;
+            }
+        });
     }
     handleError() {
         this.hasError = true;
@@ -73,16 +167,49 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
                 composed: true,
                 detail: { src: this.src }
             }));
+            // Attach HLS to preview video after render
+            this.updateComplete.then(() => this.attachPreviewHls());
         }
     }
     closePreviewModal() {
         this.showPreview = false;
+        this.destroyPreviewHls();
         this.dispatchEvent(new CustomEvent('nr-video-preview-close', {
             bubbles: true,
             composed: true,
             detail: { src: this.src }
         }));
     }
+    attachPreviewHls() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const video = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('video[part="preview-video"]');
+            if (!video || !this.isHLS)
+                return;
+            if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = this.src;
+                return;
+            }
+            try {
+                const { default: Hls } = yield importHls();
+                if (!Hls.isSupported())
+                    return;
+                this.destroyPreviewHls();
+                const hls = new Hls({ enableWorker: true });
+                this.previewHlsInstance = hls;
+                hls.loadSource(this.src);
+                hls.attachMedia(video);
+            }
+            catch (_b) {
+                video.src = this.src;
+            }
+        });
+    }
+    firstUpdated() {
+        if (this.src) {
+            this.attachHlsIfNeeded();
+        }
+    }
     render() {
         const containerClasses = {
             'video-container': true,
@@ -118,7 +245,7 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           @pause=${this.handlePause}
           @ended=${this.handleEnded}
         >
-          <source src=${this.src} />
+          ${!this.isHLS ? html `<source src=${this.src} />` : ''}
           Your browser does not support the video tag.
         </video>
         ${this.previewable ? html `
@@ -134,13 +261,14 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
             <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
+              part="preview-video"
               ?autoplay=${true}
               ?loop=${this.loop}
               ?muted=${this.muted}
               controls
               poster=${this.poster || ''}
             >
-              <source src=${this.src} />
+              ${!this.isHLS ? html `<source src=${this.src} />` : ''}
             </video>
           </div>
         ` : ''}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenui",
-  "version": "0.2.2",
+  "version": "0.3.3",
   "description": "A comprehensive collection of enterprise-class web components built with Lit and TypeScript",
   "type": "module",
   "main": "dist/nuralyui.bundle.js",
@@ -12,6 +12,7 @@
     "./bundle": {
       "import": "./dist/nuralyui.bundle.js"
     },
+    "./cdn": "./dist/cdn.js",
     "./common": {
       "import": "./packages/common/dist/index.js",
       "types": "./packages/common/dist/index.d.ts"
@@ -78,6 +79,7 @@
   "files": [
     "dist/nuralyui.bundle.js",
     "dist/nuralyui.bundle.js.gz",
+    "dist/cdn.js",
     "dist/src/components/*/index.js",
     "dist/src/components/*/index.d.ts",
     "dist/src/components/*/*.js",
@@ -174,24 +176,16 @@
     "dayjs": "^2.0.0-alpha.4",
     "highlight.js": "^11.11.1",
     "lit": "^3.0.0",
-    "nanostores": "^0.11.4",
     "mermaid": "^11.0.0",
+    "nanostores": "^0.11.4",
     "vanilla-colorful": "^0.7.2"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
-    "monaco-editor": "^0.55.0",
-    "monacopilot": "^1.2.0",
     "react": "^18.0.0 || ^19.0.0",
     "socket.io-client": "^4.0.0"
   },
   "peerDependenciesMeta": {
-    "monaco-editor": {
-      "optional": true
-    },
-    "monacopilot": {
-      "optional": true
-    },
     "mermaid": {
       "optional": true
     },
@@ -211,6 +205,7 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@lit/localize-tools": "^0.8.0",
     "@open-wc/testing": "^3.1.5",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-dynamic-import-vars": "^2.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^5.0.2",

package/packages/common/dist/VERSIONS.md

@@ -1,4 +1,4 @@
 # @nuralyui/common
 
 Version: 0.1.5
-Build Date: 2026-04-01
+Build Date: 2026-04-14