@mhmo91/schmancy 0.8.6 → 0.9.3

package/src/discovery/discovery.service.ts

@@ -0,0 +1,210 @@
+import { fromEvent, timer, race, Observable } from 'rxjs'
+import { takeUntil, map, defaultIfEmpty, take } from 'rxjs/operators'
+
+/**
+ * Global discovery event names
+ */
+const DISCOVER_EVENT = 'schmancy-discover'
+const DISCOVER_RESPONSE_EVENT = 'schmancy-discover-response'
+
+/**
+ * Discovery request detail
+ */
+interface DiscoverRequest {
+	selector: string
+	requestId: string
+}
+
+/**
+ * Discovery response detail
+ */
+interface DiscoverResponse {
+	requestId: string
+	element: HTMLElement
+}
+
+/**
+ * Discover a component in the DOM using the WhereAreYou/HereIAm pattern.
+ *
+ * @param componentTag - The tag name of the component to discover (e.g., 'schmancy-navigation-rail')
+ * @param timeout - How long to wait for a response in milliseconds (default: 100)
+ * @returns Observable that emits the discovered component or null if not found
+ */
+export function discoverComponent<T extends HTMLElement>(
+	componentTag: string,
+	timeout = 100,
+): Observable<T | null> {
+	const whereAreYouEvent = `${componentTag}-where-are-you`
+	const hereIAmEvent = `${componentTag}-here-i-am`
+
+	return new Observable(subscriber => {
+		const subscription = fromEvent<CustomEvent>(window, hereIAmEvent)
+			.pipe(
+				takeUntil(timer(timeout)),
+				map(e => e.detail.component as T),
+				defaultIfEmpty(null),
+			)
+			.subscribe(component => {
+				subscriber.next(component)
+				subscriber.complete()
+			})
+
+		window.dispatchEvent(
+			new CustomEvent(whereAreYouEvent, {
+				bubbles: true,
+				composed: true,
+			}),
+		)
+
+		return () => subscription.unsubscribe()
+	})
+}
+
+/**
+ * Discover any of multiple components using race.
+ * Returns the first component that responds.
+ *
+ * @param componentTags - Array of component tag names to discover
+ * @returns Observable that emits the first discovered component or null if none found
+ */
+export function discoverAnyComponent<T extends HTMLElement>(...componentTags: string[]): Observable<T | null> {
+	if (componentTags.length === 0) {
+		return new Observable(subscriber => {
+			subscriber.next(null)
+			subscriber.complete()
+		})
+	}
+
+	return race(...componentTags.map(tag => discoverComponent<T>(tag)))
+}
+
+/**
+ * Universal element discovery - finds ANY element by CSS selector across shadow DOM boundaries.
+ * Uses event-based discovery pattern - no DOM traversal needed.
+ *
+ * How it works:
+ * 1. Broadcasts a discovery request event on window
+ * 2. All $LitElement components receive this event and check their shadow DOM
+ * 3. If a match is found, they respond with the element
+ *
+ * @param selector - CSS selector (e.g., '#my-id', '.my-class', '[data-attr]')
+ * @param timeout - How long to wait for a response in milliseconds (default: 150)
+ * @returns Observable that emits the discovered element or null if not found
+ *
+ * @example
+ * ```typescript
+ * // Find element by ID across shadow boundaries
+ * discoverElement('#app-card-melanie').subscribe(el => {
+ *   if (el) console.log('Found:', el)
+ * })
+ *
+ * // Find element by class
+ * discoverElement('.special-button').subscribe(el => {...})
+ * ```
+ */
+export function discoverElement<T extends HTMLElement>(
+	selector: string,
+	timeout = 150,
+): Observable<T | null> {
+	const requestId = `discover-${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+	return new Observable(subscriber => {
+		const subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)
+			.pipe(
+				takeUntil(timer(timeout)),
+				map(e => e.detail),
+				map(detail => (detail.requestId === requestId ? (detail.element as T) : null)),
+				take(1),
+				defaultIfEmpty(null),
+			)
+			.subscribe(element => {
+				subscriber.next(element)
+				subscriber.complete()
+			})
+
+		window.dispatchEvent(
+			new CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {
+				detail: { selector, requestId },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+
+		return () => subscription.unsubscribe()
+	})
+}
+
+/**
+ * Discover multiple elements matching a selector.
+ * Collects all responses within the timeout period.
+ *
+ * @param selector - CSS selector
+ * @param timeout - How long to collect responses (default: 150ms)
+ * @returns Observable that emits array of discovered elements
+ */
+export function discoverAllElements<T extends HTMLElement>(
+	selector: string,
+	timeout = 150,
+): Observable<T[]> {
+	const requestId = `discover-all-${Date.now()}-${Math.random().toString(36).slice(2)}`
+	const elements: T[] = []
+
+	return new Observable(subscriber => {
+		const subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)
+			.pipe(takeUntil(timer(timeout)))
+			.subscribe({
+				next: e => {
+					if (e.detail.requestId === requestId) {
+						elements.push(e.detail.element as T)
+					}
+				},
+				complete: () => {
+					subscriber.next(elements)
+					subscriber.complete()
+				},
+			})
+
+		window.dispatchEvent(
+			new CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {
+				detail: { selector, requestId },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+
+		return () => subscription.unsubscribe()
+	})
+}
+
+/**
+ * Smart discovery - automatically detects if input is a CSS selector or component tag.
+ *
+ * @param query - CSS selector (starts with #, ., [) OR component tag name
+ * @param timeout - How long to wait (default: 150ms)
+ * @returns Observable that emits the discovered element or null
+ *
+ * @example
+ * ```typescript
+ * // CSS selector - uses discoverElement
+ * discover('#my-element').subscribe(...)
+ *
+ * // Component tag - uses discoverComponent
+ * discover('schmancy-fancy').subscribe(...)
+ * ```
+ */
+export function discover<T extends HTMLElement>(
+	query: string,
+	timeout = 150,
+): Observable<T | null> {
+	const isCssSelector = /^[#.\[]/.test(query)
+
+	if (isCssSelector) {
+		return discoverElement<T>(query, timeout)
+	}
+
+	return discoverComponent<T>(query, timeout)
+}
+
+// Export event names for use in baseElement
+export { DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT }
+export type { DiscoverRequest, DiscoverResponse }

package/src/discovery/index.ts

@@ -0,0 +1 @@
+export * from './discovery.service';

package/src/divider/divider.ts

@@ -0,0 +1,100 @@
+// divider.ts
+import { $LitElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('schmancy-divider')
+export default class SchmancyDivider extends $LitElement(css`
+	:host {
+		display: block;
+	}
+
+	@keyframes grow-horizontal {
+		from {
+			transform: scaleX(0);
+		}
+		to {
+			transform: scaleX(1);
+		}
+	}
+
+	@keyframes grow-vertical {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	/* Horizontal divider grow animations */
+	.grow-start:not(.h-full) {
+		animation: grow-horizontal 400ms ease-out;
+		transform-origin: left;
+	}
+
+	.grow-end:not(.h-full) {
+		animation: grow-horizontal 400ms ease-out;
+		transform-origin: right;
+	}
+
+	.grow-both:not(.h-full) {
+		animation: grow-horizontal 400ms ease-out;
+		transform-origin: center;
+	}
+
+	/* Vertical divider grow animations */
+	.grow-start.h-full {
+		animation: grow-vertical 400ms ease-out;
+		transform-origin: top;
+	}
+
+	.grow-end.h-full {
+		animation: grow-vertical 400ms ease-out;
+		transform-origin: bottom;
+	}
+
+	.grow-both.h-full {
+		animation: grow-vertical 400ms ease-out;
+		transform-origin: center;
+	}
+`) {
+	@property({ type: String }) outline: 'default' | 'variant' = 'variant'
+	@property({ type: Boolean }) vertical = false
+	@property({ type: String }) grow: 'start' | 'end' | 'both' = 'start'
+
+	/**
+	 * @deprecated Use `vertical` property instead. Will be removed in next major version.
+	 */
+	@property({ reflect: true, type: String })
+	set orientation(value: 'horizontal' | 'vertical') {
+		this.vertical = value === 'vertical'
+	}
+	get orientation(): 'horizontal' | 'vertical' {
+		return this.vertical ? 'vertical' : 'horizontal'
+	}
+
+	protected render() {
+		return html`<div
+			class=${this.classMap({
+				// Dimensions
+				'w-full h-px': !this.vertical,
+				'h-full w-px': this.vertical,
+				// Border color
+				'border-outlineVariant': this.outline === 'variant',
+				'border-outline': this.outline === 'default',
+				// Border style
+				'border-t': !this.vertical,
+				'border-l': this.vertical,
+				// Grow behavior
+				[`grow-${this.grow}`]: true,
+			})}
+		></div>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-divider': SchmancyDivider
+	}
+}

