@mhmo91/schmancy 0.10.4 → 0.10.6

package/src/sheet/sheet.service.ts

@@ -1,245 +0,0 @@
-import {
-	delay,
-	fromEvent,
-	map,
-	of,
-	Subject,
-	switchMap,
-	take,
-	tap,
-} from 'rxjs'
-import { $sounds } from '../audio'
-import { ComponentType } from '../area/router.types'
-import { discoverComponent } from '@mixins/discovery.service'
-import { overlayStack } from '../utils/overlay-stack'
-import SchmancySheet from './sheet'
-
-export enum SchmancySheetPosition {
-	Side = 'side',
-	Bottom = 'bottom',
-}
-
-export type SheetConfig = {
-	component: ComponentType
-	uid?: string
-	position?: SchmancySheetPosition
-	persist?: boolean
-	close?: () => void
-	lock?: boolean // Controls both ESC and overlay click dismissal
-	onBeforeOpen?: (component: HTMLElement) => void
-	onAfterOpen?: (component: HTMLElement) => void
-	props?: Record<string, unknown> // Properties to pass to the component
-}
-
-// Keep old name for backward compatibility
-type BottomSheeetTarget = SheetConfig
-
-// Function to determine the position based on screen size
-const getPosition = (): SchmancySheetPosition => {
-	return window.innerWidth >= 768 ? SchmancySheetPosition.Side : SchmancySheetPosition.Bottom // Adjust 768 as needed for your breakpoint
-}
-
-class BottomSheetService {
-	bottomSheet = new Subject<BottomSheeetTarget>()
-	// Track currently open sheets
-	private activeSheets = new Set<string>()
-	// To track if we've set up the popstate listener
-	private popStateListenerActive = false
-
-	constructor() {
-		this.setupSheetOpeningLogic()
-		this.setupPopStateListener()
-	}
-
-	/**
-	 * Sets up the main sheet opening logic
-	 */
-	private setupSheetOpeningLogic() {
-		this.bottomSheet
-			.pipe(
-				switchMap(target => {
-					const uid = target.uid ?? `sheet-${Date.now()}`
-
-					// Discover existing sheet with this uid
-					return discoverComponent<SchmancySheet>('schmancy-sheet').pipe(
-						map(existingSheet => {
-							// Check if discovered sheet matches our uid
-							const sheet = existingSheet?.getAttribute('uid') === uid ? existingSheet : null
-							return { target, existingSheet: sheet, uid }
-						})
-					)
-				}),
-				switchMap(({ target, existingSheet, uid }) => {
-					// Discover theme container if creating new sheet
-					if (existingSheet) {
-						return of({ target, sheet: existingSheet, uid })
-					}
-
-					return discoverComponent<HTMLElement>('schmancy-theme').pipe(
-						map(theme => {
-							// Determine container - use theme or fallback to body
-							const targetContainer = theme || document.body
-
-							// Create new sheet
-							const sheet = document.createElement('schmancy-sheet')
-							sheet.setAttribute('uid', uid)
-							targetContainer.appendChild(sheet)
-
-							return { target, sheet: sheet as SchmancySheet, uid }
-						})
-					)
-				}),
-				tap(({ target, sheet }) => {
-					// Configure sheet attributes
-					if (target.lock) sheet.setAttribute('lock', 'true')
-
-					const position = target.position || getPosition()
-					sheet.setAttribute('position', position)
-
-					if (target.persist) sheet.setAttribute('persist', String(target.persist))
-
-					// Set dynamic z-index for proper stacking with dialogs
-					sheet.style.setProperty('--schmancy-overlay-z', String(overlayStack.getNextZIndex()))
-
-					document.body.style.overflow = 'hidden' // lock the scroll of the host
-				}),
-				delay(20),
-				tap(({ target, uid }) => {
-					// Dispatch render event - area router handles duplicate prevention
-					window.dispatchEvent(
-						new CustomEvent('schmancy-sheet-render', {
-							detail: {
-								component: target.component,
-								uid,
-								props: target.props
-							},
-							bubbles: true,
-							composed: true,
-						}),
-					)
-				}),
-				delay(1),
-				tap(({ sheet, uid }) => {
-					sheet.setAttribute('open', 'true')
-					$sounds.play('curious')
-
-					// Add to active sheets tracking
-					this.activeSheets.add(uid)
-
-					// Set up close event listener
-					fromEvent<CustomEvent>(sheet, 'close')
-						.pipe(take(1), delay(300))
-						.subscribe(() => {
-							// Remove from active sheets tracking
-							this.activeSheets.delete(uid)
-							overlayStack.release()
-
-							// Only keep sheet if persist is explicitly set to a truthy value
-							const persistAttr = sheet.getAttribute('persist')
-							const shouldRemove = !persistAttr || persistAttr === 'false'
-
-							if (shouldRemove) {
-								sheet.remove()
-							}
-
-							document.body.style.overflow = 'auto' // unlock the scroll of the host
-						})
-				}),
-			)
-			.subscribe()
-	}
-
-	/**
-	 * Sets up the popstate listener to handle browser back button
-	 */
-	private setupPopStateListener() {
-		if (this.popStateListenerActive) return
-
-		fromEvent<PopStateEvent>(window, 'popstate').subscribe(event => {
-			// If we have active sheets, close the most recently opened one
-			if (this.activeSheets.size > 0) {
-				// Get the last sheet (Set maintains insertion order)
-				const lastSheet = Array.from(this.activeSheets).pop()
-				if (lastSheet) {
-					this.dismiss(lastSheet)
-
-					// Prevent default navigation behavior by pushing a new state
-					// This effectively cancels out the back navigation
-					if (event.state && event.state.schmancySheet) {
-						history.pushState({}, '', window.location.href)
-					}
-				}
-			}
-		})
-
-		this.popStateListenerActive = true
-	}
-
-	/**
-	 * Dismiss a sheet by uid, or dismiss the most recently opened sheet if no uid provided
-	 */
-	dismiss(uid?: string) {
-		if (!uid && this.activeSheets.size > 0) {
-			// Get the last sheet opened (Set maintains insertion order)
-			const sheetsArray = Array.from(this.activeSheets)
-			uid = sheetsArray[sheetsArray.length - 1]
-		}
-
-		if (uid) {
-			$sounds.play('atEase')
-			window.dispatchEvent(
-				new CustomEvent('schmancy-sheet-dismiss', {
-					detail: { uid },
-					bubbles: true,
-					composed: true,
-				})
-			)
-			this.activeSheets.delete(uid)
-		}
-	}
-
-	/**
-	 * Open a sheet with the given target configuration
-	 * @deprecated Use `push` instead for consistency with area router API
-	 */
-	open(target: BottomSheeetTarget) {
-		this.bottomSheet.next(target)
-	}
-
-	/**
-	 * Push a component to the sheet (recommended method)
-	 * Follows the same API pattern as area.push for consistency
-	 */
-	push(target: BottomSheeetTarget) {
-		this.bottomSheet.next(target)
-	}
-
-	/**
-	 * Check if a sheet is currently open by uid
-	 */
-	isOpen(uid: string): boolean {
-		return this.activeSheets.has(uid)
-	}
-
-	/**
-	 * Close all open sheets
-	 */
-	closeAll() {
-		// Copy the set to avoid modification during iteration
-		Array.from(this.activeSheets).forEach(uid => {
-			this.dismiss(uid)
-		})
-	}
-
-}
-
-/**
- * Bottom / side sheet service. Mounts any element as a sheet with a chosen
- * position (see `SchmancySheetPosition` enum).
- *
- * @service
- * @summary Imperative bottom / side sheet surface.
- * @method open({ component, position? }) - Mount an element as a sheet.
- * @method dismiss(id?) - Dismiss a sheet by id, or the topmost.
- */
-export const sheet = new BottomSheetService()

