@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/directives/reveal.ts

@@ -31,209 +31,207 @@
  * @see packages/schmancy/src/utils/animation.ts for Blackbird system
  */
 
-import { noChange } from 'lit';
-import { AsyncDirective, directive } from 'lit/async-directive.js';
-import { type ElementPart, type PartInfo, PartType } from 'lit/directive.js';
-import { fromEvent, Subject } from 'rxjs';
-import { filter, take, takeUntil } from 'rxjs/operators';
+import { noChange } from 'lit'
+import { AsyncDirective, directive } from 'lit/async-directive.js'
+import { type ElementPart, type PartInfo, PartType } from 'lit/directive.js'
+import { fromEvent, Subject } from 'rxjs'
+import { filter, take, takeUntil } from 'rxjs/operators'
 import {
-  type AnimationPreset,
-  getEasing,
-  SPRING_BOUNCY,
-  SPRING_GENTLE,
-  SPRING_SMOOTH,
-  SPRING_SNAPPY,
-} from '../utils/animation';
-import { reducedMotion$ } from './reduced-motion';
+	type AnimationPreset,
+	getEasing,
+	SPRING_BOUNCY,
+	SPRING_GENTLE,
+	SPRING_SMOOTH,
+	SPRING_SNAPPY,
+} from '../utils/animation'
+import { reducedMotion$ } from './reduced-motion'
 
