@mhmo91/schmancy 0.8.6 → 0.9.3

package/src/directives/layout.ts

@@ -0,0 +1,261 @@
+import { directive, ElementPart, PartType } from 'lit/directive.js'
+import { AsyncDirective } from 'lit/async-directive.js'
+import { Subject, fromEvent, merge, Observable, EMPTY, timer, combineLatest } from 'rxjs'
+import { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith, filter } from 'rxjs/operators'
+
+/** Returns true if user is pinch-zoomed (scale !== 1) */
+function isZoomed(): boolean {
+	const vv = window.visualViewport
+	return vv ? Math.abs(vv.scale - 1) > 0.01 : false
+}
+import { theme } from '../theme/theme.service'
+
+// Shared global update stream (lazy-initialized, cleaned up when no elements use it)
+let update$: Subject<void> | null = null
+let updateSub: { unsubscribe: () => void } | null = null
+let elementCount = 0
+
+function getUpdateStream(): Subject<void> {
+	if (!update$) {
+		update$ = new Subject<void>()
+
+		const windowResize$ = fromEvent(window, 'resize', { passive: true })
+
+		const viewportEvents$ = window.visualViewport
+			? merge(
+					fromEvent(window.visualViewport, 'resize', { 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))
+		)
+
+		updateSub = merge(windowResize$, viewportEvents$, orientation$, focusOut$)
+			.pipe(debounceTime(16))
+			.subscribe(() => update$!.next())
+	}
+	return update$
+}
+
+function cleanup() {
+	if (elementCount === 0 && updateSub) {
+		updateSub.unsubscribe()
+		updateSub = null
+		update$ = null
+	}
+}
+
+
+/**
+ * RxJS wrapper for ResizeObserver - auto-cleans on unsubscribe
+ */
+export function fromResizeObserver(element: Element): Observable<ResizeObserverEntry[]> {
+	return new Observable(subscriber => {
+		const observer = new ResizeObserver(entries => subscriber.next(entries))
+		observer.observe(element)
+		return () => observer.disconnect()
+	})
+}
+
+/**
+ * fullHeight directive - fills remaining viewport space
+ *
+ * Reactive sources:
+ * - Parent ResizeObserver (layout shifts)
+ * - Window resize / visualViewport (viewport changes)
+ * - Orientation change (device rotation)
+ * - Focus out (mobile keyboard dismiss)
+ * - Theme fullscreen toggle
+ *
+ * Performance:
+ * - distinctUntilChanged prevents redundant style writes
+ * - debounceTime(16) batches rapid events (~60fps)
+ * - Single shared stream for global events
+ */
+class FullHeight extends AsyncDirective {
+	private element: HTMLElement | null = null
+	private disconnecting$ = new Subject<void>()
+
+	private calculateHeight(): number {
+		if (!this.element) return 0
+		const viewportHeight = window.visualViewport?.height ?? window.innerHeight
+		const topOffset = this.element.getBoundingClientRect().top
+		return Math.max(0, viewportHeight - topOffset)
+	}
+
+	private applyStyles(height: number, bottomPadding: number) {
+		if (this.element) {
+			this.element.style.boxSizing = 'border-box'
+			this.element.style.height = `${height}px`
+			this.element.style.paddingBottom = `${bottomPadding}px`
+		}
+	}
+
+	private setupHeightStream() {
+		if (!this.element) return
+
+		const element = this.element
+
+		// Parent resize detects layout shifts (e.g., header rendering after load)
+		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()
+
+	}
+
+	render() {
+		return
+	}
+
+	update(part: ElementPart) {
+		if (part.type !== PartType.ELEMENT) {
+			throw new Error('fullHeight directive can only be used on elements')
+		}
+		const el = part.element as HTMLElement
+		if (this.element !== el) {
+			this.element = el
+			elementCount++
+			this.setupHeightStream()
+		}
+	}
+
+	disconnected() {
+		this.disconnecting$.next()
+		elementCount--
+		cleanup()
+		this.element = null
+	}
+
+	reconnected() {
+		if (this.element) {
+			elementCount++
+			this.disconnecting$ = new Subject<void>()
+			this.setupHeightStream()
+		}
+	}
+}
+
+export const fullHeight = directive(FullHeight)
+
+/**
+ * fullWidth directive - fills remaining horizontal viewport space
+ *
+ * Reactive sources:
+ * - Element ResizeObserver (detects when element moves/resizes)
+ * - Parent ResizeObserver (layout shifts, e.g., sidebar)
+ * - Window resize / visualViewport (viewport changes)
+ * - Orientation change (device rotation)
+ * - Theme fullscreen toggle (sidebar visibility)
+ *
+ * Performance:
+ * - distinctUntilChanged prevents redundant style writes
+ * - debounceTime(16) batches rapid events (~60fps)
+ * - Single shared stream for global events
+ */
+class FullWidth extends AsyncDirective {
+	private element: HTMLElement | null = null
+	private disconnecting$ = new Subject<void>()
+
+	private calculateWidth(): number {
+		if (!this.element) return 0
+		const viewportWidth = window.visualViewport?.width ?? window.innerWidth
+		const leftOffset = this.element.getBoundingClientRect().left
+		return Math.max(0, viewportWidth - leftOffset)
+	}
+
+	private applyStyles(width: number) {
+		if (this.element) {
+			this.element.style.boxSizing = 'border-box'
+			this.element.style.maxWidth = `${width}px`
+		}
+	}
+
+	private setupWidthStream() {
+		if (!this.element) return
+
+		const element = this.element
+
+		// Element resize detects when element itself moves (e.g., after layout settles)
+		const elementResize$ = fromResizeObserver(element)
+
+		// Parent resize detects layout shifts (e.g., sidebar opening/closing)
+		const parentResize$ = element.parentElement
+			? fromResizeObserver(element.parentElement)
+			: EMPTY
+
+		// Global events (resize, viewport, orientation)
+		const globalEvents$ = getUpdateStream()
+
+		// 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()
+	}
+
+	render() {
+		return
+	}
+
+	update(part: ElementPart) {
+		if (part.type !== PartType.ELEMENT) {
+			throw new Error('fullWidth directive can only be used on elements')
+		}
+		const el = part.element as HTMLElement
+		if (this.element !== el) {
+			this.element = el
+			elementCount++
+			this.setupWidthStream()
+		}
+	}
+
+	disconnected() {
+		this.disconnecting$.next()
+		elementCount--
+		cleanup()
+		this.element = null
+	}
+
+	reconnected() {
+		if (this.element) {
+			elementCount++
+			this.disconnecting$ = new Subject<void>()
+			this.setupWidthStream()
+		}
+	}
+}
+
+export const fullWidth = directive(FullWidth)

