@mhmo91/schmancy 0.10.18 → 0.10.20

package/src/CLAUDE.md

@@ -18,6 +18,26 @@ by the Claude Code plugin. Drift here means drift everywhere.
 
 ## Source-author rules (not in the consumer docs)
 
+### Host sizing — `inline-flex` + `flex-1` pattern
+
+Every component whose `:host` carries visual affordances (box-shadow, transform) must follow the same pattern native `<button>` uses:
+
+```css
+/* ✓ correct */
+:host { display: inline-flex; }          /* host is a flex container */
+:host([width="full"]) { display: flex; width: 100%; }
+```
+
+```typescript
+/* inner interactive element */
+'flex-1 ...' : true,   /* ✓ resolves against the flex container's available space */
+'w-full ...' : true,   /* ✗ resolves against the containing block content-box — wrong when host is blockified by a parent flex layout */
+```
+
+**Why `flex-1` not `w-full`:** when a flex/grid parent stretches the `<schmancy-button>` host, `width: 100%` on the inner `<button>` resolves against the host's *containing-block content-box*, which remains content-sized for `inline-flex` hosts. The outer (flex-stretched) size and the inner (content-sized) size split — the inner element is narrower than the host, so `:host(:hover)` box-shadow fires across the full stretched area while the visible button fill is narrower. `flex-1` uses `flex-basis: 0` + grow, which resolves against the flex container's *available space* — always the stretched width — with no circular-percentage issue. This matches native `<button>` behavior: content-sized inline, stretches in flex containers.
+
+**Applies to:** `schmancy-button`, `schmancy-icon-button`, and any future component with host-level visual affordances.
+
 ### Component skeleton
 
 Every concrete component:

package/src/area/area.component.ts

@@ -6,13 +6,12 @@ import {
 	catchError,
 	distinctUntilChanged,
 	filter,
+	from,
 	fromEvent,
 	map,
 	merge,
 	of,
-	shareReplay,
 	switchMap,
-	take,
 	takeUntil,
 	tap,
 } from 'rxjs'