-export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
+export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle'
 
 export interface RevealOptions {
-  /** Animation preset (default: 'smooth') */
-  preset?: RevealPreset;
-  /**
-   * Explicit scroll cap (opt-in). When set the element is constrained to
-   * this height with overflow:auto — content scrolls rather than clips.
-   * When omitted (the default) the element is fully unconstrained after
-   * opening: no max-height, no overflow:hidden left on it.
-   */
-  maxHeight?: string;
-  /** Custom duration override in ms (uses preset duration if not specified) */
-  duration?: number;
-  /** Custom easing override (uses preset easing if not specified) */
-  easing?: string;
+	/** Animation preset (default: 'smooth') */
+	preset?: RevealPreset
+	/**
+	 * Explicit scroll cap (opt-in). When set the element is constrained to
+	 * this height with overflow:auto — content scrolls rather than clips.
+	 * When omitted (the default) the element is fully unconstrained after
+	 * opening: no max-height, no overflow:hidden left on it.
+	 */
+	maxHeight?: string
+	/** Custom duration override in ms (uses preset duration if not specified) */
+	duration?: number
+	/** Custom easing override (uses preset easing if not specified) */
+	easing?: string
 }
 
 const PRESETS: Record<RevealPreset, AnimationPreset> = {
-  smooth: SPRING_SMOOTH,
-  snappy: SPRING_SNAPPY,
-  bouncy: SPRING_BOUNCY,
-  gentle: SPRING_GENTLE,
-};
+	smooth: SPRING_SMOOTH,
+	snappy: SPRING_SNAPPY,
+	bouncy: SPRING_BOUNCY,
+	gentle: SPRING_GENTLE,
+}
 
 class RevealDirective extends AsyncDirective {
-  private initialized = false;
-  /** Fires on disconnect to tear down the transitionend subscription. */
-  private teardown$ = new Subject<void>();
-  /** True if this is the very first update call — used to detect always-true initial mount. */
-  private firstUpdate = true;
-  /** Previous show value — animation only fires on false→true transitions. */
-  private prevShow: boolean | undefined = undefined;
-
-  constructor(partInfo: PartInfo) {
-    super(partInfo);
-    if (partInfo.type !== PartType.ELEMENT) {
-      throw new Error('reveal() can only be used on elements');
-    }
-  }
-
-  render(show?: boolean, options?: RevealOptions) {
-    void show; void options;
-    return noChange;
-  }
-
-  override update(
-    part: ElementPart,
-    [show = false, options = {}]: [boolean | undefined, RevealOptions?],
-  ) {
-    const element = part.element as HTMLElement;
-
-    const { preset = 'smooth', maxHeight, duration, easing } = options;
-    const explicitCap = maxHeight !== undefined;
-
-    const presetConfig = PRESETS[preset];
-    const actualDuration = duration ?? presetConfig.duration;
-    const actualEasing = easing ?? getEasing(presetConfig);
-    const reducedMotion = reducedMotion$.value;
-
-    const isFirstUpdate = this.firstUpdate;
-    this.firstUpdate = false;
-    const didChange = show !== this.prevShow;
-    this.prevShow = show;
-
-    if (!this.initialized) {
-      this.initialized = true;
-
-      if (reducedMotion) {
-        element.style.transition = 'none';
-      } else {
-        element.style.transition = [
-          `max-height ${actualDuration}ms ${actualEasing}`,
-          `opacity ${actualDuration}ms ${actualEasing}`,
-          `transform ${actualDuration}ms ${actualEasing}`,
-          `padding ${actualDuration}ms ${actualEasing}`,
-          `margin ${actualDuration}ms ${actualEasing}`,
-        ].join(', ');
-      }
-    }
-
-    if (show) {
-      if (isFirstUpdate) {
-        // Always-true initial mount: do not impose max-height animation.
-        // Apply opacity/transform entrance only (visible immediately for
-        // reduced-motion; fades in via the transition for normal motion).
-        if (explicitCap) {
-          element.style.maxHeight = maxHeight;
-          element.style.overflow = 'auto';
-        } else {
-          element.style.maxHeight = '';
-          element.style.overflow = '';
-        }
-        element.style.opacity = '1';
-        element.style.transform = 'translateY(0) scale(1)';
-      } else if (didChange) {
-        // Toggle case: false→true. Animate from 0 to natural height,
-        // then release the clamp so content is fully unconstrained.
-        // Guard: skip when show stays true across re-renders — re-animating
-        // every render causes the overlay to resize and flicker on every tick.
-        if (reducedMotion) {
-          if (explicitCap) {
-            element.style.maxHeight = maxHeight;
-            element.style.overflow = 'auto';
-          } else {
-            element.style.maxHeight = '';
-            element.style.overflow = '';
-          }
-          element.style.opacity = '1';
-          element.style.transform = 'translateY(0) scale(1)';
-        } else {
-          // Force a concrete start value so CSS can animate from it.
-          element.style.overflow = 'hidden';
-          element.style.maxHeight = '0';
-          void element.offsetHeight; // force reflow
-
-          const targetHeight = explicitCap ? maxHeight : `${element.scrollHeight}px`;
-          element.style.maxHeight = targetHeight;
-          element.style.opacity = '1';
-          element.style.transform = 'translateY(0) scale(1)';
-
-          if (!explicitCap) {
-            // Once the open animation settles, release the clamp entirely.
-            fromEvent<TransitionEvent>(element, 'transitionend')
-              .pipe(
-                filter((e) => e.propertyName === 'max-height' && e.target === element),
-                take(1),
-                takeUntil(this.teardown$),
-              )
-              .subscribe(() => {
-                element.style.maxHeight = '';
-                element.style.overflow = '';
-              });
-          } else {
-            fromEvent<TransitionEvent>(element, 'transitionend')
-              .pipe(
-                filter((e) => e.propertyName === 'max-height' && e.target === element),
-                take(1),
-                takeUntil(this.teardown$),
-              )
-              .subscribe(() => {
-                element.style.overflow = 'auto';
-              });
-          }
-        }
-      }
-
-      element.style.pointerEvents = '';
-      element.style.paddingTop = '';
-      element.style.paddingBottom = '';
-      element.style.marginTop = '';
-      element.style.marginBottom = '';
-      element.removeAttribute('aria-hidden');
-      element.removeAttribute('inert');
-    } else {
-      // Collapse: animate to height 0. Re-measure from natural height if
-      // the clamp was previously released (max-height is '' or 'none').
-      if (element.style.maxHeight === '' || element.style.maxHeight === 'none') {
-        element.style.overflow = 'hidden';
-        element.style.maxHeight = `${element.scrollHeight}px`;
-        void element.offsetHeight; // force reflow so CSS sees the start value
-      } else {
-        element.style.overflow = 'hidden';
-      }
-
-      element.style.maxHeight = '0';
-      element.style.opacity = '0';
-      element.style.transform = 'translateY(-8px) scale(0.98)';
-      element.style.pointerEvents = 'none';
-      element.style.paddingTop = '0';
-      element.style.paddingBottom = '0';
-      element.style.marginTop = '0';
-      element.style.marginBottom = '0';
-      element.setAttribute('aria-hidden', 'true');
-      element.setAttribute('inert', '');
-    }
-
-    return noChange;
-  }
-
-  override disconnected(): void {
-    this.teardown$.next();
-  }
-
-  override reconnected(): void {
-    // Re-subscribe is handled on the next update() call via the new subscription
-    // created in the show branch. Nothing to wire up here explicitly.
-  }
+	private initialized = false
+	/** Fires on disconnect to tear down the transitionend subscription. */
+	private teardown$ = new Subject<void>()
+	/** True if this is the very first update call — used to detect always-true initial mount. */
+	private firstUpdate = true
+	/** Previous show value — animation only fires on false→true transitions. */
+	private prevShow: boolean | undefined = undefined
+
+	constructor(partInfo: PartInfo) {
+		super(partInfo)
+		if (partInfo.type !== PartType.ELEMENT) {
+			throw new Error('reveal() can only be used on elements')
+		}
+	}
+
+	render(show?: boolean, options?: RevealOptions) {
+		void show
+		void options
+		return noChange
+	}
+
+	override update(part: ElementPart, [show = false, options = {}]: [boolean | undefined, RevealOptions?]) {
+		const element = part.element as HTMLElement
+
+		const { preset = 'smooth', maxHeight, duration, easing } = options
+		const explicitCap = maxHeight !== undefined
+
+		const presetConfig = PRESETS[preset]
+		const actualDuration = duration ?? presetConfig.duration
+		const actualEasing = easing ?? getEasing(presetConfig)
+		const reducedMotion = reducedMotion$.value
+
+		const isFirstUpdate = this.firstUpdate
+		this.firstUpdate = false
+		const didChange = show !== this.prevShow
+		this.prevShow = show
+
+		if (!this.initialized) {
+			this.initialized = true
+
+			if (reducedMotion) {
+				element.style.transition = 'none'
+			} else {
+				element.style.transition = [
+					`max-height ${actualDuration}ms ${actualEasing}`,
+					`opacity ${actualDuration}ms ${actualEasing}`,
+					`transform ${actualDuration}ms ${actualEasing}`,
+					`padding ${actualDuration}ms ${actualEasing}`,
+					`margin ${actualDuration}ms ${actualEasing}`,
+				].join(', ')
+			}
+		}
+
+		if (show) {
+			if (isFirstUpdate) {
+				// Always-true initial mount: do not impose max-height animation.
+				// Apply opacity/transform entrance only (visible immediately for
+				// reduced-motion; fades in via the transition for normal motion).
+				if (explicitCap) {
+					element.style.maxHeight = maxHeight
+					element.style.overflow = 'auto'
+				} else {
+					element.style.maxHeight = ''
+					element.style.overflow = ''
+				}
+				element.style.opacity = '1'
+				element.style.transform = 'translateY(0) scale(1)'
+			} else if (didChange) {
+				// Toggle case: false→true. Animate from 0 to natural height,
+				// then release the clamp so content is fully unconstrained.
+				// Guard: skip when show stays true across re-renders — re-animating
+				// every render causes the overlay to resize and flicker on every tick.
+				if (reducedMotion) {
+					if (explicitCap) {
+						element.style.maxHeight = maxHeight
+						element.style.overflow = 'auto'
+					} else {
+						element.style.maxHeight = ''
+						element.style.overflow = ''
+					}
+					element.style.opacity = '1'
+					element.style.transform = 'translateY(0) scale(1)'
+				} else {
+					// Force a concrete start value so CSS can animate from it.
+					element.style.overflow = 'hidden'
+					element.style.maxHeight = '0'
+					void element.offsetHeight // force reflow
+
+					const targetHeight = explicitCap ? maxHeight : `${element.scrollHeight}px`
+					element.style.maxHeight = targetHeight
+					element.style.opacity = '1'
+					element.style.transform = 'translateY(0) scale(1)'
+
+					if (!explicitCap) {
+						// Once the open animation settles, release the clamp entirely.
+						fromEvent<TransitionEvent>(element, 'transitionend')
+							.pipe(
+								filter(e => e.propertyName === 'max-height' && e.target === element),
+								take(1),
+								takeUntil(this.teardown$),
+							)
+							.subscribe(() => {
+								element.style.maxHeight = ''
+								element.style.overflow = ''
+							})
+					} else {
+						fromEvent<TransitionEvent>(element, 'transitionend')
+							.pipe(
+								filter(e => e.propertyName === 'max-height' && e.target === element),
+								take(1),
+								takeUntil(this.teardown$),
+							)
+							.subscribe(() => {
+								element.style.overflow = 'auto'
+							})
+					}
+				}
+			}
+
+			element.style.pointerEvents = ''
+			element.style.paddingTop = ''
+			element.style.paddingBottom = ''
+			element.style.marginTop = ''
+			element.style.marginBottom = ''
+			element.removeAttribute('aria-hidden')
+			element.removeAttribute('inert')
+		} else {
+			// Collapse: animate to height 0. Re-measure from natural height if
+			// the clamp was previously released (max-height is '' or 'none').
+			if (element.style.maxHeight === '' || element.style.maxHeight === 'none') {
+				element.style.overflow = 'hidden'
+				element.style.maxHeight = `${element.scrollHeight}px`
+				void element.offsetHeight // force reflow so CSS sees the start value
+			} else {
+				element.style.overflow = 'hidden'
+			}
+
+			element.style.maxHeight = '0'
+			element.style.opacity = '0'
+			element.style.transform = 'translateY(-8px) scale(0.98)'
+			element.style.pointerEvents = 'none'
+			element.style.paddingTop = '0'
+			element.style.paddingBottom = '0'
+			element.style.marginTop = '0'
+			element.style.marginBottom = '0'
+			element.setAttribute('aria-hidden', 'true')
+			element.setAttribute('inert', '')
+		}
+
+		return noChange
+	}
+
+	override disconnected(): void {
+		this.teardown$.next()
+	}
+
+	override reconnected(): void {
+		// Re-subscribe is handled on the next update() call via the new subscription
+		// created in the show branch. Nothing to wire up here explicitly.
+	}
 }
 
