@onlive.ai/common-121 0.2.66 → 0.2.163

package/components/asset/asset.styles.js

@@ -0,0 +1,683 @@
+/*! @onlive.ai/common-121 v0.2.163 | © 2026 Onlive.ai */
+import{css as e}from"lit";var a=e`
+  :host {
+    display: block;
+    --asset-border-radius: 8px;
+    --asset-padding: 12px;
+    --asset-gap: 8px;
+    --asset-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    --asset-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
+    --asset-transition: all 0.2s ease-in-out;
+  }
+
+  .ol-asset {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--asset-border-radius);
+    background: var(--ol-color-surface, #ffffff);
+    transition: var(--asset-transition);
+    overflow: hidden;
+    position: relative;
+    cursor: default;
+  }
+
+  
+
+  .ol-asset--loading {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  .ol-asset--error {
+    border-color: var(--ol-color-error, #ef4444);
+    background: var(--ol-color-error-surface, #fef2f2);
+  }
+
+  .ol-asset--compact {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .ol-asset--minimal {
+    padding: var(--asset-padding);
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  .ol-asset--minimal:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* Sizes */
+  .ol-asset--small {
+    --asset-padding: 8px;
+    --asset-gap: 6px;
+  }
+
+  .ol-asset--medium {
+    --asset-padding: 12px;
+    --asset-gap: 8px;
+  }
+
+  .ol-asset--large {
+    --asset-padding: 16px;
+    --asset-gap: 12px;
+  }
+
+  /* Thumbnail */
+  .ol-asset__thumbnail {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    background: var(--ol-color-surface-secondary, #f9fafb);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ol-asset--compact .ol-asset__thumbnail {
+    width: 60px;
+    height: 60px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+  }
+
+  .ol-asset--minimal .ol-asset__thumbnail {
+    display: none;
+  }
+
+  .ol-asset__image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: var(--asset-transition);
+  }
+
+  .ol-asset__video-player {
+    width: 100%;
+    height: 100%;
+    min-height: 120px;
+    aspect-ratio: 16/9;
+  }
+
+  .ol-asset__duration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .ol-asset__format-badge {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+
+
+  /* Content */
+  .ol-asset__content {
+    padding: var(--asset-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--asset-gap);
+    flex: 1;
+  }
+
+  .ol-asset__content--assets {
+    display: none;
+  }
+
+  .ol-asset--compact .ol-asset__content {
+    padding-left: var(--asset-padding);
+  }
+
+  .ol-asset--minimal .ol-asset__content {
+    padding: 0;
+  }
+
+  .ol-asset__name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ol-color-text-primary, #111827);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ol-asset--large .ol-asset__name {
+    font-size: 16px;
+  }
+
+  .ol-asset--small .ol-asset__name {
+    font-size: 12px;
+  }
+
+  .ol-asset__description {
+    font-size: 12px;
+    color: var(--ol-color-text-secondary, #6b7280);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ol-asset--large .ol-asset__description {
+    font-size: 14px;
+  }
+
+  .ol-asset--small .ol-asset__description {
+    font-size: 11px;
+  }
+
+  .ol-asset__price {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ol-color-primary, #3b82f6);
+  }
+
+  .ol-asset--large .ol-asset__price {
+    font-size: 16px;
+  }
+
+  .ol-asset--small .ol-asset__price {
+    font-size: 12px;
+  }
+
+  /* Metadata */
+  .ol-asset__metadata {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--ol-color-text-tertiary, #9ca3af);
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+  }
+
+  .ol-asset--large .ol-asset__metadata {
+    font-size: 12px;
+  }
+
+  .ol-asset--small .ol-asset__metadata {
+    font-size: 10px;
+  }
+
+  .ol-asset__meta-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #fff;
+    border-radius:99px;
+    padding: 0 var(--ol-spacing-x-small);
+    background-color: var(--ol-color-surface-secondary, rgba(0, 0, 0, 0.8));
+  }
+
+  /* Tags */
+  .ol-asset__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .ol-asset__tag {
+    background: var(--ol-color-surface-secondary, #f3f4f6);
+    color: var(--ol-color-text-secondary, #6b7280);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  .ol-asset--large .ol-asset__tag {
+    font-size: 11px;
+    padding: 3px 8px;
+  }
+
+  .ol-asset--small .ol-asset__tag {
+    font-size: 9px;
+    padding: 1px 4px;
+  }
+
+  /* FAQ specific styles */
+  .ol-asset--faq {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .ol-asset--faq:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .ol-asset--faq .ol-asset__thumbnail {
+    display: none;
+  }
+
+  .ol-asset--faq .ol-asset__content {
+    gap: 0;
+    border-radius: 18px 18px 4px 18px;
+    position: relative;
+    margin-left: auto;
+  }
+
+  .ol-asset--faq .ol-asset__content::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid var(--ol-color-primary, #3b82f6);
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+  }
+
+  .ol-asset--faq .ol-asset__name {
+    display: none;
+  }
+
+  .ol-asset--faq .ol-asset__description,
+  .ol-asset--faq .ol-asset__answer {
+    font-size: 14px;
+    line-height: 1.5;
+    padding: var(--ol-spacing-small);
+    display: block;
+    margin: 0;
+    -webkit-line-clamp: none;
+    -webkit-box-orient: initial;
+    overflow: visible;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .ol-asset--large .ol-asset--faq .ol-asset__description,
+  .ol-asset--large .ol-asset--faq .ol-asset__answer {
+    font-size: 15px;
+  }
+
+  .ol-asset--small .ol-asset--faq .ol-asset__description,
+  .ol-asset--small .ol-asset--faq .ol-asset__answer {
+    font-size: 13px;
+  }
+
+  .ol-asset--faq .ol-asset__metadata {
+    display: none;
+  }
+
+  .ol-asset--faq .ol-asset__meta-item {
+    display: none;
+  }
+
+  /* Presentation specific styles */
+  .ol-asset__presentation-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ol-asset__presentation-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .ol-asset__presentation-fallback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: calc(100% - calc(2 * var(--ol-spacing-medium, 16px)));
+    padding: var(--ol-spacing-medium, 16px);
+    height: calc(100% - calc(2 * var(--ol-spacing-medium, 16px) + 4px));
+    gap: var(--ol-spacing-medium, 16px);
+    background: linear-gradient(135deg, var(--ol-color-neutral-50, #f9fafb) 0%, var(--ol-color-neutral-100, #f3f4f6) 100%);
+    border: 2px dashed var(--ol-color-neutral-300, #d1d5db);
+    border-radius: var(--asset-border-radius, 8px);
+    transition: all 0.2s ease;
+  }
+
+  .ol-asset:hover .ol-asset__presentation-fallback {
+    background: linear-gradient(135deg, var(--ol-color-neutral-100, #f3f4f6) 0%, var(--ol-color-neutral-200, #e5e7eb) 100%);
+    border-color: var(--ol-color-neutral-400, #9ca3af);
+  }
+
+  .ol-asset__presentation-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    color: var(--ol-color-text-secondary, #6b7280);
+    opacity: 0.7;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  .ol-asset:hover .ol-asset__presentation-icon {
+    opacity: 1;
+    transform: scale(1.05);
+    color: var(--ol-color-text-primary, #111827);
+  }
+
+  .ol-asset__presentation-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ol-asset__presentation-name {
+    font-size: var(--ol-font-size-small, 0.875rem);
+    font-weight: 500;
+    color: var(--ol-color-text-secondary, #6b7280);
+    text-align: center;
+    line-height: 1.4;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    transition: color 0.2s ease;
+  }
+
+  .ol-asset:hover .ol-asset__presentation-name {
+    color: var(--ol-color-text-primary, #111827);
+  }
+
+  .ol-asset--small .ol-asset__presentation-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .ol-asset--small .ol-asset__presentation-name {
+    font-size: var(--ol-font-size-x-small, 0.75rem);
+  }
+
+  .ol-asset--large .ol-asset__presentation-icon {
+    width: 80px;
+    height: 80px;
+  }
+
+  .ol-asset--large .ol-asset__presentation-name {
+    font-size: var(--ol-font-size-medium, 1rem);
+  }
+
+  /* Loading state */
+  .ol-asset__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    color: var(--ol-color-text-secondary, #6b7280);
+  }
+
+  .ol-asset__spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--ol-color-border, #e5e7eb);
+    border-top: 2px solid var(--ol-color-primary, #3b82f6);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 8px;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  /* Error state */
+  .ol-asset__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    color: var(--ol-color-error, #ef4444);
+    text-align: center;
+  }
+
+  .ol-asset__error-icon {
+    margin-right: 8px;
+    font-size: 16px;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .ol-asset--compact {
+      flex-direction: column;
+    }
+
+    .ol-asset--compact .ol-asset__thumbnail {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16/9;
+    }
+
+    .ol-asset--compact .ol-asset__content {
+      padding-left: var(--asset-padding);
+    }
+  }
+
+  /* Download button */
+  .ol-asset__download-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    z-index: 2;
+  }
+
+  .ol-asset__download-btn:hover {
+    background: rgba(0, 0, 0, 0.9);
+    transform: scale(1.1);
+  }
+
+  .ol-asset__download-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .ol-asset__download-btn--downloading {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .ol-asset__download-spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Hover overlay */
+  .ol-asset__hover-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    border-radius: var(--asset-border-radius);
+    z-index: 10;
+  }
+
+  .ol-asset:hover .ol-asset__hover-overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .ol-asset__hover-buttons {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ol-asset__hover-btn {
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--ol-color-neutral-700, #374151);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .ol-asset__hover-btn:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .ol-asset__hover-btn:active {
+    transform: scale(0.95);
+  }
+
+  .ol-asset__hover-btn--maximize,
+  .ol-asset__hover-btn--download,
+  .ol-asset__hover-btn--external {
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--ol-color-neutral-700, #374151);
+  }
+
+  .ol-asset__hover-btn--maximize:hover,
+  .ol-asset__hover-btn--download:hover,
+  .ol-asset__hover-btn--external:hover {
+    background: rgba(255, 255, 255, 1);
+  }
+
+  .ol-asset__hover-btn--downloading {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  .ol-asset__hover-btn--downloading:hover {
+    transform: none;
+    background: rgba(34, 197, 94, 0.9);
+  }
+
+  .ol-asset__hover-btn svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Video controls (always visible in top-right corner) */
+  .ol-asset__video-controls {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    z-index: 20;
+  }
+
+  .ol-asset__video-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(8px);
+  }
+
+  .ol-asset__video-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+    transform: scale(1.05);
+  }
+
+  .ol-asset__video-btn:active {
+    transform: scale(0.95);
+  }
+
+  .ol-asset__video-btn--downloading {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .ol-asset__video-btn--downloading:hover {
+    transform: none;
+  }
+
+  .ol-asset__video-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Mobile: Video controls always visible */
+  @media (max-width: 768px) {
+    .ol-asset__video-controls {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  /* Hide existing download button when hover overlay is visible */
+  .ol-asset:hover .ol-asset__download-btn {
+    opacity: 0;
+    visibility: hidden;
+  }
+`;export{a as styles};

package/components/asset/asset.types.cjs

@@ -0,0 +1,2 @@
+/*! @onlive.ai/common-121 v0.2.163 | © 2026 Onlive.ai */
+"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var l=(s,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of o(e))!g.call(s,t)&&t!==n&&i(s,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return s};var d=s=>l(i({},"__esModule",{value:!0}),s);var p={};module.exports=d(p);