package/src/directives/liquid.ts

@@ -0,0 +1,150 @@
+/**
+ * Liquid Glass Directive — Apple WWDC 2025 Liquid Glass
+ *
+ * Pure CSS, zero DOM mutation. Applies only inline styles to the host element:
+ * - backdrop-filter: blur + saturate + brightness (glass material)
+ * - background: semi-transparent tint (glass visibility layer)
+ * - box-shadow: Fresnel edge glow (inset) + depth shadow (outer)
+ * - border: thin luminous edge
+ *
+ * Does NOT insert any child elements, so it's safe on flex/grid containers.
+ *
+ * Usage:
+ * ```ts
+ * html`<div ${liquid()}>Content</div>`
+ * html`<div ${liquid({ intensity: 'strong' })}>Thick glass</div>`
+ * html`<div ${liquid({ active: false })}>No glass</div>`
+ * ```
+ */
+
+import { noChange } from 'lit'
+import { AsyncDirective, directive } from 'lit/async-directive.js'
+import type { ElementPart } from 'lit'
+
+export interface LiquidOptions {
+	/** Whether the effect is active. Default: true */
+	active?: boolean
+	/** Glass thickness. Default: 'medium' */
+	intensity?: 'light' | 'medium' | 'strong'
+}
+
+const DEFAULTS: Required<LiquidOptions> = {
+	active: true,
+	intensity: 'medium',
+}
+
+interface Params {
+	blur: number
+	sat: number
+	bright: number
+	tint: number
+	border: number
+	shadow: number
+}
+
+const INTENSITY: Record<string, Params> = {
+	light:  { blur: 12, sat: 1.3, bright: 1.05, tint: 0.45, border: 0.20, 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 },
+}
+
+// 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]
+
+interface State {
+	element: HTMLElement
+	origStyles: Record<StyleKey, string>
+}
+
+class LiquidDirective extends AsyncDirective {
+	private state: State | null = null
+
+	render(_options?: LiquidOptions) {
+		return noChange
+	}
+
+	override update(part: ElementPart, [options = {}]: [LiquidOptions?]) {
+		const el = part.element as HTMLElement
+		const opts = { ...DEFAULTS, ...options }
+
+		if (opts.active) {
+			this.activate(el, opts)
+		} else {
+			this.cleanup()
+		}
+		return noChange
+	}
+
+	private activate(el: HTMLElement, opts: Required<LiquidOptions>): void {
+		if (!this.isConnected) return
+		const p = INTENSITY[opts.intensity]
+
+		if (!this.state) {
+			// Save original styles
+			const origStyles = {} as Record<StyleKey, string>
+			for (const key of STYLE_KEYS) {
+				origStyles[key] = el.style[key]
+			}
+			this.state = { element: el, origStyles }
+		}
+
+		this.applyStyles(el, p)
+	}
+
+	private applyStyles(el: HTMLElement, p: Params): void {
+		// Glass material
+		const bdFilter = `blur(${p.blur}px) saturate(${p.sat}) brightness(${p.bright})`
+		el.style.backdropFilter = bdFilter
+		el.style.setProperty('-webkit-backdrop-filter', bdFilter)
+
+		// Glass tint (uses theme surface color, adapts to light/dark)
+		el.style.background = `rgba(var(--md-sys-color-surface-container, 255 255 255) / ${p.tint})`
+
+		// Fresnel edge glow (inset) + depth shadow (outer)
+		const b = p.border
+		el.style.boxShadow = [
+			// Top Fresnel rim — bright edge (directional light from above)
+			`inset 0 1px 0 0 rgba(255,255,255, ${b * 1.5})`,
+			`inset 0 2px 6px rgba(255,255,255, ${b * 0.6})`,
+			// Bottom subtle rim
+			`inset 0 -1px 0 0 rgba(255,255,255, ${b * 0.25})`,
+			// Depth shadows
+			`0 1px 3px rgba(0,0,0, ${p.shadow})`,
+			`0 6px 20px rgba(0,0,0, ${p.shadow * 0.5})`,
+		].join(', ')
+
+		// Luminous border edges
+		el.style.borderTop = `0.5px solid rgba(255,255,255, ${b * 0.9})`
+		el.style.borderBottom = `0.5px solid rgba(0,0,0, 0.05)`
+	}
+
+	private cleanup(): void {
+		if (!this.state) return
+		const { element, origStyles } = this.state
+
+		// Restore all original styles
+		for (const key of STYLE_KEYS) {
+			element.style[key] = origStyles[key]
+		}
+		element.style.removeProperty('-webkit-backdrop-filter')
+
+		this.state = null
+	}
+
+	override disconnected(): void {
+		this.cleanup()
+	}
+
+	override reconnected(): void {
+		// Will re-activate on next update()
+	}
+}
+
+export const liquid = directive(LiquidDirective)