-export const reveal = directive(RevealDirective);
+export const reveal = directive(RevealDirective)

package/src/directives/ripple.ts

@@ -61,18 +61,18 @@ class RippleDirective extends AsyncDirective {
 
 		this.teardown$.next()
 
-		fromEvent<MouseEvent>(this.element, 'click').pipe(
-			takeUntil(this.teardown$),
-		).subscribe(e => this.addRipple(e))
+		fromEvent<MouseEvent>(this.element, 'click')
+			.pipe(takeUntil(this.teardown$))
+			.subscribe(e => this.addRipple(e))
 
 		return undefined
 	}
 
 	override reconnected() {
 		this.teardown$.next()
-		fromEvent<MouseEvent>(this.element, 'click').pipe(
-			takeUntil(this.teardown$),
-		).subscribe(e => this.addRipple(e))
+		fromEvent<MouseEvent>(this.element, 'click')
+			.pipe(takeUntil(this.teardown$))
+			.subscribe(e => this.addRipple(e))
 	}
 
 	private addRipple(event: MouseEvent) {
@@ -91,7 +91,9 @@ class RippleDirective extends AsyncDirective {
 		this.element.appendChild(circle)
 
 		// Remove after animation completes
-		fromEvent(circle, 'animationend').pipe(take(1)).subscribe(() => circle.remove())
+		fromEvent(circle, 'animationend')
+			.pipe(take(1))
+			.subscribe(() => circle.remove())
 	}
 
 	override disconnected() {

package/src/directives/urgent.ts

@@ -387,7 +387,9 @@ class UrgentDirective extends AsyncDirective {
 	private coordinator = UrgentCoordinator.getInstance()
 
 	render(activeOrOptions?: boolean | UrgentOptions, color?: UrgentColor, shake?: boolean) {
-		void activeOrOptions; void color; void shake
+		void activeOrOptions
+		void color
+		void shake
 		return noChange
 	}
 

package/src/directives/working-snake.ts

@@ -202,7 +202,7 @@ class WorkingSnakeDirective extends AsyncDirective {
 					}
 				}
 			},
-			{ threshold: 0 }
+			{ threshold: 0 },
 		)
 
 		this.state.observer.observe(this.state.element)