package/src/sheet/sheet.ts

@@ -1,238 +0,0 @@
-import { SchmancyElement } from '@mixins/index'
-import { area } from '../area'
-import { html, css } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { fromEvent, merge, takeUntil, tap, filter } from 'rxjs'
-import { on } from './hook'
-import { SchmancySheetPosition, sheet } from './sheet.service'
-import { BLACKBIRD_EASING, DURATION_ENTER, DURATION_EXIT, DURATION_BACKDROP, EASE_OUT, EASE_IN } from '../utils/animation'
-
-@customElement('schmancy-sheet')
-export default class SchmancySheet extends SchmancyElement {
-	static styles = [css`
-	:host {
-		position: fixed;
-		inset: 0;
-		z-index: var(--schmancy-overlay-z, 999);
-		display: none;
-	}
-	:host([open]) {
-		display: block;
-	}
-
-	/* Luminous edge glow on sheet panel */
-	.content {
-		box-shadow: -8px 0 40px -8px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
-	}
-
-	:host([position='bottom']) .content {
-		box-shadow: 0 -8px 40px -8px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.content { box-shadow: var(--schmancy-sys-elevation-3); }
-	}
-`]
-
-	// uid is inherited from $LitElement mixin - auto-generated or set via attribute
-	@property({ type: Boolean, reflect: true }) open = false
-	@property({ type: String, reflect: true }) position: SchmancySheetPosition = SchmancySheetPosition.Side
-	@property({ type: Boolean, reflect: true }) persist = false
-	@property({ type: Boolean, reflect: true }) lock = false
-	@property({ type: Boolean, reflect: true }) handleHistory = true
-
-	private lastFocusedElement: HTMLElement | null = null
-	@query('.overlay') private overlayEl!: HTMLDivElement
-	@query('.content') private contentEl!: HTMLDivElement
-
-	@on('open')
-	onOpenChange(_oldValue: boolean, newValue: boolean) {
-		if (newValue) {
-			this.lastFocusedElement = document.activeElement as HTMLElement
-			this.setBackgroundInert(true)
-			this.animateIn()
-			this.focus()
-		} else {
-			this.animateOut()
-			this.setBackgroundInert(false)
-			this.lastFocusedElement?.focus()
-			this.lastFocusedElement = null
-		}
-	}
-
-	private animateIn() {
-		if (!this.overlayEl || !this.contentEl) return
-
-		this.overlayEl.animate([{ opacity: 0 }, { opacity: 1 }], {
-			duration: DURATION_BACKDROP,
-			easing: EASE_OUT,
-			fill: 'forwards',
-		})
-
-		const animation =
-			this.position === SchmancySheetPosition.Side
-				? [
-						{ opacity: 0, transform: 'translateX(100%) scale(0.95)' },
-						{ opacity: 1, transform: 'translateX(0) scale(1)' },
-					]
-				: [
-						{ opacity: 0, transform: 'translateY(100%) scale(0.95)' },
-						{ opacity: 1, transform: 'translateY(0) scale(1)' },
-					]
-
-		this.contentEl.animate(animation, {
-			duration: DURATION_ENTER,
-			easing: BLACKBIRD_EASING,
-			fill: 'forwards',
-		})
-	}
-
-	private animateOut() {
-		if (!this.overlayEl || !this.contentEl) return
-
-		this.overlayEl.animate([{ opacity: 1 }, { opacity: 0 }], {
-			duration: DURATION_EXIT,
-			easing: EASE_OUT,
-			fill: 'forwards',
-		})
-
-		const animation =
-			this.position === SchmancySheetPosition.Side
-				? [
-						{ opacity: 1, transform: 'translateX(0) scale(1)' },
-						{ opacity: 0, transform: 'translateX(100%) scale(0.98)' },
-					]
-				: [
-						{ opacity: 1, transform: 'translateY(0) scale(1)' },
-						{ opacity: 0, transform: 'translateY(100%) scale(0.98)' },
-					]
-
-		this.contentEl.animate(animation, {
-			duration: DURATION_EXIT,
-			easing: EASE_IN,
-			fill: 'forwards',
-		})
-	}
-
-	connectedCallback() {
-		super.connectedCallback()
-		this.setupEventListeners()
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this.disconnecting.next(true)
-	}
-
-	private setupEventListeners() {
-		// Handle browser back button
-		const popState$ = fromEvent<PopStateEvent>(window, 'popstate').pipe(
-			filter(() => this.handleHistory),
-			tap(e => {
-				e.preventDefault()
-				this.closeSheet()
-			}),
-		)
-
-		// Handle ESC key
-		const keyUp$ = fromEvent<KeyboardEvent>(this, 'keydown').pipe(
-			tap(event => {
-				if (event.key === 'Escape' && !this.lock && this.open) {
-					event.preventDefault()
-					event.stopPropagation()
-					sheet.dismiss(this.uid)
-				}
-			}),
-		)
-
-		// Handle render events from sheet service
-		const render$ = fromEvent<CustomEvent>(window, 'schmancy-sheet-render').pipe(
-			filter(e => e.detail.uid === this.uid),
-			tap(e => {
-				area.push({
-					area: this.uid,
-					component: e.detail.component,
-					props: e.detail.props,
-					historyStrategy: 'silent',
-				})
-			}),
-		)
-
-		// Handle dismiss events from sheet service
-		const dismiss$ = fromEvent<CustomEvent>(window, 'schmancy-sheet-dismiss').pipe(
-			filter(e => e.detail.uid === this.uid),
-			tap(() => {
-				this.closeSheet()
-			}),
-		)
-
-		merge(popState$, keyUp$, render$, dismiss$).pipe(takeUntil(this.disconnecting)).subscribe()
-	}
-
-	private setBackgroundInert(inert: boolean) {
-		const parent = this.parentElement
-		if (!parent) return
-
-		Array.from(parent.children).forEach(child => {
-			if (child !== this && child instanceof HTMLElement) {
-				child.toggleAttribute('inert', inert)
-			}
-		})
-	}
-
-	closeSheet() {
-		this.open = false
-		this.dispatchEvent(new CustomEvent('close'))
-	}
-
-	override focus() {
-		// delegatesFocus in shadowRootOptions handles automatic focus
-		// Just focus first element with autofocus attribute if present
-		const element = this.querySelector('[autofocus]')
-		if (element instanceof HTMLElement) {
-			element.focus()
-		}
-	}
-
-	private handleOverlayClick = (e: Event) => {
-		e.stopPropagation()
-		if (!this.lock) {
-			sheet.dismiss(this.uid)
-		}
-	}
-
-	render() {
-		const sheetClasses = `absolute inset-0 flex h-full`
-
-		const overlayClasses = `overlay absolute inset-0 bg-surface-container/10 backdrop-blur-lg backdrop-saturate-150 ${this.lock ? '' : 'cursor-pointer'}`
-
-		const contentClasses =
-			this.position === SchmancySheetPosition.Side
-				? 'content h-full min-w-[320px] max-w-[90vw] w-fit ml-auto z-10'
-				: 'content w-full mt-auto rounded-t-2xl max-h-[90vh] z-10'
-
-		const surfaceClasses =
-			this.position === SchmancySheetPosition.Side
-				? 'h-full overflow-auto'
-				: 'max-h-[90vh] overflow-auto'
-
-		return html`
-			<div class=${sheetClasses} role="dialog" aria-hidden=${!this.open} aria-modal=${this.open} tabindex="0">
-				<div class=${overlayClasses} @click=${this.handleOverlayClick}></div>
-				<div class=${contentClasses}>
-					<schmancy-surface rounded="left" fill="all" id="body" class=${surfaceClasses} type="solid">
-						<schmancy-area class="size-full overflow-auto" name=${this.uid}>
-							<slot></slot>
-						</schmancy-area>
-					</schmancy-surface>
-				</div>
-			</div>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-sheet': SchmancySheet
-	}
-}

package/types/src/code-highlight/code-highlight.d.ts

@@ -1,49 +0,0 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * @element schmancy-code
- * Code highlighting component using highlight.js with schmancy theming support
- */
-export declare class SchmancyCode extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * Programming language for syntax highlighting
-     */
-    language: string;
-    /**
-     * Code content to highlight
-     */
-    code: string;
-    /**
-     * Optional filename or title to display in header
-     */
-    filename?: string;
-    /**
-     * Show line numbers
-     */
-    lineNumbers: boolean;
-    /**
-     * Show copy button
-     */
-    copyButton: boolean;
-    /**
-     * Highlighted line numbers (comma-separated or ranges like "1-3,5,7-9")
-     */
-    highlightLines?: string;
-    /**
-     * Maximum height before scrolling
-     */
-    maxHeight?: string;
-    private copied;
-    private get highlightedCode();
-    private escapeHtml;
-    private getHighlightedLines;
-    private addLineFeatures;
-    private copyCode;
-    private getLanguageLabel;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-code': SchmancyCode;
-    }
-}

package/types/src/code-highlight/code-preview.d.ts

@@ -1,30 +0,0 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * @element schmancy-code-preview
- * A component that shows code and its rendered preview side by side
- * Takes the content as a slot and displays both the source and rendered result
- */
-export declare class SchmancyCodePreview extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * Programming language for syntax highlighting
-     */
-    language: string;
-    /**
-     * Show code on top or side-by-side
-     */
-    layout: 'vertical' | 'horizontal';
-    /**
-     * Whether to render/execute the code in preview section
-     * When false, only shows the code without rendering
-     */
-    preview: boolean;
-    private slotContent;
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-code-preview': SchmancyCodePreview;
-    }
-}

package/types/src/code-highlight/index.d.ts

@@ -1,3 +0,0 @@
-export { SchmancyCode } from './code-highlight';
-export { SchmancyCode as SchmancyCodeHighlight } from './code-highlight';
-export { SchmancyCodePreview } from './code-preview';

package/types/src/dialog/dialog-base.mixin.d.ts

@@ -1,30 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from '../../mixins/constructor';
-import type { IBaseMixin } from '../../mixins/baseElement';
-export interface DialogPosition {
-    x: number;
-    y: number;
-}
-export interface VirtualReference {
-    getBoundingClientRect: () => DOMRect;
-}
-/**
- * Interface for the DialogBase mixin methods
- */
-export interface IDialogBaseMixin {
-    position: DialogPosition;
-    isMobile: boolean;
-    dragOffset: number;
-    show(positionOrEvent?: DialogPosition | MouseEvent | TouchEvent): Promise<boolean>;
-    hide(result?: boolean): Promise<void>;
-    isCentered(): boolean;
-    isAnimating(): boolean;
-}
-/**
- * Dialog mixin with smart positioning using Floating UI.
- *
- * On mobile (< 640px), automatically switches to bottom sheet mode
- * with swipe-to-dismiss gesture. On tablet/desktop, if content exceeds
- * a viewport-dependent threshold, also opens as bottom sheet.
- */
-export declare const DialogBase: <T extends Constructor<LitElement & IBaseMixin>>(superClass: T) => Constructor<IDialogBaseMixin> & T;

package/types/src/dialog/dialog-events.d.ts

@@ -1,13 +0,0 @@
-export declare const DialogWhereAreYouRicky = "are-you-there-dialog";
-export declare const DialogHereMorty = "yes-dialog-here";
-export interface DialogWhereAreYouRickyEvent extends CustomEvent {
-    detail: {
-        uid: string;
-    };
-}
-export interface DialogHereMortyEvent extends CustomEvent {
-    detail: {
-        dialog: any;
-        theme?: any;
-    };
-}

package/types/src/dialog/dialog-service.d.ts

@@ -1,91 +0,0 @@
-import { TemplateResult } from 'lit';
-/**
- * Dialog service options interface
- */
-export interface DialogOptions {
-    title?: string;
-    subtitle?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'default' | 'danger';
-    position?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent;
-    content?: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult);
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    hideActions?: boolean;
-    targetContainer?: HTMLElement;
-}
-/**
- * Prompt dialog options
- */
-export interface PromptOptions {
-    title?: string;
-    message?: string;
-    label?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    confirmText?: string;
-    cancelText?: string;
-    position?: {
-        x: number;
-        y: number;
-    } | MouseEvent | TouchEvent;
-}
-/**
- * Dialog service for centralized dialog management.
- * Uses a single unified SchmancyDialog component for all dialog types.
- */
-export declare class DialogService {
-    private static instance;
-    private static DEFAULT_OPTIONS;
-    private activeDialogs;
-    private dialogSubject;
-    private dismissSubject;
-    private lastClickPosition;
-    private clickTrackingInitialized;
-    private constructor();
-    private setupClickPositionTracking;
-    static getInstance(): DialogService;
-    private setupDialogOpeningLogic;
-    private setupDialogDismissLogic;
-    confirm(options: DialogOptions): Promise<boolean>;
-    component(content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, 'content' | 'message'>): Promise<boolean>;
-    dismiss(): boolean;
-    close(): boolean;
-    ask(message: string, event?: MouseEvent | TouchEvent): Promise<boolean>;
-    danger(options: Omit<DialogOptions, 'variant'>): Promise<boolean>;
-    /**
-     * Shows a prompt dialog with an input field.
-     * Returns the input value if confirmed, null if cancelled.
-     */
-    prompt(options: PromptOptions): Promise<string | null>;
-    private getDefaultPosition;
-}
-/**
- * Global dialog utility. Imperative modal API — open any element as a dialog,
- * or use the built-in `confirm` / `ask` / `danger` prompts. Returns Promises
- * that resolve when the user picks an action.
- *
- * @service
- * @summary Imperative modal dialogs and built-in confirm/ask/danger prompts.
- * @method confirm(options: DialogOptions) - Built-in confirm prompt. Returns Promise<boolean>.
- * @method ask(message, event?) - One-line yes/no prompt anchored to the triggering event.
- * @method danger(options) - Destructive-action confirm styled with the error palette.
- * @method component(element, options?) - Open any element as a modal.
- * @method dismiss(id?) - Dismiss a dialog by id, or the topmost dialog.
- */
-export declare const $dialog: {
-    confirm: (options: DialogOptions) => Promise<boolean>;
-    ask: (message: string, event?: MouseEvent | TouchEvent) => Promise<boolean>;
-    danger: (options: Omit<DialogOptions, "variant">) => Promise<boolean>;
-    prompt: (options: PromptOptions) => Promise<string | null>;
-    component: (content: TemplateResult | HTMLElement | (() => HTMLElement | TemplateResult), options?: Omit<DialogOptions, "content" | "message">) => Promise<boolean>;
-    dismiss: () => boolean;
-    close: () => boolean;
-};
-export default DialogService;