@mhmo91/schmancy 0.9.27 → 0.10.1

package/src/agent/helpers.ts

@@ -19,7 +19,6 @@ export type ElementEntry = {
 	slots?: Array<{ name: string; description?: string }>
 	cssProperties?: Array<{ name: string; description?: string }>
 	cssParts?: Array<{ name: string; description?: string }>
-	examples?: string[]
 	whenToUse?: string
 	platformPrimitive?: { tag: string; mode?: string; note?: string }
 	contexts?: { provides?: string[]; consumes?: string[] }
@@ -73,99 +72,6 @@ export function tokens(): string[] {
 	return (manifest as { tokens?: string[] }).tokens ?? []
 }
 
-// --- findFor: keyword search over the manifest -------------------------------
-
-/**
- * Stopwords stripped from both query and document tokens. Kept short on
- * purpose — over-aggressive stopword lists hurt recall on short queries
- * like "use". Word "use" stays in because of "use case" matches.
- */
-const STOPWORDS = new Set([
-	'a', 'an', 'and', 'or', 'the', 'of', 'in', 'on', 'at', 'to', 'for', 'with',
-	'is', 'it', 'this', 'that', 'these', 'those', 'be', 'by', 'as', 'are', 'was',
-	'i', 'you', 'we', 'my', 'your',
-])
-
-function tokenize(text: string): Set<string> {
-	const out = new Set<string>()
-	for (const t of text.toLowerCase().match(/[a-z][a-z0-9]+/g) ?? []) {
-		if (t.length >= 2 && !STOPWORDS.has(t)) out.add(t)
-	}
-	return out
-}
-
-type IndexEntry = {
-	entry: ElementEntry
-	body: Set<string>      // tokens from summary + description + examples
-	tagTokens: Set<string> // tokens derived from the tag name itself
-}
-
-let _searchIndex: IndexEntry[] | null = null
-
-function buildSearchIndex(): IndexEntry[] {
-	return elements().map(entry => {
-		const tagTokens = tokenize((entry.tagName ?? '').replace(/-/g, ' '))
-		const body = tokenize(
-			[
-				entry.tagName ?? '',
-				entry.summary ?? '',
-				entry.description ?? '',
-				entry.whenToUse ?? '',
-				(entry.examples ?? []).join(' '),
-			].join(' '),
-		)
-		return { entry, body, tagTokens }
-	})
-}
-
-export type FindForResult = {
-	tag: string
-	score: number
-	summary?: string
-	examples?: string[]
-}
-
-/**
- * Keyword search over the component manifest. Tokenizes the query the same
- * way each component's `summary + description + examples` were tokenized,
- * and returns the components with the most overlap. Tag-name token matches
- * count for 3× a body-text match.
- *
- * Designed to catch the "I'm reaching for a custom component, what does
- * schmancy ship?" gap without bringing in a vector-embedding dependency.
- *
- * @example
- * window.schmancy.findFor('status pill')
- * // → [{ tag: 'schmancy-badge', score: 4, summary: '…', examples: [...] }]
- *
- * window.schmancy.findFor('initials avatar')
- * // → [{ tag: 'schmancy-avatar', score: 5, ... }]
- *
- * window.schmancy.findFor('xyz123nonexistent') // → []
- */
-export function findFor(query: string, limit = 5): FindForResult[] {
-	if (!_searchIndex) _searchIndex = buildSearchIndex()
-	const queryTokens = tokenize(query)
-	if (queryTokens.size === 0) return []
-
-	const scored: Array<{ entry: ElementEntry; score: number }> = []
-	for (const ix of _searchIndex) {
-		let score = 0
-		for (const qt of queryTokens) {
-			if (ix.tagTokens.has(qt)) score += 3
-			else if (ix.body.has(qt)) score += 1
-		}
-		if (score > 0) scored.push({ entry: ix.entry, score })
-	}
-	scored.sort((a, b) => b.score - a.score)
-	return scored.slice(0, limit).map(({ entry, score }) => ({
-		tag: entry.tagName ?? '',
-		score,
-		summary: entry.summary,
-		examples: entry.examples,
-	}))
-}
-
 export function platformPrimitive(tag: string): ElementEntry['platformPrimitive'] | null {
 	return elements().find(e => e.tagName === tag)?.platformPrimitive ?? null
 }
@@ -233,7 +139,7 @@ export function capabilities(): Capabilities {
 			try {
 				// Native scoped registries require a constructible CustomElementRegistry.
 				// Pre-Safari-26/Chrome-146, the constructor throws Illegal constructor.
-				new (window as { CustomElementRegistry?: new () => unknown }).CustomElementRegistry!()
+				void new (window as { CustomElementRegistry?: new () => unknown }).CustomElementRegistry!()
 				return true
 			} catch {
 				return false

package/src/agent/schmancy-skill.ts

@@ -1,10 +1,9 @@
-import { $LitElement } from '../../mixins/index'
+import { SchmancyElement } from '../../mixins/index'
 import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import {
 	a11yAudit,
 	capabilities,
-	findFor,
 	help,
 	manifest,
 	manifestUrl,
@@ -24,7 +23,6 @@ declare global {
 			registeredTags: typeof registeredTags
 			a11yAudit: typeof a11yAudit
 			capabilities: typeof capabilities
-			findFor: typeof findFor
 		}
 	}
 }
@@ -44,7 +42,6 @@ function install() {
 		registeredTags,
 		a11yAudit,
 		capabilities,
-		findFor,
 	}
 }
 
@@ -56,7 +53,7 @@ function install() {
  * @element schmancy-skill
  */
 @customElement('schmancy-skill')
-export class SchmancySkill extends $LitElement() {
+export class SchmancySkill extends SchmancyElement {
 	connectedCallback() {
 		super.connectedCallback()
 		install()

package/src/agent/virtual-manifest.d.ts

@@ -1,21 +1,10 @@
 declare module 'virtual:schmancy-manifest' {
 	type ManifestModule = { kind: 'javascript-module'; path: string; declarations: Array<Record<string, unknown>> }
-	type ManifestRule = {
-		id: string
-		scope: 'global' | 'tag' | 'token' | 'attribute' | 'workflow'
-		applies?: string[]
-		rule: string
-		severity: 'error' | 'warn' | 'hint'
-		validator?: string
-	}
 	const manifest: {
-		/** '1.1.0' adds the structured `rules` array. `conventions` stays for back-compat. */
-		schemaVersion: '1.1.0'
+		schemaVersion: '1.0.0'
 		readme?: string
 		modules: ManifestModule[]
 		tokens: string[]
-		conventions: string[]
-		rules: ManifestRule[]
 	}
 	export default manifest
 }

package/src/area/area.component.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 import {
@@ -16,33 +16,21 @@ import {
 	takeUntil,
 	tap,
 } from 'rxjs'
-import area from './area.service'
+import { area } from './area.service'
 import { RouteComponent, SchmancyRoute } from './route.component'
 import { ActiveRoute, HISTORY_STRATEGY, RouteAction } from './router.types'
 
-/**
- * Router outlet — renders the active route's component for the named area. Drives the schmancy router via the `area` service.
- *
- * @element schmancy-area
- * @summary Mount once per "addressable region" of the app (typically the main content area). Use the imperative `area.push({ area, component, params })` service to navigate. Multiple named areas can coexist on a page (e.g. main content + a sheet).
- * @example
- * <schmancy-area name="main"></schmancy-area>
- * <script>
- *   import { area } from '@mhmo91/schmancy';
- *   area.push({ area: 'main', component: MyDashboardView, params: { id: 42 } });
- * </script>
- * @platform div - Routing outlet. Degrades to an empty div if the tag never registers — routing is lost but the page stays accessible.
- * @fires redirect - When the area resolves a route to a different destination (programmatic redirect). `detail.from` and `detail.to` are the route names.
- */
 @customElement('schmancy-area')
-export class SchmancyArea extends $LitElement(css`
+export class SchmancyArea extends SchmancyElement {
+	static styles = [css`
 	:host {
 		position: relative;
 		display: block;
 		inset: 0;
 		contain: layout style;
 	}
-`) {
+`]
+
 	/**
 	 * The name of the router outlet
 	 * @attr
@@ -342,7 +330,7 @@ export class SchmancyArea extends $LitElement(css`
 				if (element) {
 					if (route.params) Object.assign(element, route.params)
 					if (route.props) Object.assign(element, route.props)
-					if (route.state) (element as any).state = route.state
+					if (route.state) Object.assign(element, { state: route.state })
 				}
 
 				return { element, route }

package/src/area/area.service.test.ts

@@ -8,8 +8,6 @@ class TestAreaService {
 	public prettyURL = false
 	public enableHistoryMode = true
 
-	constructor() {}
-
 	// Copy the createCleanURL method for direct testing
 	createCleanURL(areas: Record<string, ActiveRoute>, clearQueryParams?: string[] | boolean | null): string {
 		// Get the current base path (everything except the last segment which might be encoded state)
@@ -75,9 +73,10 @@ class TestAreaService {
 		// Fallback to encoded state in URL (original behavior)
 		try {
 			// Clean up empty objects before encoding
-			const cleanedAreas: Record<string, any> = {}
+			type CleanRoute = Omit<ActiveRoute, 'area'>
+			const cleanedAreas: Record<string, CleanRoute> = {}
 			Object.entries(areas).forEach(([areaName, route]) => {
-				const cleanRoute: any = { component: route.component }
+				const cleanRoute: CleanRoute = { component: route.component }
 
 				// Only include state if it has content
 				if (route.state && Object.keys(route.state).length > 0) {
@@ -823,7 +822,7 @@ describe('AreaService - Edge Cases', () => {
 		mockLocation.pathname = '/demo/area/'
 
 		// Create a large state object
-		const largeState: Record<string, any> = {}
+		const largeState: Record<string, string> = {}
 		for (let i = 0; i < 1000; i++) {
 			largeState[`key${i}`] = `value${i}`.repeat(10)
 		}

package/src/area/area.service.ts

@@ -496,9 +496,10 @@ class AreaService implements AreaSubscription {
 		// Fallback to encoded state in URL (original behavior)
 		try {
 			// Clean up empty objects before encoding
-			const cleanedAreas: Record<string, any> = {}
+			type CleanRoute = Omit<ActiveRoute, 'area'>
+			const cleanedAreas: Record<string, CleanRoute> = {}
 			Object.entries(areas).forEach(([areaName, route]) => {
-				const cleanRoute: any = { component: route.component }
+				const cleanRoute: CleanRoute = { component: route.component }
 
 				// Only include state if it has content
 				if (route.state && Object.keys(route.state).length > 0) {
@@ -632,7 +633,7 @@ class AreaService implements AreaSubscription {
 		if (this.enableHistoryMode) {
 			try {
 				const currentState = history.state || {}
-				const schmancyAreas = { ...(currentState.schmancyAreas || {}) }
+				const schmancyAreas = { ...currentState.schmancyAreas }
 				delete schmancyAreas[name]
 
 				const newState = {

package/src/area/route.component.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index';
+import { SchmancyElement } from '@mixins/index';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Observable } from 'rxjs';
@@ -11,7 +11,7 @@ export type RouteComponent =
   | string // Tag name
   | CustomElementConstructor // Constructor function
   | HTMLElement // Existing element
-  | LazyComponent<any> 
+  | LazyComponent<CustomElementConstructor>
 
 export interface RouteConfig {
   when: string;
@@ -20,11 +20,22 @@ export interface RouteConfig {
   guard?:  ObservableGuardResult;
 }
 
+export type SchmancyRouteRedirectEvent = CustomEvent<{
+  blockedRoute: string;
+  area: string;
+  params: Record<string, string>;
+  state: Record<string, unknown>;
+  redirectTarget?: unknown;
+}>;
+
 /**
  * A marker component that holds route configuration.
  * This component doesn't render anything - it's used by schmancy-area
  * to configure routing via slot change detection.
  *
+ * @fires {SchmancyRouteRedirectEvent} redirect - Fired by the parent schmancy-area
+ *   on this element when the route's guard emits false. Listen with `@redirect`.
+ *
  * @example
  * ```html
  * <schmancy-area>
@@ -37,11 +48,13 @@ export interface RouteConfig {
  * ```
  */
 @customElement('schmancy-route')
-export class SchmancyRoute extends $LitElement(css`
+export class SchmancyRoute extends SchmancyElement {
+	static styles = [css`
   :host {
     display: none;
   }
-`) {
+`]
+
   @property({ type: String })
   when!: string;
 

package/src/area/utils.ts

@@ -45,8 +45,8 @@ export function compareCustomElementConstructors(
 		// Check if they have the same prototype chain
 		if (Object.getPrototypeOf(proto1) === Object.getPrototypeOf(proto2)) {
 			// Check if they have the same property names
-			const keys1 = Object.getOwnPropertyNames(proto1).sort()
-			const keys2 = Object.getOwnPropertyNames(proto2).sort()
+			const keys1 = Object.getOwnPropertyNames(proto1).toSorted()
+			const keys2 = Object.getOwnPropertyNames(proto2).toSorted()
 
 			return keys1.length === keys2.length && keys1.every((key, i) => key === keys2[i])
 		}
@@ -144,6 +144,7 @@ export function debounce<T extends (...args: any[]) => any>(func: T, wait: numbe
 	let timeout: ReturnType<typeof setTimeout> | null = null
 
 	return function (this: any, ...args: Parameters<T>) {
+		// oxlint-disable-next-line typescript/no-this-alias
 		const context = this
 
 		if (timeout !== null) {

package/src/audio/sound.service.ts

@@ -28,7 +28,7 @@
  */
 
 import { BehaviorSubject, distinctUntilChanged, map, shareReplay } from 'rxjs'
-import { createContext } from '../store'
+import { state } from '../state'
 import type {
 	Feeling,
 	FeelingCategory,
@@ -43,16 +43,12 @@ import type {
 // CONTEXT
 // ============================================================================
 
-/** Sound settings context - persists to local storage */
-const SoundContext = createContext<SoundThemeSettings>(
-	{
-		theme: null,
-		volume: 0.15,
-		muted: false,
-	},
-	'local',
-	'schmancy-sound-settings'
-)
+/** Sound settings — persists to localStorage under namespace `schmancy/sound`. */
+const SoundContext = state<SoundThemeSettings>('schmancy/sound').local({
+	theme: null,
+	volume: 0.15,
+	muted: false,
+})
 
 // ============================================================================
 // DEFAULT SOUND THEME

package/src/autocomplete/autocomplete.ts

@@ -1,9 +1,10 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { InputSize, SchmancyInput } from '@schmancy/input'
 import SchmancyOption from '@schmancy/option/option'
-import { html, nothing } from 'lit'
+import { html, nothing, unsafeCSS } from 'lit'
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
@@ -36,18 +37,7 @@ interface FilteredOption {
 }
 
 /**
- * Combobox with type-ahead filtering over a list of `<schmancy-option>` children. Single or multi-select. Form-associated.
- *
- * @element schmancy-autocomplete
- * @summary Use when users need to pick from a known list of options but the list is too long for a plain select dropdown. Prefer schmancy-select for short static lists.
- * @example
- * <schmancy-autocomplete name="country" label="Country" placeholder="Start typing…">
- *   <schmancy-option value="US">United States</schmancy-option>
- *   <schmancy-option value="CA">Canada</schmancy-option>
- *   <schmancy-option value="GB">United Kingdom</schmancy-option>
- * </schmancy-autocomplete>
- * @platform combobox change - Composed of a schmancy-input + a floating listbox populated from `<schmancy-option>` children. Multi-select renders selections as schmancy-input-chip chips. Degrades to a datalist-backed native input if the tag never registers.
- * @fires change - `SchmancyAutocompleteChangeEvent` with `{ value }` (single) or `{ value, values }` (multi).
+ * Autocomplete input component with filtering and multi-select support.
  *
  * @prop {string} name - Name attribute for form submission
  * @prop {string} label - Label text displayed above the input
@@ -58,7 +48,9 @@ interface FilteredOption {
  * @prop {string[]} values - Selected values (multi-select mode)
  */
 @customElement('schmancy-autocomplete')
-export default class SchmancyAutocomplete extends $LitElement(style) {
+export default class SchmancyAutocomplete extends SchmancyElement {
+    static styles = [unsafeCSS(style)];
+
     static formAssociated = true
     internals: ElementInternals | undefined
 
@@ -220,16 +212,21 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
             if (!option.id) {
                 option.id = `${this.id}-option-${index}`
             }
+            // Idempotent: slotchange may fire repeatedly for the same option nodes,
+            // and addEventListener doesn't replace prior handlers like onfoo= did.
+            if (option.dataset.schmancyAutocompleteHandlers === 'attached') return
+            option.dataset.schmancyAutocompleteHandlers = 'attached'
+
             // Prevent blur handler from interfering with option selection
-            option.onmousedown = (e: MouseEvent) => {
+            option.addEventListener('mousedown', (e: MouseEvent) => {
                 e.preventDefault() // Prevent focus loss
-            }
+            })
 
             // Handle the actual selection
-            option.onclick = (e: MouseEvent) => {
+            option.addEventListener('click', (e: MouseEvent) => {
                 e.stopPropagation()
                 this._selectOption(option)
-            }
+            })
         })
     }
 
@@ -604,7 +601,7 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
                                 aria-haspopup="listbox"
                                 aria-controls="options"
                                 aria-expanded=${this._open}
-                                aria-describedby=${this.description ? descriptionId : undefined}
+                                aria-describedby=${ifDefined(this.description ? descriptionId : undefined)}
                                 @input=${(e: Event) => {
                                     const value = (e.target as HTMLInputElement).value
                                     this._inputValue = value
@@ -734,7 +731,7 @@ export default class SchmancyAutocomplete extends $LitElement(style) {
         if (!isOpen) return
 
         const visibleOptions = this._options.filter(opt => !opt.hidden)
-            .sort((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
+            .toSorted((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
 
         const focusedOption = visibleOptions.find(opt => opt === document.activeElement)
         const currentIndex = focusedOption ? visibleOptions.indexOf(focusedOption) : -1

package/src/{avatar.ts → avatar/avatar.ts}

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { color } from '@schmancy/directives'
@@ -41,7 +41,7 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none'
  * ></schmancy-avatar>
  */
 @customElement('schmancy-avatar')
-export class SchmancyAvatar extends $LitElement() {
+export class SchmancyAvatar extends SchmancyElement {
 	@property({ type: String }) initials: string = ''
 	@property({ type: String }) src: string = ''
 	@property({ type: String }) icon: string = ''

package/src/avatar/index.ts

@@ -0,0 +1 @@
+export * from './avatar'

package/src/badge/badge.ts

@@ -1,4 +1,4 @@
-import { TailwindElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { color } from '@schmancy/directives'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -31,7 +31,8 @@ export type BadgeShape = 'rounded' | 'pill' | 'square'
  * @csspart icon - The icon container
  */
 @customElement('schmancy-badge')
-export class SchmancyBadgeV2 extends TailwindElement(css`
+export class SchmancyBadgeV2 extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: inline-flex;
 		width: fit-content;
@@ -50,7 +51,7 @@ export class SchmancyBadgeV2 extends TailwindElement(css`
 	.animate-pulse {
 		animation: elegant-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
-`) {
+`];
 	/**
 	 * The color variant of the badge
 	 * @attr

package/src/boat/boat.ts

@@ -1,4 +1,4 @@
-import { $LitElement } from '@mixins/index'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -22,7 +22,8 @@ interface Position {
 }
 
 @customElement('schmancy-boat')
-export default class SchmancyBoat extends $LitElement(css`
+export default class SchmancyBoat extends SchmancyElement {
+	static styles = [css`
 	:host {
 		display: contents;
 		position: relative;
@@ -31,7 +32,8 @@ export default class SchmancyBoat extends $LitElement(css`
 	:host([hidden]) {
 		display: none !important;
 	}
-`) {
+`]
+
 	@property({ type: String }) id: string = 'default'
 	@property({ type: String }) icon?: string
 	@property({ type: String }) label?: string
@@ -95,9 +97,9 @@ export default class SchmancyBoat extends $LitElement(css`
 		return 'inset(0px 0px 0px 0px round 12px)'
 	}
 
-	private get elevation(): string {
-		if (this.open) return '4'
-		return this.lowered ? '1' : '3'
+	private get elevation(): 0 | 1 | 2 | 3 | 4 | 5 {
+		if (this.open) return 4
+		return this.lowered ? 1 : 3
 	}
 
 	// ============================================
@@ -225,6 +227,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			if (container.isConnected) {
 				container.style.transform = ''
 			}
+			return
 		})
 
 		this._savePosition()
@@ -241,50 +244,37 @@ export default class SchmancyBoat extends $LitElement(css`
 
 		let didDrag = false
 
-		merge(
-			fromEvent<MouseEvent>(header, 'mousedown').pipe(
+		fromEvent<PointerEvent>(header, 'pointerdown')
+			.pipe(
 				filter(e => e.button === 0),
 				tap(e => {
 					e.preventDefault()
 					e.stopPropagation()
+					header.setPointerCapture(e.pointerId)
 				}),
-				map(e => ({ clientX: e.clientX, clientY: e.clientY, type: 'mouse' as const })),
-			),
-			fromEvent<TouchEvent>(header, 'touchstart').pipe(
-				map(e => ({
-					clientX: e.touches[0].clientX,
-					clientY: e.touches[0].clientY,
-					type: 'touch' as const,
-				})),
-			),
-		)
-			.pipe(
-				map(({ clientX, clientY, type }) => {
+				map(e => {
 					const rect = container.getBoundingClientRect()
 					const isBottom = this._currentCorner.includes('bottom')
 					const wasOpen = this.open
 					didDrag = false
 					return {
-						startX: clientX,
-						startY: clientY,
-						offsetX: clientX - rect.left,
-						offsetY: clientY - rect.top,
+						pointerId: e.pointerId,
+						startX: e.clientX,
+						startY: e.clientY,
+						offsetX: e.clientX - rect.left,
+						offsetY: e.clientY - rect.top,
 						rect,
 						isBottom,
 						wasOpen,
-						type,
 					}
 				}),
-				switchMap(({ startX, startY, offsetX, offsetY, rect, isBottom, wasOpen, type }) => {
-					const move$ =
-						type === 'mouse'
-							? fromEvent<MouseEvent>(window, 'mousemove').pipe(
-									map(e => ({ clientX: e.clientX, clientY: e.clientY })),
-								)
-							: fromEvent<TouchEvent>(window, 'touchmove').pipe(
-									map(e => ({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY })),
-								)
-					const end$ = type === 'mouse' ? fromEvent(window, 'mouseup') : fromEvent(window, 'touchend')
+				switchMap(({ pointerId, startX, startY, offsetX, offsetY, rect, isBottom, wasOpen }) => {
+					const sameId = (e: PointerEvent) => e.pointerId === pointerId
+					const move$ = fromEvent<PointerEvent>(window, 'pointermove').pipe(filter(sameId))
+					const end$ = merge(
+						fromEvent<PointerEvent>(window, 'pointerup'),
+						fromEvent<PointerEvent>(window, 'pointercancel'),
+					).pipe(filter(sameId))
 
 					return move$.pipe(
 						tap(({ clientX, clientY }) => {
@@ -441,6 +431,7 @@ export default class SchmancyBoat extends $LitElement(css`
 				container.style.clipPath = ''
 				container.style.overflow = ''
 			}
+			return
 		})
 
 		this.dispatchScopedEvent('toggle', 'expanded')
@@ -563,6 +554,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			'items-center': true,
 			'gap-2': true,
 			'select-none': true,
+			'touch-none': true,
 			'cursor-grabbing': this.isDragging,
 			'cursor-move': !this.isDragging,
 			'transition-opacity': true,
@@ -575,7 +567,7 @@ export default class SchmancyBoat extends $LitElement(css`
 			<schmancy-surface
 				${ref(this._containerRef)}
 				type="glass"
-				elevation="${this.elevation}"
+				.elevation=${this.elevation}
 				class=${containerClasses}
 				style=${containerStyles}
 				aria-expanded=${this.open}