@mhmo91/schmancy 0.9.27 → 0.10.1

package/dist/{layout-fjM1DWlF.js.map → layout-BghHmee6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"layout-fjM1DWlF.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}
+{"version":3,"file":"layout-BghHmee6.js","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}

package/dist/{layout-CTfRXQoz.cjs → layout-VmxXuGGp.cjs}

@@ -1 +1 @@
-require(`./chunk-CncqDLb2.cjs`);const e=require(`./theme.service-DxJPUGlu.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/async-directive.js`),i=require(`lit/directive.js`);function a(){let e=window.visualViewport;return!!e&&Math.abs(e.scale-1)>.01}var o=null,s=null,c=0;function l(){if(!o){o=new t.Subject;let e=(0,t.fromEvent)(window,`resize`,{passive:!0});s=(0,t.merge)(e,window.visualViewport?(0,t.merge)((0,t.fromEvent)(window.visualViewport,`resize`,{passive:!0}),(0,t.fromEvent)(window.visualViewport,`scroll`,{passive:!0})):e,(0,t.fromEvent)(window,`orientationchange`),(0,t.fromEvent)(document,`focusout`,{passive:!0}).pipe((0,n.switchMap)(()=>(0,t.timer)(100)))).pipe((0,n.debounceTime)(16)).subscribe(()=>o.next())}return o}function u(){c===0&&s&&(s.unsubscribe(),s=null,o=null)}function d(e){return new t.Observable(t=>{let n=new ResizeObserver(e=>t.next(e));return n.observe(e),()=>n.disconnect()})}var f=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateHeight(){if(!this.element)return 0;let e=window.visualViewport?.height??window.innerHeight,t=this.element.getBoundingClientRect().top;return Math.max(0,e-t)}applyStyles(e,t){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.height=`${e}px`,this.element.style.paddingBottom=`${t}px`)}setupHeightStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.bottomOffset$,e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(([,e,t])=>({height:this.calculateHeight(),padding:t?0:e})),(0,n.distinctUntilChanged)((e,t)=>e.height===t.height&&e.padding===t.padding),(0,n.tap)(({height:e,padding:t})=>this.applyStyles(e,t)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullHeight directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupHeightStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupHeightStream())}},p=(0,i.directive)(f),m=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateWidth(){if(!this.element)return 0;let e=window.visualViewport?.width??window.innerWidth,t=this.element.getBoundingClientRect().left;return Math.max(0,e-t)}applyStyles(e){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.maxWidth=`${e}px`)}setupWidthStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(d(r),r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(()=>this.calculateWidth()),(0,n.distinctUntilChanged)(),(0,n.tap)(e=>this.applyStyles(e)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullWidth directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupWidthStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupWidthStream())}},h=(0,i.directive)(m);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./theme.service-CP71ojp6.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/async-directive.js`),i=require(`lit/directive.js`);function a(){let e=window.visualViewport;return!!e&&Math.abs(e.scale-1)>.01}var o=null,s=null,c=0;function l(){if(!o){o=new t.Subject;let e=(0,t.fromEvent)(window,`resize`,{passive:!0});s=(0,t.merge)(e,window.visualViewport?(0,t.merge)((0,t.fromEvent)(window.visualViewport,`resize`,{passive:!0}),(0,t.fromEvent)(window.visualViewport,`scroll`,{passive:!0})):e,(0,t.fromEvent)(window,`orientationchange`),(0,t.fromEvent)(document,`focusout`,{passive:!0}).pipe((0,n.switchMap)(()=>(0,t.timer)(100)))).pipe((0,n.debounceTime)(16)).subscribe(()=>o.next())}return o}function u(){c===0&&s&&(s.unsubscribe(),s=null,o=null)}function d(e){return new t.Observable(t=>{let n=new ResizeObserver(e=>t.next(e));return n.observe(e),()=>n.disconnect()})}var f=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateHeight(){if(!this.element)return 0;let e=window.visualViewport?.height??window.innerHeight,t=this.element.getBoundingClientRect().top;return Math.max(0,e-t)}applyStyles(e,t){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.height=`${e}px`,this.element.style.paddingBottom=`${t}px`)}setupHeightStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.bottomOffset$,e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(([,e,t])=>({height:this.calculateHeight(),padding:t?0:e})),(0,n.distinctUntilChanged)((e,t)=>e.height===t.height&&e.padding===t.padding),(0,n.tap)(({height:e,padding:t})=>this.applyStyles(e,t)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullHeight directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupHeightStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupHeightStream())}},p=(0,i.directive)(f),m=class extends r.AsyncDirective{constructor(...e){super(...e),this.element=null,this.disconnecting$=new t.Subject}calculateWidth(){if(!this.element)return 0;let e=window.visualViewport?.width??window.innerWidth,t=this.element.getBoundingClientRect().left;return Math.max(0,e-t)}applyStyles(e){this.element&&(this.element.style.boxSizing=`border-box`,this.element.style.maxWidth=`${e}px`)}setupWidthStream(){if(!this.element)return;let r=this.element;(0,t.combineLatest)([(0,t.merge)(d(r),r.parentElement?d(r.parentElement):t.EMPTY,l()).pipe((0,n.startWith)(null)),e.n.fullscreen$]).pipe((0,n.filter)(()=>!a()),(0,n.map)(()=>this.calculateWidth()),(0,n.distinctUntilChanged)(),(0,n.tap)(e=>this.applyStyles(e)),(0,n.takeUntil)(this.disconnecting$)).subscribe()}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw Error(`fullWidth directive can only be used on elements`);let t=e.element;this.element!==t&&(this.element=t,c++,this.setupWidthStream())}disconnected(){this.disconnecting$.next(),c--,u(),this.element=null}reconnected(){this.element&&(c++,this.disconnecting$=new t.Subject,this.setupWidthStream())}},h=(0,i.directive)(m);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/dist/{layout-CTfRXQoz.cjs.map → layout-VmxXuGGp.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"layout-CTfRXQoz.cjs","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"oMAMA,SAAS,GAAA,CACR,IAAM,EAAK,OAAO,eAClB,MAAA,CAAA,CAAO,GAAK,KAAK,IAAI,EAAG,MAAQ,EAAA,CAAK,IAKtC,IAAI,EAAgC,KAChC,EAAgD,KAChD,EAAe,EAEnB,SAAS,GAAA,CACR,GAAA,CAAK,EAAS,CACb,EAAU,IAAI,EAAA,QAEd,IAAM,GAAA,EAAA,EAAA,WAA0B,OAAQ,SAAU,CAAE,QAAA,CAAS,EAAA,CAAA,CAgB7D,GAAA,EAAA,EAAA,OAAkB,EAdM,OAAO,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,WAElB,OAAO,eAAgB,SAAU,CAAE,QAAA,CAAS,EAAA,CAAA,EAAO,EAAA,EAAA,WACnD,OAAO,eAAgB,SAAU,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAEtD,GAAA,EAAA,EAAA,WAE4B,OAAQ,oBAAA,EAOW,EAAA,EAAA,WAJtB,SAAU,WAAY,CAAE,QAAA,CAAS,EAAA,CAAA,CAAQ,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,OAC9C,IAAA,CAAA,CAAA,CAAA,CAIrB,MAAA,EAAA,EAAA,cAAkB,GAAA,CAAA,CAClB,cAAgB,EAAS,MAAA,CAAA,CAE5B,OAAO,EAGR,SAAS,GAAA,CACJ,IAAiB,GAAK,IACzB,EAAU,aAAA,CACV,EAAY,KACZ,EAAU,MAQZ,SAAgB,EAAmB,EAAA,CAClC,OAAO,IAAI,EAAA,WAAW,GAAA,CACrB,IAAM,EAAW,IAAI,eAAe,GAAW,EAAW,KAAK,EAAA,CAAA,CAE/D,OADA,EAAS,QAAQ,EAAA,KACJ,EAAS,YAAA,EAAA,CAmBxB,IAAM,EAAN,cAAyB,EAAA,cAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,QACc,KAAA,KAAA,eACb,IAAI,EAAA,QAE7B,iBAAA,CACC,GAAA,CAAK,KAAK,QAAS,MAAO,GAC1B,IAAM,EAAiB,OAAO,gBAAgB,QAAU,OAAO,YACzD,EAAY,KAAK,QAAQ,uBAAA,CAAwB,IACvD,OAAO,KAAK,IAAI,EAAG,EAAiB,EAAA,CAGrC,YAAoB,EAAgB,EAAA,CAC/B,KAAK,UACR,KAAK,QAAQ,MAAM,UAAY,aAC/B,KAAK,QAAQ,MAAM,OAAS,GAAG,EAAA,IAC/B,KAAK,QAAQ,MAAM,cAAgB,GAAG,EAAA,KAIxC,mBAAA,CACC,GAAA,CAAK,KAAK,QAAS,OAEnB,IAAM,EAAU,KAAK,SAYrB,EAAA,EAAA,eAAc,EAAA,EAAA,EAAA,OATQ,EAAQ,cAC3B,EAAmB,EAAQ,cAAA,CAC3B,EAAA,MAGmB,GAAA,CAAA,CAKe,MAAA,EAAA,EAAA,WAAe,KAAA,CAAA,CACnD,EAAA,EAAM,cACN,EAAA,EAAM,YAAA,CAAA,CACJ,MAAA,EAAA,EAAA,YAAA,CACY,GAAA,CAAA,EAAW,EAAA,EAAA,MAAA,EACjB,EAAc,MAAA,CACrB,OAAQ,KAAK,iBAAA,CACb,QAAS,EAAe,EAAI,EAAA,EAAA,EAC1B,EAAA,EAAA,uBACmB,EAAG,IAAM,EAAE,SAAW,EAAE,QAAU,EAAE,UAAY,EAAE,QAAA,EAAQ,EAAA,EAAA,MAAA,CACzE,OAAA,EAAQ,QAAA,KAAc,KAAK,YAAY,EAAQ,EAAA,CAAA,EAAS,EAAA,EAAA,WACrD,KAAK,eAAA,CAAA,CACd,WAAA,CAIH,QAAA,EAIA,OAAO,EAAA,CACN,GAAI,EAAK,OAAS,EAAA,SAAS,QAC1B,MAAU,MAAM,oDAAA,CAEjB,IAAM,EAAK,EAAK,QACZ,KAAK,UAAY,IACpB,KAAK,QAAU,EACf,IACA,KAAK,mBAAA,EAIP,cAAA,CACC,KAAK,eAAe,MAAA,CACpB,IACA,GAAA,CACA,KAAK,QAAU,KAGhB,aAAA,CACK,KAAK,UACR,IACA,KAAK,eAAiB,IAAI,EAAA,QAC1B,KAAK,mBAAA,IAKK,GAAA,EAAA,EAAA,WAAuB,EAAA,CAiB9B,EAAN,cAAwB,EAAA,cAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,QACe,KAAA,KAAA,eACb,IAAI,EAAA,QAE7B,gBAAA,CACC,GAAA,CAAK,KAAK,QAAS,MAAO,GAC1B,IAAM,EAAgB,OAAO,gBAAgB,OAAS,OAAO,WACvD,EAAa,KAAK,QAAQ,uBAAA,CAAwB,KACxD,OAAO,KAAK,IAAI,EAAG,EAAgB,EAAA,CAGpC,YAAoB,EAAA,CACf,KAAK,UACR,KAAK,QAAQ,MAAM,UAAY,aAC/B,KAAK,QAAQ,MAAM,SAAW,GAAG,EAAA,KAInC,kBAAA,CACC,GAAA,CAAK,KAAK,QAAS,OAEnB,IAAM,EAAU,KAAK,SAgBrB,EAAA,EAAA,eAAc,EAAA,EAAA,EAAA,OAbS,EAAmB,EAAA,CAGpB,EAAQ,cAC3B,EAAmB,EAAQ,cAAA,CAC3B,EAAA,MAGmB,GAAA,CAAA,CAM+B,MAAA,EAAA,EAAA,WAAe,KAAA,CAAA,CACnE,EAAA,EAAM,YAAA,CAAA,CACJ,MAAA,EAAA,EAAA,YAAA,CACY,GAAA,CAAA,EAAW,EAAA,EAAA,SACf,KAAK,gBAAA,CAAA,EAAiB,EAAA,EAAA,uBAAA,EACV,EAAA,EAAA,KAClB,GAAS,KAAK,YAAY,EAAA,CAAA,EAAO,EAAA,EAAA,WAC3B,KAAK,eAAA,CAAA,CACd,WAAA,CAGH,QAAA,EAIA,OAAO,EAAA,CACN,GAAI,EAAK,OAAS,EAAA,SAAS,QAC1B,MAAU,MAAM,mDAAA,CAEjB,IAAM,EAAK,EAAK,QACZ,KAAK,UAAY,IACpB,KAAK,QAAU,EACf,IACA,KAAK,kBAAA,EAIP,cAAA,CACC,KAAK,eAAe,MAAA,CACpB,IACA,GAAA,CACA,KAAK,QAAU,KAGhB,aAAA,CACK,KAAK,UACR,IACA,KAAK,eAAiB,IAAI,EAAA,QAC1B,KAAK,kBAAA,IAKK,GAAA,EAAA,EAAA,WAAsB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"layout-VmxXuGGp.cjs","names":[],"sources":["../src/directives/layout.ts"],"sourcesContent":["import { directive, ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'\n\n/** Returns true if user is pinch-zoomed (scale !== 1) */\nfunction isZoomed(): boolean {\n\tconst vv = window.visualViewport\n\treturn vv ? Math.abs(vv.scale - 1) > 0.01 : false\n}\nimport { theme } from '../theme/theme.service'\n\n// Shared global update stream (lazy-initialized, cleaned up when no elements use it)\nlet update$: Subject<void> | null = null\nlet updateSub: { unsubscribe: () => void } | null = null\nlet elementCount = 0\n\nfunction getUpdateStream(): Subject<void> {\n\tif (!update$) {\n\t\tupdate$ = new Subject<void>()\n\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\n\t\t// iOS Safari: force recalc after keyboard dismissal\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tupdateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)\n\t\t\t.pipe(debounceTime(16))\n\t\t\t.subscribe(() => update$!.next())\n\t}\n\treturn update$\n}\n\nfunction cleanup() {\n\tif (elementCount === 0 && updateSub) {\n\t\tupdateSub.unsubscribe()\n\t\tupdateSub = null\n\t\tupdate$ = null\n\t}\n}\n\n\n/**\n * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe\n */\nexport function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {\n\treturn new Observable(subscriber => {\n\t\tconst observer = new ResizeObserver(entries => subscriber.next(entries))\n\t\tobserver.observe(element)\n\t\treturn () => observer.disconnect()\n\t})\n}\n\n/**\n * fullHeight directive - fills remaining viewport space\n *\n * Reactive sources:\n * - Parent ResizeObserver (layout shifts)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Focus out (mobile keyboard dismiss)\n * - Theme fullscreen toggle\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullHeight extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.element.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyStyles(height: number, bottomPadding: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.height = `${height}px`\n\t\t\tthis.element.style.paddingBottom = `${bottomPadding}px`\n\t\t}\n\t}\n\n\tprivate setupHeightStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Parent resize detects layout shifts (e.g., header rendering after load)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation, fullscreen)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyStyles(height, padding)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullHeight directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupHeightStream()\n\t\t}\n\t}\n}\n\nexport const fullHeight = directive(FullHeight)\n\n/**\n * fullWidth directive - fills remaining horizontal viewport space\n *\n * Reactive sources:\n * - Element ResizeObserver (detects when element moves/resizes)\n * - Parent ResizeObserver (layout shifts, e.g., sidebar)\n * - Window resize / visualViewport (viewport changes)\n * - Orientation change (device rotation)\n * - Theme fullscreen toggle (sidebar visibility)\n *\n * Performance:\n * - distinctUntilChanged prevents redundant style writes\n * - debounceTime(16) batches rapid events (~60fps)\n * - Single shared stream for global events\n */\nclass FullWidth extends AsyncDirective {\n\tprivate element: HTMLElement | null = null\n\tprivate disconnecting$ = new Subject<void>()\n\n\tprivate calculateWidth(): number {\n\t\tif (!this.element) return 0\n\t\tconst viewportWidth = window.visualViewport?.width ?? window.innerWidth\n\t\tconst leftOffset = this.element.getBoundingClientRect().left\n\t\treturn Math.max(0, viewportWidth - leftOffset)\n\t}\n\n\tprivate applyStyles(width: number) {\n\t\tif (this.element) {\n\t\t\tthis.element.style.boxSizing = 'border-box'\n\t\t\tthis.element.style.maxWidth = `${width}px`\n\t\t}\n\t}\n\n\tprivate setupWidthStream() {\n\t\tif (!this.element) return\n\n\t\tconst element = this.element\n\n\t\t// Element resize detects when element itself moves (e.g., after layout settles)\n\t\tconst elementResize$ = fromResizeObserver(element)\n\n\t\t// Parent resize detects layout shifts (e.g., sidebar opening/closing)\n\t\tconst parentResize$ = element.parentElement\n\t\t\t? fromResizeObserver(element.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Global events (resize, viewport, orientation)\n\t\tconst globalEvents$ = getUpdateStream()\n\n\t\t// Combine all sources with theme observables for synchronous initial emission\n\t\t// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe\n\t\t// Skip updates while pinch-zoomed to prevent layout thrashing\n\t\tcombineLatest([\n\t\t\tmerge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tfilter(() => !isZoomed()),\n\t\t\tmap(() => this.calculateWidth()),\n\t\t\tdistinctUntilChanged(),\n\t\t\ttap(width => this.applyStyles(width)),\n\t\t\ttakeUntil(this.disconnecting$)\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn\n\t}\n\n\tupdate(part: ElementPart) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('fullWidth directive can only be used on elements')\n\t\t}\n\t\tconst el = part.element as HTMLElement\n\t\tif (this.element !== el) {\n\t\t\tthis.element = el\n\t\t\telementCount++\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting$.next()\n\t\telementCount--\n\t\tcleanup()\n\t\tthis.element = null\n\t}\n\n\treconnected() {\n\t\tif (this.element) {\n\t\t\telementCount++\n\t\t\tthis.disconnecting$ = new Subject<void>()\n\t\t\tthis.setupWidthStream()\n\t\t}\n\t}\n}\n\nexport const fullWidth = directive(FullWidth)\n"],"mappings":"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"}

package/dist/layout.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./layout-7eyMBmZk.cjs`),t=require(`./scroll-DbZMTv0K.cjs`);Object.defineProperty(exports,`SchmancyFlex`,{enumerable:!0,get:function(){return e.r}}),Object.defineProperty(exports,`SchmancyFlexV2`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancyGrid`,{enumerable:!0,get:function(){return e.n}}),Object.defineProperty(exports,`SchmancyScroll`,{enumerable:!0,get:function(){return t.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./scroll-yfNU0zNO.cjs`);Object.defineProperty(exports,`SchmancyScroll`,{enumerable:!0,get:function(){return e.t}});

