@mhmo91/schmancy 0.10.32 → 0.10.34

package/src/boat/boat.ts

@@ -1,106 +1,66 @@
 import { SchmancyElement } from '@mixins/index'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, nothing, type PropertyValues } from 'lit'
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { when } from 'lit/directives/when.js'
-import { filter, finalize, fromEvent, map, merge, switchMap, takeUntil, tap } from 'rxjs'
-import { SPRING_SMOOTH, SPRING_SNAPPY } from '../utils/animation.js'
+import { filter, finalize, fromEvent, map, merge, type Subscription, switchMap, takeUntil, tap } from 'rxjs'
+import { SPRING_SMOOTH } from '../utils/animation.js'
 import { reducedMotion$ } from '../directives/reduced-motion'
+import { show } from '../overlay/overlay.service'
 import { theme } from '../theme/theme.service.js'
 
-const FAB_HEIGHT = 36
 const DRAG_THRESHOLD = 5
 const POSITION_STORAGE_KEY_PREFIX = 'schmancy-boat-'
 
 type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
-type BoatState = 'collapsed' | 'expanded'
 interface Position {
 	x: number
 	y: number
 }
 
+/**
+ * Material-3 extended FAB that delegates its expanded panel to the `show()`
+ * overlay service. Collapsed: a draggable, corner-anchored pill (icon + label,
+ * circular when no label). Activated: the default-slot content blooms from the
+ * FAB as an overlay (backdrop / Esc / back-button / sheet-on-narrow handled by
+ * the overlay primitive).
+ */
 @customElement('schmancy-boat')
 export default class SchmancyBoat extends SchmancyElement {
 	static styles = [css`
-	:host {
-		display: contents;
-		position: relative;
-		z-index: 1000;
-	}
-	:host([hidden]) {
-		display: none !important;
-	}
-`]
+		:host {
+			display: contents;
+		}
+		:host([hidden]) {
+			display: none !important;
+		}
+	`]
 
 	@property({ type: String }) id: string = 'default'
 	@property({ type: String }) icon?: string
 	@property({ type: String }) label?: string
-	/** Override the expanded panel width (e.g. '320px', '24rem'). Defaults to responsive sizing. */
-	@property({ type: String }) expandedWidth?: string
-	/** When true, uses a lower elevation shadow in the minimized (FAB) state. */
+	/** When true, uses a lower elevation shadow on the FAB. */
 	@property({ type: Boolean, reflect: true }) lowered: boolean = false
-	/** Corner the boat is anchored to. */
+	/** Corner the FAB is anchored to. */
 	@property({ type: String }) corner: Corner = 'bottom-right'
-	/** Whether the panel is open. */
+	/** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
 	@property({ type: Boolean, reflect: true }) open: boolean = false
 
-	/**
-	 * State property.
-	 * Maps 'expanded' → open=true, 'collapsed' → open=false (FAB visible).
-	 */
-	get state(): BoatState {
-		return this.open ? 'expanded' : 'collapsed'
-	}
-	set state(val: BoatState) {
-		if (val === 'expanded') {
-			this.expand()
-		} else {
-			// collapsed
-			this.close()
-		}
-	}
-
-	// Internal drag state (triggers re-render for cursor class)
 	@state() private isDragging = false
-
-	// Internal position — plain fields, updated directly during drag (no re-render needed)
-	private _position: Position = { x: 16, y: 16 }
 	@state() private _currentCorner: Corner = 'bottom-right'
 
-	// Refs
+	@queryAssignedElements() private _slotted!: Element[]
+
+	private _position: Position = { x: 16, y: 16 }
 	private _containerRef = createRef<HTMLElement>()
-	private _contentRef = createRef<HTMLElement>()
 	private _headerRef = createRef<HTMLElement>()
 	private _currentAnimation?: Animation
 
-	// ============================================
-	// COMPUTED
-	// ============================================
-
-	private get panelWidth(): string {
-		return this.expandedWidth ?? 'min(360px, calc(100vw - 32px))'
-	}
-
-	private get isBottomCorner(): boolean {
-		return this._currentCorner.startsWith('bottom')
-	}
-
-	private get closedClipPath(): string {
-		return this.isBottomCorner
-			? `inset(calc(100% - ${FAB_HEIGHT}px) 0px 0px 0px round 10px)`
-			: `inset(0px 0px calc(100% - ${FAB_HEIGHT}px) 0px round 10px)`
-	}
-
-	private get openClipPath(): string {
-		return 'inset(0px 0px 0px 0px round 4px)'
-	}
-
-	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
-		if (this.open) return 4
-		return this.lowered ? 1 : 3
-	}
+	#ready = false
+	#sub?: Subscription
+	#captured: Element[] = []
 
 	// ============================================
 	// POSITION MANAGEMENT
@@ -170,49 +130,33 @@ export default class SchmancyBoat extends SchmancyElement {
 		this._applyContainerPosition()
 	}
 
-
 	// ============================================
-	// CORNER SNAPPING
+	// CORNER SNAPPING (FLIP)
 	// ============================================
 
-	private _reorientToNearestCorner(skipAnimation = false): void {
+	private _reorientToNearestCorner(): void {
 		const container = this._containerRef.value
 		if (!container) return
 
-		// F — record current screen position before DOM mutation
 		const rect = container.getBoundingClientRect()
-
-		// L — calculate nearest corner using FAB visual center (container is always collapsed during drag)
-		const currentIsBottom = this._currentCorner.includes('bottom')
 		const fabCenterX = rect.left + rect.width / 2
-		const fabCenterY = currentIsBottom
-			? rect.bottom - FAB_HEIGHT / 2
-			: rect.top + FAB_HEIGHT / 2
+		const fabCenterY = rect.top + rect.height / 2
 		const side = fabCenterX > window.innerWidth / 2 ? 'right' : 'left'
 		const vert = fabCenterY > window.innerHeight / 2 ? 'bottom' : 'top'
-		const newCorner: Corner = `${vert}-${side}` as Corner
-
-		// Snap corner and reset offset to standard edge gap
-		this._currentCorner = newCorner
+		this._currentCorner = `${vert}-${side}` as Corner
 		this._position = { x: 16, y: 16 }
 		this._applyContainerPosition()
-		// Sync clip-path to new corner — managed imperatively, not via styleMap
-		if (!this.open) {
-			container.style.clipPath = this.closedClipPath
-		}
 
-		if (skipAnimation || reducedMotion$.value) {
+		if (reducedMotion$.value) {
 			this._savePosition()
 			return
 		}
 
-		// I — invert: shift element back to its original visual position
 		const newRect = container.getBoundingClientRect()
 		const dx = rect.left - newRect.left
 		const dy = rect.top - newRect.top
 		container.style.transform = `translate(${dx}px, ${dy}px)`
 
-		// P — play: animate from the inverse offset to natural resting position
 		this._currentAnimation?.cancel()
 		const anim = container.animate(
 			[{ transform: container.style.transform }, { transform: 'translate(0,0)' }],
@@ -224,9 +168,7 @@ export default class SchmancyBoat extends SchmancyElement {
 		)
 		this._currentAnimation = anim
 		anim.finished.then(() => {
-			if (container.isConnected) {
-				container.style.transform = ''
-			}
+			if (container.isConnected) container.style.transform = ''
 			return
 		})
 
@@ -254,8 +196,6 @@ export default class SchmancyBoat extends SchmancyElement {
 				}),
 				map(e => {
 					const rect = container.getBoundingClientRect()
-					const isBottom = this._currentCorner.includes('bottom')
-					const wasOpen = this.open
 					didDrag = false
 					return {
 						pointerId: e.pointerId,
@@ -264,11 +204,9 @@ export default class SchmancyBoat extends SchmancyElement {
 						offsetX: e.clientX - rect.left,
 						offsetY: e.clientY - rect.top,
 						rect,
-						isBottom,
-						wasOpen,
 					}
 				}),
-				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect, isBottom, wasOpen }) => {
+				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect }) => {
 					const sameId = (e: PointerEvent) => e.pointerId === pointerId
 					const move$ = fromEvent<PointerEvent>(window, 'pointermove').pipe(filter(sameId))
 					const end$ = merge(
@@ -283,32 +221,16 @@ export default class SchmancyBoat extends SchmancyElement {
 							if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD && !didDrag) {
 								didDrag = true
 								this.isDragging = true
-								// Collapse on first confirmed drag move (not on click)
-								if (wasOpen) {
-									this._currentAnimation?.cancel()
-									this.open = false
-									container.style.clipPath = this.closedClipPath
-									container.style.overflow = 'hidden'
-									const content = this._contentRef.value
-									if (content) {
-										content.inert = true
-										content.style.visibility = 'hidden'
-									}
-								}
 							}
 							if (!didDrag) return
 
 							const vw = window.innerWidth
 							const vh = window.innerHeight
 							const left = Math.max(0, Math.min(clientX - offsetX, vw - rect.width))
-							// Allow container to go partially off-screen so FAB stays reachable at all edges
-							const minTop = isBottom ? FAB_HEIGHT - rect.height : 0
-							const maxTop = isBottom ? vh - rect.height : vh - FAB_HEIGHT
-							const top = Math.max(minTop, Math.min(clientY - offsetY, maxTop))
-
+							const top = Math.max(0, Math.min(clientY - offsetY, vh - rect.height))
 							this._position = {
 								x: this._currentCorner.includes('right') ? vw - left - rect.width : left,
-								y: isBottom ? vh - top - rect.height : top,
+								y: this._currentCorner.includes('bottom') ? vh - top - rect.height : top,
 							}
 							this._applyContainerPosition()
 						}),
@@ -331,6 +253,40 @@ export default class SchmancyBoat extends SchmancyElement {
 			.subscribe()
 	}
 
+	// ============================================
+	// OVERLAY DELEGATION
+	// ============================================
+
+	private _openOverlay() {
+		if (this.#sub) return
+		const anchor = this._containerRef.value
+		const wrapper = document.createElement('div')
+		wrapper.className = 'flex flex-col'
+		this.#captured = [...this._slotted]
+		this.#captured.forEach(node => wrapper.appendChild(node))
+
+		this.#sub = show(wrapper, {
+			anchor: anchor ?? undefined,
+			dismissable: true,
+			historyStrategy: 'silent',
+		})
+			.pipe(
+				finalize(() => this._restoreSlotted()),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+
+		this.dispatchScopedEvent('toggle', 'open')
+	}
+
+	private _restoreSlotted() {
+		this.#captured.forEach(node => this.appendChild(node))
+		this.#captured = []
+		this.#sub = undefined
+		if (this.open) this.open = false
+		this.dispatchScopedEvent('toggle', 'closed')
+	}
+
 	// ============================================
 	// LIFECYCLE
 	// ============================================
@@ -349,169 +305,34 @@ export default class SchmancyBoat extends SchmancyElement {
 	}
 
 	firstUpdated() {
-		// Initialize corner from property
 		this._currentCorner = this.corner
-
-		// Load saved drag position from localStorage
 		this._loadPosition()
-
-		const container = this._containerRef.value
-		const content = this._contentRef.value
-		if (!container) return
-
-		// Apply initial position
+		if (!this._containerRef.value) return
 		this._applyContainerPosition()
-
-		// Set initial open/closed visual state
-		if (this.open) {
-			container.style.overflow = ''
-			if (content) {
-				content.inert = false
-				content.style.visibility = 'visible'
-			}
-		} else {
-			container.style.clipPath = this.closedClipPath
-			container.style.overflow = 'hidden'
-			if (content) {
-				content.inert = true
-				content.style.visibility = 'hidden'
-			}
-		}
-
-		// Set up drag
 		this._setupDrag()
+		this.#ready = true
+		if (this.open) this._openOverlay()
 	}
 
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this._currentAnimation?.cancel()
-	}
-
-	// ============================================
-	// ANIMATION
-	// ============================================
-
-	private async _animateOpen(): Promise<void> {
-		const container = this._containerRef.value
-		const content = this._contentRef.value
-		if (!container) return
-
-		if (content) {
-			content.style.visibility = 'visible'
-			content.inert = false
-		}
-
-		this.open = true
-		await this.updateComplete
-
-		if (reducedMotion$.value) {
-			container.style.clipPath = ''
-			container.style.overflow = ''
-			this.dispatchScopedEvent('toggle', 'expanded')
-			return
-		}
-
-		this._currentAnimation?.cancel()
-		container.style.overflow = 'hidden'
-
-		const openKeyframes: Keyframe[] = [
-			{ clipPath: this.closedClipPath, opacity: 0.85 },
-			{ clipPath: this.openClipPath, opacity: 1 },
-		]
-		const anim = container.animate(openKeyframes, {
-			duration: SPRING_SMOOTH.duration,
-			easing: SPRING_SMOOTH.easingFallback,
-			fill: 'forwards',
-		})
-		this._currentAnimation = anim
-
-		// Clear clip-path so overflow/scroll work normally after animation
-		anim.finished.then(() => {
-			if (container.isConnected) {
-				container.style.clipPath = ''
-				container.style.overflow = ''
-			}
-			return
-		})
-
-		this.dispatchScopedEvent('toggle', 'expanded')
+	protected willUpdate(changed: PropertyValues<this>) {
+		if (!this.#ready || !changed.has('open')) return
+		if (this.open && !this.#sub) this._openOverlay()
+		else if (!this.open && this.#sub) this.#sub.unsubscribe()
 	}
 
-	private async _animateClose(): Promise<void> {
-		const container = this._containerRef.value
-		if (!container) return
-
-		if (reducedMotion$.value) {
-			container.style.clipPath = this.closedClipPath
-			container.style.overflow = 'hidden'
-			this.open = false
-			const content = this._contentRef.value
-			if (content) {
-				content.inert = true
-				content.style.visibility = 'hidden'
-			}
-			this.dispatchScopedEvent('toggle', 'collapsed')
-			return
-		}
-
+	disconnectedCallback() {
+		super.disconnectedCallback()
 		this._currentAnimation?.cancel()
-		container.style.overflow = 'hidden'
-
-		const closeKeyframes: Keyframe[] = [
-			{ clipPath: this.openClipPath, opacity: 1 },
-			{ clipPath: this.closedClipPath, opacity: 0.85 },
-		]
-		const anim = container.animate(closeKeyframes, {
-			duration: Math.round(SPRING_SNAPPY.duration * 0.9),
-			easing: 'cubic-bezier(0.4, 0, 0.8, 0.15)',
-			fill: 'forwards',
-		})
-		this._currentAnimation = anim
-
-		await anim.finished
-
-		this.open = false
-
-		const content = this._contentRef.value
-		if (content) {
-			content.inert = true
-			content.style.visibility = 'hidden'
-		}
-
-		this.dispatchScopedEvent('toggle', 'collapsed')
+		this.#sub?.unsubscribe()
 	}
 
 	// ============================================
 	// PUBLIC API
 	// ============================================
 
+	/** Flip open ↔ closed. */
 	toggle() {
-		if (this.open) this._animateClose()
-		else this._animateOpen()
-	}
-
-	expand() {
-		if (this.open) return
-		this.removeAttribute('hidden')
-		if (!this._containerRef.value) {
-			this.open = true
-			return
-		}
-		this._animateOpen()
-	}
-
-	/** Alias for expand() — kept for backwards compatibility. */
-	show() {
-		this.expand()
-	}
-
-	close() {
-		if (!this.open) return
-		if (!this._containerRef.value) {
-			this.open = false
-			return
-		}
-		this._animateClose()
+		this.open = !this.open
 	}
 
 	// ============================================
@@ -519,138 +340,73 @@ export default class SchmancyBoat extends SchmancyElement {
 	// ============================================
 
 	protected render(): unknown {
-		const isBottom = this._currentCorner.startsWith('bottom')
-
 		const containerClasses = classMap({
-			flex: true,
-			'flex-col': isBottom,
-			'flex-col-reverse': !isBottom,
-			'will-change-[clip-path]': true,
-			'z-1000': true,
-			// open: 4px radius (instrument-sharp); closed: 10px (status-bar pill)
-			'rounded': this.open,
-			'rounded-lg': !this.open,
+			'inline-flex': true,
+			'rounded-full': true,
 			'overflow-hidden': true,
-			// micro-scale + reduced opacity signals lift during drag
+			'transition-opacity': true,
+			'duration-200': true,
 			'opacity-85': this.isDragging,
 			'scale-95': this.isDragging,
 		})
 
 		const containerStyles = styleMap({
 			position: 'fixed',
-			width: this.panelWidth,
-			'max-height': 'calc(100vh - 32px)',
-			'pointer-events': 'none',
-		})
-
-		const contentStyles = styleMap({
-			'pointer-events': this.open ? 'auto' : 'none',
+			'pointer-events': 'auto',
 		})
 
-		const headerClasses = classMap({
-			'h-full': true,
-			'px-3': true,
+		const fabClasses = classMap({
+			'h-14': true,
+			'rounded-full': true,
 			flex: true,
 			'items-center': true,
-			'gap-2': true,
+			'gap-3': true,
 			'select-none': true,
 			'touch-none': true,
 			'cursor-grabbing': this.isDragging,
-			'cursor-move': !this.isDragging,
-			'transition-opacity': true,
-			'duration-200': true,
+			'cursor-pointer': !this.isDragging,
+			'px-5': !!this.label,
+			'w-14': !this.label,
+			'justify-center': !this.label,
 		})
 
 		return html`
-			<!-- schmancy-surface owns background color and elevation-based shadow.
-			     Position is managed imperatively via _applyContainerPosition(). -->
 			<schmancy-surface
 				${ref(this._containerRef)}
 				type="glass"
-				.elevation=${this.elevation}
+				.elevation=${this.lowered ? 1 : 3}
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}
 			>
