lyco/dist/index.es.js

Lit-based pure layout rendering function library , including Row/Column/Flex/Grid and other commonly used rendering functions .

import{AnimationAPI as e,LycoComponent as t,createEventBinder as n,getComponentCount as r,getRandomClassName as i,renderFn as a,renderFnOrArray as o,renderFnOrArrayOrCurry as s,renderFnOrCurry as c}from"./core-bQvrG1od.mjs";import{css as l,html as u,nothing as d,render as f}from"lit";import{createRef as p,ref as m}from"lit/directives/ref.js";import{styleMap as h}from"lit/directives/style-map.js";const g=typeof window>`u`,_=100;var v=class{constructor(e){this._capacity=e,this.buffer=Array(e)}set(e,t){this.buffer[e%this._capacity]=t}get(e){return this.buffer[e%this._capacity]}clear(){this.buffer.fill(void 0)}get capacity(){return this._capacity}},y=class{constructor(){this.data=new Float64Array}set(e,t){let n=e*3;this.data[n]=t.start,this.data[n+1]=t.end,this.data[n+2]=t.total}get(e){let t=e*3;return t<0||t+2>=this.data.length?{start:0,end:0,total:0}:{start:this.data[t],end:this.data[t+1],total:this.data[t+2]}}initialize(e){this.data=new Float64Array(Math.ceil(e/_)*3),this.data.fill(0)}},b=class{constructor(e,t,n){this._items=[],this._itemSize=50,this._layout=`vertical`,this._preloadCount=5,this._cacheSize=200,this._renderItem=()=>u``,this._containerRef=p(),this._firstVisible=0,this._lastVisible=0,this._positionCache=new Float64Array,this._sizeCache=new Float32Array,this._cacheInitialized=!1,this._totalContentSize=0,this._blockStore=new y,this._recycledNodes=[],this.RECYCLE_POOL_SIZE=20,this._preRenderChunkSize=5,this.CHUNK_SIZE=1e3,this._chunks=new Map,this._visibleChunkIndexes=new Set,this._loadedChunks=new Set,this._estimatedItemHeight=0,this._isLoading=!1,this._hasMore=!1,this._pageSize=50,this._fetchMoreThreshold=.8,this._getItemSize=e=>typeof this._itemSize==`function`?this._itemSize(e):this._itemSize,this._calculateMetrics=()=>{if(this._items.length===0){this._positionCache=new Float64Array,this._sizeCache=new Float32Array,this._blockStore.initialize(0),this._totalContentSize=0,this._cacheInitialized=!0,this._templateBuffer.clear();return}this._positionCache=new Float64Array(this._items.length),this._sizeCache=new Float32Array(this._items.length),this._blockStore.initialize(this._items.length);let e=0,t=0,n=0;for(let r=0;r<this._items.length;r++){let i=this._getItemSize(r);if(this._positionCache[r]=e,this._sizeCache[r]=i,n+=i,(r+1)%_===0||r===this._items.length-1){let a=Math.floor(r/_);this._blockStore.set(a,{start:t,end:e+i,total:n}),t=e+i,n=0}e+=i}this._totalContentSize=e,this._cacheInitialized=!0,this._templateBuffer.clear()},this._findItemIndexByOffset=e=>{if(!this._cacheInitialized||this._items.length===0)return 0;let t=0,n=this._items.length-1,r=0;for(;t<=n;){let i=Math.floor((t+n)/2);this._positionCache[i]<=e?(r=i,t=i+1):n=i-1}return r},this._updateVisibleRange=()=>{if(!this._containerRef.value)return;let e=this._layout===`vertical`,t=e?this._containerRef.value.scrollTop:this._containerRef.value.scrollLeft,n=e?this._containerRef.value.clientHeight:this._containerRef.value.clientWidth;this._firstVisible=Math.floor(t/this._estimatedItemHeight),this._lastVisible=Math.ceil((t+n)/this._estimatedItemHeight),this._checkAndLoadMore(),this.host.requestUpdate()},this._ticking=!1,this._lastUpdate=0,this.FRAME_BUDGET=16,this._scheduleUpdate=async()=>{if(this._ticking)return;let e=performance.now(),t=e-this._lastUpdate;t>=this.FRAME_BUDGET&&(this._ticking=!0,requestAnimationFrame(()=>{this._updateVisibleRange(),this._ticking=!1,this._lastUpdate=performance.now()}))},this.host=e,e.addController(this),this.updateConfig(t,n),this._templateBuffer=new v(this._cacheSize),this._pageSize=t.pageSize??50,this._fetchMoreThreshold=t.fetchMoreThreshold??.8,g||(this._setupObservers(),this._setupResizeObserver(),this._initializeChunks())}_initializeItems(e){this._items=[...e],this._calculateMetrics(),this._initializeChunks(),this.host.requestUpdate()}_updateMetricsForRange(e,t){if(t>this._positionCache.length){let e=new Float64Array(Math.max(t*1.5,1e3));e.set(this._positionCache),this._positionCache=e;let n=new Float32Array(Math.max(t*1.5,1e3));n.set(this._sizeCache),this._sizeCache=n}let n=e===0?0:this._positionCache[e-1]+this._sizeCache[e-1];for(let r=e;r<t;r++){let e=this._getItemSize(r);this._positionCache[r]=n,this._sizeCache[r]=e,n+=e}this._totalContentSize=n,this._updateChunkMetrics()}_setupObservers(){this._intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&this._preRenderChunk()})},{rootMargin:`50%`}),this._mutationObserver=new MutationObserver(e=>{e.forEach(e=>{e.removedNodes.forEach(e=>{e instanceof HTMLElement&&this._recycledNodes.length<this.RECYCLE_POOL_SIZE&&this._recycledNodes.push(e)})})})}_setupResizeObserver(){this._resizeObserver=new ResizeObserver(e=>{for(let t of e)if(t.target instanceof HTMLElement){let e=t.contentRect.height;e>0&&(this._estimatedItemHeight=e,this._updateChunkMetrics())}})}_initializeChunks(){this._chunks.clear();let e=Math.ceil(this._items.length/this.CHUNK_SIZE);for(let t=0;t<e;t++){let e=t*this.CHUNK_SIZE,n=Math.min(e+this.CHUNK_SIZE,this._items.length);this._chunks.set(t,this._items.slice(e,n))}}_updateChunkMetrics(){if(!this._containerRef.value)return;let e=this._containerRef.value.clientHeight,t=this._items.length*this._estimatedItemHeight;this._blockStore.initialize(Math.ceil(this._items.length/this.CHUNK_SIZE));let n=0;for(let e=0;e<this._chunks.size;e++){let t=Math.min(this.CHUNK_SIZE,this._items.length-e*this.CHUNK_SIZE),r=t*this._estimatedItemHeight;this._blockStore.set(e,{start:n,end:n+r,total:r}),n+=r}this._totalContentSize=t,this._calculateVisibleChunks()}_calculateVisibleChunks(){if(!this._containerRef.value)return;let e=this._containerRef.value.scrollTop,t=this._containerRef.value.clientHeight,n=Math.floor(e/(this.CHUNK_SIZE*this._estimatedItemHeight)),r=Math.ceil((e+t)/(this.CHUNK_SIZE*this._estimatedItemHeight));this._visibleChunkIndexes.clear();for(let e=n;e<=r;e++)this._chunks.has(e)&&this._visibleChunkIndexes.add(e);this._preloadAdjacentChunks(n-1,r+1)}_preloadAdjacentChunks(e,t){for(let n=e;n<=t;n++)n>=0&&n<this._chunks.size&&!this._loadedChunks.has(n)&&requestIdleCallback(()=>{this._loadChunk(n)})}_loadChunk(e){if(this._loadedChunks.has(e))return;let t=e*this.CHUNK_SIZE,n=Math.min(t+this.CHUNK_SIZE,this._items.length),r=this._items.slice(t,n);this._chunks.set(e,r),this._loadedChunks.add(e),this._calculateMetricsForChunk(e)}_calculateMetricsForChunk(e){let t=e*this.CHUNK_SIZE,n=this._chunks.get(e)||[],r=t*this._estimatedItemHeight;for(let e=0;e<n.length;e++){let n=t+e;this._positionCache[n]=r,this._sizeCache[n]=this._estimatedItemHeight,r+=this._estimatedItemHeight}}_preRenderChunk(){this._idleCallbackId&&cancelIdleCallback(this._idleCallbackId),this._idleCallbackId=requestIdleCallback(e=>{let t=this._lastVisible+1,n=0;for(;e.timeRemaining()>0&&n<this._preRenderChunkSize&&t<this._items.length;)this._prerenderItem(t),t++,n++;t<this._items.length&&this._preRenderChunk()})}_prerenderItem(e){let t=e%this._cacheSize;if(!this._templateBuffer.get(t)){let n=this._positionCache[e],r=this._sizeCache[e];if(n!==void 0&&r!==void 0){let i=this._getItemStyle(n,r),a=this._createItemTemplate(this._items[e],e,i);this._templateBuffer.set(t,a)}}}_getItemStyle(e,t){let n=this._layout===`vertical`;return{position:`absolute`,[n?`top`:`left`]:`${e}px`,[n?`height`:`width`]:`${t}px`,width:n?`100%`:`auto`,height:n?`auto`:`100%`,willChange:`transform`,contain:`content`,backfaceVisibility:`hidden`,WebkitFontSmoothing:`subpixel-antialiased`}}_createItemTemplate(e,t,n){let r=this._recycledNodes.pop(),i=`item-${t}`;return u`
			${r?u`<div
						.key=${i}
						style=${h(n)}
						data-index=${t}
						.recycled=${r}
				  >
						${this._renderItem(e,t)}
				  </div>`:u`<div .key=${i} style=${h(n)} data-index=${t}>
						${this._renderItem(e,t)}
				  </div>`}
		`}hostConnected(){if(g||this.host.updateComplete.then(()=>{this._containerRef.value&&(this._containerRef.value.addEventListener(`scroll`,this._scheduleUpdate),this._calculateMetrics(),this._updateVisibleRange(),this.host.requestUpdate())}),!g&&this._containerRef.value){var e,t,n;(e=this._intersectionObserver)?.observe(this._containerRef.value),(t=this._mutationObserver)?.observe(this._containerRef.value,{childList:!0,subtree:!0,attributes:!0}),(n=this._resizeObserver)?.observe(this._containerRef.value)}}hostDisconnected(){var e,t,n;!g&&this._containerRef.value&&this._containerRef.value.removeEventListener(`scroll`,this._scheduleUpdate),(e=this._intersectionObserver)?.disconnect(),(t=this._mutationObserver)?.disconnect(),(n=this._resizeObserver)?.disconnect(),this._idleCallbackId&&cancelIdleCallback(this._idleCallbackId)}hostUpdated(){!g&&!this._cacheInitialized&&this._containerRef.value&&this._items.length>0&&(this._calculateMetrics(),this._updateVisibleRange(),this.host.requestUpdate())}async updateConfig(e,t){let n=this._itemSize,r=this._cacheSize;this._itemSize=e.itemSize??50,this._layout=e.layout??`vertical`,this._preloadCount=e.preloadCount??5,this._cacheSize=e.cacheSize??200,this._renderItem=t,this._onLoadMore=e.onLoadMore,`items`in e&&this._initializeItems(e.items),this._pageSize=e.pageSize??this._pageSize,this._fetchMoreThreshold=e.fetchMoreThreshold??this._fetchMoreThreshold,r!==this._cacheSize&&(this._templateBuffer=new v(this._cacheSize)),n!==this._itemSize&&(this._calculateMetrics(),this._initializeChunks()),g||this._updateVisibleRange(),this.host.requestUpdate()}async _checkAndLoadMore(){if(!this._onLoadMore||this._isLoading||!this._containerRef.value)return;let e=this._lastVisible,t=this._pageSize||1e3,n=(e+1)%t===0;if(n){console.log(`Reached end of page, loading more...`,{lastVisibleIndex:e,pageSize:t,totalItems:this._items.length}),this._isLoading=!0;try{await this._onLoadMore()}finally{this._isLoading=!1}}}getRenderedItems(){if(!this._renderItem)return[];let e=[],t=new Set;for(let e of this._visibleChunkIndexes){let n=this._chunks.get(e);if(!n)continue;let r=e*this.CHUNK_SIZE;n.forEach((e,n)=>{let i=r+n;i>=this._firstVisible&&i<=this._lastVisible&&t.add(i)})}return Array.from(t).sort((e,t)=>e-t).forEach(t=>{let n=this._getItemStyle(this._positionCache[t]||t*this._estimatedItemHeight,this._sizeCache[t]||this._estimatedItemHeight);e.push(this._createItemTemplate(this._items[t],t,n))}),e}getContainerRef(){return this._containerRef}getTotalContentSize(){return this._totalContentSize}getLayout(){return this._layout}};const x=new WeakMap,S=()=>{if(g)return null;try{let e=document.currentScript;if(e&&`_$litElement$`in e)return e._$litElement$;if(customElements&&window.customElements){let e=document.querySelector(`virtualizer-example`);if(e&&`_$litElement$`in e)return e._$litElement$}}catch(e){console.warn(`Failed to get Lit host:`,e)}return null};function C(e){return e!==null&&typeof e.addController==`function`}function w(e,t){let n=S();if(!C(n)){console.warn(`Virtualizer: Running in fallback mode`);let n=t||e.renderItem||(e=>u`${String(e)}`),r=e.items;return u`
			<div style="overflow: auto; height: 100%; position: relative;">
				<div style="position: relative;">
					${r.map((e,t)=>n(e,t))}
				</div>
			</div>
		`}let r=x.get(n);if(!r){let i=t||e.renderItem||(e=>u`${e}`);r=new b(n,e,i),x.set(n,r)}let i=t=>{r.updateConfig(e,t);let n={position:`relative`,overflow:g?`visible`:`auto`,[r.getLayout()===`vertical`?`height`:`width`]:`100%`,[r.getLayout()===`vertical`?`minHeight`:`minWidth`]:`1px`},i={position:`relative`,[r.getLayout()===`vertical`?`height`:`width`]:`${r.getTotalContentSize()}px`,transform:r.getLayout()===`vertical`?`translateY(0)`:`translateX(0)`};return u`
			<div
				${m(r.getContainerRef())}
				style=${h(n)}
				@scroll=${g?d:()=>r.host.requestUpdate()}
			>
				<div style=${h(i)}>
					${r.getRenderedItems()}
				</div>
			</div>
		`};return t===void 0?`renderItem`in e?i(e.renderItem):e=>i(e):i(t)}function T(e,t){if(t===void 0){let t=t=>T(e,t??u``);return t.html=(t,...n)=>T(e,u(t,...n)),t}let r=e?.fadeBg??`rgba(0,0,0,0.7)`,i=e?.zIndex??2e3,o=n(e?.on??{});return u`
		<div
			${m(e=>{e?o.bind(e):o.unbindAll()})}
			style="
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: ${r};
        z-index: ${i};
        display: flex;
        justify-content: center;
        align-items: center;
      "
		>
			${a(t)}
		</div>
	`}function E(e,t){let r=n(e?.on??{});return t===void 0?t=>E(e,t??[u``]):u`
		<div
			.class="${e?.className}"
			${m(e=>{e?r.bind(e):r.unbindAll()})}
			style="
      display: flex;
      flex-direction: column;
	  ${e?.center?`align-items: center;`:``}
      ${e?.space?`gap: ${e.space};`:``}
      ${e?.style??``}
    "
		>
			${o(t)}
		</div>
	`}function D(e,t){if(t===void 0){let t=t=>D(e,t??u``);return t.html=(t,...n)=>D(e,u(t,...n)),t}let r=e?.direction??`row`,i=n(e?.on??{});return u`
		<div
			${m(e=>{e?i.bind(e):i.unbindAll()})}
			style="
        display: flex;
        flex-direction: ${r};
        ${e?.justify?`justify-content: ${e.justify};`:``}
        ${e?.align?`align-items: ${e.align};`:``}
        ${e?.gap?`gap: ${e.gap};`:``}
      "
		>
			${a(t)}
		</div>
	`}function O(e,t){if(t===void 0){let t=t=>O(e,t??u``);return t.html=(t,...n)=>O(e,u(t,...n)),t}let r=n(e?.on??{});return u`
		<div
			${m(e=>{e?r.bind(e):r.unbindAll()})}
			style="break-inside: avoid; margin-bottom: 16px;"
		>
			${a(t)}
		</div>
	`}function k(e,t){if(t===void 0)return t=>k(e,t??[u``]);let r=e?.columns??1,i=n(e?.on??{});return u`
		<div
			${m(e=>{e?i.bind(e):i.unbindAll()})}
			style="
        display: grid;
        grid-template-columns: repeat(${r}, 1fr);
        ${e?.gap?`gap: ${e.gap};`:``}
      "
		>
			${o(t)}
		</div>
	`}function A(e,o){if(o===void 0){let t=t=>A(e,t??u``);return t.html=(t,...n)=>A(e,u(t,...n)),t}let s=r(`GridCol`),c=i(`GridCol::grid-col`)+`-lyco-now-`+s,l=e?.gap?`column-gap: ${e.gap};`:``,d=`
      .${c} {
        display: grid;
        grid-auto-flow: column;
        ${l}
      }
    `,f=n(e?.on??{});return t(`GridCol`,u`
			<style>
				${d}
			</style>
			<div
				${m(e=>{e?f.bind(e):f.unbindAll()})}
				class="${c}"
			>
				${a(o)}
			</div>
		`)}function j(e,t){if(t===void 0){let t=t=>j(e,t??u``);return t.html=(t,...n)=>j(e,u(t,...n)),t}let r=n(e?.on??{});return u`
		<div
			${m(e=>{e?r.bind(e):r.unbindAll()})}
			style="${e?.span?`grid-column: span ${e.span};`:``}"
		>
			${a(t)}
		</div>
	`}function M(e,o){if(o===void 0){let t=t=>M(e,t??u``);return t.html=(t,...n)=>M(e,u(t,...n)),t}let s=r(`GridRow`),c=i(`GridRow::grid-row`)+`-lyco-now-`+s,l=e?.gap?`row-gap: ${e.gap};`:``,d=`
      .${c} {
        display: grid;
        grid-auto-flow: row;
        ${l}
      }
    `,f=n(e?.on??{});return t(`GridRow`,u`
			<style>
				${d}
			</style>
			<div
				${m(e=>{e?f.bind(e):f.unbindAll()})}
				class="${c}"
			>
				${a(o)}
			</div>
		`)}function N(e,t){if(t===void 0)return t=>N(e,t??[u``]);let r=n(e?.on??{});return u`
		<div
			${m(e=>{e?r.bind(e):r.unbindAll()})}
			style="
        display: flex;
        flex-direction: row;
		${e?.center?`align-items: center;`:``}
        ${e?.space?`gap: ${e.space};`:``}
      "
		>
			${o(t)}
		</div>
	`}function P(e,o){if(o===void 0){let t=t=>P(e,t??u``);return t.html=(t,...n)=>P(e,u(t,...n)),t}let s=e?.columnCount??3,c=e?.gap??`16px`,l=r(`WaterFlow`),d=i(`WaterFlow::waterflow`)+`-lyco-now-${l}`,f=`
	/* 使用 CSS 类来控制多列布局 */
	.${d} {
		column-count: ${s};
		column-gap: ${typeof c==`number`?`${c}px`:c};
	}
	/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
	.${d} > * {
		display: inline-block;
		width: 100%;
	}
	`,p=n(e?.on??{});return t(`WaterFlow`,u`
			<style>
				${f}
			</style>

			<div
				${m(e=>{e?p.bind(e):p.unbindAll()})}
				class="${d}"
			>
				${a(o)}
			</div>
		`)}function F(e,t){if(t===void 0){let t=t=>F(e,t??u``);return t.html=(t,...n)=>F(e,u(t,...n)),t}let r=e?.gap??`0px`,i=e?.firstHeight??`50%`,o=u``,s=u``;if(typeof t==`function`){var c;let e=(c=t.call)?.call(t,null)??[];o=e[0]??u``,s=e[1]??u``}else o=a(t);let l=n(e?.on??{});return u`
		<div
			${m(e=>{e?l.bind(e):l.unbindAll()})}
			style="
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: ${r};
      "
		>
			<div style="flex: 0 0 ${i}; overflow: auto;">${o}</div>
			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
		</div>
	`}function I(e,t){if(t===void 0){let t=t=>I(e,t??u``);return t.html=(t,...n)=>I(e,u(t,...n)),t}let r=e?.gap??`0px`,i=e?.firstWidth??`50%`,o=u``,s=u``;if(typeof t==`function`){var c;let e=(c=t.call)?.call(t,null)??[];o=e[0]??u``,s=e[1]??u``}else o=a(t);let l=n(e?.on??{});return u`
		<div
			${m(e=>{e?l.bind(e):l.unbindAll()})}
			style="
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      gap: ${r};
    "
		>
			<div style="flex: 0 0 ${i}; overflow: auto;">${o}</div>
			<div style="flex: 1 1 auto; overflow: auto;">${s}</div>
		</div>
	`}function L(e,o){if(o===void 0){let t=t=>L(e,t??u``);return t.html=(t,...n)=>L(e,u(t,...n)),t}let s=e?.direction??`vertical`,c=e?.height??`100%`,l=e?.width??`100%`,d=e?.customCss??``,f=r(`ScrollBar`),p=e?.className??i(`ScrollBar::scrollbar-container`)+`-lyco-now-`+f,h=s===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`,g=`
	.${p} {
	  ${h};
	  width: ${l};
	  height: ${c};
	}
	.${p}::-webkit-scrollbar {
	  width: 8px;
	  height: 8px;
	}
	.${p}::-webkit-scrollbar-thumb {
	  background-color: rgba(0, 0, 0, 0.2);
	  border-radius: 4px;
	}
	.${p}::-webkit-scrollbar-track {
	  background: rgba(0, 0, 0, 0.05);
	}
	${d}
	`,_=n(e?.on??{});return t(`ScrollBar`,u`
			<style>
				${g}
			</style>
			<div
				${m(e=>{e?_.bind(e):_.unbindAll()})}
				class="${p}"
			>
				${a(o)}
			</div>
		`)}function R(e,t){if(t===void 0)return t=>R(e,t??[u``]);let r=e?.sidebarWidth??`240px`,i=e?.sidebarPosition??`left`,a=e?.gap??`0px`,s=u``,c=u``;if(typeof t==`function`){var l;let e=(l=t.call)?.call(t,null)??[];s=e[0]??u``,c=e[1]??u``}else c=o(t);let d=n(e?.on??{});return u`
		<div
			${m(e=>{e?d.bind(e):d.unbindAll()})}
			style="
      display: flex;
      flex-direction: ${i===`left`?`row`:`row-reverse`};
      width: 100%;
      height: 100%;
      gap: ${a};
    "
		>
			<div style="flex: 0 0 ${r}; overflow: auto;">${s}</div>
			<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
		</div>
	`}function ee(e={},a){if(a===void 0)return t=>ee(e,t??[u``]);let o=r(`Swiper`),{gap:s=`8px`,snapType:c=`mandatory`,height:l=`auto`,width:d=`100%`,className:f=i(`Swiper::swiper`)+`-lyco-now-${o}`,direction:p=`x`,scrollBehavior:h=`smooth`,align:g=`start`,showNavigation:_=!0,navigationPosition:v=`inside`,showPagination:y=!0,paginationType:b=`dots`,autoPlay:x=!1,interval:S=3e3,loop:C=!1,touchEnabled:w=!0,mouseWheel:T=!1,onSlideChange:E,on:D}=e,O=f,k=O+`-container`,A=O+`-slide`,j=O+`-navigation`,M=O+`-pagination`,N;N=a?typeof a==`function`?a():a:[];let P=N.length,[F,I]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,P-1));e.value!==n&&(e.value=n,E?.(n))}]})(),L=e=>{let t=typeof document<`u`?document.querySelector(`.${k}`):null;if(!t)return;let n=t.querySelectorAll(`.${A}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;p===`x`?(o=r.offsetLeft-t.offsetLeft,g===`center`?o-=(a.width-i.width)/2:g===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:h})):(o=r.offsetTop-t.offsetTop,g===`center`?o-=(a.height-i.height)/2:g===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:h})),I(e)},R=()=>{let e=F()+1>=P?C?0:F():F()+1;L(e)},z=()=>{let e=F()-1<0?C?P-1:F():F()-1;L(e)},te=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=e.querySelectorAll(`.${A}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(p===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),I(n)},B=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},V=e=>{if(!w)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||p===`x`)&&e.preventDefault()},H=e=>{if(!w)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(p===`x`?a>0?z():R():o>0?z():R()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},U=e=>{T&&(e.preventDefault(),e.deltaY>0?R():z())},ne=e=>{if(!x||!e)return;let t,n=()=>{t=setInterval(R,S)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},W=()=>{let e=typeof document<`u`?document.querySelector(`.${k}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,te),t.push(()=>e.removeEventListener(`scroll`,te)),w&&(e.addEventListener(`touchstart`,B),e.addEventListener(`touchmove`,V,{passive:!1}),e.addEventListener(`touchend`,H),t.push(()=>e.removeEventListener(`touchstart`,B)),t.push(()=>e.removeEventListener(`touchmove`,V)),t.push(()=>e.removeEventListener(`touchend`,H))),T&&(e.addEventListener(`wheel`,U,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,U)));let n=ne(e);return n&&t.push(n),L(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(W,0);let G=u`
		<div class="${M}">
			${Array.from({length:P},(e,t)=>u`
					<button
						class="${t===F()?`active`:``}"
						@click=${()=>L(t)}
					></button>
				`)}
		</div>
	`,K=u`
		<div class="${M} fraction">
			<span class="current">${F()+1}</span>
			<span class="separator">/</span>
			<span class="total">${P}</span>
		</div>
	`,q=u`
		<div class="${M} progressbar">
			<div
				class="progress"
				style="width: ${P>1?F()/(P-1)*100:0}%"
			></div>
		</div>
	`,re=u`
		<div class="${j}">
			<button class="prev" @click=${z}>◀</button>
			<button class="next" @click=${R}>▶</button>
		</div>
	`,J=`
	.${O} {
		position: relative;
		overflow: hidden;
		width: ${d};
		height: ${l};
	}

	.${k} {
		width: 100%;
		height: 100%;
		overflow: auto;
		scroll-snap-type: ${p+` `+c};
		-webkit-overflow-scrolling: touch;
		scroll-behavior: ${h};
		gap: ${s};
		display: flex;
		flex-direction: ${p===`x`?`row`:`column`};
	}

	.${A} {
		scroll-snap-align: ${g};
		flex-shrink: 0;
	}

	.${j} {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		display: flex;
		justify-content: space-between;
		pointer-events: none;
		padding: ${v===`outside`?`0 1rem`:`0 0.5rem`};
	}

	.${j} button {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		pointer-events: auto;
		transition: background-color 0.3s;
	}

	.${j} button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.${M} {
		position: absolute;
		bottom: 1rem;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		align-items: center;
	}
	.${M} button {
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		border: none;
		cursor: pointer;
		transition: background-color 0.3s, transform 0.3s;
	}
	.${M} button.active {
		background-color: white;
		transform: scale(1.2);
	}

	.${M}.fraction {
		position: absolute;
		bottom: 1rem;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		font-size: 1rem;
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.${M}.progressbar {
		position: absolute;
		bottom: 0.5rem;
		left: 0;
		right: 0;
		height: 0.25rem;
		background-color: rgba(255, 255, 255, 0.2);
	}
	.${M}.progressbar .progress {
		height: 100%;
		background-color: white;
		transition: width 0.3s;
	}
	`,Y=n(D??{});return t(`Swiper`,u`
			<style>
				${J}
			</style>

			<div
				${m(e=>{e?Y.bind(e):Y.unbindAll()})}
				class="${O}"
			>
				<div class="${k}">
					${N.map((e,t)=>u`
							<div class="${A} --slide-${t}" key=${t}>
								${e}
							</div>
						`)}
				</div>

				${_?re:null}
				${y&&b===`dots`?G:null}
				${y&&b===`fraction`?K:null}
				${y&&b===`progressbar`?q:null}
			</div>
		`)}const z={borderRadius:{small:`4px`,medium:`8px`,large:`16px`,full:`9999px`},elevation:{level1:`0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)`,level2:`0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)`,level3:`0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)`,level4:`0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)`,level5:`0 20px 40px rgba(0,0,0,0.2)`},animation:{standard:`0.2s cubic-bezier(0.4, 0, 0.2, 1)`,emphasized:`0.3s cubic-bezier(0.4, 0, 0.2, 1)`,decelerated:`0.4s cubic-bezier(0, 0, 0.2, 1)`},colors:{primary:`#6750A4`,onPrimary:`#FFFFFF`,primaryContainer:`#EADDFF`,onPrimaryContainer:`#21005E`,secondary:`#625B71`,onSecondary:`#FFFFFF`,secondaryContainer:`#E8DEF8`,onSecondaryContainer:`#1E192B`,surface:`#FEF7FF`,onSurface:`#1C1B1F`,surfaceVariant:`#E7E0EB`,onSurfaceVariant:`#49454E`,error:`#B00020`}};function te(e){let{checked:a=!1,disabled:o=!1,size:s=`medium`,color:c=z.colors.primary,onChange:l,className:d=``,on:f={}}=e??{},p=r(`SwitchInput`),h=i(`SwitchInput::switch`)+`-lyco-now-${p}`,g={small:{width:32,height:16,thumbSize:12},medium:{width:44,height:24,thumbSize:18},large:{width:56,height:32,thumbSize:24}},{width:_,height:v,thumbSize:y}=g[s],b=`
    .${h} {
      display: inline-block;
      position: relative;
      width: ${_}px;
      height: ${v}px;
      cursor: ${o?`not-allowed`:`pointer`};
    }

    .${h} input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .${h} .slider {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: ${o?z.colors.surfaceVariant:z.colors.onSurfaceVariant};
      transition: ${z.animation.standard};
      border-radius: ${v}px;
      opacity: ${o?.38:.5};
    }

    .${h} .slider:before {
      position: absolute;
      content: "";
      height: ${y}px;
      width: ${y}px;
      left: ${(v-y)/2}px;
      bottom: ${(v-y)/2}px;
      background-color: ${z.colors.surface};
      transition: ${z.animation.emphasized};
      border-radius: 50%;
      box-shadow: ${z.elevation.level1};
    }

    .${h} input:checked + .slider {
      background-color: ${o?z.colors.surfaceVariant:c};
      opacity: ${o?.38:1};
    }

    .${h} input:checked + .slider:before {
      transform: translateX(${_-v}px);
      background-color: ${z.colors.onPrimary};
    }

    .${h}:hover .slider:before {
      box-shadow: ${o?z.elevation.level1:z.elevation.level2};
    }

    .${h}:active .slider:before {
      box-shadow: ${o?z.elevation.level1:z.elevation.level3};
      width: ${y*1.2}px;
    }
  `,x=n(f);return t(`SwitchInput`,u`
			<style>
				${b}
			</style>
			<label
				class="${h} ${d}"
				${m(e=>{e?x.bind(e):x.unbindAll()})}
			>
				<input
					type="checkbox"
					?checked=${a}
					?disabled=${o}
					@change=${e=>{!o&&l&&l(e.target.checked)}}
				/>
				<span class="slider"></span>
			</label>
		`)}function B(e,t){let r=e?.top?`top: ${e.top};`:``,i=e?.right?`right: ${e.right};`:``,o=e?.bottom?`bottom: ${e.bottom};`:``,s=e?.left?`left: ${e.left};`:``,l=e?.width?`width: ${e.width};`:``,d=e?.height?`height: ${e.height};`:``,f=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,p=e?.style?e.style:``,h=e?.className?e.className:``,g=n(e?.on??{}),_=e=>u`
			<div
				${m(e=>{e?g.bind(e):g.unbindAll()})}
				class="${h}"
				style="
      position: absolute;
      ${r} ${i} ${o} ${s}
      ${l} ${d}
      ${f}
	  ${p}
    "
			>
				${a(e)}
			</div>
		`;return c(t,_)}function V(e,t){let r=e?.width??`300px`,i=e?.height??`auto`,a=e?.top??`20%`,o=e?.bottom??`auto`,c=e?.left??`50%`,l=e?.right??`auto`,d=c===`auto`?``:`transform: translateX(-50%);`,f=e?.background??`rgba(255, 255, 255, 0.3)`,p=e?.blur??`10px`,h=e?.borderRadius??`12px`,g=e?.padding??`16px`,_=e?.zIndex??1e3,v=n(e?.on??{}),y=e=>u`
			<div
				${m(e=>{e?v.bind(e):v.unbindAll()})}
				style="
      position: fixed;
      top: ${a};
      bottom: ${o};
      left: ${c};
      right: ${l};
      ${d}
      width: ${r};
      height: ${i};
      background: ${f};
      backdrop-filter: blur(${p});
      -webkit-backdrop-filter: blur(${p});
      border-radius: ${h};
      padding: ${g};
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      z-index: ${_};
      display: flex;
      flex-direction: column;
    "
			>
				${e}
			</div>
		`;return s(t,void 0,y)}function H(e,t){if(t===void 0)return t=>H(e,t??[u``]);let r=`${100/e.ratio}%`,i=e.maxWidth?`max-width: ${e.maxWidth};`:``,a=e.background?`background: ${e.background};`:``,s=e.overflow??`hidden`,c=n(e.on??{});return u`
		<div
			${m(e=>{e?c.bind(e):c.unbindAll()})}
			style="
      position: relative;
      width: 100%;
      ${i}
      ${a}
      overflow: ${s};
    "
		>
			<div style="width: 100%; padding-top: ${r};"></div>
			<div
				style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      "
			>
				${o(t)}
			</div>
		</div>
	`}function U(e,o){if(o===void 0){let t=t=>U(e,t);return t.html=(t,...n)=>U(e,u(t,...n)),t}let s=r(`AutoFitGrid`),c=i(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-`+s,l=e?.gap??`16px`,d=`
      .${c} {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
        gap: ${l};
      }
    `,f=n(e.on??{});return t(`AutoFitGrid`,u`
			<style>
				${d}
			</style>
			<div
				class="${c}"
				${m(e=>{e?f.bind(e):f.unbindAll()})}
			>
				${a(o)}
			</div>
		`)}function ne(e,t){if(t===void 0)return t=>ne(e,t??[u``]);let r=e?.size??`32px`,i=e?.overlap??`-8px`,a=n(e?.on??{}),s=(e,t)=>u`
		<div
			style="
              width: ${r};
              height: ${r};
              border-radius: 50%;
              overflow: hidden;
              border: 2px solid #fff;
              margin-left: ${t===0?`0`:i};
              box-sizing: content-box;
            "
		>
			${e}
		</div>
	`;return u`
		<div
			${m(e=>{e?a.bind(e):a.unbindAll()})}
			style="display: flex; align-items: center;"
		>
			${o(t,s)}
		</div>
	`}function W(e,t){if(t===void 0){let t=t=>W(e,t??u``);return t.html=(t,...n)=>W(e,u(t,...n)),t}let r=e?.position??`top-right`,i=e?.size??`16px`,o=e?.background??`red`,s=e?.color??`#fff`,[c,l,d,f]=[r.includes(`top`)?`0`:`auto`,r.includes(`right`)?`0`:`auto`,r.includes(`bottom`)?`0`:`auto`,r.includes(`left`)?`0`:`auto`],p=n(e?.on??{});return u`
		<div style="position: relative; display: inline-block;">
			${a(t)}
			<div
				${m(e=>{e?p.bind(e):p.unbindAll()})}
				style="
        position: absolute;
        top: ${c};
        right: ${l};
        bottom: ${d};
        left: ${f};
        width: ${i};
        height: ${i};
        background: ${o};
        color: ${s};
        font-size: calc(${i} * 0.6);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(${f===`0`?`-50%`:`0`}, ${c===`0`?`-50%`:`0`});
      "
			>
				${e?.content??``}
			</div>
		</div>
	`}function G(e,t){if(!t)return t=>G(e,t??p());let r=n(e?.on??{}),i=e=>{e?(r.bind(e),typeof t==`function`?t(e):t={value:e}):r.unbindAll()};return u`
		<canvas
			${m(i)}
			.class=${e?.className}
			style=${e?.style??``}
		></canvas>
	`}function K(e,t){if(t===void 0)return t=>K(e,t??[u``]);let r=e?.padding??`16px`,i=e?.borderRadius??`8px`,a=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,s=e?.background??`#fff`,c=n(e?.on??{});return u`
		<div
			${m(e=>{e?c.bind(e):c.unbindAll()})}
			style="
      background: ${s};
      border-radius: ${i};
      box-shadow: ${a};
      padding: ${r};
      box-sizing: border-box;
    "
		>
			${o(t)}
		</div>
	`}function q(e,t){if(t===void 0){let t=t=>q(e,t??u``);return t.html=(t,...n)=>q(e,u(t,...n)),t}let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});return u`
		<div
			${m(e=>{e?s.bind(e):s.unbindAll()})}
			style="
      display: flex;
      justify-content: center;
      align-items: center;
      ${r} ${i} ${o}
    "
		>
			${a(t)}
		</div>
	`}function re(e){let{value:a=``,options:o=[],placeholder:s=``,disabled:c=!1,error:l=!1,className:d=``,style:f=``,maxHeight:p=`300px`,onChange:h,onInput:g,onFocus:_,onBlur:v,on:y={},optionRender:b}=e??{},x=r(`Combobox`),S=i(`Combobox::combobox`)+`-lyco-now-${x}`,C=!1,w=null,T=`
    .${S} {
      position: relative;
      width: 100%;
    }

    .${S} input {
      width: 100%;
      padding: 12px 16px;
      font-size: 16px;
      border: 1px solid ${l?z.colors.error:z.colors.surfaceVariant};
      border-radius: ${z.borderRadius.small};
      color: ${z.colors.onSurface};
      transition: all ${z.animation.standard};
      outline: none;
      box-sizing: border-box;
    }

    .${S} input:focus {
      border-color: ${z.colors.primary};
      box-shadow: 0 0 0 2px ${z.colors.primaryContainer};
    }

    .${S} input:disabled {
      background: ${z.colors.surfaceVariant};
      color: ${z.colors.onSurfaceVariant};
      cursor: not-allowed;
    }

    .${S} .options {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: ${p};
      overflow-y: auto;
      border: 1px solid ${z.colors.surfaceVariant};
      border-radius: ${z.borderRadius.small};
      box-shadow: ${z.elevation.level2};
      z-index: 1000;
      display: none;
    }

    .${S} .options.open {
      display: block;
    }

    .${S} .option {
      padding: 12px 16px;
      cursor: pointer;
      transition: background ${z.animation.standard};
    }

    .${S} .option:hover {
      background: ${z.colors.primaryContainer};
    }

    .${S} .option.selected {
      background: ${z.colors.primaryContainer};
      color: ${z.colors.onPrimaryContainer};
    }
  `,E=n(y),D=null,O=()=>{C?D?.classList.remove(`open`):D?.classList.add(`open`),C=!C},k=(e,t)=>{if(w){w.value=e.value;let n=t.currentTarget;Array.from(D?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),h?.(e.value)}O()},A=e=>{let t=e.target;t.closest(`.${S}`)||(C=!1,D?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,A),t(`Combobox`,u`
			<style>
				${T}
			</style>
			<div class="${S} ${d}" style="${f}">
				<input
					${m(e=>{e?(w=e,E.bind(e)):E.unbindAll()})}
					type="text"
					.value=${a}
					placeholder=${s}
					?disabled=${c}
					@focus=${()=>{_?.(),O()}}
					@input=${e=>{let t=e.target;g?.(t.value)}}
					@change=${e=>{let t=e.target;h?.(t.value)}}
				/>
				<div
					${m(e=>{e&&(D=e)})}
					class="options"
				>
					${o.map(e=>u`
							<div
								class="option ${e.value===(w?.value??a)?`selected`:``}"
								@click=${t=>k(e,t)}
							>
								${b?b(e):e.label}
							</div>
						`)}
				</div>
			</div>
		`)}function J(e,t){if(t===void 0)return t=>J(e,t??[u``]);let r=e?.maxWidth??`1024px`,i=e?.padding??`0 16px`,a=e?.background?`background: ${e.background};`:``,s=e?.fullHeight?`height: 100%;`:``,c=n(e?.on??{});return u`
		<div
			${m(e=>{e?c.bind(e):c.unbindAll()})}
			style="
      width: 100%;
      max-width: ${r};
      margin-left: auto;
      margin-right: auto;
      padding: ${i};
      ${a}
      ${s}
      box-sizing: border-box;
    "
		>
			${o(t)}
		</div>
	`}function Y(e){let t=e?.orientation??`horizontal`,r=e?.thickness??`1px`,i=e?.color??`#e0e0e0`,a=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),o=n(e?.on??{}),s=t===`horizontal`?`width: 100%; height: ${r}; background: ${i}; margin: ${a};`:`width: ${r}; height: 100%; background: ${i}; margin: ${a};`;return u`<div
		${m(e=>{e?o.bind(e):o.unbindAll()})}
		style="${s}"
	></div>`}function X(e,t){if(t===void 0){let t=t=>X(e,t??u``);return t.html=(t,...n)=>X(e,u(t,...n)),t}let r=e?.columns??4,i=e?.gap??`24px`,o=e?.background??`#f8f8f8`,s=e?.padding??`40px 16px`,c=n(e?.on??{});return u`
		<div
			${m(e=>{e?c.bind(e):c.unbindAll()})}
			style="
      width: 100%;
      background: ${o};
      padding: ${s};
      box-sizing: border-box;
    "
		>
			<div
				style="
        display: grid;
        grid-template-columns: repeat(${r}, 1fr);
        gap: ${i};
      "
			>
				${a(t)}
			</div>
			<div style="text-align: center; margin-top: 24px; color: #666;">
				© ${new Date().getFullYear()} Your Company. All rights reserved.
			</div>
		</div>
	`}function ie(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function Z(e,o){if(o===void 0){let t=t=>Z(e,t??u``);return t.html=(t,...n)=>Z(e,u(t,...n)),t}let s=e.defaultColumns??1,c=e.gap??`16px`,l=r(`GridBreakpoint`),d=e.className??i(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+l,f=Object.entries(e.breakpoints).map(([e,t])=>`@media`+e+`{
`+d+`{ grid-template-columns: repeat(`+t+`, 1fr); }
}`).join(`
`),p=`
	.${d} {
	  display: grid;
	  grid-template-columns: repeat(${s}, 1fr);
	  gap: ${c};
	}
	${f}`,h=n(e?.on??{});return t(`GridBreakpoint`,u`
			<style>
				${p}
			</style>
			<div
				${m(e=>{e?h.bind(e):h.unbindAll()})}
				class="${d}"
			>
				${a(o)}
			</div>
		`)}function ae(e,t){if(t===void 0)return t=>ae(e,t??[u``]);let r=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,i=e?.height??`400px`,a=e?.overlayColor??`rgba(0, 0, 0, 0.3)`,s=n(e?.on??{});return u`
		<div
			${m(e=>{e?s.bind(e):s.unbindAll()})}
			style="
      position: relative;
      width: 100%;
      height: ${i};
      ${r}
      background-size: cover;
      background-position: center;
    "
		>
			<div
				style="
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: ${a};
      "
			></div>
			<div
				style="
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-align: center;
        padding: 0 16px;
        box-sizing: border-box;
      "
			>
				${o(t)}
			</div>
		</div>
	`}function Q(e,o){if(o===void 0){let t=t=>Q(e,t??u``);return t.html=(t,...n)=>Q(e,u(t,...n)),t}let s=e?.breakpoint??`(max-width: 600px)`,c=e?.mode??`hide`,l=r(`Hidden`),d=e?.className??i(`Hidden::hidden-container`)+`-lyco-now-`+l,f=c===`hide`?`@media ${s} { .${d} { display: none !important; } }`:`@media ${s} { .${d} { display: block !important; } }
       @media not ${s} { .${d} { display: none !important; } }`,p=`
	.${d} {
	  display: block;
	}
	${f}`,h=n(e?.on??{});return t(`Hidden`,u`
			<style>
				${p}
			</style>
			<div
				${m(e=>{e?h.bind(e):h.unbindAll()})}
				class="${d}"
			>
				${a(o)}
			</div>
		`)}function oe(t,n,r=.1,i={}){let a=Array(t.length).fill(!1),o=`${r*100}vh`,s=`100vw`,c=t.map((t,r)=>u`
			<div
				${m(o=>{if(o&&!a[r]){let s=new IntersectionObserver((o,s)=>{o.forEach(o=>{if(o.isIntersecting&&!a[r]){let c=o.target;a[r]=!0,f(n(t,r),c),e.applyAnimation(c,i);let l=c.querySelector(`[data-fallback]`);l&&l.remove(),s.unobserve(c)}})},{root:null,rootMargin:`0px`});s.observe(o)}})}
				data-index="${r}"
				style="transition: transform ${i.duration||`1s`} ease;"
			>
				<!-- 占位元素 -->
				<div
					data-fallback
					style="height: ${o}; width: ${s};"
				></div>
			</div>
		`);return c}function se(e){return u` <li>${o(e)}</li> `}function ce(e,n){let a=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,s=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,c=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,l=r(`List`),d=e?.className??i(`List::list`)+`-lyco-now-${l}`,f=`
    ul.${d} {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	    ${a};
	}
	ul.${d} li {
	    padding: 12px 16px;
	    ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
	}
	ul.${d} li:last-child {
	    ${e?.bordered?`border-bottom: none`:``};
	}
	${s}
	${c}
    `.toString(),p=e=>t(`List`,u`
				<style>
					${f}
				</style>
				<ul class="${d}">
					${o(e)}
				</ul>
			`);return n===void 0?p:p(n)}function le(e,a){let c=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,l=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,d=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,f=r(`ListGroup`),p=e?.className??i(`ListGroup::list-group`)+`-lyco-now-`+f,h=(e,t,n,r)=>n?u` <li>${e}</li> `:e,g=`
	ul.${p} {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  ${c};
	}
	ul.${p} li {
	  padding: 12px 16px;
	  ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
	}
	ul.${p} li:last-child {
	  ${e?.bordered?`border-bottom: none`:``};
	}
	${l}
	${d}
	`,_=n(e?.on??{}),v=e=>t(`ListGroup`,u`
				<style>
					${g}
				</style>
				<ul
					${m(e=>{e?_.bind(e):_.unbindAll()})}
					class="${p}"
				>
					${o(e,h)}
				</ul>
			`);return s(a,v)}function ue(e,t){if(t===void 0)return t=>ue(e,t??[u``]);let r=e?.background??`rgba(0, 0, 0, 0.5)`,i=e?.zIndex??1e3,a=e?.fullScreen!==!1,s=n(e?.on??{});return u`
		<div
			${m(e=>{e?s.bind(e):s.unbindAll()})}
			style="
        position: ${a?`fixed`:`absolute`};
        top: 0; left: 0; right: 0; bottom: 0;
        background: ${r};
        z-index: ${i};
        display: flex;
        justify-content: center;
        align-items: center;
      "
		>
			${o(t)}
		</div>
	`}function de(e,t){if(t===void 0){let t=t=>de(e,t??u``);return t.html=(t,...n)=>de(e,u(t,...n)),t}let r=e?.width?`width: ${e.width};`:``,i=e?.height?`height: ${e.height};`:``,o=e?.background?`background: ${e.background};`:``,s=n(e?.on??{});return u`
		<div
			${m(e=>{e?s.bind(e):s.unbindAll()})}
			style="
      position: relative;
      ${r} ${i} ${o}
      overflow: hidden;
    "
		>
			${a(t)}
		</div>
	`}function fe(e){let t=Math.min(100,Math.max(0,e?.value??0)),r=Math.min(100,Math.max(0,e?.bufferValue??0)),i=e?.color??`#1976d2`,a=e?.secondaryColor??`#90caf9`,o=e?.backgroundColor??`#e0e0e0`,s=e?.height??`4px`,c=e?.radius??`4px`,d=e?.showLabel??!1,f=e?.labelPosition??`inside`,p=e?.labelColor??(t>50?`white`:i),h=e?.labelFontSize??`12px`,g=e?.striped??!1,_=e?.animated??!1,v=e?.paused??!1,y=e?.transitionDuration??`0.3s`,b=e?.className??``,x=e?.style??``,S=n(e?.on??{}),C=g?`background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
      background-size: 1rem 1rem;
      animation: progress-stripes 1s linear infinite;
      animation-play-state: ${v?`paused`:`running`};`:``;return u`
		<style>
			${l`
				@keyframes progress-stripes {
					from {
						background-position: 1rem 0;
					}
					to {
						background-position: 0 0;
					}
				}
			`.cssText}
		</style>

		<div
			${m(e=>{e?S.bind(e):S.unbindAll()})}
			class="lyco-progress ${b}"
			role="progressbar"
			aria-valuemin="0"
			aria-valuemax="100"
			aria-valuenow="${t}"
			style="
        width: 100%;
        background: ${o};
        border-radius: ${c};
        height: ${s};
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        ${x}
      "
		>
			${e?.prefixIcon}
			<!-- 缓冲进度 -->
			<div
				style="
          position: absolute;
          width: ${r}%;
          height: 100%;
          background: ${a};
          transition: width ${y} ease;
        "
			></div>
			<!-- 主进度 -->
			<div
				style="
          position: absolute;
          width: ${t}%;
          height: 100%;
          background: ${i};
          border-radius: ${c};
          transition: width ${y} ease;
          ${C}
        "
			></div>

			<!-- 文本标签 -->
			${d?u`
						<div
							style="
                position: ${f===`inside`?`absolute`:`relative`};
                ${f===`inside`?`right: 8px; top: 50%; transform: translateY(-50%);`:`margin-left: auto; margin-right: 4px;`}
                font-size: ${h};
                color: ${p};
                z-index: 1;
              "
						>
							${t}%
						</div>
				  `:``}
			${e?.suffixIcon}
		</div>
	`}function pe(e){let t=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=n(e?.on??{});return u`<div
		${m(e=>{e?i.bind(e):i.unbindAll()})}
		style="${t} ${r}"
	></div>`}function me(e){let{type:a=`rect`,width:o=`100%`,height:s=`16px`,borderRadius:c=`4px`,animation:l=!0,animationType:d=`shimmer`,bgColor:f=`#eee`,highlightColor:p=`#ddd`,count:h=1,spacing:g=`8px`,direction:_=`vertical`,delay:v=0,autoHide:y=!1,duration:b=2e3,on:x={}}=e??{},S=r(`SkeletonLoader`),C=i(`SkeletonLoader::skeleton`)+`-lyco-now-`+S,w=n(x),T=a===`circle`?`border-radius:50%;width:${o};height:${o}`:`border-radius:${c};width:${o};height:${s}`,E=``,D=``;l&&(d===`shimmer`?(E=`@keyframes ${C}-shimmer { 0% { background-color: ${f}; } 50% { background-color: ${p}; } 100% { background-color: ${f}; } }`,D=`animation:${C}-shimmer 1.2s infinite ease-in-out;`):(E=`@keyframes ${C}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,D=`animation:${C}-pulse 1.2s infinite ease-in-out;`));let O=_===`horizontal`?`display:flex;flex-direction:row;gap:${g}`:`display:flex;flex-direction:column;gap:${g}`,k=[];for(let e=0;e<h;e++)k.push(u`
			<div
				class="${C}"
				style="${T};background-color:${f};${D};opacity:0;transition:opacity 0.3s"
				${m(e=>{e&&w.bind(e)})}
			></div>
		`);function A(e){let t=Array.from(e.querySelectorAll(`.${C}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),y&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},b)},v)}return t(`SkeletonLoader`,u`
			<style>
				${E}
			</style>
			<div
				style="${O}"
				${m(e=>e&&A(e))}
			>
				${k}
			</div>
		`)}function he(e){let t=n(e?.on??{});return u`<div
		${m(e=>{e?t.bind(e):t.unbindAll()})}
		style="flex: 1 1 auto;"
	></div>`}function ge(e){let{size:i=`24px`,color:a=z.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:d=1,startAngle:f=0,easing:p=`linear`,reverse:h=!1,style:g=``,on:_={},children:v,svgMode:y=!1,strokeLinecap:b=`butt`,strokeDasharray:x=``}=e??{},S=n(_),C=r(`Spinner`),w=u`
		<div
			class="${c}"
			style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${g}"
			${m()}
		>
			<div
				style="
					width: 100%;
					height: 100%;
					border: ${o} solid ${a};
					border-right-color: transparent;
					border-radius: 50%;
					box-sizing: border-box;
					opacity: ${d};
					animation: lyco-spin-${C} ${s} ${p} infinite ${h?`reverse`:`normal`};
				"
			></div>
		</div>
		<style>
			${l`
				@keyframes lyco-spin-${C} {
					from {
						transform: rotate(${f}deg);
					}
					to {
						transform: rotate(${f+360}deg);
					}
				}
			`.cssText}
		</style>
	`,T=u`
		<div
			class="${c}"
			style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${g}"
			${m(e=>{e?S.bind(e):S.unbindAll()})}
		>
			<svg
				width="100%"
				height="100%"
				viewBox="0 0 100 100"
				style="opacity: ${d}; overflow: visible; filter: drop-shadow(${z.elevation.level1});"
			>
				<circle
					cx="50"
					cy="50"
					r="45"
					fill="none"
					stroke="${a}"
					style="
					stroke-width: ${o};
					stroke-linecap: ${b};
					stroke-dasharray: ${x};
					transform-origin: 50% 50%;
					animation: lyco-svg-spin-${C} ${s} ${p} infinite ${h?`reverse`:`normal`};
				"
				></circle>
			</svg>
		</div>
		<style>
			${l`
				@keyframes lyco-svg-spin-${C} {
					from {
						transform: rotate(${f}deg);
					}
					to {
						transform: rotate(${f+360}deg);
					}
				}
			`.cssText}
		</style>
	`;return t(`Spinner`,y?T:w)}function _e(e,t){if(t===void 0){let t=t=>_e(e,t??u``);return t.html=(t,...n)=>_e(e,u(t,...n)),t}let r=e?.top?`top: ${e.top};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,o=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,s=n(e?.on??{});return u`
		<div
			${m(e=>{e?s.bind(e):s.unbindAll()})}
			style="
      position: sticky;
      ${r} ${i}
      ${o}
    "
		>
			${a(t)}
		</div>
	`}function ve(e,o){if(o===void 0){let t=t=>ve(e,t??u``);return t.html=(t,...n)=>ve(e,u(t,...n)),t}let s=r(`Table`),c=e?.className??i(`Table::table`)+`-lyco-now-${s}`,l=e?.striped?`
      .${c} tr:nth-child(even) { 
        background: ${z.colors.surface};
      }
    `:``,d=e?.hover?`
      .${c} tr:hover { 
        background: ${z.colors.primaryContainer};
        cursor: pointer;
      }
    `:``,f=e?.bordered?`
      .${c}, .${c} th, .${c} td { 
        border: 1px solid ${z.colors.surfaceVariant}; 
      }
    `:``,p=`
	.${c} table {
	  width: 100%;
	  border-collapse: separate;
	  border-spacing: 0;
	  border-radius: ${z.borderRadius.medium};
	  overflow: hidden;
	  box-shadow: ${z.elevation.level1};
	}
	.${c} th,
	.${c} td {
	  padding: 16px;
	  text-align: left;
	  transition: background ${z.animation.standard};
	}
	.${c} th {
	  background: ${z.colors.surfaceVariant};
	  color: ${z.colors.onSurfaceVariant};
	  font-weight: 500;
	}
	.${c} td {
	  border-bottom: 1px solid ${z.colors.surfaceVariant}; 
	}
	${l}
	${d}
	${f}
	`,h=n(e?.on??{});return t(`Table`,u`
			<style>
				${p}
			</style>

			<div
				${m(e=>{e?h.bind(e):h.unbindAll()})}
				class="${c}"
			>
				<table>
					${a(o)}
				</table>
			</div>
		`)}let $=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});function ye(e,t){let{content:r,placement:i=$.Top,delay:o={show:200,hide:100},offset:s=8,hideOnClick:l=!1,interactive:d=!1,maxWidth:f=`200px`,theme:p=`dark`,className:h=``,style:g=``,zIndex:_=1e3,on:v={},onShow:y,onHide:b}=e,x=n(v),S,C;function w(e){clearTimeout(C),S=window.setTimeout(()=>{E.style.visibility=`visible`,E.style.opacity=`1`,y?.()},o.show)}function T(){clearTimeout(S),C=window.setTimeout(()=>{E.style.visibility=`hidden`,E.style.opacity=`0`,b?.()},o.hide)}let E,D=e=>u`
			<div
				${m(e=>{e?(x.