@mhmo91/schmancy 0.7.6 → 0.8.3

package/types/src/lightbox/flip-directive.d.ts

@@ -0,0 +1,29 @@
+import { PartInfo, ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface FlipOptions {
+    /** Source element to animate from (uses element's bounding rect) */
+    sourceElement?: HTMLElement;
+    /** Click position - can be MouseEvent, TouchEvent, or {x, y} coordinates */
+    position?: {
+        x: number;
+        y: number;
+    } | MouseEvent | TouchEvent;
+    /** Animation duration in ms (total for both stages) */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** Whether to animate scale (default: true) */
+    scale?: boolean;
+    /** Enable blackbird two-stage arc animation (default: true) */
+    blackbird?: boolean;
+}
+declare class FlipDirective extends AsyncDirective {
+    private element?;
+    private hasAnimated;
+    constructor(partInfo: PartInfo);
+    render(_options?: FlipOptions): symbol;
+    update(part: ElementPart, [options]: [FlipOptions?]): symbol;
+    private animateIn;
+}
+export declare const flip: (_options?: FlipOptions) => import("lit-html/directive").DirectiveResult<typeof FlipDirective>;
+export {};

package/types/src/lightbox/flip.directive.d.ts

@@ -0,0 +1,22 @@
+import { PartInfo, ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+export interface FlipOptions {
+    disabled?: boolean;
+    duration?: number;
+    easing?: string;
+    scale?: boolean;
+}
+declare class FlipDirective extends AsyncDirective {
+    private element?;
+    private lastRect?;
+    private animation?;
+    private options;
+    constructor(partInfo: PartInfo);
+    render(_options?: FlipOptions): symbol;
+    update(part: ElementPart, [options]: [FlipOptions?]): symbol;
+    private runFlip;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const flip: (_options?: FlipOptions) => import("lit-html/directive").DirectiveResult<typeof FlipDirective>;
+export {};

package/types/src/lightbox/index.d.ts

@@ -0,0 +1,4 @@
+export { SchmancyLightbox } from './lightbox';
+export { lightbox as lightboxDirective, type LightboxOptions } from './lightbox.directive';
+export { lightbox, type LightboxConfig } from './lightbox-service';
+export { flip, type FlipOptions } from './flip-directive';

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

@@ -0,0 +1,24 @@
+import { ComponentType } from '../area/router.types';
+import { lightbox as lightboxDirective, type LightboxOptions } from './lightbox.directive';
+export type LightboxConfig = {
+    image?: string;
+    images?: string[];
+    index?: number;
+    overlay?: ComponentType;
+    component?: ComponentType;
+    props?: Record<string, unknown>;
+};
+/**
+ * Unified lightbox type - works as both directive and service
+ */
+export type LightboxAPI = {
+    (options?: LightboxOptions): ReturnType<typeof lightboxDirective>;
+    push: (config: LightboxConfig) => void;
+    dismiss: () => void;
+};
+/**
+ * Unified lightbox export - works as both directive and service:
+ * - Directive: ${lightbox()} or ${lightbox({ overlay: html`...` })}
+ * - Service: lightbox.push({ image, overlay: 'component-name', props })
+ */
+export declare const lightbox: LightboxAPI;

package/types/src/lightbox/lightbox.d.ts

@@ -0,0 +1,34 @@
+import { PropertyValues } from 'lit';
+declare const SchmancyLightbox_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+export declare class SchmancyLightbox extends SchmancyLightbox_base {
+    src: string;
+    images: string[];
+    initialIndex: number;
+    open: boolean;
+    private currentIndex;
+    private isLoading;
+    private readonly swipeThreshold;
+    private overlayRef;
+    private contentRef;
+    private imageRef;
+    private get isGalleryMode();
+    private get currentImageSrc();
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private animateIn;
+    private animateOut;
+    private animateImageChange;
+    private setupEventListeners;
+    private handleClose;
+    private handlePrevious;
+    private handleNext;
+    private handleImageLoad;
+    private handleOverlayClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-lightbox': SchmancyLightbox;
+    }
+}
+export {};

package/types/src/lightbox/lightbox.directive.d.ts

@@ -0,0 +1,30 @@
+import { PartInfo, ElementPart } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { TemplateResult } from 'lit';
+export interface LightboxOptions {
+    images?: string[];
+    index?: number;
+    overlay?: TemplateResult;
+}
+declare class LightboxDirective extends AsyncDirective {
+    private element?;
+    private clickHandler?;
+    private keyHandler?;
+    private overlayElement?;
+    private currentIndex;
+    private images;
+    private overlay?;
+    private clickPosition?;
+    constructor(partInfo: PartInfo);
+    render(_options?: LightboxOptions): symbol;
+    update(part: ElementPart, [options]: [LightboxOptions?]): symbol;
+    private open;
+    private close;
+    private prev;
+    private next;
+    private updateImage;
+    private renderLightbox;
+    disconnected(): void;
+}
+export declare const lightbox: (_options?: LightboxOptions) => import("lit-html/directive.js").DirectiveResult<typeof LightboxDirective>;
+export {};

package/types/src/nav-drawer/appbar.d.ts

@@ -1,14 +1,9 @@
-import { TSchmancyDrawerNavbarMode } from '@schmancy/nav-drawer/context';
 declare const SchmancyDrawerAppbar_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * @element schmancy-nav-drawer-appbar
- * @slot toggler - The toggler slot
  * @slot - The default slot
  */
 export declare class SchmancyDrawerAppbar extends SchmancyDrawerAppbar_base {
-    sidebarMode: TSchmancyDrawerNavbarMode;
-    sidebarOpen: any;
-    toggler: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/nav-drawer/drawer.d.ts

@@ -1,9 +1,7 @@
-import { nothing } from 'lit';
 import { TSchmancyDrawerNavbarMode, TSchmancyDrawerNavbarState } from './context';
 declare const SchmancyNavigationDrawer_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * @element schmancy-nav-drawer
- * @slot appbar - The appbar slot
  * @slot - The content slot
  */
 export declare class SchmancyNavigationDrawer extends SchmancyNavigationDrawer_base {
@@ -11,43 +9,14 @@ export declare class SchmancyNavigationDrawer extends SchmancyNavigationDrawer_b
     /**
      * The breakpoint for the sidebar based on Tailwind CSS breakpoints.
      * Accepts: "sm", "md", "lg", or "xl".
-     *
-     * The following default values are used:
-     * - sm: 640px
-     * - md: 768px (default)
-     * - lg: 1024px
-     * - xl: 1280px
-     *
-     * @attr breakpoint
-     * @type {"sm" | "md" | "lg" | "xl"}
      */
     breakpoint: 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * Mapping of Tailwind breakpoint tokens to their numeric pixel values.
-     */
     private static BREAKPOINTS;
-    /**
-     * The mode of the sidebar.
-     */
     mode: TSchmancyDrawerNavbarMode;
-    /**
-     * The open/close state of the sidebar.
-     */
     open: TSchmancyDrawerNavbarState;
-    /**
-     * A flag indicating that the initial state has been set.
-     */
-    private _initialized;
-    /**
-     * In firstUpdated, we can safely read attribute-set properties.
-     * We also initialize our state and subscribe to events.
-     */
     firstUpdated(): void;
-    /**
-     * Helper method to update state based on a given width.
-     */
     private updateState;
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/types/src/notification/index.d.ts

@@ -1,8 +1,6 @@
 export { default as SchmancyNotification } from './notification';
 export type { NotificationType } from './notification';
-export { NotificationAudioService } from './notification-audio';
-export { default as SchmancyNotificationContainer } from './notification-container';
-export type { NotificationItem, NotificationOptions } from './notification-container';
 export { $notify } from './notification-service';
+export type { NotificationOptions } from './notification-service';
 export { notify, notifyProgress } from './notify';
 export type { NotifyOptions } from './notify';

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

@@ -1,4 +1,14 @@
-import { NotificationOptions } from './notification-container';
+import { NotificationType } from './notification';
+export interface NotificationOptions {
+    id?: string;
+    title?: string;
+    message: string;
+    type?: NotificationType;
+    duration?: number;
+    closable?: boolean;
+    playSound?: boolean;
+    showProgress?: boolean;
+}
 /**
  * Notification service for centralized notification management.
  * Provides a simple API for showing notifications.
@@ -6,7 +16,9 @@ import { NotificationOptions } from './notification-container';
 export declare class NotificationService {
     private static instance;
     private notificationStack;
+    private audioVolume;
     private static DEFAULT_OPTIONS;
+    private static TYPE_DURATIONS;
     private constructor();
     /**
      * Get the singleton instance

package/types/src/notification/notification.d.ts

@@ -1,5 +1,3 @@
-import { PropertyValues } from 'lit';
-import '@schmancy/progress';
 export type NotificationType = 'info' | 'success' | 'warning' | 'error';
 declare const SchmancyNotification_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
@@ -14,25 +12,28 @@ export default class SchmancyNotification extends SchmancyNotification_base {
     id: string;
     playSound: boolean;
     showProgress: boolean;
+    startPosition: {
+        x: number;
+        y: number;
+    };
     private _visible;
     private _progress;
     private _hovered;
     private _closing;
-    private _autoCloseTimer?;
-    private _progressTimer?;
+    private paused$;
+    private startTime;
+    private pausedAt;
+    private elapsedBeforePause;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProps: PropertyValues): void;
-    private _startAutoCloseTimer;
-    private _clearTimers;
-    private _pauseTimers;
-    private _resumeTimers;
+    private animateIn;
+    private setupAutoClose;
+    private setupProgressUpdates;
     private _playSound;
     private _handleMouseEnter;
     private _handleMouseLeave;
-    close(): void;
+    close(): Promise<void>;
+    private _getEmoji;
     render(): import("lit-html").TemplateResult<1>;
-    private _getTypeStyles;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/types/src/notification/notify.d.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { NotificationOptions } from './notification-container';
+import { NotificationOptions } from './notification-service';
 export interface NotifyOptions {
     /**
      * Message to show while the operation is in progress

package/types/src/page/index.d.ts

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

package/types/src/page/page.d.ts

@@ -0,0 +1,31 @@
+import '../layout/scroll/scroll';
+declare const SchmancyPage_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Native mobile-like page container.
+ * Prevents double-tap zoom, pull-to-refresh, rubber-banding.
+ *
+ * @element schmancy-page
+ *
+ * @example
+ * html`
+ *   <schmancy-page rows="1fr_2fr_auto">
+ *     <header>App Bar</header>
+ *     <main>Scrollable content</main>
+ *     <footer>Navigation</footer>
+ *   </schmancy-page>
+ * `
+ */
+export declare class SchmancyPage extends SchmancyPage_base {
+    /** Custom grid-template-rows using underscores (e.g. "1fr_2fr_auto") */
+    rows: string;
+    showScrollbar: boolean;
+    noSelect: boolean;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-page': SchmancyPage;
+    }
+}
+export {};

package/types/src/progress/progress.d.ts

@@ -1,9 +1,9 @@
-declare const SchmancyProgress_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const SchmancyProgress_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyProgress extends SchmancyProgress_base {
     value: number;
     max: number;
     indeterminate: boolean;
-    size: 'sm' | 'md' | 'lg';
+    size: 'xs' | 'sm' | 'md' | 'lg';
     color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
     glass: boolean;
     private get percentage();

package/types/src/qr-scanner/index.d.ts

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

package/types/src/qr-scanner/qr-scanner.d.ts

@@ -0,0 +1,26 @@
+declare const SchmancyQRScanner_base: CustomElementConstructor & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+export declare class SchmancyQRScanner extends SchmancyQRScanner_base {
+    continuous: boolean;
+    private hasPermission;
+    private error;
+    private showSuccess;
+    private stream;
+    private destroy$;
+    private videoElement;
+    connectedCallback(): void;
+    private startCamera;
+    private stopCamera;
+    private startScanning;
+    private scanFrame;
+    private handleScanResult;
+    private showSuccessFlash;
+    private playSuccessSound;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-qr-scanner': SchmancyQRScanner;
+    }
+}
+export {};

package/types/src/select/select.d.ts

@@ -29,7 +29,7 @@ export declare class SchmancySelect extends SchmancySelect_base {
     label: string;
     hint: string;
     validateOn: 'always' | 'touched' | 'dirty' | 'submitted';
-    size: 'sm' | 'md' | 'lg';
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
     private isOpen;
     private valueLabel;
     private isValid;

package/types/src/theme/index.d.ts

@@ -12,3 +12,4 @@ export * from './theme-controller';
 export * from './theme-controller-boat';
 export * from './theme.events';
 export * from './context';
+export * from './theme-audio-player';

package/types/src/theme/theme-audio-player.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Theme Audio Player Component
+ *
+ * A generic audio player that generates emotional sounds based on user mood and theme color.
+ * Integrates with the Sound Service for playback and theme management.
+ * Uses local storage for persistence via the Sound Service.
+ *
+ * @element schmancy-theme-audio-player
+ *
+ * @fires schmancy-generate-mood-audio - Dispatched when user requests audio generation
+ *   detail: { moodText: string, themeColor: string, scheme: 'dark' | 'light' | 'auto' }
+ *
+ * @example
+ * ```html
+ * <schmancy-theme-audio-player
+ *   @schmancy-generate-mood-audio=${(e) => handleGenerate(e.detail)}
+ * ></schmancy-theme-audio-player>
+ * ```
+ */
+import type { GenerateMoodAudioRequest, GenerateMoodAudioResponse } from '@schmancy/types/mood-audio.types';
+/** Event detail for mood audio generation request */
+export interface GenerateMoodAudioEventDetail extends GenerateMoodAudioRequest {
+}
+/** Custom event for requesting mood audio generation */
+export declare class SchmancyGenerateMoodAudioEvent extends CustomEvent<GenerateMoodAudioEventDetail> {
+    constructor(detail: GenerateMoodAudioEventDetail);
+}
+declare global {
+    interface HTMLElementEventMap {
+        'schmancy-generate-mood-audio': SchmancyGenerateMoodAudioEvent;
+    }
+}
+declare const SchmancyThemeAudioPlayer_base: CustomElementConstructor & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+/**
+ * Mood Audio Player - Generates emotional sounds based on mood and theme
+ * Integrates with the Sound Service for consistent sound management
+ */
+export declare class SchmancyThemeAudioPlayer extends SchmancyThemeAudioPlayer_base {
+    /** Current theme color */
+    private currentColor;
+    /** Current color scheme */
+    private currentScheme;
+    /** User's mood input */
+    private moodText;
+    /** Loading state for AI generation */
+    private isGenerating;
+    /** Generated audio sequence */
+    private audioSequence;
+    /** Detected mood from AI */
+    private detectedMood;
+    /** Error message */
+    private error;
+    /** Current volume from sound service */
+    private volume;
+    /** Current sound theme name */
+    private currentThemeName;
+    /** Reference to theme component */
+    private themeComponent;
+    /** Subject for mood input changes */
+    private moodInput$;
+    connectedCallback(): void;
+    /** Handle mood input change */
+    private handleMoodInput;
+    /** Request mood audio generation - dispatches event for host app to handle */
+    private requestMoodAudio;
+    /**
+     * Set the response from the API call.
+     * Called by the host app after handling the schmancy-generate-mood-audio event.
+     */
+    setResponse(response: GenerateMoodAudioResponse): void;
+    /**
+     * Convert an AI-generated AudioSequence to a SoundTheme
+     */
+    private audioSequenceToSoundTheme;
+    /**
+     * Map a detected mood string to a Feeling type
+     */
+    private mapMoodToFeeling;
+    /**
+     * Play the detected mood using the sound service
+     */
+    private playDetectedMood;
+    /**
+     * Set an error state. Called by host app if API call fails.
+     */
+    setError(message: string): void;
+    /** Replay the current audio sequence using sound service */
+    private replay;
+    /** Handle volume change */
+    private handleVolumeChange;
+    /** Reset to default sounds */
+    private resetToDefaults;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-theme-audio-player': SchmancyThemeAudioPlayer;
+    }
+}
+export {};

package/types/src/theme/theme-controller-boat.d.ts

@@ -1,4 +1,5 @@
 import { SchmancyThemeController } from './theme-controller';
+import './theme-audio-player';
 /**
  * BOAT UX theme controller - Wraps the base theme controller in a schmancy-boat component.
  * Provides a floating, draggable container for theme controls.

package/types/src/theme/theme.component.d.ts

@@ -1,6 +1,6 @@
 import { TSchmancyTheme } from './theme.interface';
 export declare const tailwindStyles: import("lit").CSSResult;
-declare const SchmancyThemeComponent_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+declare const SchmancyThemeComponent_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * SchmancyThemeComponent - Provides theming capabilities for Schmancy components.
  *

package/types/src/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './events';
 export * from './surface';
+export * from './mood-audio.types';