package/src/divider/index.ts

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

package/src/dropdown/dropdown-component.ts

@@ -0,0 +1,264 @@
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { $LitElement } from '@mixins/index'
+import { html } from 'lit'
+import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'
+import { filter, fromEvent, takeUntil, Subscription } from 'rxjs'
+
+/**
+ * A dropdown component that displays content when triggered.
+ *
+ * @element schmancy-dropdown
+ * @slot trigger - The element that triggers the dropdown
+ * @slot - Default slot for the dropdown content
+ */
+@customElement('schmancy-dropdown')
+export class SchmancyDropdown extends $LitElement() {
+	/**
+	 * Whether the dropdown is currently open
+	 */
+	@property({ type: Boolean, reflect: true })
+	open = false
+
+	/**
+	 * Placement of the dropdown relative to the trigger
+	 */
+	@property({ type: String })
+	placement:
+		| 'top'
+		| 'top-start'
+		| 'top-end'
+		| 'right'
+		| 'right-start'
+		| 'right-end'
+		| 'bottom'
+		| 'bottom-start'
+		| 'bottom-end'
+		| 'left'
+		| 'left-start'
+		| 'left-end' = 'bottom-start'
+
+	/**
+	 * Offset distance in pixels
+	 */
+	@property({ type: Number })
+	distance = 8
+
+	@query('.trigger-container') triggerContainer!: HTMLElement
+	@query('.dropdown-content-container') contentContainer!: HTMLElement
+	@queryAssignedElements({ flatten: true }) contentElements!: HTMLElement[]
+	@state() private portal: HTMLElement | null = null
+
+	@queryAssignedElements({ slot: 'trigger', flatten: true })
+	triggerElements!: Array<HTMLElement>
+
+	private cleanupPositioner?: () => void
+	private portalSubscriptions: Subscription[] = []
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Create portal container for teleporting content to document body
+		this.setupPortal()
+
+		// Listen for document clicks to close dropdown when clicking outside
+		fromEvent<MouseEvent>(document, 'click')
+			.pipe(
+				filter(event => this.open && !this.isEventFromSelf(event)),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe(() => {
+				this.open = false
+			})
+
+		// Listen for escape key to close dropdown
+		fromEvent<KeyboardEvent>(document, 'keydown')
+			.pipe(
+				filter(event => this.open && event.key === 'Escape'),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe(() => {
+				this.open = false
+			})
+	}
+
+	/**
+	 * Set up the portal element for teleporting content
+	 */
+	private setupPortal() {
+		// Check if portal container exists
+		let portalContainer = document.getElementById('schmancy-portal-container')
+
+		// Create portal container if it doesn't exist
+		if (!portalContainer) {
+			portalContainer = document.createElement('div')
+			portalContainer.id = 'schmancy-portal-container'
+			portalContainer.style.position = 'fixed'
+			portalContainer.style.zIndex = '10000'
+			portalContainer.style.top = '0'
+			portalContainer.style.left = '0'
+			portalContainer.style.pointerEvents = 'none'
+			document.body.appendChild(portalContainer)
+		}
+
+		// Create portal for this specific dropdown
+		const portal = document.createElement('div')
+		portal.className = 'schmancy-dropdown-portal'
+		portal.style.position = 'absolute'
+		portal.style.pointerEvents = 'auto'
+		portal.style.display = 'none'
+		portalContainer.appendChild(portal)
+
+		this.portal = portal
+	}
+
+	/**
+	 * Check if an event originated from within this component
+	 */
+	private isEventFromSelf(event: Event): boolean {
+		return event.composedPath().some(el => el === this)
+	}
+
+	disconnectedCallback() {
+		this.cleanupPositioner?.()
+
+		// Clean up portal subscriptions
+		this.portalSubscriptions.forEach(subscription => subscription.unsubscribe())
+		this.portalSubscriptions = []
+
+		// Remove portal when component is disconnected
+		if (this.portal) {
+			this.portal.remove()
+			this.portal = null
+		}
+
+		super.disconnectedCallback()
+	}
+
+	/**
+	 * Toggle the dropdown open state
+	 */
+	toggle() {
+		this.open = !this.open
+	}
+
+	updated(changedProps: Map<string, any>) {
+		super.updated(changedProps)
+
+		if (changedProps.has('open')) {
+			if (this.open) {
+				this.setupPositioner()
+			} else {
+				this.cleanupPositioner?.()
+
+				// Hide portal when dropdown is closed
+				if (this.portal) {
+					this.portal.style.display = 'none'
+					this.portal.innerHTML = ''
+					// Clean up subscriptions when content is cleared
+					this.portalSubscriptions.forEach(subscription => subscription.unsubscribe())
+					this.portalSubscriptions = []
+				}
+			}
+		}
+	}
+
+	/**
+	 * Setup floating UI positioning with teleportation
+	 */
+	private setupPositioner() {
+		if (!this.triggerContainer || !this.portal) return
+
+		// Show the portal
+		this.portal.style.display = 'block'
+
+		// Move content to portal
+		this.teleportContentToPortal()
+
+		// Setup positioning
+		this.cleanupPositioner = autoUpdate(this.triggerContainer, this.portal, () => {
+			computePosition(this.triggerContainer, this.portal, {
+				placement: this.placement,
+				middleware: [
+					offset(this.distance),
+					flip({
+						fallbackPlacements: ['top-start', 'bottom-start'],
+					}),
+					shift({ padding: 0 }),
+				],
+			}).then(({ x, y }) => {
+				// Update portal position
+				Object.assign(this.portal.style, {
+					left: `${x}px`,
+					top: `${y - 8}px`,
+				})
+			})
+		})
+	}
+
+	/**
+	 * Move slotted content to the portal
+	 */
+	private teleportContentToPortal() {
+		if (!this.portal) return
+
+		// Clean up existing subscriptions
+		this.portalSubscriptions.forEach(subscription => subscription.unsubscribe())
+		this.portalSubscriptions = []
+
+		// Clear existing content
+		this.portal.innerHTML = ''
+
+		// Clone and move slotted content to portal
+		this.contentElements.forEach(element => {
+			// Get computed styles to ensure portal content matches original styling
+			const clonedElement = element.cloneNode(true) as HTMLElement
+
+			// Ensure dropdown-content elements maintain their styles when teleported
+			if (element.tagName.toLowerCase() === 'schmancy-dropdown-content') {
+				const subscription = fromEvent(clonedElement, 'slotchange').subscribe(() => {
+					// Propagate any slot changes to class changes on children
+					const contentDiv = clonedElement.shadowRoot?.querySelector('[part="content"]')
+					if (contentDiv) {
+						contentDiv.classList.add('schmancy-dropdown-content')
+					}
+				})
+				this.portalSubscriptions.push(subscription)
+			}
+
+			this.portal?.appendChild(clonedElement)
+		})
+	}
+
+	/**
+	 * Handle trigger click to toggle dropdown
+	 */
+	private handleTriggerClick(e: Event) {
+		e.stopPropagation()
+		this.toggle()
+	}
+
+	render() {
+		return html`
+			<div class="trigger-container" @click=${this.handleTriggerClick}>
+				<slot name="trigger"></slot>
+			</div>
+
+			<div class="dropdown-content-container" ?hidden=${!this.open}>
+				<slot
+					@slotchange=${() => {
+						if (this.open) {
+							this.teleportContentToPortal()
+							this.setupPositioner()
+						}
+					}}
+				></slot>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-dropdown': SchmancyDropdown
+	}
+}

package/src/dropdown/dropdown-content.ts

@@ -0,0 +1,108 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * Content container for the schmancy-dropdown component.
+ *
+ * @element schmancy-dropdown-content
+ * @slot - Default slot for dropdown content
+ */
+@customElement('schmancy-dropdown-content')
+export class SchmancyDropdownContent extends TailwindElement(css`
+	:host {
+		display: block;
+		position: absolute;
+		z-index: 1000;
+		min-width: 10rem;
+		margin: 0;
+		text-align: left;
+		list-style: none;
+		background-color: var(--schmancy-sys-color-surface-container);
+		background-clip: padding-box;
+		border-radius: 0.375rem;
+		box-shadow: var(--schmancy-sys-elevation-3);
+		will-change: transform;
+		transform-origin: top left;
+		animation: dropdownAnimation 0.1s ease-out forwards;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	@keyframes dropdownAnimation {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	/* Apply styles to content both in the component and when teleported to the portal */
+	.schmancy-dropdown-content {
+		background-color: var(--schmancy-sys-color-surface-container);
+		border-radius: 0.375rem;
+		box-shadow: var(--schmancy-sys-elevation-3);
+		will-change: transform;
+		transform-origin: top left;
+		animation: dropdownAnimation 0.1s ease-out forwards;
+	}
+`) {
+	/**
+	 * Width of the dropdown content
+	 */
+	@property({ type: String })
+	width: string = 'auto'
+
+	/**
+	 * Maximum height of the dropdown content
+	 */
+	@property({ type: String })
+	maxHeight: string = '80vh'
+
+	/**
+	 * Whether to render with a shadow
+	 */
+	@property({ type: Boolean })
+	shadow: boolean = true
+
+	/**
+	 * Border radius style
+	 */
+	@property({ type: String })
+	radius: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md'
+
+	render() {
+		const classes = {
+			'schmancy-dropdown-content': true,
+			'overflow-auto': true,
+			'shadow-none': !this.shadow,
+			'rounded-none': this.radius === 'none',
+			'rounded-sm': this.radius === 'sm',
+			'rounded-md': this.radius === 'md',
+			'rounded-lg': this.radius === 'lg',
+			'rounded-full': this.radius === 'full',
+		}
+
+		const styles = {
+			width: this.width,
+			maxHeight: this.maxHeight,
+		}
+
+		return html`
+			<div class=${this.classMap(classes)} style=${this.styleMap(styles)} part="content">
+				<slot></slot>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-dropdown-content': SchmancyDropdownContent
+	}
+}

package/src/dropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-component'
+export * from './dropdown-content'