@@ -31,407 +30,221 @@ export class SchmancyArea extends SchmancyElement {
 	}
 `]
 
-	/**
-	 * The name of the router outlet
-	 * @attr
-	 * @type {string}
-	 * @public
-	 * @required
-	 */
 	@property() name!: string
 
 	@property() default!: RouteComponent
 
-	/**
-	 * Query for assigned route elements in the slot
-	 * This will automatically update when slot content changes
-	 */
 	@queryAssignedElements({ selector: 'schmancy-route', flatten: true })
 	private routes!: SchmancyRoute[]
 
 	protected firstUpdated(): void {
 		if (!this.name) throw new Error('Area name is required')
 
-		// Single unified routing pipeline with all logic inline
 		merge(
-			// Source 1: Programmatic navigation from area.request
+			// Programmatic navigation
 			area.request.pipe(
 				filter(({ area }) => area === this.name),
 			),
 
-			// Source 2: Initial page load - parse route from URL
+			// Initial URL parse
 			of(null).pipe(
-				take(1),
 				map(() => {
-					// Parse route from URL on initial load
 					const path = location.pathname
 					const lastSegment = path.split('/').pop() || ''
-
-					// Check for JSON encoded route in URL
 					if (lastSegment && (lastSegment.includes('{') || lastSegment.includes('%7B'))) {
 						try {
-							const parsed = JSON.parse(decodeURIComponent(lastSegment)) as Record<string, ActiveRoute>
-							if (parsed[this.name]) {
-								return {
-									area: this.name,
-									component: parsed[this.name].component,
-									state: parsed[this.name].state || {},
-									params: parsed[this.name].params || {},
-									props: parsed[this.name].props || {},
-									historyStrategy: HISTORY_STRATEGY.replace,
-								} as RouteAction
+							const parsed = JSON.parse(decodeURIComponent(lastSegment))
+							if (typeof parsed === 'object' && parsed !== null && parsed[this.name]) {
+								const r = parsed[this.name]
+								return { area: this.name, component: r.component, state: r.state || {}, params: r.params || {}, props: r.props || {}, historyStrategy: HISTORY_STRATEGY.replace } as RouteAction
 							}
 						} catch {}
 					}
-
-					// Segment-based routing
-					const segments = path.split('/').filter(Boolean)
-					const matchingSegment = segments.find(seg =>
-						this.routes?.some(r => r.when === seg)
-					)
-
+					const matchingSegment = path.split('/').filter(Boolean).find(seg => this.routes?.some(r => r.when === seg))
 					if (matchingSegment) {
-						return {
-							area: this.name,
-							component: matchingSegment,
-							state: {},
-							params: {},
-							historyStrategy: HISTORY_STRATEGY.silent,
-						} as RouteAction
+						return { area: this.name, component: matchingSegment, state: {}, params: {}, historyStrategy: HISTORY_STRATEGY.silent } as RouteAction
 					}
-
-					// Use default route if available
 					return this.default
-						? {
-								area: this.name,
-								component: this.default,
-								state: {},
-								params: {},
-								historyStrategy: HISTORY_STRATEGY.silent,
-							} as RouteAction
+						? { area: this.name, component: this.default, state: {}, params: {}, historyStrategy: HISTORY_STRATEGY.silent } as RouteAction
 						: null
-				})
+				}),
 			),
 
-			// Source 3: Browser navigation (back/forward) - parse from browser state
+			// Browser back/forward
 			fromEvent<PopStateEvent>(window, 'popstate').pipe(
 				map(() => {
-					// Parse route from browser state during popstate
-					// First check history state
 					if (history.state?.schmancyAreas?.[this.name]) {
-						const stateData = history.state.schmancyAreas[this.name]
-						return {
-							area: this.name,
-							component: stateData.component,
-							state: stateData.state || {},
-							params: stateData.params || {},
-							props: stateData.props || {},
-							historyStrategy: HISTORY_STRATEGY.pop,
-						} as RouteAction
+						const s = history.state.schmancyAreas[this.name]
+						return { area: this.name, component: s.component, state: s.state || {}, params: s.params || {}, props: s.props || {}, historyStrategy: HISTORY_STRATEGY.pop } as RouteAction
 					}
-
-					// Fallback to URL parsing if no state (e.g., navigating to root)
 					const path = location.pathname
 					const lastSegment = path.split('/').pop() || ''
-
-					// Check for JSON encoded route in URL
 					if (lastSegment && (lastSegment.includes('{') || lastSegment.includes('%7B'))) {
 						try {
-							const parsed = JSON.parse(decodeURIComponent(lastSegment)) as Record<string, ActiveRoute>
-							if (parsed[this.name]) {
-								return {
-									area: this.name,
-									component: parsed[this.name].component,
-									state: parsed[this.name].state || {},
-									params: parsed[this.name].params || {},
-									props: parsed[this.name].props || {},
-									historyStrategy: HISTORY_STRATEGY.replace,
-								} as RouteAction
+							const parsed = JSON.parse(decodeURIComponent(lastSegment))
+							if (typeof parsed === 'object' && parsed !== null && parsed[this.name]) {
+								const r = parsed[this.name]
+								return { area: this.name, component: r.component, state: r.state || {}, params: r.params || {}, props: r.props || {}, historyStrategy: HISTORY_STRATEGY.replace } as RouteAction
 							}
 						} catch {}
 					}
-
-					// Segment-based routing
-					const segments = path.split('/').filter(Boolean)
-					const matchingSegment = segments.find(seg =>
-						this.routes?.some(r => r.when === seg)
-					)
-
+					const matchingSegment = path.split('/').filter(Boolean).find(seg => this.routes?.some(r => r.when === seg))
 					if (matchingSegment) {
-						return {
-							area: this.name,
-							component: matchingSegment,
-							state: {},
-							params: {},
-							historyStrategy: HISTORY_STRATEGY.silent,
-						} as RouteAction
+						return { area: this.name, component: matchingSegment, state: {}, params: {}, historyStrategy: HISTORY_STRATEGY.silent } as RouteAction
 					}
-
-					// Use default route if available
 					return this.default
-						? {
-								area: this.name,
-								component: this.default,
-								state: {},
-								params: {},
-								historyStrategy: HISTORY_STRATEGY.silent,
-							} as RouteAction
+						? { area: this.name, component: this.default, state: {}, params: {}, historyStrategy: HISTORY_STRATEGY.silent } as RouteAction
 						: null
-				})
-			)
+				}),
+			),
 		).pipe(
-			// Filter out null routes
-			filter((route): route is RouteAction => route !== null),
-
-			// Performance: mark navigation start
-			tap(() => performance.mark(`area-${this.name}-nav-start`)),
-
-			// Step 1: Find matching route (resolve lazy only if needed for route matching)
-			switchMap(async action => {
-				let component: RouteComponent | null = action.component
-				let matchedRoute: SchmancyRoute | undefined
-
-				// If component is a string, find the matching route
-				if (typeof component === 'string' && this.routes) {
-					matchedRoute = this.routes.find(r => r.when === component)
-					if (matchedRoute) {
-						component = matchedRoute.component
+			filter((r): r is RouteAction => r !== null),
+
+			// Per-navigation error isolation — one bad nav skips, outer stream keeps flowing
+			switchMap(action => of(action).pipe(
+				// Step 1: resolve component + find matched route
+				switchMap(action => {
+					let component: RouteComponent | null = action.component
+					let matchedRoute: SchmancyRoute | undefined
+
+					if (typeof component === 'string' && this.routes) {
+						matchedRoute = this.routes.find(r => r.when === component)
+						if (matchedRoute) component = matchedRoute.component
 					}
-				}
-
-				// If component is a lazy function and we don't have a matched route yet,
-				// resolve it to find the route by tag name
-				if (
-					!matchedRoute &&
-					typeof component === 'function' &&
-					('preload' in component || '_promise' in component || '_module' in component)
-				) {
-					try {
-						const module = await (component as unknown as () => Promise<{ default: CustomElementConstructor }>)()
-						component = module.default
-						// Now find route by tag name
-						const tagName = customElements.getName(component as CustomElementConstructor)
-						if (tagName && this.routes) {
-							matchedRoute = this.routes.find(r => r.when === tagName)
-						}
-					} catch (e) {
-						console.error(`[${this.name}] Lazy load failed:`, e)
-						return { ...action, component: null, matchedRoute: undefined }
+					if (!matchedRoute && component instanceof HTMLElement && this.routes) {
+						matchedRoute = this.routes.find(r => r.when === component.tagName.toLowerCase())
 					}
-				}
-
-				// If component is HTMLElement, find by tag name
-				if (!matchedRoute && component instanceof HTMLElement && this.routes) {
-					const tagName = component.tagName.toLowerCase()
-					matchedRoute = this.routes.find(r => r.when === tagName)
-				}
-
-				return { ...action, component, matchedRoute }
-			}),
-
-			// Step 2: Check route guards
-			switchMap(route => {
-				if (!route.matchedRoute?.guard) {
-					return of(route)
-				}
-
-				return route.matchedRoute.guard.pipe(
-					switchMap(guardResult => {
-						if (guardResult === true) {
-							return of(route)
-						}
-
-						// Guard failed, dispatch redirect event
-						const redirectEvent = new CustomEvent('redirect', {
-							detail: {
-								blockedRoute: route.matchedRoute?.when || 'unknown',
-								area: this.name,
-								params: route.params || {},
-								state: route.state || {},
-								redirectTarget: typeof guardResult === 'object' ? guardResult : undefined,
-							},
-							bubbles: true,
-							composed: true,
-						})
-						route.matchedRoute.dispatchEvent(redirectEvent)
-
-						return EMPTY
-					})
-				)
-			}),
-
-			// Step 3: Load lazy components (after guard check for performance)
-			switchMap(async route => {
-				let component = route.component
-
-				if (
-					typeof component === 'function' &&
-					('preload' in component || '_promise' in component || '_module' in component)
-				) {
-					try {
-						const module = await (component as unknown as () => Promise<{ default: CustomElementConstructor }>)()
-						component = module.default
-					} catch (e) {
-						console.error(`[${this.name}] Lazy load failed:`, e)
-						return { ...route, component: null }
+					if (!matchedRoute && typeof component === 'function' && 'preload' in component) {
+						return from(
+							(component as () => Promise<{ default: CustomElementConstructor }>)().then(m => ({
+								...action,
+								component: m.default as RouteComponent,
+								matchedRoute: this.routes?.find(r => r.when === (customElements.getName(m.default) ?? '')) ?? undefined,
+							}))
+						)
 					}
-				}
-
-				return { ...route, component }
-			}),
-
-			// Step 4: Create unique key for deduplication
-			map(route => {
-				let identifier = ''
-				const component = route.component
-
-				if (!component || component === '') {
-					identifier = 'null'
-				} else if (typeof component === 'string') {
-					identifier = component
-				} else if (component instanceof HTMLElement) {
-					identifier = component.tagName.toLowerCase()
-				} else if (typeof component === 'function') {
-					identifier = component.name || 'CustomElement'
-				}
-
-				const key = `${identifier}${JSON.stringify(route.params)}${JSON.stringify(route.state)}${JSON.stringify(route.props)}`
-
-				return { ...route, key, tagName: identifier }
-			}),
+					return of({ ...action, component, matchedRoute })
+				}),
+
+				// Step 2: guard check
+				switchMap(carry => {
+					if (!carry.matchedRoute?.guard) return of(carry)
+					return carry.matchedRoute.guard.pipe(
+						switchMap(allowed => {
+							if (allowed) return of(carry)
+							carry.matchedRoute?.dispatchEvent(new CustomEvent('redirect', {
+								detail: { blockedRoute: carry.matchedRoute?.when ?? 'unknown', area: this.name, params: carry.params || {}, state: carry.state || {} },
+								bubbles: true,
+								composed: true,
+							}))
+							return EMPTY
+						}),
+					)
+				}),
+
+				// Step 3: load lazy component (after guard, for perf)
+				switchMap(carry => {
+					if (!(typeof carry.component === 'function' && 'preload' in carry.component)) return of(carry)
+					return from(
+						(carry.component as () => Promise<{ default: CustomElementConstructor }>)()
+							.then(m => ({ ...carry, component: m.default as RouteComponent }))
+					)
+				}),
+
+				// Step 4: dedup key
+				map(carry => {
+					const c = carry.component
+					const id =
+						!c || c === '' ? 'null'
+						: typeof c === 'string' ? c
+						: c instanceof HTMLElement ? c.tagName.toLowerCase()
+						: typeof c === 'function' ? c.name || 'CustomElement'
+						: 'null'
+					return { ...carry, key: `${id}${JSON.stringify(carry.params)}${JSON.stringify(carry.state)}${JSON.stringify(carry.props)}` }
+				}),
+
+				catchError(err => {
+					console.error(`[${this.name}] Navigation error:`, err)
+					return EMPTY
+				}),
+			)),
 
-			// Step 5: Deduplicate navigation requests
 			distinctUntilChanged((a, b) => a.key === b.key),
 
-			// Step 6: Create DOM element from component
-			map(route => {
+			// Step 5: instantiate element
+			map(carry => {
+				const c = carry.component
 				let element: HTMLElement | null = null
-				const component = route.component
-
-				if (!component || component === '') {
-					element = null
-				} else if (typeof component === 'string') {
-					try {
-						element = document.createElement(component)
-					} catch {
-						console.error(`[${this.name}] Failed to create element:`, component)
-					}
-				} else if (component instanceof HTMLElement) {
-					element = component
-				} else if (typeof component === 'function') {
-					try {
-						element = new (component as CustomElementConstructor)()
-					} catch (e) {
-						console.error(`[${this.name}] Failed to instantiate:`, e)
-					}
+				if (typeof c === 'string' && c !== '') {
+					try { element = document.createElement(c) } catch { console.error(`[${this.name}] Failed to create element:`, c) }
+				} else if (c instanceof HTMLElement) {
+					element = c
+				} else if (typeof c === 'function') {
+					try { element = new (c as CustomElementConstructor)() } catch (e) { console.error(`[${this.name}] Failed to instantiate:`, e) }
 				}
-
-				// Apply properties
 				if (element) {
-					if (route.params) Object.assign(element, route.params)
-					if (route.props) Object.assign(element, route.props)
-					if (route.state) Object.assign(element, { state: route.state })
+					if (carry.params) Object.assign(element, carry.params)
+					if (carry.props) Object.assign(element, carry.props)
+					if (carry.state) Object.assign(element, { state: carry.state })
 				}
-
-				return { element, route }
+				return { ...carry, element }
 			}),
 
-			shareReplay(1),
-
-			// Step 7: Swap components in DOM and update history
-			tap(({ element, route }) => this.swapComponents(element, route)),
-
-			// Performance: measure navigation duration
-			tap(() => {
-				performance.mark(`area-${this.name}-nav-end`)
-				performance.measure(`area-${this.name}-navigation`, `area-${this.name}-nav-start`, `area-${this.name}-nav-end`)
-			}),
-
-			catchError(error => {
-				console.error(`[${this.name}] Navigation error:`, error)
-				return EMPTY
-			}),
-
-			takeUntil(this.disconnecting)
-		)
-		.subscribe()
-	}
-
-
-	/**
-	 * Swap components with animation
-	 */
-	private swapComponents(newComponent: HTMLElement | null, routeAction: RouteAction) {
-		// Find current routed component (not route definitions)
-		const oldComponent = Array.from(this.children).find(
-			child => !(child instanceof SchmancyRoute)
-		) as HTMLElement | undefined
-
-		// Clear if no new component
-		if (!newComponent) {
-			oldComponent?.remove()
-			return
-		}
-
-		// Get animation duration (0 = instant, default = 150ms)
-		const duration = routeAction.animationDuration ?? 150
-
-		// Animate transition (or instant swap if duration is 0)
-		if (duration === 0) {
-			// Instant swap - no animation
-			oldComponent?.remove()
-			this.appendChild(newComponent)
-		} else if (oldComponent) {
-			// GPU optimization: promote layers before animation
-			oldComponent.style.willChange = 'opacity'
-			newComponent.style.willChange = 'opacity'
-			// Skip paint for outgoing component
-			oldComponent.style.contentVisibility = 'hidden'
-
-			// Animated swap - fade out old, then fade in new
-			const fadeOut = oldComponent.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing: 'ease-out' })
-			fadeOut.onfinish = () => {
-				oldComponent.remove()
-				this.appendChild(newComponent)
-				const fadeIn = newComponent.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing: 'ease-in' })
-				fadeIn.onfinish = () => {
-					// Clean up GPU layer promotion
-					newComponent.style.willChange = 'auto'
+			// Step 6: swap DOM, write area state, update history
+			tap(carry => {
+				const old = Array.from(this.children).find(c => !(c instanceof SchmancyRoute)) as HTMLElement | undefined
+				const { element } = carry
+
+				if (!element) { old?.remove(); return }
+
+				const duration = carry.animationDuration ?? 150
+
+				if (duration === 0) {
+					old?.remove()
+					this.appendChild(element)
+				} else if (old) {
+					old.style.willChange = 'opacity'
+					element.style.willChange = 'opacity'
+					old.style.contentVisibility = 'hidden'
+					old.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing: 'ease-out' }).finished
+						.then(() => {
+							if (!this.isConnected) return
+							old.remove()
+							this.appendChild(element)
+							return element.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing: 'ease-in' }).finished
+						})
+						.then(() => (element.style.willChange = 'auto'))
+				} else {
+					this.appendChild(element)
+					element.animate([{ opacity: 0 }, { opacity: 1 }], {
+						duration: duration > 100 ? Math.max(100, duration * 0.66) : duration,
+						easing: 'ease-in',
+					}).finished.then(() => (element.style.willChange = 'auto'))
 				}
-			}
-		} else {
-			// No old component - just fade in new
-			newComponent.style.willChange = 'opacity'
-			this.appendChild(newComponent)
-			const fadeInDuration = duration > 100 ? Math.max(100, duration * 0.66) : duration
-			const fadeIn = newComponent.animate([{ opacity: 0 }, { opacity: 1 }], { duration: fadeInDuration, easing: 'ease-in' })
-			fadeIn.onfinish = () => {
-				newComponent.style.willChange = 'auto'
-			}
-		}
-
-		// Update area state
-		const activeRoute: ActiveRoute = {
-			component: newComponent.tagName.toLowerCase(),
-			state: routeAction.state || {},
-			area: this.name,
-			params: routeAction.params || {},
-			props: routeAction.props || {},
-		}
 
-		area.current.set(this.name, activeRoute)
-		area.$current.next(area.current)
+				const activeRoute: ActiveRoute = {
+					component: element.tagName.toLowerCase(),
+					state: carry.state || {},
+					area: this.name,
+					params: carry.params || {},
+					props: carry.props || {},
+				}
+				area.current.set(this.name, activeRoute)
+				area.$current.next(area.current)
+
+				if (area.enableHistoryMode) {
+					area._updateBrowserHistory(
+						this.name,
+						activeRoute,
+						carry.historyStrategy ?? HISTORY_STRATEGY.push,
+						carry.clearQueryParams,
+						carry.path,
+					)
+				}
+			}),
 
-		// Update browser history
-		if (area.enableHistoryMode) {
-			area._updateBrowserHistory(
-				this.name,
-				activeRoute,
-				routeAction.historyStrategy || HISTORY_STRATEGY.push,
-				routeAction.clearQueryParams,
-				routeAction.path
-			)
-		}
+			takeUntil(this.disconnecting),
+		).subscribe()
 	}
 
 	disconnectedCallback() {

package/src/button/button.ts

@@ -1,5 +1,5 @@
-import { SchmancyElement } from '@mixins/index'
 import { provide } from '@lit/context'
+import { SchmancyElement } from '@mixins/index'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -26,8 +26,7 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
 @customElement('schmancy-button')
 export class SchmancyButton extends SchmancyElement {
 	static styles = [css`:host{
-		display: inline-block;
-		min-width: fit-content;
+		display: inline-flex;
 		overflow: hidden;
 		position: relative;
 		touch-action: manipulation;
@@ -36,6 +35,10 @@ export class SchmancyButton extends SchmancyElement {
 			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
 			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
+	:host([width="full"]) {
+		display: flex;
+		width: 100%;
+	}
 	:host(:hover:not([disabled])) {
 		box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
 	}
@@ -165,7 +168,7 @@ export class SchmancyButton extends SchmancyElement {
 	 * @default 'auto'
 	 * @public
 	 */
-	@property()
+	@property({ reflect: true })
 	public width: 'full' | 'auto' = 'auto'
 
 	/**
@@ -301,7 +304,7 @@ export class SchmancyButton extends SchmancyElement {
 
 		// Compute classes for the interactive element.
 		const classes = {
-			'z-0 transition-all duration-200 relative rounded-2xl flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden w-full overflow-hidden':
+			'z-0 transition-all duration-200 relative rounded-2xl flex justify-center items-center outline-secondary-default focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-hidden flex-1 overflow-hidden':
 				true,
 			// Height - M3 spec: 24dp (xxs) → 32dp (dense) → 40dp (default) → 48dp (large) → 56dp (XL)
 			'h-6': this.size === 'xxs',   // 24px - Ultra-compact