package/dist/layout.js

@@ -1,3 +1,2 @@
-import { n as e, r as t, t as n } from "./layout-Ox6nJkzC.js";
-import { t as r } from "./scroll-DXQv0ejL.js";
-export { t as SchmancyFlex, n as SchmancyFlexV2, e as SchmancyGrid, r as SchmancyScroll };
+import { t as e } from "./scroll-BD82ANjm.js";
+export { e as SchmancyScroll };

package/dist/{lazy-D6R5N5v4.js.map → lazy-B0ia54tT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"lazy-D6R5N5v4.js","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,GAAA;CAIA,IAAM,IAAgB,WAAA;AAEpB,SAAI,EAAc,WACT,EAAc,WAInB,EAAc,UACT,QAAQ,QAAQ,EAAc,QAAA,IAIvC,EAAc,WAAW,GAAA,CACtB,MAAK,OAEJ,EAAc,UAAU,GACjB,GAAA,CAER,OAAM,MAAA;AAGL,SADA,EAAc,WAAA,KAAW,GACnB;IAAA,EAGH,EAAc;;AAYvB,QARA,EAAc,UAAU,iBAAA;AACtB,MAAA;AAAA,SACQ,GAAA;UACC;IAKJ;;AAAA,SAAA"}
+{"version":3,"file":"lazy-B0ia54tT.js","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,GAAA;CAIA,IAAM,IAAgB,WAAA;AAEpB,SAAI,EAAc,WACT,EAAc,WAInB,EAAc,UACT,QAAQ,QAAQ,EAAc,QAAA,IAIvC,EAAc,WAAW,GAAA,CACtB,MAAK,OAEJ,EAAc,UAAU,GACjB,GAAA,CAER,OAAM,MAAA;AAGL,SADA,EAAc,WAAA,KAAW,GACnB;IAAA,EAGH,EAAc;;AAYvB,QARA,EAAc,UAAU,iBAAA;AACtB,MAAA;AAAA,SACQ,GAAA;UACC;IAKJ;;AAAA,SAAA"}