-				<!-- Content section (visually above header for bottom corners) -->
-				<section
-					${ref(this._contentRef)}
-					class="flex-1 min-h-0 overflow-hidden flex flex-col"
-					style=${contentStyles}
-					role="dialog"
-					aria-label="${this.label ?? 'Floating panel'}"
-				>
-					<schmancy-surface type="solid" class="flex flex-col flex-1 min-h-0 overflow-hidden">
-						<schmancy-scroll hide class="flex-1">
-							<slot></slot>
-						</schmancy-scroll>
-					</schmancy-surface>
-				</section>
-
-				<!-- Header / FAB section — always interactive, always visible -->
-				<section
-					class="shrink-0 bg-surface-containerLowest relative"
-					style=${styleMap({ 'pointer-events': 'auto', height: `${FAB_HEIGHT}px` })}
+				<div
+					${ref(this._headerRef)}
+					class=${fabClasses}
+					role="button"
+					tabindex="0"
+					aria-label=${this.label ?? 'Open panel'}
+					title="Drag to move · click to open"
 				>
-					<!-- 1px top inner highlight — reads as a lit edge when open, instrument-panel HUD accent -->
-					${when(
-						this.open,
-						() => html`<div
-							class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary-default/40 to-transparent pointer-events-none"
-						></div>`,
-					)}
-					<div
-						${ref(this._headerRef)}
-						class=${headerClasses}
-						title="Drag to move"
-						aria-label="Drag to reposition panel"
-					>
-						<!-- Grip indicator: only visible when collapsed, signals "this is a handle" -->
+					<slot name="header">
 						${when(
-							!this.open,
-							() => html`<div
-								class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-0.5 rounded-full bg-on-surface/20 pointer-events-none"
-								style="z-index:0"
-							></div>`,
+							!!this.icon,
+							() => html`<schmancy-icon>${this.icon}</schmancy-icon>`,
+							() => nothing,
 						)}
