@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/directives/index.ts

@@ -1,29 +1,29 @@
-export * from './animate-text';
-export * from './ai-badge';
-export * from './art';
-export * from './battery';
-export * from './beta';
-export * from './color';
-export * from './confirm-click';
-export * from './cursor-glow';
-export * from './cycle-text';
-export * from './depth-of-field';
-export * from './drag';
-export * from './fill';
-export * from './fyi';
-export * from './gravity';
-export * from './hummingbird';
-export * from './intersect';
-export * from './layout';
-export * from './liquid';
-export * from './living-border';
-export * from './long-press';
-export * from './magnetic';
-export * from './missed-punch';
-export * from './nebula';
-export * from './reduced-motion';
-export * from './reveal';
-export * from './ripple';
-export * from './overflow-within';
-export * from './urgent';
-export * from './working-snake';
+export * from './animate-text'
+export * from './ai-badge'
+export * from './art'
+export * from './battery'
+export * from './beta'
+export * from './color'
+export * from './confirm-click'
+export * from './cursor-glow'
+export * from './cycle-text'
+export * from './depth-of-field'
+export * from './drag'
+export * from './fill'
+export * from './fyi'
+export * from './gravity'
+export * from './hummingbird'
+export * from './intersect'
+export * from './layout'
+export * from './liquid'
+export * from './living-border'
+export * from './long-press'
+export * from './magnetic'
+export * from './missed-punch'
+export * from './nebula'
+export * from './reduced-motion'
+export * from './reveal'
+export * from './ripple'
+export * from './overflow-within'
+export * from './urgent'
+export * from './working-snake'

package/src/directives/intersect.ts

