@onlive.ai/common-121 0.2.70 → 0.2.163

package/README.md

@@ -28,7 +28,6 @@ npm install @onlive.ai/common-121
 - **merge**: Deep object merging utilities
 - **sanitize**: HTML content sanitization
 - **watch**: Reactive property watching utilities
-- **And more...**
 
 ### 🎨 Themes
 

package/components/asset/asset-modal-portal.cjs

@@ -0,0 +1,550 @@
+/*! @onlive.ai/common-121 v0.2.163 | © 2026 Onlive.ai */
+"use strict";var f=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(t,a)=>{for(var e in a)r(t,e,{get:a[e],enumerable:!0})},v=(t,a,e,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of y(a))!w.call(t,o)&&o!==e&&r(t,o,{get:()=>a[o],enumerable:!(l=x(a,o))||l.enumerable});return t};var m=(t,a,e)=>(e=t!=null?f($(t)):{},v(a||!t||!t.__esModule?r(e,"default",{value:t,enumerable:!0}):e,t)),z=t=>v(r({},"__esModule",{value:!0}),t);var M={};b(M,{AssetModalPortal:()=>p});module.exports=z(M);var p=class{constructor(a,e){this.asset=a,this.onClose=e}getMultimediaSubtype(a){let e=a.format||"";return e.startsWith("video/")?"video":e.startsWith("image/")?"image":e.includes("presentation")||e.includes("pdf")||e.includes("powerpoint")||e.includes("slides")||e.includes("application/vnd.ms-powerpoint")||e.includes("application/vnd.openxmlformats-officedocument.presentationml")||a.slides&&a.slides.length>0?"presentation":a.duration||a.vodUrl?"video":"image"}formatDuration(a){let e=Math.floor(a/60),l=Math.floor(a%60);return`${e}:${l.toString().padStart(2,"0")}`}async open(){await import("@onlive.ai/ui/dist/components/dialog/dialog.js"),await import("@onlive.ai/ui/dist/components/icon-button/icon-button.js"),await import("@onlive.ai/ui/dist/components/button/button.js"),await import("@onlive.ai/ui/dist/components/icon/icon.js");let a=this.asset;this.getMultimediaSubtype(a)==="presentation"&&(a.slides?.length??0)>0&&await Promise.all([import("@onlive.ai/ui/dist/components/carousel/carousel.js"),import("@onlive.ai/ui/dist/components/carousel-item/carousel-item.js")]),this.injectStyles(),this.createDialog(),this.dialog?.show()}close(){this.dialog?.hide(),setTimeout(()=>{this.removeDialog()},300)}createDialog(){if(this.dialog||!this.asset)return;let a=this.createDialogHTML(),e=document.createElement("div");e.innerHTML=a,this.dialog=e.firstElementChild,this.dialog&&(document.body.appendChild(this.dialog),this.attachEventListeners())}removeDialog(){this.dialog&&(this.dialog.parentNode&&this.dialog.parentNode.removeChild(this.dialog),this.dialog=void 0)}injectStyles(){if(document.getElementById("asset-modal-styles"))return;let a=document.createElement("style");a.id="asset-modal-styles",a.textContent=this.getModalStyles(),document.head.appendChild(a)}getModalStyles(){return`
+
+      ol-dialog::part(base){
+      z-index: 1000000;
+      }
+      ol-dialog.ol-asset__dialog {
+        --width: 90vw;
+        --max-width: 1400px;
+      }
+
+      ol-dialog.ol-asset__dialog[data-fullscreen="true"] {
+        --width: 100vw;
+        --max-width: 100vw;
+      }
+
+      .ol-asset__dialog-content {
+        display: flex;
+        flex-direction: column;
+        max-height: 85vh;
+        overflow: hidden;
+      }
+
+      .ol-asset__dialog-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .ol-asset__modal-media-container {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--ol-color-neutral-50, #f9fafb);
+        min-height: 300px;
+        max-height: 75vh;
+        overflow: hidden;
+      }
+
+      .ol-asset__modal-media-container[data-type="presentation"] {
+        max-height: 85vh;
+        min-height: 400px;
+      }
+
+      .ol-asset__modal-image-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--ol-spacing-medium);
+      }
+
+      .ol-asset__modal-image {
+        max-width: 100%;
+        max-height: 75vh;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        display: block;
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+        image-rendering: high-quality;
+      }
+
+      @media (min-width: 768px) {
+        .ol-asset__modal-image {
+          max-height: 80vh;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .ol-asset__modal-image {
+          max-height: 85vh;
+        }
+      }
+
+      .ol-asset__modal-info {
+        padding: var(--ol-spacing-large);
+        background: var(--ol-color-surface, #ffffff);
+        border-top: 1px solid var(--ol-color-neutral-200, #e5e7eb);
+      }
+
+      .ol-asset__modal-title {
+        margin: 0 0 var(--ol-spacing-small) 0;
+        font-size: var(--ol-font-size-x-large, 1.5rem);
+        font-weight: 600;
+        color: var(--ol-color-text, #1f2937);
+        line-height: 1.3;
+      }
+
+      .ol-asset__modal-description {
+        margin: 0 0 var(--ol-spacing-medium) 0;
+        font-size: var(--ol-font-size-medium, 1rem);
+        line-height: 1.6;
+        color: var(--ol-color-text-secondary, #6b7280);
+      }
+
+      .ol-asset__modal-metadata {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ol-spacing-medium);
+        margin-top: var(--ol-spacing-small);
+      }
+
+      .ol-asset__modal-metadata-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ol-spacing-2x-small);
+        font-size: var(--ol-font-size-small, 0.875rem);
+        color: var(--ol-color-text-secondary, #6b7280);
+      }
+
+      .ol-asset__modal-metadata-item ol-icon {
+        font-size: 1rem;
+        color: var(--ol-color-neutral-400, #9ca3af);
+      }
+
+      .ol-asset__modal-faq {
+        padding: var(--ol-spacing-large);
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .ol-asset__modal-question {
+        margin: 0 0 var(--ol-spacing-large) 0;
+        font-size: var(--ol-font-size-2x-large, 2rem);
+        font-weight: 600;
+        color: var(--ol-color-primary, #3b82f6);
+        line-height: 1.2;
+      }
+
+      .ol-asset__modal-answer {
+        font-size: var(--ol-font-size-medium, 1rem);
+        line-height: 1.8;
+        color: var(--ol-color-text, #1f2937);
+      }
+
+      .ol-asset__modal-video-container {
+        width: 100%;
+        max-height: 75vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #000;
+        position: relative;
+      }
+
+      .ol-asset__modal-video-player {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        max-height: 75vh;
+        object-fit: contain;
+        display: block;
+      }
+
+      .ol-asset__modal-presentation {
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--ol-color-neutral-50, #f9fafb);
+      }
+
+      .ol-asset__modal-carousel {
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        --aspect-ratio: auto;
+      }
+
+      .ol-asset__modal-carousel::part(base) {
+        height: 100%;
+        min-height: 400px;
+      }
+
+      .ol-asset__modal-carousel::part(scroll-container) {
+        height: 100%;
+        min-height: 400px;
+      }
+
+      .ol-asset__modal-carousel ol-carousel-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--ol-spacing-medium);
+        height: 100%;
+        min-height: 400px;
+      }
+
+      .ol-asset__modal-slide-image {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        display: block;
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+        image-rendering: high-quality;
+      }
+
+      .ol-asset__modal-presentation-fallback {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        color: var(--ol-color-text-secondary, #6b7280);
+      }
+
+      .ol-asset__modal-presentation-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .ol-asset__modal-type {
+        margin: 0;
+        font-size: var(--ol-font-size-small, 0.875rem);
+        color: var(--ol-color-text-secondary, #6b7280);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .ol-asset__modal-duration,
+      .ol-asset__modal-slides {
+        margin: 0;
+        font-size: var(--ol-font-size-small, 0.875rem);
+        color: var(--ol-color-text-secondary, #6b7280);
+      }
+
+      @media (max-width: 768px) {
+        ol-dialog.ol-asset__dialog {
+          --width: 95vw;
+        }
+
+        .ol-asset__modal-info,
+        .ol-asset__modal-faq {
+          padding: var(--ol-spacing-medium);
+        }
+
+        .ol-asset__modal-title {
+          font-size: var(--ol-font-size-large, 1.25rem);
+        }
+
+        .ol-asset__modal-question {
+          font-size: var(--ol-font-size-x-large, 1.5rem);
+        }
+
+        .ol-asset__modal-description,
+        .ol-asset__modal-answer {
+          font-size: var(--ol-font-size-small, 0.875rem);
+        }
+
+        .ol-asset__modal-image {
+          max-height: 60vh;
+        }
+
+        .ol-asset__modal-video-player {
+          max-height: 60vh;
+        }
+
+        .ol-asset__modal-slide-image {
+          max-height: 60vh;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .ol-asset__modal-media-container {
+          max-height: 80vh;
+        }
+
+        .ol-asset__modal-media-container[data-type="presentation"] {
+          max-height: 85vh;
+          min-height: 500px;
+        }
+
+        .ol-asset__modal-image {
+          max-height: 80vh;
+        }
+
+        .ol-asset__modal-video-player {
+          max-height: 80vh;
+        }
+
+        .ol-asset__modal-presentation {
+          min-height: 500px;
+        }
+
+        .ol-asset__modal-carousel {
+          min-height: 500px;
+        }
+
+        .ol-asset__modal-carousel::part(base),
+        .ol-asset__modal-carousel::part(scroll-container) {
+          min-height: 500px;
+        }
+
+        .ol-asset__modal-carousel ol-carousel-item {
+          min-height: 500px;
+        }
+
+        .ol-asset__modal-slide-image {
+          max-height: 85vh;
+        }
+      }
+
+      @media (min-width: 1400px) {
+        .ol-asset__modal-media-container[data-type="presentation"] {
+          max-height: 90vh;
+          min-height: 600px;
+        }
+
+        .ol-asset__modal-presentation {
+          min-height: 600px;
+        }
+
+        .ol-asset__modal-carousel {
+          min-height: 600px;
+        }
+
+        .ol-asset__modal-carousel::part(base),
+        .ol-asset__modal-carousel::part(scroll-container) {
+          min-height: 600px;
+        }
+
+        .ol-asset__modal-carousel ol-carousel-item {
+          min-height: 600px;
+        }
+
+        .ol-asset__modal-slide-image {
+          max-height: 90vh;
+        }
+      }
+    `}createDialogHTML(){if(!this.asset)return"";let{name:a,description:e,url:l,type:o}=this.asset,i="";if(o==="multimedia"){let s=this.asset,n=this.getMultimediaSubtype(s);if(n==="image")i=`
+          <div class="ol-asset__modal-media-container">
+            <div class="ol-asset__modal-image-container">
+              <img
+                src="${l||""}"
+                alt="${a}"
+                class="ol-asset__modal-image"
+                loading="eager"
+              />
+            </div>
+          </div>
+          <div class="ol-asset__modal-info">
+            <h3 class="ol-asset__modal-title">${a}</h3>
+            ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+            <div class="ol-asset__modal-metadata">
+              <div class="ol-asset__modal-metadata-item">
+                <ol-icon name="photo"></ol-icon>
+                <span class="ol-asset__modal-type">Image</span>
+              </div>
+            </div>
+          </div>
+        `;else if(n==="video")i=`
+          <div class="ol-asset__modal-media-container">
+            <div class="ol-asset__modal-video-container">
+              <video
+                src="${l||s.vodUrl||""}"
+                controls
+                class="ol-asset__modal-video-player"
+                preload="metadata"
+              >
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          </div>
+          <div class="ol-asset__modal-info">
+            <h3 class="ol-asset__modal-title">${a}</h3>
+            ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+            <div class="ol-asset__modal-metadata">
+              <div class="ol-asset__modal-metadata-item">
+                <ol-icon name="video"></ol-icon>
+                <span class="ol-asset__modal-type">Video</span>
+              </div>
+              ${s.duration?`
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="clock"></ol-icon>
+                  <span class="ol-asset__modal-duration">${this.formatDuration(s.duration)}</span>
+                </div>
+              `:""}
+            </div>
+          </div>
+        `;else if(n==="presentation")if(s.slides&&s.slides.length>0){let d=s.slides;i=`
+            <div class="ol-asset__modal-media-container" data-type="presentation">
+              <div class="ol-asset__modal-presentation">
+                <ol-carousel pagination navigation loop class="ol-asset__modal-carousel">
+                  ${d.map((c,_)=>`
+              <ol-carousel-item>
+                <img
+                  src="${c}"
+                  alt="Slide ${_+1} of ${d.length}"
+                  class="ol-asset__modal-slide-image"
+                />
+              </ol-carousel-item>
+            `).join("")}
+                </ol-carousel>
+              </div>
+            </div>
+            <div class="ol-asset__modal-info">
+              <h3 class="ol-asset__modal-title">${a}</h3>
+              ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+              <div class="ol-asset__modal-metadata">
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="file-presentation"></ol-icon>
+                  <span class="ol-asset__modal-type">Presentation</span>
+                </div>
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="layers"></ol-icon>
+                  <span class="ol-asset__modal-slides">${d.length} ${d.length===1?"slide":"slides"}</span>
+                </div>
+              </div>
+            </div>
+          `}else i=`
+            <div class="ol-asset__modal-presentation">
+              <div class="ol-asset__modal-presentation-fallback">
+                <div class="ol-asset__modal-presentation-icon">\u{1F4C4}</div>
+                <p>Presentation Preview</p>
+              </div>
+            </div>
+            <div class="ol-asset__modal-info">
+              <h3 class="ol-asset__modal-title">${a}</h3>
+              ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+              <p class="ol-asset__modal-type">Type: Presentation</p>
+            </div>
+          `}else if(o==="file"){let s=this.asset,n=this.getMultimediaSubtype(s);if(n==="image")i=`
+          <div class="ol-asset__modal-media-container">
+            <div class="ol-asset__modal-image-container">
+              <img
+                src="${l||""}"
+                alt="${a}"
+                class="ol-asset__modal-image"
+                loading="eager"
+              />
+            </div>
+          </div>
+          <div class="ol-asset__modal-info">
+            <h3 class="ol-asset__modal-title">${a}</h3>
+            ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+            <div class="ol-asset__modal-metadata">
+              <div class="ol-asset__modal-metadata-item">
+                <ol-icon name="photo"></ol-icon>
+                <span class="ol-asset__modal-type">Image File</span>
+              </div>
+            </div>
+          </div>
+        `;else if(n==="video")i=`
+          <div class="ol-asset__modal-media-container">
+            <div class="ol-asset__modal-video-container">
+              <video
+                src="${l||s.vodUrl||""}"
+                controls
+                class="ol-asset__modal-video-player"
+                preload="metadata"
+              >
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          </div>
+          <div class="ol-asset__modal-info">
+            <h3 class="ol-asset__modal-title">${a}</h3>
+            ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+            <div class="ol-asset__modal-metadata">
+              <div class="ol-asset__modal-metadata-item">
+                <ol-icon name="video"></ol-icon>
+                <span class="ol-asset__modal-type">Video File</span>
+              </div>
+              ${s.duration?`
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="clock"></ol-icon>
+                  <span class="ol-asset__modal-duration">${this.formatDuration(s.duration)}</span>
+                </div>
+              `:""}
+            </div>
+          </div>
+        `;else if(n==="presentation")if(s.slides&&s.slides.length>0){let d=s.slides;i=`
+            <div class="ol-asset__modal-media-container" data-type="presentation">
+              <div class="ol-asset__modal-presentation">
+                <ol-carousel pagination navigation loop class="ol-asset__modal-carousel">
+                  ${d.map((c,_)=>`
+              <ol-carousel-item>
+                <img
+                  src="${c}"
+                  alt="Slide ${_+1} of ${d.length}"
+                  class="ol-asset__modal-slide-image"
+                />
+              </ol-carousel-item>
+            `).join("")}
+                </ol-carousel>
+              </div>
+            </div>
+            <div class="ol-asset__modal-info">
+              <h3 class="ol-asset__modal-title">${a}</h3>
+              ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+              <div class="ol-asset__modal-metadata">
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="file-presentation"></ol-icon>
+                  <span class="ol-asset__modal-type">Presentation File</span>
+                </div>
+                <div class="ol-asset__modal-metadata-item">
+                  <ol-icon name="layers"></ol-icon>
+                  <span class="ol-asset__modal-slides">${d.length} ${d.length===1?"slide":"slides"}</span>
+                </div>
+              </div>
+            </div>
+          `}else i=`
+            <div class="ol-asset__modal-presentation">
+              <div class="ol-asset__modal-presentation-fallback">
+                <div class="ol-asset__modal-presentation-icon">\u{1F4C4}</div>
+                <p>Presentation Preview</p>
+              </div>
+            </div>
+            <div class="ol-asset__modal-info">
+              <h3 class="ol-asset__modal-title">${a}</h3>
+              ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+              <p class="ol-asset__modal-type">Type: Presentation File</p>
+            </div>
+          `}else if(o==="faq"){let s=this.asset;i=`
+        <div class="ol-asset__modal-faq">
+          <h3 class="ol-asset__modal-question">${s.question||a}</h3>
+          <div class="ol-asset__modal-answer">${s.answer||e}</div>
+        </div>
+      `}else i=`
+        <div class="ol-asset__modal-info">
+          <h3 class="ol-asset__modal-title">${a}</h3>
+          ${e?`<p class="ol-asset__modal-description">${e}</p>`:""}
+        </div>
+      `;let h=o==="multimedia"||o==="file",g=o==="faq"&&this.asset.question||a;return`
+      <ol-dialog 
+        label="${this.escapeHtml(g)}"
+        class="ol-asset__dialog"
+        data-fullscreen="${h}"
+        ${h?'style="--width: 95vw; --max-width: 1600px;"':""}
+      >
+        <div class="ol-asset__dialog-content">
+          <div class="ol-asset__dialog-body">
+            ${i}
+          </div>
+        </div>
+      </ol-dialog>
+    `}attachEventListeners(){this.dialog&&(this.dialog.addEventListener("ol-after-hide",()=>{this.onClose?.()}),this.dialog.addEventListener("ol-request-close",a=>{a.detail?.source==="overlay"&&a.preventDefault()}))}escapeHtml(a){let e=document.createElement("div");return e.textContent=a,e.innerHTML}};0&&(module.exports={AssetModalPortal});

