@mhmo91/schmancy 0.9.6 → 0.9.7

package/package.json

@@ -1,17 +1,21 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.9.6",
+	"version": "0.9.7",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"customElements": "custom-elements.json",
 	"exports": {
 		".": {
 			"types": "./types/src/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs",
 			"default": "./dist/index.js"
 		},
 		"./mixins": {
 			"types": "./types/mixins/index.d.ts",
-			"default": "./mixins/index.ts"
+			"import": "./dist/mixins.js",
+			"require": "./dist/mixins.cjs",
+			"default": "./dist/mixins.js"
 		},
 		"./*": {
 			"types": "./types/src/*/index.d.ts",
@@ -35,7 +39,6 @@
 		"dist",
 		"types",
 		"src",
-		"mixins",
 		".claude-plugin",
 		"skills",
 		"custom-elements.json",

package/mixins/baseElement.ts

@@ -1,190 +0,0 @@
-import type { Constructor } from './constructor'
-import { LitElement } from 'lit'
-import { Subject, fromEvent, Observable } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
-import { classMap } from 'lit/directives/class-map.js'
-import { styleMap } from 'lit/directives/style-map.js'
-import { discoverComponent, DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT, type DiscoverRequest } from './discovery.service'
-import { consume } from '@lit/context'
-import { themeContext } from '../src/theme/context'
-import type { TSchmancyTheme } from '../src/theme/theme.interface'
-
-export declare class IBaseMixin {
-	disconnecting: Subject<boolean>
-	classMap: typeof classMap
-	styleMap: typeof styleMap
-	discover<T extends HTMLElement>(tag: string): Observable<T | null>
-	readonly stableId: string
-	uid: string
-	/**
-	 * Current locale from theme context. Use with Intl.NumberFormat/DateTimeFormat.
-	 * Defaults to navigator.language if no theme provider is found.
-	 * @example new Intl.NumberFormat(this.locale).format(1234.56)
-	 */
-	readonly locale: string
-	dispatchScopedEvent<T>(eventName: string, detail?: T, options?: { bubbles?: boolean; composed?: boolean }): void
-}
-
-export const BaseElement = <T extends Constructor<LitElement>>(superClass: T) => {
-	class BaseElement extends superClass {
-		disconnecting = new Subject<boolean>()
-		private _stableId?: string
-		private _uid?: string
-
-		@consume({ context: themeContext, subscribe: true })
-		private _theme?: Partial<TSchmancyTheme>
-
-		/** Current locale from theme context. Falls back to navigator.language. */
-		get locale(): string {
-			return this._theme?.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'de-DE')
-		}
-
-		/** Stable ID from DOM path - lazy, only computed on first access */
-		get stableId(): string {
-			if (this._stableId) return this._stableId
-			const path: string[] = []
-			for (let el: Element | null = this; el?.parentElement && path.length < 5; el = el.parentElement) {
-				const tag = el.tagName.toLowerCase()
-				const siblings = Array.from(el.parentElement.children).filter(c => c.tagName === el!.tagName)
-				path.unshift(siblings.length > 1 ? `${tag}:nth-of-type(${siblings.indexOf(el) + 1})` : tag)
-			}
-			const hash = Array.from(path.join('>')).reduce((h, c) => Math.imul(31, h) + c.charCodeAt(0) | 0, 0)
-			return this._stableId = `el-${Math.abs(hash).toString(36)}`
-		}
-
-		/**
-		 * Unique instance ID - can be overridden via attribute, otherwise auto-generated.
-		 * Usage: <my-component uid="custom-id"> or let it auto-generate
-		 */
-		get uid(): string {
-			// Check if uid was set via attribute
-			const attrUid = this.getAttribute('uid')
-			if (attrUid) return attrUid
-
-			// Auto-generate if not set
-			if (!this._uid) {
-				this._uid = `el-${crypto.randomUUID()}`
-			}
-			return this._uid
-		}
-
-		set uid(value: string) {
-			if (value) {
-				this.setAttribute('uid', value)
-			} else {
-				this.removeAttribute('uid')
-			}
-		}
-
-		/**
-		 * Dispatch an event scoped to this component instance.
-		 * Emits BOTH scoped event (eventName::uid) and generic event for backward compatibility.
-		 * This prevents event collision between multiple instances of the same component.
-		 */
-		dispatchScopedEvent<T>(eventName: string, detail?: T, options: { bubbles?: boolean; composed?: boolean } = {}): void {
-			const { bubbles = false, composed = true } = options
-
-			// Emit scoped event for new code
-			this.dispatchEvent(
-				new CustomEvent(`${eventName}::${this.uid}`, {
-					detail,
-					bubbles,
-					composed,
-				})
-			)
-
-			// Emit generic event for backward compatibility
-			this.dispatchEvent(
-				new CustomEvent(eventName, {
-					detail,
-					bubbles,
-					composed,
-				})
-			)
-		}
-
-		classMap(classes: Record<string, boolean>) {
-			const newClasses: Record<string, boolean> = {}
-			Object.keys(classes).forEach(key => {
-				key
-					.trim()
-					.split(' ')
-					.filter(Boolean)
-					.forEach(k => {
-						newClasses[k] = classes[key]
-					})
-			})
-			return classMap(newClasses)
-		}
-
-		styleMap(styles: Record<string, string | number>) {
-			return styleMap(styles)
-		}
-
-		connectedCallback() {
-			super.connectedCallback()
-			this.setupDiscoveryResponse()
-		}
-
-		private setupDiscoveryResponse() {
-			const tagName = this.tagName.toLowerCase()
-			const whereAreYouEvent = `${tagName}-where-are-you`
-			const hereIAmEvent = `${tagName}-here-i-am`
-
-			// 1. Component tag discovery (e.g., 'schmancy-fancy-where-are-you')
-			fromEvent(window, whereAreYouEvent)
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(() => {
-					window.dispatchEvent(
-						new CustomEvent(hereIAmEvent, {
-							detail: { component: this },
-							bubbles: true,
-							composed: true,
-						}),
-					)
-				})
-
-			// 2. CSS selector discovery (e.g., '#app-card', '.my-class', '[uid="xyz"]')
-			fromEvent<CustomEvent<DiscoverRequest>>(window, DISCOVER_EVENT)
-				.pipe(takeUntil(this.disconnecting))
-				.subscribe(({ detail: { selector, requestId } }) => {
-					let found: Element | null = null
-
-					// Check if selector matches this component's id or uid
-					if (selector.startsWith('#')) {
-						const id = selector.slice(1)
-						if (this.id === id || this.uid === id) {
-							found = this
-						}
-					}
-
-					// Check our shadow DOM for matching element
-					if (!found && this.shadowRoot) {
-						found = this.shadowRoot.querySelector(selector)
-					}
-
-					if (found) {
-						window.dispatchEvent(
-							new CustomEvent(DISCOVER_RESPONSE_EVENT, {
-								detail: { requestId, element: found },
-								bubbles: true,
-								composed: true,
-							}),
-						)
-					}
-				})
-		}
-
-		// Make discover public to match the interface
-		discover<T extends HTMLElement>(tag: string): Observable<T | null> {
-			return discoverComponent<T>(tag)
-		}
-
-		disconnectedCallback() {
-			this.disconnecting.next(true)
-			this.disconnecting.complete()
-			super.disconnectedCallback()
-		}
-	}
-	return BaseElement as Constructor<IBaseMixin> & T
-}

package/mixins/constructor.ts

@@ -1,3 +0,0 @@
-export type Constructor<T = {}> = new (...args: any[]) => T
-
-export type AbstractConstructor<T = {}> = abstract new (...args: any[]) => T

package/mixins/discovery.service.ts

@@ -1,221 +0,0 @@
-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 => {
-		// Listen for response first (you were right!)
-		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()
-			})
-
-		// Then dispatch discovery request
-		window.dispatchEvent(
-			new CustomEvent(whereAreYouEvent, {
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-		// Return cleanup function
-		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').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 => {
-		// Listen for response first
-		const subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)
-			.pipe(
-				takeUntil(timer(timeout)),
-				map(e => e.detail),
-				// Filter for our specific request
-				map(detail => (detail.requestId === requestId ? (detail.element as T) : null)),
-				// Only take the first non-null response
-				take(1),
-				defaultIfEmpty(null),
-			)
-			.subscribe(element => {
-				subscriber.next(element)
-				subscriber.complete()
-			})
-
-		// Broadcast discovery request
-		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 => {
-		// Collect all responses
-		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()
-				},
-			})
-
-		// Broadcast discovery request
-		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> {
-	// Check if it's a CSS selector (starts with #, ., or [)
-	const isCssSelector = /^[#.\[]/.test(query)
-
-	if (isCssSelector) {
-		return discoverElement<T>(query, timeout)
-	}
-
-	// Otherwise treat as component tag name
-	return discoverComponent<T>(query, timeout)
-}
-
-// Export event names for use in baseElement
-export { DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT }
-export type { DiscoverRequest, DiscoverResponse }

package/mixins/formField.mixin.ts

@@ -1,255 +0,0 @@
-import { CSSResult, LitElement, PropertyValueMap } from 'lit'
-import { property } from 'lit/decorators.js'
-import { IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-import { ITailwindElementMixin, TailwindElement } from './tailwind.mixin'
-
-/**
- * Cross-realm brand used by `<schmancy-form>` to discover form fields by
- * inheritance rather than tag-name allowlists. `Symbol.for` puts the symbol in
- * the global registry so detection works across module realms/bundles.
- */
-export const SCHMANCY_FORM_FIELD = Symbol.for('schmancy.form-field')
-
-/**
- * Interface defining the properties and methods that the FormFieldMixin adds.
- */
-export interface IFormFieldMixin extends Element {
-	name: string
-	value: string | string[] | boolean | number | undefined
-	label: string
-	required: boolean
-	disabled: boolean
-	readonly: boolean
-	error: boolean
-	validationMessage: string
-	hint?: string
-	id: string
-
-	form: HTMLFormElement | null
-
-	checkValidity(): boolean
-	reportValidity(): boolean
-	setCustomValidity(message: string): void
-
-	toFormEntries(): Array<[string, FormDataEntryValue]>
-	resetForm(): void
-
-	emitChange(detail: any): void
-}
-
-/** Predicate used by `<schmancy-form>` to detect mixin descendants. */
-export function isSchmancyFormField(el: unknown): el is IFormFieldMixin {
-	return !!el && typeof el === 'object' && (el as any).constructor?.[SCHMANCY_FORM_FIELD] === true
-}
-
-/**
- * A mixin that adds form field capabilities to a LitElement class.
- * Components that extend this mixin are automatically discovered and
- * collected by `<schmancy-form>` — no tag-name registration needed.
- *
- * Subclasses may override `toFormEntries()` to contribute multiple
- * name/value pairs to FormData (e.g. date-range, tag-input).
- *
- * @example
- * ```ts
- * class MyInput extends FormFieldMixin(TailwindElement(css`...`)) {
- *   // Your component code here
- * }
- * ```
- */
-export function FormFieldMixin<T extends Constructor<LitElement>>(superClass: T) {
-	class FormFieldMixinClass extends superClass {
-		static formAssociated = true
-
-		/** Brand for cross-realm detection by `<schmancy-form>`. */
-		static readonly [SCHMANCY_FORM_FIELD] = true
-
-		// Element internals for form association
-		internals: ElementInternals | undefined
-
-		/** Value snapshot captured at first render, used by `resetForm()`. */
-		protected _defaultValue: string | string[] | boolean | number | undefined = undefined
-
-		@property({ type: String })
-		name: string = ''
-
-		@property({ reflect: true })
-		value: string | string[] | boolean | number | undefined = ''
-
-		@property({ type: String })
-		label: string = ''
-
-		@property({ type: Boolean, reflect: true })
-		required: boolean = false
-
-		@property({ type: Boolean, reflect: true })
-		disabled: boolean = false
-
-		@property({ type: Boolean, reflect: true })
-		readonly: boolean = false
-
-		@property({ type: Boolean, reflect: true })
-		error: boolean = false
-
-		@property({ type: String })
-		validationMessage: string = ''
-
-		@property({ type: String })
-		hint?: string
-
-		@property({ reflect: true })
-		override id: string = `schmancy-field-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-
-		constructor(...args: any[]) {
-			super(...args)
-			try {
-				this.internals = this.attachInternals()
-			} catch {
-				this.internals = undefined
-			}
-		}
-
-		/** The form this element is associated with (native FACE behavior). */
-		get form(): HTMLFormElement | null {
-			return this.internals?.form ?? null
-		}
-
-		protected firstUpdated(changedProps: PropertyValueMap<any>): void {
-			super.firstUpdated?.(changedProps)
-			if (this._defaultValue === undefined) this._defaultValue = this.value
-		}
-
-		protected willUpdate(changedProps: PropertyValueMap<any>): void {
-			super.willUpdate(changedProps)
-
-			if (changedProps.has('value')) {
-				this.internals?.setFormValue(this.value as string | File | FormData | null)
-			}
-
-			if (changedProps.has('error') || changedProps.has('validationMessage')) {
-				if (this.error && this.validationMessage) {
-					this.internals?.setValidity({ customError: true }, this.validationMessage)
-				} else {
-					this.internals?.setValidity({})
-				}
-			}
-
-			// Broadcast standard field states for consumer CSS: :state(invalid),
-			// :state(required), :state(disabled), :state(readonly).
-			if (changedProps.has('error')) {
-				if (this.error) this.internals?.states.add('invalid')
-				else this.internals?.states.delete('invalid')
-			}
-			if (changedProps.has('required')) {
-				if (this.required) this.internals?.states.add('required')
-				else this.internals?.states.delete('required')
-			}
-			if (changedProps.has('disabled')) {
-				if (this.disabled) this.internals?.states.add('disabled')
-				else this.internals?.states.delete('disabled')
-			}
-			if (changedProps.has('readonly')) {
-				if (this.readonly) this.internals?.states.add('readonly')
-				else this.internals?.states.delete('readonly')
-			}
-		}
-
-		/**
-		 * Native FACE lifecycle — called by the browser when the owning form
-		 * is reset. Delegates to `resetForm()` so subclasses have one
-		 * override point for both programmatic and user-initiated resets.
-		 */
-		formResetCallback(): void {
-			this.resetForm()
-		}
-
-		/** Native FACE lifecycle — called when the form's disabled state changes. */
-		formDisabledCallback(disabled: boolean): void {
-			this.disabled = disabled
-		}
-
-		/**
-		 * Native FACE lifecycle — restore value after bfcache / form autofill.
-		 */
-		formStateRestoreCallback(state: string | File | FormData | null): void {
-			if (state == null) return
-			this.value = state as any
-		}
-
-		/** Override to customize reset behavior; default restores `_defaultValue`. */
-		resetForm(): void {
-			this.value = this._defaultValue ?? ''
-			this.error = false
-			this.validationMessage = ''
-			this.internals?.setValidity({})
-		}
-
-		/**
-		 * Contribute entries to a parent FormData. Default: a single
-		 * `[name, value]` pair when `name` is set and value is meaningful.
-		 * Override for multi-entry controls (e.g. date range).
-		 */
-		toFormEntries(): Array<[string, FormDataEntryValue]> {
-			if (!this.name || this.disabled) return []
-			const v = this.value
-			if (v === undefined || v === null || v === '') return []
-			if (Array.isArray(v)) return v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])
-			if (typeof v === 'boolean') return v ? [[this.name, 'on']] : []
-			return [[this.name, String(v)]]
-		}
-
-		checkValidity(): boolean {
-			if (this.disabled) return true
-			if (this.required && (this.value === '' || this.value === undefined || this.value === null)) {
-				this.error = true
-				this.validationMessage = 'This field is required'
-				return false
-			}
-			return this.internals?.checkValidity() ?? true
-		}
-
-		reportValidity(): boolean {
-			const isValid = this.checkValidity()
-			if (!isValid) this.internals?.reportValidity()
-			return isValid
-		}
-
-		setCustomValidity(message: string): void {
-			this.validationMessage = message
-			this.error = message !== ''
-			if (message) {
-				this.internals?.setValidity({ customError: true }, message)
-			} else {
-				this.internals?.setValidity({})
-			}
-		}
-
-		emitChange(detail: any): void {
-			if ('dispatchScopedEvent' in this && typeof this.dispatchScopedEvent === 'function') {
-				this.dispatchScopedEvent('change', detail, { bubbles: true })
-			} else {
-				this.dispatchEvent(
-					new CustomEvent('change', {
-						detail,
-						bubbles: true,
-						composed: true,
-					}),
-				)
-			}
-		}
-	}
-
-	return FormFieldMixinClass as Constructor<IFormFieldMixin> & T
-}
-
-/**
- * A convenience function that composes FormFieldMixin with TailwindElement
- * to create a base class for Schmancy form components.
- */
-export function SchmancyFormField<T extends CSSResult>(componentStyle?: T) {
-	return FormFieldMixin(TailwindElement(componentStyle)) as Constructor<IFormFieldMixin> &
-		Constructor<ITailwindElementMixin> &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin>
-}