@@ -69,11 +69,9 @@ interface IntersectState {
 class IntersectDirective extends AsyncDirective {
 	private state: IntersectState | null = null
 
-	render(
-		callbackOrOptions: IntersectCallback | IntersectCallbacks,
-		options?: IntersectOptions,
-	) {
-		void callbackOrOptions; void options
+	render(callbackOrOptions: IntersectCallback | IntersectCallbacks, options?: IntersectOptions) {
+		void callbackOrOptions
+		void options
 		return noChange
 	}
 
@@ -97,7 +95,7 @@ class IntersectDirective extends AsyncDirective {
 			onExit = callbackOrOptions.onExit
 			finalOptions = callbackOrOptions.options || {}
 			// Create a unified callback from enter/exit
-			callback = (isVisible) => {
+			callback = isVisible => {
 				if (isVisible && onEnter) onEnter()
 				if (!isVisible && onExit) onExit()
 			}
@@ -115,7 +113,7 @@ class IntersectDirective extends AsyncDirective {
 
 		// Create observer
 		const observer = new IntersectionObserver(
-			(entries) => {
+			entries => {
 				if (!this.state) return
 				const entry = entries[0]
 				const isVisible = entry.isIntersecting
@@ -125,10 +123,12 @@ class IntersectDirective extends AsyncDirective {
 					if (this.state.delayTimerSub) {
 						this.state.delayTimerSub.unsubscribe()
 					}
-					this.state.delayTimerSub = timer(delay).pipe(
-						take(1),
-						tap(() => this.triggerCallback(isVisible, entry)),
-					).subscribe()
+					this.state.delayTimerSub = timer(delay)
+						.pipe(
+							take(1),
+							tap(() => this.triggerCallback(isVisible, entry)),
+						)
+						.subscribe()
 				} else {
 					// Clear any pending delayed callback if element exits
 					if (!isVisible && this.state.delayTimerSub) {

package/src/directives/layout.ts

@@ -24,16 +24,14 @@ function getUpdateStream(): Subject<void> {
 		const viewportEvents$ = window.visualViewport
 			? merge(
 					fromEvent(window.visualViewport, 'resize', { passive: true }),
-					fromEvent(window.visualViewport, 'scroll', { passive: true })
+					fromEvent(window.visualViewport, 'scroll', { passive: true }),
 				)
 			: windowResize$
 
 		const orientation$ = fromEvent(window, 'orientationchange')
 
 		// iOS Safari: force recalc after keyboard dismissal
-		const focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(
-			switchMap(() => timer(100))
-		)
+		const focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(switchMap(() => timer(100)))
 
 		updateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)
 			.pipe(debounceTime(16))
@@ -50,7 +48,6 @@ function cleanup() {
 	}
 }
 
-
 /**
  * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe
  */
@@ -102,30 +99,25 @@ class FullHeight extends AsyncDirective {
 		const element = this.element
 
 		// Parent resize detects layout shifts (e.g., header rendering after load)
-		const parentResize$ = element.parentElement
-			? fromResizeObserver(element.parentElement)
-			: EMPTY
+		const parentResize$ = element.parentElement ? fromResizeObserver(element.parentElement) : EMPTY
 
 		// Global events (resize, viewport, orientation, fullscreen)
 		const globalEvents$ = getUpdateStream()
 
 		// Combine all sources, calculate height and padding, dedupe, apply
 		// Skip updates while pinch-zoomed to prevent layout thrashing
-		combineLatest([
-			merge(parentResize$, globalEvents$).pipe(startWith(null)),
-			theme.bottomOffset$,
-			theme.fullscreen$
-		]).pipe(
-			filter(() => !isZoomed()),
-			map(([, bottomOffset, isFullscreen]) => ({
-				height: this.calculateHeight(),
-				padding: isFullscreen ? 0 : bottomOffset
-			})),
-			distinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),
-			tap(({ height, padding }) => this.applyStyles(height, padding)),
-			takeUntil(this.disconnecting$)
-		).subscribe()
-
+		combineLatest([merge(parentResize$, globalEvents$).pipe(startWith(null)), theme.bottomOffset$, theme.fullscreen$])
+			.pipe(
+				filter(() => !isZoomed()),
+				map(([, bottomOffset, isFullscreen]) => ({
+					height: this.calculateHeight(),
+					padding: isFullscreen ? 0 : bottomOffset,
+				})),
+				distinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),
+				tap(({ height, padding }) => this.applyStyles(height, padding)),
+				takeUntil(this.disconnecting$),
+			)
+			.subscribe()
 	}
 
 	render() {
@@ -204,9 +196,7 @@ class FullWidth extends AsyncDirective {
 		const elementResize$ = fromResizeObserver(element)
 
 		// Parent resize detects layout shifts (e.g., sidebar opening/closing)
-		const parentResize$ = element.parentElement
-			? fromResizeObserver(element.parentElement)
-			: EMPTY
+		const parentResize$ = element.parentElement ? fromResizeObserver(element.parentElement) : EMPTY
 
 		// Global events (resize, viewport, orientation)
 		const globalEvents$ = getUpdateStream()
@@ -214,16 +204,15 @@ class FullWidth extends AsyncDirective {
 		// Combine all sources with theme observables for synchronous initial emission
 		// theme.fullscreen$ has shareReplay(1) ensuring immediate emission on subscribe
 		// Skip updates while pinch-zoomed to prevent layout thrashing
-		combineLatest([
-			merge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)),
-			theme.fullscreen$
-		]).pipe(
-			filter(() => !isZoomed()),
-			map(() => this.calculateWidth()),
-			distinctUntilChanged(),
-			tap(width => this.applyStyles(width)),
-			takeUntil(this.disconnecting$)
-		).subscribe()
+		combineLatest([merge(elementResize$, parentResize$, globalEvents$).pipe(startWith(null)), theme.fullscreen$])
+			.pipe(
+				filter(() => !isZoomed()),
+				map(() => this.calculateWidth()),
+				distinctUntilChanged(),
+				tap(width => this.applyStyles(width)),
+				takeUntil(this.disconnecting$),
+			)
+			.subscribe()
 	}
 
 	render() {

package/src/directives/liquid.ts

@@ -43,20 +43,14 @@ interface Params {
 }
 
 const INTENSITY: Record<string, Params> = {
-	light:  { blur: 12, sat: 1.3, bright: 1.05, tint: 0.45, border: 0.20, shadow: 0.06 },
+	light: { blur: 12, sat: 1.3, bright: 1.05, tint: 0.45, border: 0.2, shadow: 0.06 },
 	medium: { blur: 16, sat: 1.4, bright: 1.08, tint: 0.55, border: 0.28, shadow: 0.08 },
-	strong: { blur: 24, sat: 1.5, bright: 1.12, tint: 0.65, border: 0.35, shadow: 0.10 },
+	strong: { blur: 24, sat: 1.5, bright: 1.12, tint: 0.65, border: 0.35, shadow: 0.1 },
 }
 
 // Style keys we modify — saved and restored on cleanup
-const STYLE_KEYS = [
-	'backdropFilter',
-	'background',
-	'boxShadow',
-	'borderTop',
-	'borderBottom',
-] as const
-type StyleKey = typeof STYLE_KEYS[number]
+const STYLE_KEYS = ['backdropFilter', 'background', 'boxShadow', 'borderTop', 'borderBottom'] as const
+type StyleKey = (typeof STYLE_KEYS)[number]
 
 interface State {
 	element: HTMLElement

package/src/directives/living-border.ts

@@ -138,15 +138,17 @@ class LivingBorderDirective extends AsyncDirective {
 
 		// RxJS hover listeners with takeUntil cleanup
 		const enter$ = fromEvent(this.element, 'mouseenter').pipe(
-			map(() => { if (this.borderEl) this.borderEl.style.opacity = onHover ? '0.7' : '0.8' }),
+			map(() => {
+				if (this.borderEl) this.borderEl.style.opacity = onHover ? '0.7' : '0.8'
+			}),
 		)
 		const leave$ = fromEvent(this.element, 'mouseleave').pipe(
-			map(() => { if (this.borderEl) this.borderEl.style.opacity = onHover ? '0' : '0.5' }),
+			map(() => {
+				if (this.borderEl) this.borderEl.style.opacity = onHover ? '0' : '0.5'
+			}),
 		)
 
-		merge(enter$, leave$)
-			.pipe(takeUntil(this.teardown$))
-			.subscribe()
+		merge(enter$, leave$).pipe(takeUntil(this.teardown$)).subscribe()
 	}
 
 	private cleanup() {

package/src/directives/long-press.ts

@@ -28,7 +28,8 @@ class LongPressDirective extends Directive {
 	}
 
 	render(callback: () => void, options?: LongPressOptions) {
-		void callback; void options
+		void callback
+		void options
 		// Directives that set up event listeners don't render content
 		return undefined
 	}

package/src/directives/magnetic.ts

@@ -78,12 +78,13 @@ class MagneticDirective extends AsyncDirective {
 
 		const move$ = fromEvent<MouseEvent>(target, 'mousemove').pipe(
 			auditTime(0, animationFrameScheduler),
-			filter(() =>
-				this.element.checkVisibility?.({
-					contentVisibilityAuto: true,
-					checkOpacity: true,
-					checkVisibilityCSS: true,
-				} as CheckVisibilityOptions) ?? true,
+			filter(
+				() =>
+					this.element.checkVisibility?.({
+						contentVisibilityAuto: true,
+						checkOpacity: true,
+						checkVisibilityCSS: true,
+					} as CheckVisibilityOptions) ?? true,
 			),
 			map(e => {
 				const rect = this.cachedRect ?? this.element.getBoundingClientRect()

package/src/directives/nebula.ts

@@ -280,14 +280,16 @@ class NebulaCoordinator {
 		)
 
 		// Tab visibility - batch update via CSS class
-		this.visibilitySub = fromEvent(document, 'visibilitychange').pipe(
-			tap(() => {
-				this.tabVisible = document.visibilityState === 'visible'
-				for (const dir of this.instances) {
-					dir.onVisibilityChange(this.tabVisible)
-				}
-			}),
-		).subscribe()
+		this.visibilitySub = fromEvent(document, 'visibilitychange')
+			.pipe(
+				tap(() => {
+					this.tabVisible = document.visibilityState === 'visible'
+					for (const dir of this.instances) {
+						dir.onVisibilityChange(this.tabVisible)
+					}
+				}),
+			)
+			.subscribe()
 	}
 
 	private teardown(): void {
@@ -679,15 +681,17 @@ class NebulaDirective extends AsyncDirective {
 	private scheduleAutoHide(opts: Required<NebulaOptions>): void {
 		if (!this.state || opts.autoHideDuration <= 0) return
 
-		this.state.autoHideSub = timer(opts.autoHideDuration).pipe(
-			take(1),
-			tap(() => {
-				if (this.state) {
-					this.state.autoHideSub = null
-					this.hide(this.state.options)
-				}
-			}),
-		).subscribe()
+		this.state.autoHideSub = timer(opts.autoHideDuration)
+			.pipe(
+				take(1),
+				tap(() => {
+					if (this.state) {
+						this.state.autoHideSub = null
+						this.hide(this.state.options)
+					}
+				}),
+			)
+			.subscribe()
 	}
 
 	private hide(opts: Required<NebulaOptions>): void {
@@ -734,17 +738,19 @@ class NebulaDirective extends AsyncDirective {
 		// this, chromatic/iridescent/tendril/particle keyframes keep burning GPU under
 		// mix-blend-mode: screen forever even though the stack is visually idle.
 		this.state.fadeFinishedSub?.unsubscribe()
-		this.state.fadeFinishedSub = from(fadeDown.finished).pipe(
-			take(1),
-			tap(() => {
-				if (!this.state?.overlay) return
-				this.state.overlay.classList.add('dimmed')
-				if (opts.idleBreathe && !reducedMotion) {
-					this.state.overlay.style.animation = `nebula-idle-breathe ${12000 / currentOpts.speed}ms ${BREATHING_EASING} infinite`
-				}
-			}),
-			catchError(() => EMPTY),
-		).subscribe()
+		this.state.fadeFinishedSub = from(fadeDown.finished)
+			.pipe(
+				take(1),
+				tap(() => {
+					if (!this.state?.overlay) return
+					this.state.overlay.classList.add('dimmed')
+					if (opts.idleBreathe && !reducedMotion) {
+						this.state.overlay.style.animation = `nebula-idle-breathe ${12000 / currentOpts.speed}ms ${BREATHING_EASING} infinite`
+					}
+				}),
+				catchError(() => EMPTY),
+			)
+			.subscribe()
 	}
 
 	private cleanup(): void {

package/src/directives/overflow-within.ts

@@ -6,27 +6,25 @@ import { Subject, debounceTime, filter, fromEvent, takeUntil } from 'rxjs'
 /**
  * Detail payload for the directive's enriched `scroll` event.
  */
-export interface OverflowWithinEvent
-	extends CustomEvent<{
-		scrollTop: number
-		scrollHeight: number
-		clientHeight: number
-		scrollLeft: number
-		scrollWidth: number
-		clientWidth: number
-		e: Event
-	}> {}
+export interface OverflowWithinEvent extends CustomEvent<{
+	scrollTop: number
+	scrollHeight: number
+	clientHeight: number
+	scrollLeft: number
+	scrollWidth: number
+	clientWidth: number
+	e: Event
+}> {}
 
 /**
  * Detail payload for the global `@schmancy:scrollTo` command.
  */
-export interface OverflowWithinCommandEvent
-	extends CustomEvent<{
-		name: string
-		action: 'scrollTo'
-		top: number
-		left?: number
-	}> {}
+export interface OverflowWithinCommandEvent extends CustomEvent<{
+	name: string
+	action: 'scrollTo'
+	top: number
+	left?: number
+}> {}
 
 export interface OverflowWithinOptions {
 	/** Hide native scrollbars while keeping scroll behavior intact. */
@@ -139,7 +137,7 @@ class OverflowWithinDirective extends AsyncDirective {
 
 		fromEvent(el, 'scroll', { passive: true })
 			.pipe(debounceTime(debounce), takeUntil(this.disconnecting$))
-			.subscribe((e) => {
+			.subscribe(e => {
 				el.dispatchEvent(
 					new CustomEvent('scroll', {
 						detail: {
@@ -160,10 +158,10 @@ class OverflowWithinDirective extends AsyncDirective {
 		if (name !== undefined) {
 			fromEvent<OverflowWithinCommandEvent>(window, '@schmancy:scrollTo')
 				.pipe(
-					filter((evt) => evt.detail.name === name && evt.detail.action === 'scrollTo'),
+					filter(evt => evt.detail.name === name && evt.detail.action === 'scrollTo'),
 					takeUntil(this.disconnecting$),
 				)
-				.subscribe((evt) => {
+				.subscribe(evt => {
 					const options: ScrollToOptions = { behavior: 'smooth', top: evt.detail.top }
 					if (typeof evt.detail.left === 'number') options.left = evt.detail.left
 					el.scrollTo(options)

package/src/directives/reduced-motion.ts

@@ -13,18 +13,18 @@ import { map, startWith } from 'rxjs/operators'
  * if (reducedMotion$.value) return // skip animation
  * ```
  */
-const mediaQuery = typeof window !== 'undefined'
-	? window.matchMedia('(prefers-reduced-motion: reduce)')
-	: undefined
+const mediaQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined
 
 export const reducedMotion$ = new BehaviorSubject<boolean>(mediaQuery?.matches ?? false)
 
 // Reactively listen for changes via RxJS
 if (mediaQuery) {
-	fromEvent<MediaQueryListEvent>(mediaQuery, 'change').pipe(
-		map(e => e.matches),
-		startWith(mediaQuery.matches),
-	).subscribe(matches => {
-		reducedMotion$.next(matches)
-	})
+	fromEvent<MediaQueryListEvent>(mediaQuery, 'change')
+		.pipe(
+			map(e => e.matches),
+			startWith(mediaQuery.matches),
+		)
+		.subscribe(matches => {
+			reducedMotion$.next(matches)
+		})
 }