package/components/asset/asset-modal-portal.d.cts

@@ -0,0 +1,22 @@
+/*! @onlive.ai/common-121 v0.2.163 | © 2026 Onlive.ai */
+import { IAsset } from './asset.types.cjs';
+
+declare class AssetModalPortal {
+    private dialog?;
+    private asset?;
+    private onClose?;
+    constructor(asset: IAsset, onClose: () => void);
+    private getMultimediaSubtype;
+    private formatDuration;
+    open(): Promise<void>;
+    close(): void;
+    private createDialog;
+    private removeDialog;
+    private injectStyles;
+    private getModalStyles;
+    private createDialogHTML;
+    private attachEventListeners;
+    private escapeHtml;
+}
+
+export { AssetModalPortal };

package/components/asset/asset-modal-portal.d.ts

@@ -0,0 +1,22 @@
+/*! @onlive.ai/common-121 v0.2.163 | © 2026 Onlive.ai */
+import { IAsset } from './asset.types.js';
+
+declare class AssetModalPortal {
+    private dialog?;
+    private asset?;
+    private onClose?;
+    constructor(asset: IAsset, onClose: () => void);
+    private getMultimediaSubtype;
+    private formatDuration;
+    open(): Promise<void>;
+    close(): void;
+    private createDialog;
+    private removeDialog;
+    private injectStyles;
+    private getModalStyles;
+    private createDialogHTML;
+    private attachEventListeners;
+    private escapeHtml;
+}
+
+export { AssetModalPortal };