package/src/directives/living-border.ts

@@ -0,0 +1,166 @@
+import { directive, type ElementPart, PartType } from 'lit/directive.js'
+import { AsyncDirective } from 'lit/async-directive.js'
+import { fromEvent, merge, Subject } from 'rxjs'
+import { map, takeUntil } from 'rxjs/operators'
+import { reducedMotion$ } from './reduced-motion'
+
+export interface LivingBorderOptions {
+	/** Animation duration in ms (default: 3000) */
+	duration?: number
+	/** Border width in pixels (default: 1) */
+	width?: number
+	/** Glow color (default: primary) */
+	color?: string
+	/** Glow spread in pixels (default: 6) */
+	spread?: number
+	/** Only animate on hover (default: false) */
+	onHover?: boolean
+}
+
+// Shared style for ALL instances — single @property + @keyframes
+const SHARED_ANIM_NAME = 'schmancy-lb-rotate'
+let sharedStyleInjected = false
+
+function ensureSharedStyle() {
+	if (sharedStyleInjected) return
+	const style = document.createElement('style')
+	style.id = 'schmancy-living-border-shared'
+	style.textContent = `
+		@property --${SHARED_ANIM_NAME}-angle {
+			syntax: '<angle>';
+			initial-value: 0deg;
+			inherits: false;
+		}
+		@keyframes ${SHARED_ANIM_NAME} {
+			to { --${SHARED_ANIM_NAME}-angle: 360deg; }
+		}
+	`
+	document.head.appendChild(style)
+	sharedStyleInjected = true
+}
+
+/**
+ * Living border directive — a gradient light traces the element's edges.
+ *
+ * @example
+ * ```html
+ * <schmancy-card ${livingBorder()}>content</schmancy-card>
+ * <div ${livingBorder({ duration: 4000, onHover: true })}>panel</div>
+ * ```
+ */
+class LivingBorderDirective extends AsyncDirective {
+	private element!: HTMLElement
+	private borderEl?: HTMLElement
+	private readonly teardown$ = new Subject<void>()
+	private prevKey?: string
+	private didSetPosition = false
+	private lastOptions?: LivingBorderOptions
+
+	render(_options?: LivingBorderOptions) {
+		return undefined
+	}
+
+	override update(part: ElementPart, [options]: [LivingBorderOptions?]) {
+		if (part.type !== PartType.ELEMENT) {
+			throw new Error('livingBorder directive must be used on an element')
+		}
+
+		const key = JSON.stringify(options ?? {})
+		if (this.element && key === this.prevKey) return undefined
+		this.prevKey = key
+
+		this.element = part.element as HTMLElement
+		this.lastOptions = options
+		if (reducedMotion$.value) return undefined
+
+		this.teardown$.next()
+		this.cleanup()
+		ensureSharedStyle()
+		this.createBorderOverlay(options)
+
+		return undefined
+	}
+
+	override reconnected() {
+		// Re-create border directly — don't rely on update()
+		if (this.lastOptions && !reducedMotion$.value) {
+			ensureSharedStyle()
+			this.createBorderOverlay(this.lastOptions)
+		}
+	}
+
+	private createBorderOverlay(options?: LivingBorderOptions) {
+		const width = options?.width ?? 1
+		const color = options?.color ?? 'var(--schmancy-sys-color-primary-default)'
+		const spread = options?.spread ?? 6
+		const duration = options?.duration ?? 3000
+		const onHover = options?.onHover ?? false
+
+		const pos = getComputedStyle(this.element).position
+		if (pos === 'static') {
+			this.element.style.position = 'relative'
+			this.didSetPosition = true
+		}
+
+		this.borderEl = document.createElement('div')
+		this.borderEl.setAttribute('aria-hidden', 'true')
+
+		const inset = `-${width}px`
+		Object.assign(this.borderEl.style, {
+			position: 'absolute',
+			top: inset,
+			left: inset,
+			right: inset,
+			bottom: inset,
+			borderRadius: 'inherit',
+			pointerEvents: 'none',
+			zIndex: '0',
+			background: `conic-gradient(
+				from var(--${SHARED_ANIM_NAME}-angle),
+				transparent 0%, transparent 30%,
+				color-mix(in srgb, ${color} 50%, transparent) 45%,
+				${color} 50%,
+				color-mix(in srgb, ${color} 50%, transparent) 55%,
+				transparent 70%, transparent 100%
+			)`,
+			mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+			maskComposite: 'exclude',
+			WebkitMaskComposite: 'xor',
+			padding: `${width}px`,
+			animation: `${SHARED_ANIM_NAME} ${duration}ms linear infinite`,
+			filter: `blur(${spread * 0.3}px) drop-shadow(0 0 ${spread}px color-mix(in srgb, ${color} 40%, transparent))`,
+			opacity: onHover ? '0' : '0.5',
+			transition: 'opacity 300ms ease',
+		})
+
+		this.element.prepend(this.borderEl)
+
+		// 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' }),
+		)
+		const leave$ = fromEvent(this.element, 'mouseleave').pipe(
+			map(() => { if (this.borderEl) this.borderEl.style.opacity = onHover ? '0' : '0.5' }),
+		)
+
+		merge(enter$, leave$)
+			.pipe(takeUntil(this.teardown$))
+			.subscribe()
+	}
+
+	private cleanup() {
+		this.borderEl?.remove()
+		this.borderEl = undefined
+	}
+
+	override disconnected() {
+		this.teardown$.next()
+		this.cleanup()
+		if (this.didSetPosition && this.element) {
+			this.element.style.position = ''
+			this.didSetPosition = false
+		}
+	}
+}
+
+export const livingBorder = directive(LivingBorderDirective)