+					</slot>
+					${when(
+						!!this.label,
+						() => html`<schmancy-typography type="label" token="lg" class="whitespace-nowrap">
+							${this.label}
+						</schmancy-typography>`,
+						() => nothing,
+					)}
+					<slot name="summary"></slot>
+				</div>
 
-						<!-- Summary slot rendered once — avoids DOM teardown on toggle -->
-						<div class="flex-1 min-w-0 relative" style="z-index:1">
-							<slot name="summary"></slot>
-						</div>
-
-						<!-- Toggle button: chevron up/down matches open/close direction per corner -->
-						${when(
-							this.open,
-							() => html`
-								<schmancy-icon-button
-									size="sm"
-									variant="text"
-									@click=${(e: Event) => {
-										e.stopPropagation()
-										this.close()
-									}}
-									title="Collapse"
-								>
-									${isBottom ? 'expand_more' : 'expand_less'}
-								</schmancy-icon-button>
-							`,
-							() => html`
-								<schmancy-icon-button
-									size="sm"
-									variant="text"
-									@click=${(e: Event) => {
-										e.stopPropagation()
-										this.expand()
-									}}
-									title="Expand"
-								>
-									${isBottom ? 'expand_less' : 'expand_more'}
-								</schmancy-icon-button>
-							`,
-						)}
-					</div>
-				</section>
+				<!-- Default-slot content parks here (hidden) while collapsed;
+				     relocated into the show() overlay on open. -->
+				<div hidden><slot></slot></div>
 			</schmancy-surface>
 		`
 	}

package/src/directives/art/art.directive.ts

@@ -29,14 +29,15 @@ class ArtDirective extends AsyncDirective {
 
 	override update(part: ElementPart, [options]: [ArtOptions]) {
 		const element = part.element as HTMLElement
-		const { name, color, intensity = 1, speed = 1 } = options
+		const { name, color, intensity = 1, speed = 1, density = 1 } = options
 
 		if (
 			this.state &&
 			(this.state.effect !== name ||
 				this.state.color !== color ||
 				this.state.intensity !== intensity ||
-				this.state.speed !== speed)
+				this.state.speed !== speed ||
+				this.state.density !== density)
 		) {
 			this.cleanup()
 		}
@@ -49,6 +50,7 @@ class ArtDirective extends AsyncDirective {
 				color,
 				intensity,
 				speed,
+				density,
 				element,
 				isVisible: true,
 				initialized: false,