package/dist/{lazy-BDNnH_r7.cjs.map → lazy-Dq9mRRjT.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"lazy-BDNnH_r7.cjs","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,EAAA,CAIA,IAAM,EAAgB,UAAA,CAEpB,OAAI,EAAc,SACT,EAAc,SAInB,EAAc,QACT,QAAQ,QAAQ,EAAc,QAAA,EAIvC,EAAc,SAAW,GAAA,CACtB,KAAK,IAEJ,EAAc,QAAU,EACjB,GAAA,CAER,MAAM,GAAA,CAGL,KADA,GAAc,SAAA,IAAW,GACnB,GAAA,CAGH,EAAc,WAYvB,MARA,GAAc,QAAU,gBAAA,CACtB,GAAA,CAAA,MACQ,GAAA,MACC,IAKJ,EAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"lazy-Dq9mRRjT.cjs","names":[],"sources":["../src/area/lazy.ts"],"sourcesContent":["/**\r\n * Lazy loading for Schmancy Area components\r\n * Similar to React.lazy() but adapted for Web Components\r\n */\r\n\r\n// Type definition for custom element constructors\r\ntype CustomElementConstructor = typeof HTMLElement\r\n\r\n/**\r\n * LazyComponent interface with preload capability\r\n */\r\nexport interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {\r\n  (): Promise<{ default: T }>\r\n  preload(): Promise<void>\r\n  _promise?: Promise<{ default: T }>\r\n  _module?: { default: T }\r\n}\r\n\r\n/**\r\n * Create a lazy-loaded component that will be imported on demand\r\n *\r\n * @example\r\n * ```typescript\r\n * const LazyProfile = lazy(() => import('./profile'))\r\n *\r\n * // Use with area.push\r\n * area.push({\r\n *   component: LazyProfile,\r\n *   area: 'main'\r\n * })\r\n *\r\n * // Preload on hover\r\n * element.addEventListener('mouseenter', () => LazyProfile.preload())\r\n * ```\r\n *\r\n * @param loader - Dynamic import function that returns a module with default export\r\n * @returns LazyComponent function compatible with area.push()\r\n */\r\nexport function lazy<T extends CustomElementConstructor>(\r\n  loader: () => Promise<{ default: T }>\r\n): LazyComponent<T> {\r\n\r\n  // Create the lazy component function\r\n  const lazyComponent = function(): Promise<{ default: T }> {\r\n    // Return cached promise if already loading/loaded\r\n    if (lazyComponent._promise) {\r\n      return lazyComponent._promise\r\n    }\r\n\r\n    // Return cached module if already loaded\r\n    if (lazyComponent._module) {\r\n      return Promise.resolve(lazyComponent._module)\r\n    }\r\n\r\n    // Start loading and cache the promise\r\n    lazyComponent._promise = loader()\r\n      .then(module => {\r\n        // Cache the loaded module\r\n        lazyComponent._module = module\r\n        return module\r\n      })\r\n      .catch(error => {\r\n        // Clear promise on error to allow retry\r\n        lazyComponent._promise = undefined\r\n        throw error\r\n      })\r\n\r\n    return lazyComponent._promise\r\n  } as LazyComponent<T>\r\n\r\n  // Add preload method for manual preloading\r\n  lazyComponent.preload = async function(): Promise<void> {\r\n    try {\r\n      await lazyComponent()\r\n    } catch (error) {\r\n      console.error('Failed to preload component:', error)\r\n    }\r\n  }\r\n\r\n  return lazyComponent\r\n}\r\n\r\n\r\n"],"mappings":"AAsCA,SAAgB,EACd,EAAA,CAIA,IAAM,EAAgB,UAAA,CAEpB,OAAI,EAAc,SACT,EAAc,SAInB,EAAc,QACT,QAAQ,QAAQ,EAAc,QAAA,EAIvC,EAAc,SAAW,GAAA,CACtB,KAAK,IAEJ,EAAc,QAAU,EACjB,GAAA,CAER,MAAM,GAAA,CAGL,KADA,GAAc,SAAA,IAAW,GACnB,GAAA,CAGH,EAAc,WAYvB,MARA,GAAc,QAAU,gBAAA,CACtB,GAAA,CAAA,MACQ,GAAA,MACC,IAKJ,EAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/{lightbox-CY52Z_ig.js → lightbox-IleIcq19.js}

@@ -1,8 +1,6 @@
-import { p as e } from "./tailwind.mixin-mdQR3BEO.js";
-import { t } from "./decorate-D_utPUsC.js";
-import { t as n } from "./litElement.mixin-CszkJuNl.js";
-import "./mixins.js";
-import { t as r } from "./overlay-stack-DXPYHPhk.js";
+import { _ as e, s as t } from "./mixins-CL1krSOE.js";
+import { t as n } from "./decorate-23nYs4Le.js";
+import { t as r } from "./overlay-stack-CAQno0CK.js";
 import { Subject as i, filter as a, fromEvent as o, map as s, switchMap as c, takeUntil as l, tap as u } from "rxjs";
 import { filter as d, first as f, map as p, switchMap as m, takeUntil as h, tap as g } from "rxjs/operators";
 import { styleMap as _ } from "lit/directives/style-map.js";
@@ -12,11 +10,7 @@ import { createRef as T, ref as E } from "lit/directives/ref.js";
 import { when as D } from "lit/directives/when.js";
 import { AsyncDirective as O } from "lit/async-directive.js";
 import { PartType as k, directive as A } from "lit/directive.js";
-var j = class extends n(x`
-	:host {
-		display: contents;
-	}
-`) {
+var j = class extends t {
 	constructor(...e) {
 		super(...e), this.src = "", this.images = [], this.initialIndex = 0, this.open = !1, this.currentIndex = 0, this.isLoading = !1, this.zIndex = 1e4, this.swipeThreshold = 50, this.overlayRef = T(), this.contentRef = T(), this.imageRef = T(), this.handleClose = () => {
 			this.open = !1;
@@ -38,6 +32,13 @@ var j = class extends n(x`
 			e.target === e.currentTarget && this.handleClose();
 		};
 	}
+	static {
+		this.styles = [x`
+	:host {
+		display: contents;
+	}
+`];
+	}
 	get isGalleryMode() {
 		return this.images.length > 0;
 	}
@@ -254,7 +255,7 @@ function M(e, t, n = "up", r = .3) {
 		y: n === "up" ? a - s : a + s
 	};
 }
-t([y({ type: String })], j.prototype, "src", void 0), t([y({ type: Array })], j.prototype, "images", void 0), t([y({ type: Number })], j.prototype, "initialIndex", void 0), t([y({ type: Boolean })], j.prototype, "open", void 0), t([b()], j.prototype, "currentIndex", void 0), t([b()], j.prototype, "isLoading", void 0), t([b()], j.prototype, "zIndex", void 0), j = t([v("schmancy-lightbox")], j);
+n([y({ type: String })], j.prototype, "src", void 0), n([y({ type: Array })], j.prototype, "images", void 0), n([y({ type: Number })], j.prototype, "initialIndex", void 0), n([y({ type: Boolean })], j.prototype, "open", void 0), n([b()], j.prototype, "currentIndex", void 0), n([b()], j.prototype, "isLoading", void 0), n([b()], j.prototype, "zIndex", void 0), j = n([v("schmancy-lightbox")], j);
 var N = A(class extends O {
 	constructor(e) {
 		if (super(e), this.hasAnimated = !1, e.type !== k.ELEMENT) throw Error("flip directive can only be used on elements");
@@ -379,7 +380,7 @@ var N = A(class extends O {
 				fill: "forwards"
 			});
 		};
-		this.element instanceof HTMLImageElement ? this.element.complete ? requestAnimationFrame(s) : this.element.onload = () => requestAnimationFrame(s) : requestAnimationFrame(s);
+		this.element instanceof HTMLImageElement ? this.element.complete ? requestAnimationFrame(s) : this.element.addEventListener("load", () => requestAnimationFrame(s), { once: !0 }) : requestAnimationFrame(s);
 	}
 }), P = A(class extends O {
 	constructor(e) {

package/dist/lightbox-IleIcq19.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox-IleIcq19.js","names":[],"sources":["../src/lightbox/lightbox.ts","../src/lightbox/flip-directive.ts","../src/lightbox/lightbox.directive.ts","../src/lightbox/lightbox-service.ts"],"sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { ref, createRef, Ref } from 'lit/directives/ref.js'\nimport { fromEvent } from 'rxjs'\nimport { filter, takeUntil, tap, switchMap, map, first } from 'rxjs/operators'\nimport { SchmancyElement } from '@mixins/index'\nimport { overlayStack } from '../utils/overlay-stack'\n\n@customElement('schmancy-lightbox')\nexport class SchmancyLightbox extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: contents;\n\t}\n`]\n\n\t@property({ type: String }) src: string = ''\n\t@property({ type: Array }) images: string[] = []\n\t@property({ type: Number }) initialIndex: number = 0\n\t@property({ type: Boolean }) open: boolean = false\n\n\t@state() private currentIndex: number = 0\n\t@state() private isLoading: boolean = false\n\t@state() private zIndex: number = 10000\n\n\tprivate readonly swipeThreshold = 50\n\tprivate overlayRef: Ref<HTMLDivElement> = createRef()\n\tprivate contentRef: Ref<HTMLDivElement> = createRef()\n\tprivate imageRef: Ref<HTMLImageElement> = createRef()\n\n\tprivate get isGalleryMode(): boolean {\n\t\treturn this.images.length > 0\n\t}\n\n\tprivate get currentImageSrc(): string {\n\t\tif (this.isGalleryMode) {\n\t\t\treturn this.images[this.currentIndex] || ''\n\t\t}\n\t\treturn this.src\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.currentIndex = this.initialIndex\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\tif (changedProperties.has('open')) {\n\t\t\tif (this.open) {\n\t\t\t\t// Set dynamic z-index for proper stacking with sheets/dialogs\n\t\t\t\tthis.zIndex = overlayStack.getNextZIndex()\n\t\t\t\tdocument.body.style.overflow = 'hidden'\n\t\t\t\tthis.animateIn()\n\t\t\t\tthis.setupEventListeners()\n\t\t\t} else {\n\t\t\t\tdocument.body.style.overflow = ''\n\t\t\t\tthis.animateOut()\n\t\t\t}\n\t\t}\n\n\t\tif (changedProperties.has('initialIndex')) {\n\t\t\tthis.currentIndex = this.initialIndex\n\t\t}\n\n\t\tif (changedProperties.has('currentIndex') && this.open) {\n\t\t\tthis.animateImageChange()\n\t\t}\n\t}\n\n\tprivate animateIn() {\n\t\tconst overlay = this.overlayRef.value\n\t\tconst content = this.contentRef.value\n\t\tconst image = this.imageRef.value\n\n\t\tif (overlay) {\n\t\t\t// Set initial styles\n\t\t\toverlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'\n\t\t\toverlay.style.opacity = '0'\n\n\t\t\t// Animate to visible state\n\t\t\toverlay.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 0 },\n\t\t\t\t\t{ opacity: 1 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 300,\n\t\t\t\t\teasing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\n\t\t\t// Manually set background color after a tick\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\toverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'\n\t\t\t})\n\t\t}\n\n\t\tif (content) {\n\t\t\tcontent.animate(\n\t\t\t\t[\n\t\t\t\t\t{ transform: 'scale(0.95)', opacity: 0 },\n\t\t\t\t\t{ transform: 'scale(1)', opacity: 1 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 400,\n\t\t\t\t\tdelay: 100,\n\t\t\t\t\teasing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // Spring effect\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\tif (image) {\n\t\t\timage.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 0, transform: 'scale(0.98)' },\n\t\t\t\t\t{ opacity: 1, transform: 'scale(1)' },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 350,\n\t\t\t\t\tdelay: 150,\n\t\t\t\t\teasing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate animateOut() {\n\t\tconst overlay = this.overlayRef.value\n\t\tconst content = this.contentRef.value\n\t\tconst image = this.imageRef.value\n\n\t\tif (image) {\n\t\t\timage.animate(\n\t\t\t\t[\n\t\t\t\t\t{ transform: 'scale(1)', opacity: 1 },\n\t\t\t\t\t{ transform: 'scale(0.95)', opacity: 0 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 200,\n\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\tif (content) {\n\t\t\tcontent.animate(\n\t\t\t\t[\n\t\t\t\t\t{ transform: 'scale(1)', opacity: 1 },\n\t\t\t\t\t{ transform: 'scale(0.95)', opacity: 0 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 250,\n\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\tif (overlay) {\n\t\t\tconst animation = overlay.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 1 },\n\t\t\t\t\t{ opacity: 0 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 250,\n\t\t\t\t\tdelay: 50,\n\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\n\t\t\tanimation.onfinish = () => {\n\t\t\t\t// Reset background color\n\t\t\t\toverlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'\n\t\t\t\toverlayStack.release()\n\t\t\t\tthis.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate animateImageChange() {\n\t\tconst image = this.imageRef.value\n\t\tif (!image) return\n\n\t\t// Fade out\n\t\tconst fadeOut = image.animate(\n\t\t\t[\n\t\t\t\t{ opacity: 1, transform: 'scale(1)' },\n\t\t\t\t{ opacity: 0, transform: 'scale(0.98)' },\n\t\t\t],\n\t\t\t{\n\t\t\t\tduration: 150,\n\t\t\t\teasing: 'ease-out',\n\t\t\t\tfill: 'forwards',\n\t\t\t},\n\t\t)\n\n\t\t// Fade in after fade out completes\n\t\tfadeOut.onfinish = () => {\n\t\t\timage.animate(\n\t\t\t\t[\n\t\t\t\t\t{ opacity: 0, transform: 'scale(0.98)' },\n\t\t\t\t\t{ opacity: 1, transform: 'scale(1)' },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 200,\n\t\t\t\t\teasing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate setupEventListeners() {\n\t\t// Keyboard navigation\n\t\tfromEvent<KeyboardEvent>(document, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(() => this.open),\n\t\t\t\ttap(e => {\n\t\t\t\t\tswitch (e.key) {\n\t\t\t\t\t\tcase 'Escape':\n\t\t\t\t\t\t\tthis.handleClose()\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\t\t\tthis.handlePrevious()\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\t\t\tthis.handleNext()\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Touch/swipe events for mobile\n\t\tif (!this.isGalleryMode || this.images.length <= 1) return\n\n\t\tconst content = this.contentRef.value\n\t\tif (!content) return\n\n\t\tconst touchStart$ = fromEvent<TouchEvent>(content, 'touchstart')\n\t\tconst touchEnd$ = fromEvent<TouchEvent>(content, 'touchend')\n\n\t\ttouchStart$\n\t\t\t.pipe(\n\t\t\t\tswitchMap(startEvent => {\n\t\t\t\t\tconst startX = startEvent.touches[0].clientX\n\t\t\t\t\treturn touchEnd$.pipe(\n\t\t\t\t\t\tfirst(),\n\t\t\t\t\t\tmap(endEvent => {\n\t\t\t\t\t\t\tconst endX = endEvent.changedTouches[0].clientX\n\t\t\t\t\t\t\treturn endX - startX\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\tfilter(distance => Math.abs(distance) > this.swipeThreshold),\n\t\t\t\ttap(distance => (distance > 0 ? this.handlePrevious() : this.handleNext())),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleClose = () => {\n\t\tthis.open = false\n\t}\n\n\tprivate handlePrevious = () => {\n\t\tif (this.isGalleryMode && this.images.length > 1) {\n\t\t\tthis.isLoading = true\n\t\t\tthis.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { index: this.currentIndex },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate handleNext = () => {\n\t\tif (this.isGalleryMode && this.images.length > 1) {\n\t\t\tthis.isLoading = true\n\t\t\tthis.currentIndex = (this.currentIndex + 1) % this.images.length\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { index: this.currentIndex },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate handleImageLoad = () => {\n\t\tthis.isLoading = false\n\t}\n\n\tprivate handleOverlayClick = (e: Event) => {\n\t\t// Close when clicking the overlay (not the content)\n\t\tif (e.target === e.currentTarget) {\n\t\t\tthis.handleClose()\n\t\t}\n\t}\n\n\trender() {\n\t\tif (!this.open) return html``\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\t${ref(this.overlayRef)}\n\t\t\t\tclass=\"fixed inset-0 flex items-center justify-center backdrop-blur-sm\"\n\t\t\t\tstyle=\"z-index: ${this.zIndex}\"\n\t\t\t\t@click=${this.handleOverlayClick}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\t${ref(this.contentRef)}\n\t\t\t\t\tclass=\"relative max-w-[90vw] max-h-[90vh]\"\n\t\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t<!-- Close Button -->\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"absolute top-4 right-4 md:top-4 md:right-4 sm:top-2 sm:right-2 bg-white/15 backdrop-blur-md border border-white/20 text-white w-11 h-11 rounded-full flex items-center justify-center cursor-pointer z-10 transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95\"\n\t\t\t\t\t\t@click=${this.handleClose}\n\t\t\t\t\t\taria-label=\"Close lightbox\"\n\t\t\t\t\t\ttitle=\"Close (Esc)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<schmancy-icon>close</schmancy-icon>\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<!-- Touch Zones for Gallery Navigation -->\n\t\t\t\t\t${when(\n\t\t\t\t\t\tthis.isGalleryMode && this.images.length > 1,\n\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"absolute top-0 bottom-0 left-0 w-1/3 cursor-pointer z-5\"\n\t\t\t\t\t\t\t\t@click=${this.handlePrevious}\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"absolute top-0 bottom-0 right-0 w-1/3 cursor-pointer z-5\"\n\t\t\t\t\t\t\t\t@click=${this.handleNext}\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\n\t\t\t\t\t<!-- Loading Spinner -->\n\t\t\t\t\t${when(\n\t\t\t\t\t\tthis.isLoading,\n\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n\t\t\t\t\t\t\t\t<schmancy-progress indeterminate></schmancy-progress>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\n\t\t\t\t\t<!-- Main Image -->\n\t\t\t\t\t<img\n\t\t\t\t\t\t${ref(this.imageRef)}\n\t\t\t\t\t\tclass=\"max-w-[90vw] max-h-[90vh] object-contain rounded select-none touch-pinch-zoom ${this\n\t\t\t\t\t\t\t.isGalleryMode\n\t\t\t\t\t\t\t? 'cursor-default'\n\t\t\t\t\t\t\t: 'cursor-pointer'}\"\n\t\t\t\t\t\t.src=${this.currentImageSrc}\n\t\t\t\t\t\talt=\"Full size image\"\n\t\t\t\t\t\t@load=${this.handleImageLoad}\n\t\t\t\t\t\t@click=${() => (!this.isGalleryMode ? this.handleClose() : null)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<!-- Navigation Controls (Gallery Mode Only) -->\n\t\t\t\t\t${when(\n\t\t\t\t\t\tthis.isGalleryMode && this.images.length > 1,\n\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"absolute bottom-[-3.5rem] md:bottom-[-3.5rem] sm:bottom-[-3rem] left-1/2 -translate-x-1/2 flex items-center gap-4 z-10\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95\"\n\t\t\t\t\t\t\t\t\t@click=${this.handlePrevious}\n\t\t\t\t\t\t\t\t\taria-label=\"Previous image\"\n\t\t\t\t\t\t\t\t\ttitle=\"Previous (←)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-icon>arrow_back</schmancy-icon>\n\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t<div class=\"text-white text-base font-medium min-w-16 text-center\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t\t${this.currentIndex + 1} / ${this.images.length}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95\"\n\t\t\t\t\t\t\t\t\t@click=${this.handleNext}\n\t\t\t\t\t\t\t\t\taria-label=\"Next image\"\n\t\t\t\t\t\t\t\t\ttitle=\"Next (→)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<schmancy-icon>arrow_forward</schmancy-icon>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-lightbox': SchmancyLightbox\n\t}\n}\n","import { directive, PartInfo, PartType, ElementPart } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { noChange } from 'lit'\n\nexport interface FlipOptions {\n\t/** Source element to animate from (uses element's bounding rect) */\n\tsourceElement?: HTMLElement\n\t/** Click position - can be MouseEvent, TouchEvent, or {x, y} coordinates */\n\tposition?: { x: number; y: number } | MouseEvent | TouchEvent\n\t/** Animation duration in ms (total for both stages) */\n\tduration?: number\n\t/** CSS easing function */\n\teasing?: string\n\t/** Whether to animate scale (default: true) */\n\tscale?: boolean\n\t/** Enable blackbird two-stage arc animation (default: true) */\n\tblackbird?: boolean\n}\n\n/** Extract x,y coordinates from various position inputs */\nfunction extractPosition(pos: FlipOptions['position']): { x: number; y: number } | null {\n\tif (!pos) return null\n\n\tif ('clientX' in pos) {\n\t\t// MouseEvent\n\t\treturn { x: pos.clientX, y: pos.clientY }\n\t} else if ('touches' in pos && pos.touches.length) {\n\t\t// TouchEvent\n\t\treturn { x: pos.touches[0].clientX, y: pos.touches[0].clientY }\n\t} else if ('x' in pos && 'y' in pos) {\n\t\t// Position object\n\t\treturn { x: pos.x, y: pos.y }\n\t}\n\n\treturn null\n}\n\n/**\n * Calculate arc control point for bird-like curved trajectory\n * Birds arc UP when taking off and arc DOWN when landing\n */\nfunction calculateArcPoint(\n\tstart: { x: number; y: number },\n\tend: { x: number; y: number },\n\tarcDirection: 'up' | 'down' = 'up',\n\tintensity: number = 0.3,\n): { x: number; y: number } {\n\tconst midX = (start.x + end.x) / 2\n\tconst midY = (start.y + end.y) / 2\n\tconst distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))\n\n\t// Arc height proportional to distance, but capped\n\tconst arcHeight = Math.min(distance * intensity, 150)\n\n\treturn {\n\t\tx: midX,\n\t\ty: arcDirection === 'up' ? midY - arcHeight : midY + arcHeight,\n\t}\n}\n\nclass FlipDirective extends AsyncDirective {\n\tprivate element?: HTMLElement\n\tprivate hasAnimated = false\n\n\tconstructor(partInfo: PartInfo) {\n\t\tsuper(partInfo)\n\t\tif (partInfo.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('flip directive can only be used on elements')\n\t\t}\n\t}\n\n\trender(_options?: FlipOptions) {\n\t\treturn noChange\n\t}\n\n\tupdate(part: ElementPart, [options]: [FlipOptions?]) {\n\t\tthis.element = part.element as HTMLElement\n\n\t\t// Animate if we have either a source element or position\n\t\tconst hasSource = options?.sourceElement || options?.position\n\t\tif (!this.hasAnimated && hasSource) {\n\t\t\tthis.hasAnimated = true\n\t\t\tthis.animateIn(options)\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate animateIn(options?: FlipOptions) {\n\t\tif (!this.element) return\n\n\t\t// Check reduced motion preference\n\t\tif (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return\n\n\t\tconst totalDuration = options?.duration ?? 600\n\t\tconst animateScale = options?.scale !== false\n\t\tconst useBlackbird = options?.blackbird !== false\n\n\t\t// Get positions\n\t\tconst clickPos = extractPosition(options?.position)\n\t\tconst sourceRect = options?.sourceElement?.getBoundingClientRect()\n\n\t\tconst animate = () => {\n\t\t\tconst targetRect = this.element!.getBoundingClientRect()\n\t\t\tconst targetCenter = {\n\t\t\t\tx: targetRect.left + targetRect.width / 2,\n\t\t\t\ty: targetRect.top + targetRect.height / 2,\n\t\t\t}\n\n\t\t\t// Determine source point\n\t\t\tlet sourceCenter: { x: number; y: number }\n\t\t\tlet sourceScale = { x: 0.1, y: 0.1 }\n\n\t\t\tif (sourceRect) {\n\t\t\t\tsourceCenter = {\n\t\t\t\t\tx: sourceRect.left + sourceRect.width / 2,\n\t\t\t\t\ty: sourceRect.top + sourceRect.height / 2,\n\t\t\t\t}\n\t\t\t\tif (animateScale) {\n\t\t\t\t\tsourceScale = {\n\t\t\t\t\t\tx: sourceRect.width / targetRect.width,\n\t\t\t\t\t\ty: sourceRect.height / targetRect.height,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (clickPos) {\n\t\t\t\tsourceCenter = clickPos\n\t\t\t} else {\n\t\t\t\tsourceCenter = { x: window.innerWidth / 2, y: window.innerHeight / 2 }\n\t\t\t}\n\n\t\t\t// Calculate deltas from target (where element is) to source (where we start)\n\t\t\tconst sourceDelta = {\n\t\t\t\tx: sourceCenter.x - targetCenter.x,\n\t\t\t\ty: sourceCenter.y - targetCenter.y,\n\t\t\t}\n\n\t\t\tif (useBlackbird && clickPos && sourceRect) {\n\t\t\t\t// TWO-STAGE BLACKBIRD ANIMATION\n\t\t\t\t// Stage 1: Source element → Click position (takeoff arc - UP)\n\t\t\t\t// Stage 2: Click position → Final destination (landing arc - DOWN)\n\n\t\t\t\tconst clickDelta = {\n\t\t\t\t\tx: clickPos.x - targetCenter.x,\n\t\t\t\t\ty: clickPos.y - targetCenter.y,\n\t\t\t\t}\n\n\t\t\t\t// Calculate arc control points\n\t\t\t\tconst takeoffArc = calculateArcPoint(sourceCenter, clickPos, 'up', 0.4)\n\t\t\t\tconst landingArc = calculateArcPoint(clickPos, targetCenter, 'down', 0.3)\n\n\t\t\t\t// Arc deltas relative to target\n\t\t\t\tconst takeoffArcDelta = {\n\t\t\t\t\tx: takeoffArc.x - targetCenter.x,\n\t\t\t\t\ty: takeoffArc.y - targetCenter.y,\n\t\t\t\t}\n\t\t\t\tconst landingArcDelta = {\n\t\t\t\t\tx: landingArc.x - targetCenter.x,\n\t\t\t\t\ty: landingArc.y - targetCenter.y,\n\t\t\t\t}\n\n\t\t\t\t// Intermediate scale at click position\n\t\t\t\tconst midScale = 0.3\n\n\t\t\t\t// Create keyframes for two-stage arc animation\n\t\t\t\t// 0% → 25% → 50% → 75% → 100%\n\t\t\t\t// Source → Takeoff Arc → Click → Landing Arc → Final\n\t\t\t\tthis.element!.animate(\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// 0% - Start at source element\n\t\t\t\t\t\t\ttransform: `translate(${sourceDelta.x}px, ${sourceDelta.y}px) scale(${sourceScale.x}, ${sourceScale.y})`,\n\t\t\t\t\t\t\topacity: 0.6,\n\t\t\t\t\t\t\toffset: 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// 25% - Peak of takeoff arc (bird lifts up)\n\t\t\t\t\t\t\ttransform: `translate(${takeoffArcDelta.x}px, ${takeoffArcDelta.y}px) scale(${midScale * 0.7})`,\n\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\toffset: 0.25,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// 50% - At click position (transition point)\n\t\t\t\t\t\t\ttransform: `translate(${clickDelta.x}px, ${clickDelta.y}px) scale(${midScale})`,\n\t\t\t\t\t\t\topacity: 0.9,\n\t\t\t\t\t\t\toffset: 0.5,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// 75% - Landing arc (bird descends toward target)\n\t\t\t\t\t\t\ttransform: `translate(${landingArcDelta.x}px, ${landingArcDelta.y}px) scale(0.6)`,\n\t\t\t\t\t\t\topacity: 0.95,\n\t\t\t\t\t\t\toffset: 0.75,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// 100% - Final position\n\t\t\t\t\t\t\ttransform: 'translate(0, 0) scale(1)',\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\toffset: 1,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tduration: totalDuration,\n\t\t\t\t\t\teasing: 'cubic-bezier(0.34, 1.2, 0.64, 1)', // Slight overshoot for organic feel\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t} else if (useBlackbird && clickPos) {\n\t\t\t\t// SINGLE-STAGE with arc (click position to final)\n\t\t\t\tconst arcPoint = calculateArcPoint(clickPos, targetCenter, 'down', 0.35)\n\t\t\t\tconst arcDelta = {\n\t\t\t\t\tx: arcPoint.x - targetCenter.x,\n\t\t\t\t\ty: arcPoint.y - targetCenter.y,\n\t\t\t\t}\n\n\t\t\t\tthis.element!.animate(\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttransform: `translate(${sourceDelta.x}px, ${sourceDelta.y}px) scale(0.1)`,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\toffset: 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttransform: `translate(${arcDelta.x}px, ${arcDelta.y}px) scale(0.5)`,\n\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\toffset: 0.5,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttransform: 'translate(0, 0) scale(1)',\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\toffset: 1,\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tduration: totalDuration,\n\t\t\t\t\t\teasing: 'cubic-bezier(0.34, 1.2, 0.64, 1)',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t} else {\n\t\t\t\t// SIMPLE animation (fallback)\n\t\t\t\tthis.element!.animate(\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttransform: `translate(${sourceDelta.x}px, ${sourceDelta.y}px) scale(${sourceScale.x}, ${sourceScale.y})`,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ transform: 'translate(0, 0) scale(1, 1)', opacity: 1 },\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tduration: totalDuration,\n\t\t\t\t\t\teasing: options?.easing ?? 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\n\t\t// Handle image loading\n\t\tif (this.element instanceof HTMLImageElement) {\n\t\t\tif (this.element.complete) {\n\t\t\t\trequestAnimationFrame(animate)\n\t\t\t} else {\n\t\t\t\tthis.element.addEventListener('load', () => requestAnimationFrame(animate), { once: true })\n\t\t\t}\n\t\t} else {\n\t\t\trequestAnimationFrame(animate)\n\t\t}\n\t}\n}\n\nexport const flip = directive(FlipDirective)\n","import { directive, PartInfo, PartType, ElementPart } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { noChange, TemplateResult } from 'lit'\nimport { html, render } from 'lit'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { flip } from './flip-directive.js'\n\nexport interface LightboxOptions {\n\timages?: string[]\n\tindex?: number\n\toverlay?: TemplateResult\n}\n\nclass LightboxDirective extends AsyncDirective {\n\tprivate element?: HTMLImageElement\n\tprivate clickHandler?: EventListener\n\tprivate keyHandler?: EventListener\n\tprivate overlayElement?: HTMLDivElement\n\tprivate currentIndex = 0\n\tprivate images: string[] = []\n\tprivate overlay?: TemplateResult\n\tprivate clickPosition?: { x: number; y: number }\n\n\tconstructor(partInfo: PartInfo) {\n\t\tsuper(partInfo)\n\t\tif (partInfo.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('lightbox directive can only be used on elements')\n\t\t}\n\t}\n\n\trender(_options?: LightboxOptions) {\n\t\treturn noChange\n\t}\n\n\tupdate(part: ElementPart, [options]: [LightboxOptions?]) {\n\t\tthis.element = part.element as HTMLImageElement\n\n\t\t// Setup click handler\n\t\tif (!this.clickHandler) {\n\t\t\tthis.clickHandler = (e: Event) => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\n\t\t\t\t// Capture click position from MouseEvent or TouchEvent\n\t\t\t\tif ('clientX' in e) {\n\t\t\t\t\tthis.clickPosition = { x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY }\n\t\t\t\t} else if ('touches' in e && (e as TouchEvent).touches.length) {\n\t\t\t\t\tconst touch = (e as TouchEvent).touches[0]\n\t\t\t\t\tthis.clickPosition = { x: touch.clientX, y: touch.clientY }\n\t\t\t\t}\n\n\t\t\t\tif (options?.images && options.images.length > 0) {\n\t\t\t\t\tthis.images = options.images\n\t\t\t\t\tthis.currentIndex = options.index || 0\n\t\t\t\t} else {\n\t\t\t\t\tthis.images = [this.element!.src]\n\t\t\t\t\tthis.currentIndex = 0\n\t\t\t\t}\n\t\t\t\tthis.overlay = options?.overlay\n\n\t\t\t\tthis.open()\n\t\t\t}\n\n\t\t\tthis.element.addEventListener('click', this.clickHandler)\n\t\t\tthis.element.style.cursor = 'pointer'\n\t\t\tthis.element.classList.add('hover:opacity-80', 'transition-opacity')\n\t\t}\n\n\t\treturn noChange\n\t}\n\n\tprivate open() {\n\t\t// Create overlay container with flex centering\n\t\tthis.overlayElement = document.createElement('div')\n\t\tthis.overlayElement.className = 'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'\n\t\tthis.overlayElement.style.zIndex = '1000'\n\n\t\t// Render lightbox content using Lit\n\t\trender(this.renderLightbox(), this.overlayElement)\n\n\t\t// Add to body\n\t\tdocument.body.appendChild(this.overlayElement)\n\t\tdocument.body.style.overflow = 'hidden'\n\n\t\t// Animate in overlay\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.overlayElement!.animate([{ opacity: 0 }, { opacity: 1 }], {\n\t\t\t\tduration: 300,\n\t\t\t\teasing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n\t\t\t\tfill: 'forwards',\n\t\t\t})\n\t\t})\n\n\t\t// Setup keyboard\n\t\tthis.keyHandler = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') this.close()\n\t\t\tif (e.key === 'ArrowLeft' && this.images.length > 1) this.prev()\n\t\t\tif (e.key === 'ArrowRight' && this.images.length > 1) this.next()\n\t\t}\n\t\tdocument.addEventListener('keydown', this.keyHandler)\n\n\t\t// Click overlay to close\n\t\tthis.overlayElement.addEventListener('click', e => {\n\t\t\tif (e.target === this.overlayElement) this.close()\n\t\t})\n\t}\n\n\tprivate close() {\n\t\tif (!this.overlayElement) return\n\n\t\tconst contentContainer = this.overlayElement.querySelector('[data-lightbox-content]') as HTMLElement\n\n\t\t// Animate back to click position\n\t\tif (contentContainer && this.clickPosition) {\n\t\t\tconst rect = contentContainer.getBoundingClientRect()\n\n\t\t\t// Animate container shrinking toward click point\n\t\t\tconst deltaX = this.clickPosition.x - (rect.left + rect.width / 2)\n\t\t\tconst deltaY = this.clickPosition.y - (rect.top + rect.height / 2)\n\n\t\t\tconst containerAnim = contentContainer.animate(\n\t\t\t\t[\n\t\t\t\t\t{ transform: 'translate(0, 0) scale(1)', opacity: 1 },\n\t\t\t\t\t{ transform: `translate(${deltaX}px, ${deltaY}px) scale(0.1)`, opacity: 0 },\n\t\t\t\t],\n\t\t\t\t{\n\t\t\t\t\tduration: 300,\n\t\t\t\t\teasing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n\t\t\t\t\tfill: 'forwards',\n\t\t\t\t},\n\t\t\t)\n\n\t\t\tthis.overlayElement.animate([{ opacity: 1 }, { opacity: 0 }], {\n\t\t\t\tduration: 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t\tfill: 'forwards',\n\t\t\t})\n\n\t\t\tcontainerAnim.onfinish = () => {\n\t\t\t\tthis.overlayElement?.remove()\n\t\t\t\tthis.overlayElement = undefined\n\t\t\t\tdocument.body.style.overflow = ''\n\t\t\t}\n\t\t} else {\n\t\t\t// Fallback to simple fade\n\t\t\tconst animation = this.overlayElement.animate([{ opacity: 1 }, { opacity: 0 }], {\n\t\t\t\tduration: 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t\tfill: 'forwards',\n\t\t\t})\n\n\t\t\tanimation.onfinish = () => {\n\t\t\t\tthis.overlayElement?.remove()\n\t\t\t\tthis.overlayElement = undefined\n\t\t\t\tdocument.body.style.overflow = ''\n\t\t\t}\n\t\t}\n\n\t\tif (this.keyHandler) {\n\t\t\tdocument.removeEventListener('keydown', this.keyHandler)\n\t\t\tthis.keyHandler = undefined\n\t\t}\n\t}\n\n\tprivate prev() {\n\t\tthis.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length\n\t\tthis.updateImage()\n\t}\n\n\tprivate next() {\n\t\tthis.currentIndex = (this.currentIndex + 1) % this.images.length\n\t\tthis.updateImage()\n\t}\n\n\tprivate updateImage() {\n\t\tif (!this.overlayElement) return\n\t\trender(this.renderLightbox(), this.overlayElement)\n\t}\n\n\tprivate renderLightbox() {\n\t\tconst currentSrc = this.images[this.currentIndex]\n\t\tconst isGallery = this.images.length > 1\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tdata-lightbox-content\n\t\t\t\tclass=\"relative\"\n\t\t\t\tstyle=${styleMap({\n\t\t\t\t\ttransformOrigin: 'center center',\n\t\t\t\t})}\n\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t<!-- Close button -->\n\t\t\t\t<button\n\t\t\t\t\tclass=\"absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors\"\n\t\t\t\t\t@click=${() => this.close()}\n\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-2xl\">×</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Image container with optional overlay -->\n\t\t\t\t<div class=\"relative\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${currentSrc}\n\t\t\t\t\t\t${flip({\n\t\t\t\t\t\t\tsourceElement: this.element,\n\t\t\t\t\t\t\tposition: this.clickPosition,\n\t\t\t\t\t\t\tduration: 600,\n\t\t\t\t\t\t\tscale: true,\n\t\t\t\t\t\t\tblackbird: true,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tclass=\"object-contain rounded-lg\"\n\t\t\t\t\t\tstyle=\"max-height: calc(100vh - 40px); max-width: 90vw;\"\n\t\t\t\t\t\t@click=${() => !isGallery && this.close()}\n\t\t\t\t\t/>\n\t\t\t\t\t${this.overlay ? this.overlay : ''}\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Gallery controls -->\n\t\t\t\t${isGallery\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"flex items-center justify-center gap-4 text-white mt-4\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors\"\n\t\t\t\t\t\t\t\t\t@click=${() => this.prev()}\n\t\t\t\t\t\t\t\t\taria-label=\"Previous\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t<div class=\"text-lg\">${this.currentIndex + 1} / ${this.images.length}</div>\n\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors\"\n\t\t\t\t\t\t\t\t\t@click=${() => this.next()}\n\t\t\t\t\t\t\t\t\taria-label=\"Next\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: ''}\n\t\t\t</div>\n\t\t`\n\t}\n\n\tdisconnected() {\n\t\tif (this.element && this.clickHandler) {\n\t\t\tthis.element.removeEventListener('click', this.clickHandler)\n\t\t}\n\t\tthis.close()\n\t}\n}\n\nexport const lightbox = directive(LightboxDirective)\n","import { filter, fromEvent, map, Subject, switchMap, takeUntil, tap } from 'rxjs'\nimport { html, render } from 'lit'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { ComponentType } from '../area/router.types'\nimport { discoverComponent } from '@mixins/discovery.service'\nimport { overlayStack } from '../utils/overlay-stack'\nimport { lightbox as lightboxDirective, type LightboxOptions } from './lightbox.directive'\n\nexport type LightboxConfig = {\n\t// Image mode\n\timage?: string\n\timages?: string[]\n\tindex?: number\n\toverlay?: ComponentType\n\n\t// Component-only mode (no image background)\n\tcomponent?: ComponentType\n\n\tprops?: Record<string, unknown>\n}\n\n\n/**\n * Lightbox service for centralized lightbox management.\n * Follows the same patterns as DialogService.\n */\nclass LightboxService {\n\tprivate static instance: LightboxService\n\n\t// Subject for lightbox opening requests\n\tprivate pushSubject = new Subject<LightboxConfig>()\n\n\t// Subject for lightbox dismissal requests\n\tprivate dismissSubject = new Subject<void>()\n\n\t// Track active lightbox\n\tprivate activeLightbox?: {\n\t\telement: HTMLDivElement\n\t\tconfig: LightboxConfig\n\t\tcurrentIndex: number\n\t\timages: string[]\n\t}\n\n\tprivate constructor() {\n\t\tthis.setupLightboxOpeningLogic()\n\t\tthis.setupLightboxDismissLogic()\n\t}\n\n\t/**\n\t * Get the singleton instance\n\t */\n\tpublic static getInstance(): LightboxService {\n\t\tif (!LightboxService.instance) {\n\t\t\tLightboxService.instance = new LightboxService()\n\t\t}\n\t\treturn LightboxService.instance\n\t}\n\n\t/**\n\t * Sets up the main lightbox opening logic using RxJS pipes\n\t */\n\tprivate setupLightboxOpeningLogic() {\n\t\tthis.pushSubject\n\t\t\t.pipe(\n\t\t\t\tswitchMap(config => {\n\t\t\t\t\t// Use discoverComponent to find schmancy-theme (same pattern as sheet.service.ts)\n\t\t\t\t\treturn discoverComponent<HTMLElement>('schmancy-theme').pipe(\n\t\t\t\t\t\tmap(theme => {\n\t\t\t\t\t\t\t// Determine container - use theme or fallback to body\n\t\t\t\t\t\t\tconst container = theme || document.body\n\n\t\t\t\t\t\t\t// Create overlay element\n\t\t\t\t\t\t\tconst overlay = document.createElement('div')\n\t\t\t\t\t\t\toverlay.className = 'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'\n\t\t\t\t\t\t\toverlay.style.zIndex = String(overlayStack.getNextZIndex())\n\n\t\t\t\t\t\t\tcontainer.appendChild(overlay)\n\t\t\t\t\t\t\tdocument.body.style.overflow = 'hidden'\n\n\t\t\t\t\t\t\treturn { overlay, config, container }\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t}),\n\t\t\t\ttap(({ overlay, config }) => {\n\t\t\t\t\t// Setup images array\n\t\t\t\t\tlet images: string[] = []\n\t\t\t\t\tlet currentIndex = 0\n\n\t\t\t\t\tif (config.images && config.images.length > 0) {\n\t\t\t\t\t\timages = config.images\n\t\t\t\t\t\tcurrentIndex = config.index || 0\n\t\t\t\t\t} else if (config.image) {\n\t\t\t\t\t\timages = [config.image]\n\t\t\t\t\t\tcurrentIndex = 0\n\t\t\t\t\t}\n\n\t\t\t\t\t// Store active lightbox state\n\t\t\t\t\tthis.activeLightbox = {\n\t\t\t\t\t\telement: overlay,\n\t\t\t\t\t\tconfig,\n\t\t\t\t\t\tcurrentIndex,\n\t\t\t\t\t\timages,\n\t\t\t\t\t}\n\n\t\t\t\t\t// Keyboard handling via RxJS\n\t\t\t\t\tfromEvent<KeyboardEvent>(document, 'keydown').pipe(\n\t\t\t\t\t\ttakeUntil(this.dismissSubject),\n\t\t\t\t\t\tfilter(() => !!this.activeLightbox),\n\t\t\t\t\t\ttap(e => {\n\t\t\t\t\t\t\tif (e.key === 'Escape') this.dismiss()\n\t\t\t\t\t\t\tif (e.key === 'ArrowLeft' && this.activeLightbox!.images.length > 1) this.navigatePrev()\n\t\t\t\t\t\t\tif (e.key === 'ArrowRight' && this.activeLightbox!.images.length > 1) this.navigateNext()\n\t\t\t\t\t\t})\n\t\t\t\t\t).subscribe()\n\n\t\t\t\t\t// Click overlay to close via RxJS\n\t\t\t\t\tfromEvent<MouseEvent>(overlay, 'click').pipe(\n\t\t\t\t\t\ttakeUntil(this.dismissSubject),\n\t\t\t\t\t\tfilter(e => e.target === overlay),\n\t\t\t\t\t\ttap(() => this.dismiss())\n\t\t\t\t\t).subscribe()\n\n\t\t\t\t\t// Render content\n\t\t\t\t\tif (config.component) {\n\t\t\t\t\t\tthis.renderComponent(overlay, config)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.renderLightbox(overlay, config, images, currentIndex)\n\t\t\t\t\t}\n\n\t\t\t\t\t// Animate in\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\toverlay.animate([{ opacity: 0 }, { opacity: 1 }], {\n\t\t\t\t\t\t\tduration: 300,\n\t\t\t\t\t\t\teasing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n\t\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Sets up the lightbox dismissal logic\n\t */\n\tprivate setupLightboxDismissLogic() {\n\t\tthis.dismissSubject\n\t\t\t.pipe(\n\t\t\t\ttap(() => {\n\t\t\t\t\tif (!this.activeLightbox) return\n\n\t\t\t\t\tconst { element } = this.activeLightbox\n\n\t\t\t\t\t// Animate out\n\t\t\t\t\tconst animation = element.animate([{ opacity: 1 }, { opacity: 0 }], {\n\t\t\t\t\t\tduration: 250,\n\t\t\t\t\t\teasing: 'ease-out',\n\t\t\t\t\t\tfill: 'forwards',\n\t\t\t\t\t})\n\n\t\t\t\t\tanimation.onfinish = () => {\n\t\t\t\t\t\telement.remove()\n\t\t\t\t\t\tdocument.body.style.overflow = ''\n\t\t\t\t\t\toverlayStack.release()\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.activeLightbox = undefined\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\t/**\n\t * Push/open a lightbox\n\t */\n\tpublic push(config: LightboxConfig): void {\n\t\t// Close any existing lightbox first\n\t\tif (this.activeLightbox) {\n\t\t\tthis.dismiss()\n\t\t}\n\t\tthis.pushSubject.next(config)\n\t}\n\n\t/**\n\t * Dismiss the lightbox\n\t */\n\tpublic dismiss(): void {\n\t\tthis.dismissSubject.next()\n\t}\n\n\t/**\n\t * Navigate to previous image\n\t */\n\tprivate navigatePrev(): void {\n\t\tif (!this.activeLightbox || this.activeLightbox.images.length <= 1) return\n\n\t\tconst { images, config, element } = this.activeLightbox\n\t\tthis.activeLightbox.currentIndex = (this.activeLightbox.currentIndex - 1 + images.length) % images.length\n\t\tthis.renderLightbox(element, config, images, this.activeLightbox.currentIndex)\n\t}\n\n\t/**\n\t * Navigate to next image\n\t */\n\tprivate navigateNext(): void {\n\t\tif (!this.activeLightbox || this.activeLightbox.images.length <= 1) return\n\n\t\tconst { images, config, element } = this.activeLightbox\n\t\tthis.activeLightbox.currentIndex = (this.activeLightbox.currentIndex + 1) % images.length\n\t\tthis.renderLightbox(element, config, images, this.activeLightbox.currentIndex)\n\t}\n\n\t/**\n\t * Render component-only mode (no image background)\n\t */\n\tprivate renderComponent(overlay: HTMLDivElement, config: LightboxConfig): void {\n\t\tif (!config.component) return\n\n\t\t// Create the component\n\t\tlet component: HTMLElement\n\t\tif (typeof config.component === 'string') {\n\t\t\tcomponent = document.createElement(config.component)\n\t\t} else {\n\t\t\tcomponent = new (config.component as CustomElementConstructor)()\n\t\t}\n\n\t\t// Set props\n\t\tif (config.props) {\n\t\t\tObject.entries(config.props).forEach(([key, value]) => {\n\t\t\t\t;(component as unknown as Record<string, unknown>)[key] = value\n\t\t\t})\n\t\t}\n\n\t\t// Create wrapper with close button\n\t\tconst template = html`\n\t\t\t<div class=\"relative\" @click=${(e: Event) => e.stopPropagation()}>\n\t\t\t\t<!-- Close button -->\n\t\t\t\t<button\n\t\t\t\t\tclass=\"absolute -top-12 right-0 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors\"\n\t\t\t\t\t@click=${() => this.dismiss()}\n\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-2xl\">×</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Component container -->\n\t\t\t\t<div id=\"lightbox-component-container\"></div>\n\t\t\t</div>\n\t\t`\n\n\t\trender(template, overlay)\n\n\t\t// Append component after render\n\t\tconst container = overlay.querySelector('#lightbox-component-container')\n\t\tif (container) {\n\t\t\tcontainer.appendChild(component)\n\t\t}\n\t}\n\n\t/**\n\t * Render image lightbox\n\t */\n\tprivate renderLightbox(overlay: HTMLDivElement, config: LightboxConfig, images: string[], currentIndex: number): void {\n\t\tconst currentSrc = images[currentIndex]\n\t\tconst isGallery = images.length > 1\n\n\t\t// Create overlay component if specified\n\t\tlet overlayComponent: HTMLElement | null = null\n\t\tif (config.overlay) {\n\t\t\tif (typeof config.overlay === 'string') {\n\t\t\t\toverlayComponent = document.createElement(config.overlay)\n\t\t\t} else if (typeof config.overlay === 'function') {\n\t\t\t\toverlayComponent = new (config.overlay as CustomElementConstructor)()\n\t\t\t}\n\n\t\t\t// Set props on the component\n\t\t\tif (config.props && overlayComponent) {\n\t\t\t\tObject.entries(config.props).forEach(([key, value]) => {\n\t\t\t\t\t;(overlayComponent as unknown as Record<string, unknown>)[key] = value\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst template = html`\n\t\t\t<div\n\t\t\t\tclass=\"relative\"\n\t\t\t\tstyle=${styleMap({ maxWidth: '90vw', maxHeight: '90vh' })}\n\t\t\t\t@click=${(e: Event) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t<!-- Close button -->\n\t\t\t\t<button\n\t\t\t\t\tclass=\"absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors\"\n\t\t\t\t\t@click=${() => this.dismiss()}\n\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-2xl\">×</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Image container with optional overlay -->\n\t\t\t\t<div class=\"relative\" id=\"lightbox-image-container\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${currentSrc}\n\t\t\t\t\t\tclass=\"max-w-full object-contain rounded-lg\"\n\t\t\t\t\t\tstyle=${styleMap({ maxHeight: '85vh' })}\n\t\t\t\t\t\t@click=${() => !isGallery && this.dismiss()}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Gallery controls -->\n\t\t\t\t${isGallery\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"absolute left-1/2 -translate-x-1/2 flex items-center gap-4 text-white\"\n\t\t\t\t\t\t\t\tstyle=${styleMap({ bottom: '-60px' })}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors\"\n\t\t\t\t\t\t\t\t\t@click=${() => this.navigatePrev()}\n\t\t\t\t\t\t\t\t\taria-label=\"Previous\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t<div class=\"text-lg\">${currentIndex + 1} / ${images.length}</div>\n\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors\"\n\t\t\t\t\t\t\t\t\t@click=${() => this.navigateNext()}\n\t\t\t\t\t\t\t\t\taria-label=\"Next\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: ''}\n\t\t\t</div>\n\t\t`\n\n\t\trender(template, overlay)\n\n\t\t// Append overlay component to image container after render\n\t\tif (overlayComponent) {\n\t\t\tconst container = overlay.querySelector('#lightbox-image-container')\n\t\t\tif (container) {\n\t\t\t\t// Remove any existing overlay component\n\t\t\t\tconst existing = container.querySelector('[data-lightbox-overlay]')\n\t\t\t\tif (existing) existing.remove()\n\n\t\t\t\toverlayComponent.setAttribute('data-lightbox-overlay', '')\n\t\t\t\tcontainer.appendChild(overlayComponent)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/**\n * Unified lightbox type - works as both directive and service\n */\nexport type LightboxAPI = {\n\t(options?: LightboxOptions): ReturnType<typeof lightboxDirective>\n\tpush: (config: LightboxConfig) => void\n\tdismiss: () => void\n}\n\n/**\n * Unified lightbox export - works as both directive and service:\n * - Directive: ${lightbox()} or ${lightbox({ overlay: html`...` })}\n * - Service: lightbox.push({ image, overlay: 'component-name', props })\n */\nexport const lightbox: LightboxAPI = Object.assign(\n\t// Callable as directive (backward compatible)\n\t(options?: LightboxOptions) => lightboxDirective(options),\n\t// Also has service methods\n\t{\n\t\tpush: (config: LightboxConfig) => LightboxService.getInstance().push(config),\n\t\tdismiss: () => LightboxService.getInstance().dismiss(),\n\t},\n)\n"],"mappings":"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"}

package/dist/lightbox-m5FLmYlv.cjs

@@ -0,0 +1,202 @@
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-BIXF7xkF.cjs`),t=require(`./decorate-DpFmy0nm.cjs`),n=require(`./overlay-stack-BprhAE9a.cjs`);let r=require(`rxjs`),i=require(`rxjs/operators`),a=require(`lit/directives/style-map.js`),o=require(`lit/decorators.js`),s=require(`lit`),c=require(`lit/directives/ref.js`),l=require(`lit/directives/when.js`),u=require(`lit/async-directive.js`),d=require(`lit/directive.js`);var f=class extends e.s{constructor(...e){super(...e),this.src=``,this.images=[],this.initialIndex=0,this.open=!1,this.currentIndex=0,this.isLoading=!1,this.zIndex=1e4,this.swipeThreshold=50,this.overlayRef=(0,c.createRef)(),this.contentRef=(0,c.createRef)(),this.imageRef=(0,c.createRef)(),this.handleClose=()=>{this.open=!1},this.handlePrevious=()=>{this.isGalleryMode&&this.images.length>1&&(this.isLoading=!0,this.currentIndex=(this.currentIndex-1+this.images.length)%this.images.length,this.dispatchEvent(new CustomEvent(`change`,{detail:{index:this.currentIndex},bubbles:!0,composed:!0})))},this.handleNext=()=>{this.isGalleryMode&&this.images.length>1&&(this.isLoading=!0,this.currentIndex=(this.currentIndex+1)%this.images.length,this.dispatchEvent(new CustomEvent(`change`,{detail:{index:this.currentIndex},bubbles:!0,composed:!0})))},this.handleImageLoad=()=>{this.isLoading=!1},this.handleOverlayClick=e=>{e.target===e.currentTarget&&this.handleClose()}}static{this.styles=[s.css`
+	:host {
+		display: contents;
+	}
+`]}get isGalleryMode(){return this.images.length>0}get currentImageSrc(){return this.isGalleryMode?this.images[this.currentIndex]||``:this.src}connectedCallback(){super.connectedCallback(),this.currentIndex=this.initialIndex}updated(e){super.updated(e),e.has(`open`)&&(this.open?(this.zIndex=n.t.getNextZIndex(),document.body.style.overflow=`hidden`,this.animateIn(),this.setupEventListeners()):(document.body.style.overflow=``,this.animateOut())),e.has(`initialIndex`)&&(this.currentIndex=this.initialIndex),e.has(`currentIndex`)&&this.open&&this.animateImageChange()}animateIn(){let e=this.overlayRef.value,t=this.contentRef.value,n=this.imageRef.value;e&&(e.style.backgroundColor=`rgba(0, 0, 0, 0)`,e.style.opacity=`0`,e.animate([{opacity:0},{opacity:1}],{duration:300,easing:`cubic-bezier(0.25, 1, 0.5, 1)`,fill:`forwards`}),requestAnimationFrame(()=>{e.style.backgroundColor=`rgba(0, 0, 0, 0.95)`})),t&&t.animate([{transform:`scale(0.95)`,opacity:0},{transform:`scale(1)`,opacity:1}],{duration:400,delay:100,easing:`cubic-bezier(0.34, 1.56, 0.64, 1)`,fill:`forwards`}),n&&n.animate([{opacity:0,transform:`scale(0.98)`},{opacity:1,transform:`scale(1)`}],{duration:350,delay:150,easing:`cubic-bezier(0.25, 1, 0.5, 1)`,fill:`forwards`})}animateOut(){let e=this.overlayRef.value,t=this.contentRef.value,r=this.imageRef.value;r&&r.animate([{transform:`scale(1)`,opacity:1},{transform:`scale(0.95)`,opacity:0}],{duration:200,easing:`ease-out`,fill:`forwards`}),t&&t.animate([{transform:`scale(1)`,opacity:1},{transform:`scale(0.95)`,opacity:0}],{duration:250,easing:`ease-out`,fill:`forwards`}),e&&(e.animate([{opacity:1},{opacity:0}],{duration:250,delay:50,easing:`ease-out`,fill:`forwards`}).onfinish=()=>{e.style.backgroundColor=`rgba(0, 0, 0, 0)`,n.t.release(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))})}animateImageChange(){let e=this.imageRef.value;e&&(e.animate([{opacity:1,transform:`scale(1)`},{opacity:0,transform:`scale(0.98)`}],{duration:150,easing:`ease-out`,fill:`forwards`}).onfinish=()=>{e.animate([{opacity:0,transform:`scale(0.98)`},{opacity:1,transform:`scale(1)`}],{duration:200,easing:`cubic-bezier(0.25, 1, 0.5, 1)`,fill:`forwards`})})}setupEventListeners(){if((0,r.fromEvent)(document,`keydown`).pipe((0,i.filter)(()=>this.open),(0,i.tap)(e=>{switch(e.key){case`Escape`:this.handleClose();break;case`ArrowLeft`:this.handlePrevious();break;case`ArrowRight`:this.handleNext()}}),(0,i.takeUntil)(this.disconnecting)).subscribe(),!this.isGalleryMode||this.images.length<=1)return;let e=this.contentRef.value;if(!e)return;let t=(0,r.fromEvent)(e,`touchstart`),n=(0,r.fromEvent)(e,`touchend`);t.pipe((0,i.switchMap)(e=>{let t=e.touches[0].clientX;return n.pipe((0,i.first)(),(0,i.map)(e=>e.changedTouches[0].clientX-t))}),(0,i.filter)(e=>Math.abs(e)>this.swipeThreshold),(0,i.tap)(e=>e>0?this.handlePrevious():this.handleNext()),(0,i.takeUntil)(this.disconnecting)).subscribe()}render(){return this.open?s.html`
+			<div
+				${(0,c.ref)(this.overlayRef)}
+				class="fixed inset-0 flex items-center justify-center backdrop-blur-sm"
+				style="z-index: ${this.zIndex}"
+				@click=${this.handleOverlayClick}
+			>
+				<div
+					${(0,c.ref)(this.contentRef)}
+					class="relative max-w-[90vw] max-h-[90vh]"
+					@click=${e=>e.stopPropagation()}
+				>
+					<!-- Close Button -->
+					<button
+						class="absolute top-4 right-4 md:top-4 md:right-4 sm:top-2 sm:right-2 bg-white/15 backdrop-blur-md border border-white/20 text-white w-11 h-11 rounded-full flex items-center justify-center cursor-pointer z-10 transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+						@click=${this.handleClose}
+						aria-label="Close lightbox"
+						title="Close (Esc)"
+					>
+						<schmancy-icon>close</schmancy-icon>
+					</button>
+
+					<!-- Touch Zones for Gallery Navigation -->
+					${(0,l.when)(this.isGalleryMode&&this.images.length>1,()=>s.html`
+							<div
+								class="absolute top-0 bottom-0 left-0 w-1/3 cursor-pointer z-5"
+								@click=${this.handlePrevious}
+							></div>
+							<div
+								class="absolute top-0 bottom-0 right-0 w-1/3 cursor-pointer z-5"
+								@click=${this.handleNext}
+							></div>
+						`)}
+
+					<!-- Loading Spinner -->
+					${(0,l.when)(this.isLoading,()=>s.html`
+							<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+								<schmancy-progress indeterminate></schmancy-progress>
+							</div>
+						`)}
+
+					<!-- Main Image -->
+					<img
+						${(0,c.ref)(this.imageRef)}
+						class="max-w-[90vw] max-h-[90vh] object-contain rounded select-none touch-pinch-zoom ${this.isGalleryMode?`cursor-default`:`cursor-pointer`}"
+						.src=${this.currentImageSrc}
+						alt="Full size image"
+						@load=${this.handleImageLoad}
+						@click=${()=>this.isGalleryMode?null:this.handleClose()}
+					/>
+
+					<!-- Navigation Controls (Gallery Mode Only) -->
+					${(0,l.when)(this.isGalleryMode&&this.images.length>1,()=>s.html`
+							<div
+								class="absolute bottom-[-3.5rem] md:bottom-[-3.5rem] sm:bottom-[-3rem] left-1/2 -translate-x-1/2 flex items-center gap-4 z-10"
+							>
+								<button
+									class="bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+									@click=${this.handlePrevious}
+									aria-label="Previous image"
+									title="Previous (←)"
+								>
+									<schmancy-icon>arrow_back</schmancy-icon>
+								</button>
+
+								<div class="text-white text-base font-medium min-w-16 text-center" aria-live="polite">
+									${this.currentIndex+1} / ${this.images.length}
+								</div>
+
+								<button
+									class="bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+									@click=${this.handleNext}
+									aria-label="Next image"
+									title="Next (→)"
+								>
+									<schmancy-icon>arrow_forward</schmancy-icon>
+								</button>
+							</div>
+						`)}
+				</div>
+			</div>
+		`:s.html``}};function p(e,t,n=`up`,r=.3){let i=(e.x+t.x)/2,a=(e.y+t.y)/2,o=Math.sqrt((t.x-e.x)**2+(t.y-e.y)**2),s=Math.min(o*r,150);return{x:i,y:n===`up`?a-s:a+s}}t.t([(0,o.property)({type:String})],f.prototype,`src`,void 0),t.t([(0,o.property)({type:Array})],f.prototype,`images`,void 0),t.t([(0,o.property)({type:Number})],f.prototype,`initialIndex`,void 0),t.t([(0,o.property)({type:Boolean})],f.prototype,`open`,void 0),t.t([(0,o.state)()],f.prototype,`currentIndex`,void 0),t.t([(0,o.state)()],f.prototype,`isLoading`,void 0),t.t([(0,o.state)()],f.prototype,`zIndex`,void 0),f=t.t([(0,o.customElement)(`schmancy-lightbox`)],f);var m=class extends u.AsyncDirective{constructor(e){if(super(e),this.hasAnimated=!1,e.type!==d.PartType.ELEMENT)throw Error(`flip directive can only be used on elements`)}render(e){return s.noChange}update(e,[t]){this.element=e.element;let n=t?.sourceElement||t?.position;return!this.hasAnimated&&n&&(this.hasAnimated=!0,this.animateIn(t)),s.noChange}animateIn(e){if(!this.element||window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;let t=e?.duration??600,n=!1!==e?.scale,r=!1!==e?.blackbird,i=(a=e?.position,a?`clientX`in a?{x:a.clientX,y:a.clientY}:`touches`in a&&a.touches.length?{x:a.touches[0].clientX,y:a.touches[0].clientY}:`x`in a&&`y`in a?{x:a.x,y:a.y}:null:null);var a;let o=e?.sourceElement?.getBoundingClientRect(),s=()=>{let a=this.element.getBoundingClientRect(),s={x:a.left+a.width/2,y:a.top+a.height/2},c,l={x:.1,y:.1};o?(c={x:o.left+o.width/2,y:o.top+o.height/2},n&&(l={x:o.width/a.width,y:o.height/a.height})):c=i||{x:window.innerWidth/2,y:window.innerHeight/2};let u=c.x-s.x,d=c.y-s.y;if(r&&i&&o){let e={x:i.x-s.x,y:i.y-s.y},n=p(c,i,`up`,.4),r=p(i,s,`down`,.3),a={x:n.x-s.x,y:n.y-s.y},o={x:r.x-s.x,y:r.y-s.y},f=.3;this.element.animate([{transform:`translate(${u}px, ${d}px) scale(${l.x}, ${l.y})`,opacity:.6,offset:0},{transform:`translate(${a.x}px, ${a.y}px) scale(${.7*f})`,opacity:.8,offset:.25},{transform:`translate(${e.x}px, ${e.y}px) scale(${f})`,opacity:.9,offset:.5},{transform:`translate(${o.x}px, ${o.y}px) scale(0.6)`,opacity:.95,offset:.75},{transform:`translate(0, 0) scale(1)`,opacity:1,offset:1}],{duration:t,easing:`cubic-bezier(0.34, 1.2, 0.64, 1)`,fill:`forwards`})}else if(r&&i){let e=p(i,s,`down`,.35),n={x:e.x-s.x,y:e.y-s.y};this.element.animate([{transform:`translate(${u}px, ${d}px) scale(0.1)`,opacity:0,offset:0},{transform:`translate(${n.x}px, ${n.y}px) scale(0.5)`,opacity:.8,offset:.5},{transform:`translate(0, 0) scale(1)`,opacity:1,offset:1}],{duration:t,easing:`cubic-bezier(0.34, 1.2, 0.64, 1)`,fill:`forwards`})}else this.element.animate([{transform:`translate(${u}px, ${d}px) scale(${l.x}, ${l.y})`,opacity:0},{transform:`translate(0, 0) scale(1, 1)`,opacity:1}],{duration:t,easing:e?.easing??`cubic-bezier(0.34, 1.56, 0.64, 1)`,fill:`forwards`})};this.element instanceof HTMLImageElement?this.element.complete?requestAnimationFrame(s):this.element.addEventListener(`load`,()=>requestAnimationFrame(s),{once:!0}):requestAnimationFrame(s)}},h=(0,d.directive)(m),g=class extends u.AsyncDirective{constructor(e){if(super(e),this.currentIndex=0,this.images=[],e.type!==d.PartType.ELEMENT)throw Error(`lightbox directive can only be used on elements`)}render(e){return s.noChange}update(e,[t]){return this.element=e.element,this.clickHandler||(this.clickHandler=e=>{if(e.preventDefault(),e.stopPropagation(),`clientX`in e)this.clickPosition={x:e.clientX,y:e.clientY};else if(`touches`in e&&e.touches.length){let t=e.touches[0];this.clickPosition={x:t.clientX,y:t.clientY}}t?.images&&t.images.length>0?(this.images=t.images,this.currentIndex=t.index||0):(this.images=[this.element.src],this.currentIndex=0),this.overlay=t?.overlay,this.open()},this.element.addEventListener(`click`,this.clickHandler),this.element.style.cursor=`pointer`,this.element.classList.add(`hover:opacity-80`,`transition-opacity`)),s.noChange}open(){this.overlayElement=document.createElement(`div`),this.overlayElement.className=`fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm`,this.overlayElement.style.zIndex=`1000`,(0,s.render)(this.renderLightbox(),this.overlayElement),document.body.appendChild(this.overlayElement),document.body.style.overflow=`hidden`,requestAnimationFrame(()=>{this.overlayElement.animate([{opacity:0},{opacity:1}],{duration:300,easing:`cubic-bezier(0.25, 1, 0.5, 1)`,fill:`forwards`})}),this.keyHandler=e=>{e.key===`Escape`&&this.close(),e.key===`ArrowLeft`&&this.images.length>1&&this.prev(),e.key===`ArrowRight`&&this.images.length>1&&this.next()},document.addEventListener(`keydown`,this.keyHandler),this.overlayElement.addEventListener(`click`,e=>{e.target===this.overlayElement&&this.close()})}close(){if(!this.overlayElement)return;let e=this.overlayElement.querySelector(`[data-lightbox-content]`);if(e&&this.clickPosition){let t=e.getBoundingClientRect(),n=this.clickPosition.x-(t.left+t.width/2),r=this.clickPosition.y-(t.top+t.height/2),i=e.animate([{transform:`translate(0, 0) scale(1)`,opacity:1},{transform:`translate(${n}px, ${r}px) scale(0.1)`,opacity:0}],{duration:300,easing:`cubic-bezier(0.4, 0, 0.2, 1)`,fill:`forwards`});this.overlayElement.animate([{opacity:1},{opacity:0}],{duration:250,easing:`ease-out`,fill:`forwards`}),i.onfinish=()=>{this.overlayElement?.remove(),this.overlayElement=void 0,document.body.style.overflow=``}}else this.overlayElement.animate([{opacity:1},{opacity:0}],{duration:250,easing:`ease-out`,fill:`forwards`}).onfinish=()=>{this.overlayElement?.remove(),this.overlayElement=void 0,document.body.style.overflow=``};this.keyHandler&&=(document.removeEventListener(`keydown`,this.keyHandler),void 0)}prev(){this.currentIndex=(this.currentIndex-1+this.images.length)%this.images.length,this.updateImage()}next(){this.currentIndex=(this.currentIndex+1)%this.images.length,this.updateImage()}updateImage(){this.overlayElement&&(0,s.render)(this.renderLightbox(),this.overlayElement)}renderLightbox(){let e=this.images[this.currentIndex],t=this.images.length>1;return s.html`
+			<div
+				data-lightbox-content
+				class="relative"
+				style=${(0,a.styleMap)({transformOrigin:`center center`})}
+				@click=${e=>e.stopPropagation()}
+			>
+				<!-- Close button -->
+				<button
+					class="absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${()=>this.close()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Image container with optional overlay -->
+				<div class="relative">
+					<img
+						src=${e}
+						${h({sourceElement:this.element,position:this.clickPosition,duration:600,scale:!0,blackbird:!0})}
+						class="object-contain rounded-lg"
+						style="max-height: calc(100vh - 40px); max-width: 90vw;"
+						@click=${()=>!t&&this.close()}
+					/>
+					${this.overlay?this.overlay:``}
+				</div>
+
+				<!-- Gallery controls -->
+				${t?s.html`
+							<div class="flex items-center justify-center gap-4 text-white mt-4">
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${()=>this.prev()}
+									aria-label="Previous"
+								>
+									←
+								</button>
+
+								<div class="text-lg">${this.currentIndex+1} / ${this.images.length}</div>
+
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${()=>this.next()}
+									aria-label="Next"
+								>
+									→
+								</button>
+							</div>
+						`:``}
+			</div>
+		`}disconnected(){this.element&&this.clickHandler&&this.element.removeEventListener(`click`,this.clickHandler),this.close()}},_=(0,d.directive)(g),v=class t{constructor(){this.pushSubject=new r.Subject,this.dismissSubject=new r.Subject,this.setupLightboxOpeningLogic(),this.setupLightboxDismissLogic()}static getInstance(){return t.instance||=new t,t.instance}setupLightboxOpeningLogic(){this.pushSubject.pipe((0,r.switchMap)(t=>e._(`schmancy-theme`).pipe((0,r.map)(e=>{let r=e||document.body,i=document.createElement(`div`);return i.className=`fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm`,i.style.zIndex=String(n.t.getNextZIndex()),r.appendChild(i),document.body.style.overflow=`hidden`,{overlay:i,config:t,container:r}}))),(0,r.tap)(({overlay:e,config:t})=>{let n=[],i=0;t.images&&t.images.length>0?(n=t.images,i=t.index||0):t.image&&(n=[t.image],i=0),this.activeLightbox={element:e,config:t,currentIndex:i,images:n},(0,r.fromEvent)(document,`keydown`).pipe((0,r.takeUntil)(this.dismissSubject),(0,r.filter)(()=>!!this.activeLightbox),(0,r.tap)(e=>{e.key===`Escape`&&this.dismiss(),e.key===`ArrowLeft`&&this.activeLightbox.images.length>1&&this.navigatePrev(),e.key===`ArrowRight`&&this.activeLightbox.images.length>1&&this.navigateNext()})).subscribe(),(0,r.fromEvent)(e,`click`).pipe((0,r.takeUntil)(this.dismissSubject),(0,r.filter)(t=>t.target===e),(0,r.tap)(()=>this.dismiss())).subscribe(),t.component?this.renderComponent(e,t):this.renderLightbox(e,t,n,i),requestAnimationFrame(()=>{e.animate([{opacity:0},{opacity:1}],{duration:300,easing:`cubic-bezier(0.25, 1, 0.5, 1)`,fill:`forwards`})})})).subscribe()}setupLightboxDismissLogic(){this.dismissSubject.pipe((0,r.tap)(()=>{if(!this.activeLightbox)return;let{element:e}=this.activeLightbox;e.animate([{opacity:1},{opacity:0}],{duration:250,easing:`ease-out`,fill:`forwards`}).onfinish=()=>{e.remove(),document.body.style.overflow=``,n.t.release()},this.activeLightbox=void 0})).subscribe()}push(e){this.activeLightbox&&this.dismiss(),this.pushSubject.next(e)}dismiss(){this.dismissSubject.next()}navigatePrev(){if(!this.activeLightbox||this.activeLightbox.images.length<=1)return;let{images:e,config:t,element:n}=this.activeLightbox;this.activeLightbox.currentIndex=(this.activeLightbox.currentIndex-1+e.length)%e.length,this.renderLightbox(n,t,e,this.activeLightbox.currentIndex)}navigateNext(){if(!this.activeLightbox||this.activeLightbox.images.length<=1)return;let{images:e,config:t,element:n}=this.activeLightbox;this.activeLightbox.currentIndex=(this.activeLightbox.currentIndex+1)%e.length,this.renderLightbox(n,t,e,this.activeLightbox.currentIndex)}renderComponent(e,t){if(!t.component)return;let n;n=typeof t.component==`string`?document.createElement(t.component):new t.component,t.props&&Object.entries(t.props).forEach(([e,t])=>{n[e]=t}),(0,s.render)(s.html`
+			<div class="relative" @click=${e=>e.stopPropagation()}>
+				<!-- Close button -->
+				<button
+					class="absolute -top-12 right-0 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${()=>this.dismiss()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Component container -->
+				<div id="lightbox-component-container"></div>
+			</div>
+		`,e);let r=e.querySelector(`#lightbox-component-container`);r&&r.appendChild(n)}renderLightbox(e,t,n,r){let i=n[r],o=n.length>1,c=null;if(t.overlay&&(typeof t.overlay==`string`?c=document.createElement(t.overlay):typeof t.overlay==`function`&&(c=new t.overlay),t.props&&c&&Object.entries(t.props).forEach(([e,t])=>{c[e]=t})),(0,s.render)(s.html`
+			<div
+				class="relative"
+				style=${(0,a.styleMap)({maxWidth:`90vw`,maxHeight:`90vh`})}
+				@click=${e=>e.stopPropagation()}
+			>
+				<!-- Close button -->
+				<button
+					class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${()=>this.dismiss()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Image container with optional overlay -->
+				<div class="relative" id="lightbox-image-container">
+					<img
+						src=${i}
+						class="max-w-full object-contain rounded-lg"
+						style=${(0,a.styleMap)({maxHeight:`85vh`})}
+						@click=${()=>!o&&this.dismiss()}
+					/>
+				</div>
+
+				<!-- Gallery controls -->
+				${o?s.html`
+							<div
+								class="absolute left-1/2 -translate-x-1/2 flex items-center gap-4 text-white"
+								style=${(0,a.styleMap)({bottom:`-60px`})}
+							>
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${()=>this.navigatePrev()}
+									aria-label="Previous"
+								>
+									←
+								</button>
+
+								<div class="text-lg">${r+1} / ${n.length}</div>
+
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${()=>this.navigateNext()}
+									aria-label="Next"
+								>
+									→
+								</button>
+							</div>
+						`:``}
+			</div>
+		`,e),c){let t=e.querySelector(`#lightbox-image-container`);if(t){let e=t.querySelector(`[data-lightbox-overlay]`);e&&e.remove(),c.setAttribute(`data-lightbox-overlay`,``),t.appendChild(c)}}}},y=Object.assign(e=>_(e),{push:e=>v.getInstance().push(e),dismiss:()=>v.getInstance().dismiss()});Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});