epic-modals 0.0.4

package/dist/core/state.svelte.d.ts

@@ -0,0 +1,321 @@
+import { ModalState, ModalId, Position, Dimensions, AnimationTransform } from './types';
+/** URL state callbacks for browser integration */
+interface URLStateCallbacks {
+    push: (id: ModalId) => void;
+    replace: (id: ModalId) => void;
+    pop: () => void;
+}
+/** Dock position getter function */
+type DockPositionGetter = () => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Modal registry interface for static modal lookup (kept for API compatibility) */
+interface ModalRegistry {
+    has(id: ModalId): boolean;
+    get(id: ModalId): {
+        title: string;
+        icon: string;
+        closeOnOutsideClick?: boolean;
+    } | undefined;
+}
+/** Store type for modals collection */
+export type ModalsStore = ReturnType<typeof createModalsStore>;
+/**
+ * Subscribe to state changes (for React integration)
+ * @returns Unsubscribe function
+ */
+export declare function subscribe(callback: () => void): () => void;
+declare function createModalsStore(): {
+    readonly modals: Map<ModalId, ModalState>;
+    readonly pendingMinimize: ModalId[];
+    readonly pendingOpen: ModalId[];
+    readonly pendingClose: ModalId[];
+    readonly pendingRestore: ModalId[];
+    readonly dockOrder: ModalId[];
+};
+/**
+ * Register a new modal in the system
+ * If modal already exists, merges new props with existing state to preserve
+ * saved position, size, and other runtime state
+ */
+export declare function registerModal(modal: Omit<ModalState, 'zIndex' | 'isAnimating'>): void;
+/**
+ * Unregister a modal from the system
+ */
+export declare function unregisterModal(id: ModalId): void;
+/**
+ * Minimize a modal with genie animation to dock
+ * If this is a child modal, redirects to minimize parent (they act as unit)
+ * Both parent and child minimize together
+ */
+export declare function minimizeModal(id: ModalId): void;
+/**
+ * Restore a minimized modal from dock
+ * Also restores child modal if one was hidden with parent
+ */
+export declare function restoreModal(id: ModalId): void;
+/**
+ * Restore all minimized modals (called when dock feature is disabled)
+ */
+export declare function restoreAllMinimizedModals(): void;
+/**
+ * Restore a child modal that was hidden with parent
+ */
+export declare function restoreChildModal(id: ModalId): void;
+/**
+ * Update modal position (called during drag)
+ * Also syncs linked modal positions:
+ * - If this modal has a child, the child moves with it
+ * - If this modal is a child, the parent moves with it
+ */
+export declare function updateModalPosition(id: ModalId, position: Position, options?: {
+    constrain?: boolean;
+    drag?: boolean;
+    size?: Dimensions;
+}): void;
+/**
+ * Update modal size
+ */
+export declare function updateModalSize(id: ModalId, size: Dimensions): void;
+/**
+ * Update multiple modal properties at once
+ */
+export declare function updateModal(id: ModalId, updates: Partial<ModalState>): void;
+/**
+ * Bring a modal to the front (highest z-index)
+ * Maintains parent-child z-index relationship: child always above parent
+ */
+export declare function bringToFront(id: ModalId): void;
+/**
+ * Check if a modal is the top-most modal
+ */
+export declare function isTopModal(id: ModalId): boolean;
+/**
+ * Reorder dock items (drag and drop)
+ */
+export declare function reorderDock(newOrder: ModalId[]): void;
+/**
+ * Open a modal by ID (for already-registered modals)
+ *
+ * @param id - Modal ID to open
+ * @param sourceElement - Source element for genie animation. REQUIRED - the animation
+ *   needs a source position to animate from. For modals that open without user interaction,
+ *   use the `autoOpen` prop on the Modal component instead.
+ * @param options - Optional settings like parentId for child modals
+ */
+export interface OpenModalOptions {
+    /** Parent modal ID to link this modal as a child */
+    parentId?: ModalId;
+}
+export declare function openModal(id: ModalId, sourceElement: HTMLElement, options?: OpenModalOptions): void;
+/**
+ * Create and open a new modal (registers and opens in one call)
+ * @param modal - Full modal state to register and open
+ */
+export declare function createModal(modal: Omit<ModalState, 'zIndex' | 'isAnimating'>): void;
+/**
+ * Close a modal
+ */
+export declare function closeModal(id: ModalId, force?: boolean): void;
+/**
+ * Close all modals
+ */
+export declare function closeAllModals(): void;
+/**
+ * Finalize modal close after animation completes
+ * Resets modal to minimal closed state to free memory (position, size, etc.)
+ * but keeps registration so the modal can be reopened
+ */
+export declare function finalizeModalClose(id: ModalId): void;
+/**
+ * Get list of modals to close (for cascade)
+ */
+export declare function getModalsToClose(fromId: ModalId): ModalId[];
+/**
+ * Open a child modal linked to a parent
+ */
+export declare function openChildModal(child: {
+    id: ModalId;
+} & Partial<Omit<ModalState, 'zIndex' | 'isAnimating' | 'parentId'>>, parentId: ModalId, sourceElement?: HTMLElement): void;
+/**
+ * Link two modals as parent-child
+ * Calculates and stores the offset from parent position for linked movement
+ */
+export declare function linkModals(parentId: ModalId, childId: ModalId): void;
+/**
+ * Hide a child modal when its parent is minimized
+ */
+export declare function hideChildWithParent(parentId: ModalId): void;
+/**
+ * Update child modal position when parent moves
+ * Maintains the offsetFromParent relationship
+ */
+export declare function updateChildPosition(parentId: ModalId, parentPosition: Position): void;
+/**
+ * Calculate and set child's offset from parent
+ * Called when child modal is first opened centered on parent
+ */
+export declare function setChildOffsetFromParent(childId: ModalId, parentId: ModalId): void;
+/** Check if modal has pending minimize */
+export declare function hasPendingMinimize(id: ModalId): boolean;
+/** Consume pending minimize flag */
+export declare function consumePendingMinimize(id: ModalId): boolean;
+/** Check if any modal has pending minimize */
+export declare function hasAnyPendingMinimize(): boolean;
+/** Get all registered modal IDs */
+export declare function getRegisteredModalIds(): ModalId[];
+/** Get modal state */
+export declare function getModalState(id: ModalId): ModalState | undefined;
+/**
+ * Get bounds of all open, visible modals with their IDs (for rearrangement).
+ * Excludes minimized modals and the modal being positioned.
+ * Returns bounds from DOM if position/size not tracked in state.
+ */
+export declare function getOpenModalBoundsWithIds(excludeId?: ModalId): Array<{
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/**
+ * Get bounds of all open, visible modals (for smart positioning).
+ * Excludes minimized modals and the modal being positioned.
+ * Returns bounds from DOM if position/size not tracked in state.
+ */
+export declare function getOpenModalBounds(excludeId?: ModalId): Array<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/** Get state version for reactive tracking in components */
+export declare function getStateVersion(): number;
+/** Consume pending minimize target */
+export declare function consumePendingMinimizeTarget(): AnimationTransform | null;
+/** Check if modal has pending open */
+export declare function hasPendingOpen(id: ModalId): boolean;
+/** Consume pending open flag */
+export declare function consumePendingOpen(id: ModalId): boolean;
+/** Check if modal has pending close */
+export declare function hasPendingClose(id: ModalId): boolean;
+/** Consume pending close flag */
+export declare function consumePendingClose(id: ModalId): boolean;
+/** Check if modal has pending force close */
+export declare function hasPendingForceClose(id: ModalId): boolean;
+/** Consume pending force close flag */
+export declare function consumePendingForceClose(id: ModalId): boolean;
+/** Check if modal has pending restore */
+export declare function hasPendingRestore(id: ModalId): boolean;
+/** Consume pending restore flag */
+export declare function consumePendingRestore(id: ModalId): boolean;
+/** Check if modal has pending child restore */
+export declare function hasPendingChildRestore(id: ModalId): boolean;
+/** Consume pending child restore flag */
+export declare function consumePendingChildRestore(id: ModalId): boolean;
+/** Check if modal has pending attention (shake/glow effect) */
+export declare function hasPendingAttention(id: ModalId): boolean;
+/** Consume pending attention flag */
+export declare function consumePendingAttention(id: ModalId): boolean;
+/** Trigger attention effect on a modal (shake + glow) */
+export declare function triggerAttention(id: ModalId): void;
+/** Start attention animation (called when animation begins) */
+export declare function startAttentionAnimation(id: ModalId): void;
+/** End attention animation (called when animation completes) */
+export declare function endAttentionAnimation(id: ModalId): void;
+/** Get pending parent link (without consuming) */
+export declare function getPendingParentLink(): {
+    parentId: ModalId;
+    childId: ModalId;
+} | null;
+/** Consume pending parent link for a specific child */
+export declare function consumePendingParentLink(childId: ModalId): {
+    parentId: ModalId;
+    childId: ModalId;
+} | null;
+/** Store source position for open animation */
+export declare function storeOpenSourcePosition(id: ModalId, pos: Position): void;
+/** Consume open source position for a specific modal */
+export declare function consumeOpenSourcePosition(id: ModalId): Position | null;
+/** Set modal animating state */
+export declare function setModalAnimating(id: ModalId, animating: boolean): void;
+/** Check if modal is animating */
+export declare function isModalAnimating(id: ModalId): boolean;
+/** Check if modal is open (not minimized and not hidden) */
+export declare function isModalOpen(id: ModalId): boolean;
+/** Check if modal is registered */
+export declare function isModalRegistered(id: ModalId): boolean;
+/** Get store reference */
+export declare function getModalsStore(): ModalsStore;
+/** Toggle modal transparency */
+export declare function toggleModalTransparency(id: ModalId): void;
+/** Reset modal transparency */
+export declare function resetModalTransparency(id: ModalId): void;
+/**
+ * Shake element (visual feedback for invalid actions)
+ */
+export declare function shakeElement(element: HTMLElement): void;
+/**
+ * Animate parent modal to its target position (for animated movement mode)
+ */
+export declare function animateParentToPosition(parentId: ModalId): void;
+/**
+ * Clear the animation flag after animation completes
+ */
+export declare function clearParentAnimationFlag(parentId: ModalId): void;
+/**
+ * Check if parent has a pending animation
+ */
+export declare function hasPendingParentAnimation(parentId: ModalId): boolean;
+/**
+ * Clear pending parent animation
+ */
+export declare function clearPendingParentAnimation(parentId: ModalId): void;
+/**
+ * Move multiple modals to new positions with animation.
+ * Uses the same animation mechanism as parent-child movement.
+ * @param moves - Map of modal IDs to their target positions
+ */
+export declare function animateModalsToPositions(moves: Map<ModalId, Position>): void;
+/**
+ * Trigger cascading parent animations up the chain.
+ * Each parent animates after the previous one finishes, creating a waterfall effect.
+ * Positions are recalculated dynamically at animation time based on the child's current position.
+ * @param childId - The ID of the modal that was dragged
+ */
+export declare function triggerCascadingParentAnimations(childId: ModalId): void;
+/**
+ * Set registry functions for static modal lookup
+ * NOTE: Currently unused but kept for API compatibility
+ */
+export declare function setRegistryFunctions(_registry: ModalRegistry): void;
+/**
+ * Set URL state callbacks for browser integration
+ */
+export declare function setURLStateCallbacks(callbacks: URLStateCallbacks): void;
+/**
+ * Set dock position getter for animations
+ */
+export declare function setDockPositionGetter(getter: DockPositionGetter): void;
+/**
+ * Get internal state (for testing only)
+ */
+export declare function _getInternalState(): {
+    modals: Map<ModalId, ModalState>;
+    pendingMinimize: ModalId[];
+    pendingOpen: ModalId[];
+    pendingClose: ModalId[];
+    pendingRestore: ModalId[];
+    dockOrder: ModalId[];
+    animatingModals: Set<ModalId>;
+    transparentModals: Set<ModalId>;
+};
+/**
+ * Reset internal state (for testing only)
+ */
+export declare function _resetInternalState(): void;
+export {};
+//# sourceMappingURL=state.svelte.d.ts.map

package/dist/core/types.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Core types for the modal library
+ */
+export type ModalId = string | symbol;
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export interface Bounds extends Position, Dimensions {
+}
+export interface ModalGlow {
+    color: string;
+    intensity: 'low' | 'medium' | 'high';
+}
+export interface ModalState {
+    id: ModalId;
+    title: string;
+    icon: string;
+    isOpen: boolean;
+    isMinimized: boolean;
+    isHiddenWithParent: boolean;
+    isTransparent: boolean;
+    isAnimating: boolean;
+    isAnimatingPosition?: boolean;
+    isRejected: boolean;
+    zIndex: number;
+    position: Position | null;
+    size: Dimensions | null;
+    hasBeenDragged: boolean;
+    dockPosition: number;
+    glow: ModalGlow | null;
+    content?: unknown;
+    contentBg?: string;
+    parentId?: ModalId;
+    childId?: ModalId;
+    offsetFromParent?: Position;
+    lastChildId?: ModalId;
+}
+export interface AnimationTransform {
+    x: number;
+    y: number;
+    originX: number;
+    originY: number;
+}
+export type DockPosition = 'left' | 'right' | 'bottom' | 'free';
+export type DockOrientation = 'horizontal' | 'vertical';
+export type DockLabelMode = 'hidden' | 'beside' | 'below';
+export type HeaderLayout = 'macos' | 'windows' | 'none';
+export type StackingLayerName = 'BASE' | 'DROPDOWN' | 'STICKY' | 'OVERLAY' | 'MODAL' | 'DOCK' | 'TOAST';
+/** Feature toggles */
+export interface ModalFeatures {
+    dock: boolean;
+    minimize: boolean;
+    transparency: boolean;
+    resize: boolean;
+    drag: boolean;
+    focusTrap: boolean;
+    animations: boolean;
+    backdrop: boolean;
+    parentChild: boolean;
+}
+/** Appearance configuration */
+export interface AppearanceConfig {
+    headerLayout: HeaderLayout;
+    defaultWidth: string;
+    defaultHeight: string;
+    minWidth: number;
+    minHeight: number;
+}
+/** Deep partial utility type */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/** Per-modal config overrides - deep partial of features and appearance */
+export interface ModalConfigOverrides {
+    features?: DeepPartial<ModalFeatures>;
+    appearance?: DeepPartial<AppearanceConfig>;
+}
+export interface BaseModalProps {
+    id: ModalId;
+    title: string;
+    /** Icon identifier string (used by renderIcon in modal header and dock) */
+    icon?: string;
+    maxWidth?: string;
+    preferredHeight?: string;
+    autoOpen?: boolean;
+    openSourcePosition?: Position | null;
+    glow?: ModalGlow;
+    /** Per-modal config overrides (takes precedence over global config) */
+    config?: ModalConfigOverrides;
+    closeOnEscape?: boolean;
+    onClose?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/core/viewport.d.ts

@@ -0,0 +1,92 @@
+import { Position, Bounds } from './types';
+/** Bounds of an existing modal for overlap calculation */
+export interface ModalBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ViewportConstraintOptions {
+    /** Margin from viewport edges (default: 8) */
+    margin?: number;
+    /** Allow element to go partially off-screen if larger than viewport */
+    allowPartialVisibility?: boolean;
+}
+/**
+ * Constrain a position to keep an element within viewport bounds
+ */
+export declare function constrainToViewport(x: number, y: number, width: number, height: number, options?: ViewportConstraintOptions): Position;
+/**
+ * Constrain size and position to fit within viewport
+ */
+export declare function constrainSizeToViewport(x: number, y: number, width: number, height: number, options?: ViewportConstraintOptions): Bounds;
+/**
+ * Calculate overlap area between two rectangles
+ * @internal Exported for testing
+ */
+export declare function calculateOverlap(a: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, b: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): number;
+/**
+ * Calculate total overlap of a modal at a given position with all existing modals
+ * @internal Exported for testing
+ */
+export declare function calculateTotalOverlap(x: number, y: number, width: number, height: number, existingModals: ModalBounds[], gap: number): number;
+export interface SmartPositionOptions {
+    /** Minimum gap between modals (default: 16). Also used as viewport edge margin unless `margin` is set. */
+    modalGap?: number;
+    /** Margin from viewport edges (default: uses modalGap value) */
+    margin?: number;
+    /** Number of positions to test along each axis */
+    gridResolution?: number;
+    /** Additional bounds to avoid (e.g., navigation bars, toolbars) */
+    avoidBounds?: ModalBounds[];
+    /** Margin to add around avoidBounds elements (default: 16) */
+    avoidMargin?: number;
+}
+/** Modal with ID for rearrangement tracking */
+export interface ModalBoundsWithId extends ModalBounds {
+    id: string;
+}
+/** Result of rearrangement calculation */
+export interface RearrangementResult {
+    /** New position for the new modal */
+    newModalPosition: Position;
+    /** Map of modal IDs to their new positions */
+    existingModalMoves: Map<string, Position>;
+}
+/**
+ * Get bounds of elements matching the given CSS selectors
+ */
+export declare function getElementBounds(selectors: string[]): ModalBounds[];
+/**
+ * Calculate position quality score (0 = best/center, 1 = worst/corner)
+ * Considers both distance from center and proximity to edges
+ * @internal Exported for testing
+ */
+export declare function calculatePositionScore(x: number, y: number, width: number, height: number, vw: number, vh: number, margin: number): number;
+/**
+ * Find the best position for a new modal that minimizes overlap with existing modals.
+ * Prefers positions closer to center - corners are only used as last resort.
+ * Tests positions in a grid pattern and returns the best one.
+ * Falls back to center if no existing modals.
+ *
+ * Note: avoidBounds are treated as STRICT - positions that overlap them are filtered out.
+ * Modal-to-modal overlap is treated more leniently (up to 30% acceptable for better centering).
+ */
+export declare function findSmartPosition(width: number, height: number, existingModals: ModalBounds[], options?: SmartPositionOptions): Position;
+/**
+ * Calculate rearrangement of existing modals to make room for a new modal.
+ * Distributes modals evenly across the viewport width.
+ * Returns null if rearrangement is not possible (not enough space).
+ */
+export declare function calculateRearrangement(newModalWidth: number, newModalHeight: number, existingModals: ModalBoundsWithId[], options?: SmartPositionOptions): RearrangementResult | null;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/core/viewport.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=viewport.test.d.ts.map

package/dist/epic-modals.css

@@ -0,0 +1,9 @@
+
+  .modal-backdrop.svelte-1d3nq4t {
+    position: fixed;
+    inset: 0;
+    background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+    backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
+    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
+    pointer-events: all; /* Block clicks on content behind modals */
+  }

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1 @@
+import*as t from"svelte/internal/client";const e={BASE:0,DROPDOWN:100,STICKY:200,OVERLAY:300,MODAL:400,DOCK:8e3,TOAST:9e3};let n=t.state(t.proxy(e.MODAL));function i(){t.set(n,oe().zIndex.base,!0)}function o(){const e=t.get(n);return t.set(n,t.get(n)+2),e}function r(t){const n=oe();return"MODAL"===t?n.zIndex.base:"DOCK"===t?n.zIndex.dock:"TOAST"===t?n.zIndex.toast:e[t]}function s(){t.set(n,oe().zIndex.base,!0)}const d=8;function a(t,e,n,i,o={}){const{margin:r=d,allowPartialVisibility:s=!1}=o,a="undefined"!=typeof window?window.innerWidth:1920,c="undefined"!=typeof window?window.innerHeight:1080;let u,l,f,g;return s&&n>a-2*r?(u=40-n,l=a-40):(u=r,l=Math.max(r,a-n-r)),s&&i>c-2*r?(f=40-i,g=c-40):(f=r,g=Math.max(r,c-i-r)),{x:Math.max(u,Math.min(l,t)),y:Math.max(f,Math.min(g,e))}}function c(t,e,n,i,o={}){const{margin:r=d}=o,s=("undefined"!=typeof window?window.innerWidth:1920)-2*r,c=("undefined"!=typeof window?window.innerHeight:1080)-2*r,u=Math.min(n,s),l=Math.min(i,c),f=a(t,e,u,l,o);return{x:f.x,y:f.y,width:u,height:l}}function u(t,e){return Math.max(0,Math.min(t.x+t.width,e.x+e.width)-Math.max(t.x,e.x))*Math.max(0,Math.min(t.y+t.height,e.y+e.height)-Math.max(t.y,e.y))}function l(t,e,n,i,o,r){const s={x:t-r,y:e-r,width:n+2*r,height:i+2*r};let d=0;for(const t of o)d+=u(s,t);return d}function f(t){if("undefined"==typeof document)return[];const e=[];for(const n of t)try{const t=document.querySelectorAll(n);for(const n of t){const t=n.getBoundingClientRect();t.width>0&&t.height>0&&e.push({x:t.left,y:t.top,width:t.width,height:t.height})}}catch{}return e}function g(t,e,n,i,o,r,s){const d=(o-n)/2,a=(r-i)/2,c=d-s,u=a-s,l=Math.abs(t-d)/(c||1),f=Math.abs(e-a)/(u||1),g=Math.sqrt(l*l+f*f)/Math.SQRT2,h=50,p=t-s,m=o-n-s-t,x=e-s,I=r-i-s-e;let y=0;return p<h&&(y+=.3*(1-p/h)),m<h&&(y+=.3*(1-m/h)),x<h&&(y+=.2*(1-x/h)),I<h&&(y+=.2*(1-I/h)),Math.min(1,g+y)}function h(t,e,n,i={}){const{modalGap:o=16,gridResolution:r=10,avoidBounds:s=[],avoidMargin:d=16}=i,a=i.margin??o,c="undefined"!=typeof window?window.innerWidth:1920,u="undefined"!=typeof window?window.innerHeight:1080,f=s.map(t=>({x:t.x-d,y:t.y-d,width:t.width+2*d,height:t.height+2*d})),h={x:(c-t)/2,y:(u-e)/2};if(0===n.length&&0===f.length)return h;const p=a,m=Math.max(a,c-t-a),x=a,I=Math.max(a,u-e-a);if(m<=p||I<=x)return h;const y=l(h.x,h.y,t,e,n,o),w=l(h.x,h.y,t,e,f,0);if(0===y&&0===w)return h;const z=[],M=(m-p)/r,v=(I-x)/r;for(let i=0;i<=r;i++)for(let s=0;s<=r;s++){const r=p+i*M,d=x+s*v,h=l(r,d,t,e,n,o),m=l(r,d,t,e,f,0),I=g(r,d,t,e,c,u,a);z.push({pos:{x:r,y:d},modalOverlap:h,avoidOverlap:m,centerDist:I})}const O=z.filter(t=>0===t.avoidOverlap),P=O.length>0?O:z,C=t*e,D=Math.min(...P.map(t=>t.modalOverlap))/C;return P.sort((t,e)=>{if(0===O.length&&t.avoidOverlap!==e.avoidOverlap)return t.avoidOverlap-e.avoidOverlap;const n=t.modalOverlap/C,i=e.modalOverlap/C;if(D<.3){const o=.3,r=n<=o,s=i<=o;if(r&&s)return t.centerDist+.3*n-(e.centerDist+.3*i);if(r)return-1;if(s)return 1}return.6*n+.4*t.centerDist-(.6*i+.4*e.centerDist)}),P[0].pos}function p(t,e,n,i={}){const{modalGap:o=16}=i,r=i.margin??o,s="undefined"!=typeof window?window.innerWidth:1920,d="undefined"!=typeof window?window.innerHeight:1080,a=n.reduce((t,e)=>t+e.width,0)+t,c=n.length*o,u=s-2*r;if(a+c>u)return null;const l=u-a-c;n.length;const f=l/2,g=s/2,h=[...n.map(t=>({id:t.id,width:t.width,height:t.height,currentX:t.x+t.width/2,currentY:t.y,isNew:!1})),{id:"__new__",width:t,height:e,currentX:g,currentY:(d-e)/2,isNew:!0}];h.sort((t,e)=>t.currentX-e.currentX);let p=r+f;const m=new Map;let x=null;for(const t of h){const e=p;if(t.isNew)x={x:Math.round(e),y:Math.round(t.currentY)};else{const i=n.find(e=>e.id===t.id);Math.abs(e-i.x)>5&&m.set(t.id,{x:Math.round(e),y:Math.round(i.y)})}p+=t.width+o}return x?{newModalPosition:x,existingModalMoves:m}:null}let m=t.proxy(new Map),x=t.state(0);const I=new Set;function y(){t.update(x),queueMicrotask(()=>{I.forEach(t=>t())})}function w(t){return I.add(t),()=>I.delete(t)}let z=t.state(t.proxy([])),M=t.state(t.proxy([])),v=t.state(t.proxy([])),O=t.state(t.proxy([])),P=t.state(t.proxy([])),C=t.state(t.proxy([])),D=t.state(t.proxy([])),k=t.state(t.proxy([])),T=t.state(null),b=t.proxy(new Map),A=t.state(null),F=t.proxy(new Map),W=t.proxy(new Set),H=t.proxy(new Set),B=t.state(t.proxy([])),S=null,R=null;function X(e){const n=m.get(e.id),i=(null==n?void 0:n.zIndex)??o();n?m.set(e.id,{...n,title:e.title,icon:e.icon,glow:e.glow,zIndex:i}):m.set(e.id,{...e,zIndex:i,isAnimating:!1}),y(),e.isMinimized&&!t.get(B).includes(e.id)&&t.get(B).push(e.id)}function E(e){const n=m.get(e);if(n){if(t.set(B,t.get(B).filter(t=>t!==e),!0),n.childId){const t=m.get(n.childId);t&&m.set(n.childId,{...t,parentId:void 0})}if(n.parentId){const t=m.get(n.parentId);t&&m.set(n.parentId,{...t,childId:void 0,lastChildId:n.id})}m.delete(e),y(),H.delete(e),W.delete(e)}}function Y(e){const n=m.get(e);if(!n||n.isMinimized)return;if(Kt(e),n.parentId){const t=m.get(n.parentId);if(t&&!t.isMinimized)return void Y(n.parentId)}if(t.set(z,[...t.get(z),e],!0),n.position&&n.size&&R){const i=R(),o=t.get(B).indexOf(e),r=i.x+o*(i.height+8),s=i.y;t.set(T,{x:r,y:s,originX:n.position.x+n.size.width/2,originY:n.position.y+n.size.height/2},!0)}const i=n.childId;m.set(e,{...n,isMinimized:!0,lastChildId:i}),y(),t.get(B).includes(e)||t.get(B).push(e),n.childId&&ot(e)}function q(e){const n=m.get(e);if(!n||!n.isMinimized)return;m.set(e,{...n,isMinimized:!1,isOpen:!0}),y(),t.set(P,[...t.get(P),e],!0),V(e);const i=n.lastChildId||n.childId;i&&N(i)}function L(){Array.from(m.values()).filter(t=>t.isMinimized).map(t=>t.id).forEach(e=>{const n=m.get(e);if(n){m.set(e,{...n,isMinimized:!1,isOpen:!0}),t.set(P,[...t.get(P),e],!0),V(e);const i=n.lastChildId||n.childId;i&&N(i)}}),t.set(B,[],!0),y()}function N(e){const n=m.get(e);n&&n.isHiddenWithParent&&(m.set(e,{...n,isHiddenWithParent:!1}),y(),t.set(C,[...t.get(C),e],!0))}function _(t,e,n){const i=m.get(t);if(!i)return;let o=e;if((null==n?void 0:n.constrain)&&i.size&&(o=a(e.x,e.y,i.size.width,i.size.height)),m.set(t,{...i,position:o,size:(null==n?void 0:n.size)??i.size,hasBeenDragged:i.hasBeenDragged||(null==n?void 0:n.drag)||!1}),i.childId){let e=t,n=o;for(;;){const t=m.get(e);if(!(null==t?void 0:t.childId))break;const i=m.get(t.childId);if(!(null==i?void 0:i.offsetFromParent))break;const o={x:n.x+i.offsetFromParent.x,y:n.y+i.offsetFromParent.y};m.set(t.childId,{...i,position:o,hasBeenDragged:!0}),e=t.childId,n=o}}if(i.parentId&&i.offsetFromParent){const e=oe();let n=t,r=i;for(;r.parentId&&r.offsetFromParent;){const i=m.get(r.parentId);if(!i)break;const s=n===t?o:m.get(n).position,d={x:s.x-r.offsetFromParent.x,y:s.y-r.offsetFromParent.y};"animated"===e.parentChild.movementMode?F.set(r.parentId,d):m.set(r.parentId,{...i,position:d,hasBeenDragged:!0}),n=r.parentId,r=i}}y()}function G(t,e){const n=m.get(t);n&&(m.set(t,{...n,size:e}),y())}function K(t,e){const n=m.get(t);n&&(m.set(t,{...n,...e}),y())}function V(t){var e;const n=m.get(t);if(!n)return;const i=Math.max(...Array.from(m.values()).map(t=>t.zIndex),0);if(n.parentId){const o=m.get(n.parentId);o&&o.zIndex<i&&m.set(n.parentId,{...o,zIndex:i+2});const r=(null==(e=m.get(n.parentId))?void 0:e.zIndex)??i+2;return n.zIndex<=r&&m.set(t,{...n,zIndex:r+2}),void y()}if(n.zIndex<i&&(m.set(t,{...n,zIndex:i+2}),y()),n.childId){const e=m.get(n.childId),i=m.get(t);e&&i&&e.zIndex<=i.zIndex&&(m.set(n.childId,{...e,zIndex:i.zIndex+2}),y())}}function $(t){const e=m.get(t);if(!e)return!1;const n=Math.max(...Array.from(m.values()).map(t=>t.zIndex),0);return e.zIndex===n&&!e.isMinimized&&!e.isHiddenWithParent}function j(e){t.set(B,e,!0)}function Q(e,n,i){const o=n.getBoundingClientRect();b.set(e,{x:o.left+o.width/2,y:o.top+o.height/2});const r=oe();(null==i?void 0:i.parentId)&&r.features.parentChild&&t.set(A,{parentId:i.parentId,childId:e},!0),t.get(M).includes(e)||t.set(M,[...t.get(M),e],!0),y();const s=m.get(e);if(s){if(s.isOpen&&!s.isMinimized&&!s.isHiddenWithParent)return t.set(M,t.get(M).filter(t=>t!==e),!0),kt(e),void V(e);if(s.isMinimized)return t.set(M,t.get(M).filter(t=>t!==e),!0),void q(e);m.set(e,{...s,isOpen:!0}),V(e),null==S||S.push(e)}}function J(e){X(e);const n=m.get(e.id);n&&(m.set(e.id,{...n,isOpen:!0}),y()),t.set(M,[...t.get(M),e.id],!0),y(),V(e.id),null==S||S.push(e.id)}function U(e,n=!1){const i=m.get(e);i&&(Kt(e),n?t.set(O,[...t.get(O),e],!0):t.set(v,[...t.get(v),e],!0),y(),i.childId&&U(i.childId,n),null==S||S.pop())}function Z(){Array.from(m.keys()).forEach(t=>U(t,!0))}function tt(t){const e=m.get(t);if(e){if(e.parentId){const n=m.get(e.parentId);n&&n.childId===t&&m.set(e.parentId,{...n,childId:void 0,lastChildId:t})}m.set(t,{...e,isOpen:!1,isMinimized:!1,isHiddenWithParent:!1,isTransparent:!1,position:null,size:null,hasBeenDragged:!1,parentId:void 0,childId:void 0,offsetFromParent:void 0}),y()}}function et(t){const e=m.get(t);if(!e)return[t];const n=[t];return e.childId&&n.push(...et(e.childId)),n}function nt(e,n,i){const o=oe();if(i&&!b.has(e.id)){const t=i.getBoundingClientRect();b.set(e.id,{x:t.left+t.width/2,y:t.top+t.height/2})}const r={id:e.id,title:e.title??"",icon:e.icon??"",isOpen:!0,isMinimized:!1,isHiddenWithParent:!1,isTransparent:e.isTransparent??!1,isRejected:!1,position:e.position??null,size:e.size??null,hasBeenDragged:e.hasBeenDragged??!1,dockPosition:e.dockPosition??-1,glow:e.glow??null};if(!o.features.parentChild){X(r);const n=m.get(e.id);return n&&m.set(e.id,{...n,isOpen:!0}),t.set(M,[...t.get(M),e.id],!0),y(),void V(e.id)}const s=m.get(n);if(!s)return;s.childId&&U(s.childId,!0),X({...r,parentId:n});const d=m.get(e.id);d&&m.set(e.id,{...d,isOpen:!0,parentId:n}),t.set(M,[...t.get(M),e.id],!0),y(),V(e.id),t.set(A,{parentId:n,childId:e.id},!0)}function it(t,e){if(!oe().features.parentChild)return;const n=m.get(t),i=m.get(e);if(!n||!i)return;let o={x:40,y:40};n.position&&i.position&&(o={x:i.position.x-n.position.x,y:i.position.y-n.position.y});const r=Math.max(i.zIndex,n.zIndex+1);m.set(t,{...n,childId:e,lastChildId:e}),m.set(e,{...i,parentId:t,offsetFromParent:o,zIndex:r}),y()}function ot(t){const e=m.get(t);if(!(null==e?void 0:e.childId))return;const n=m.get(e.childId);n&&(m.set(e.childId,{...n,isHiddenWithParent:!0}),y())}function rt(t,e){const n=m.get(t);if(!(null==n?void 0:n.childId))return;const i=m.get(n.childId);if(!i||!i.offsetFromParent)return;const o={x:e.x+i.offsetFromParent.x,y:e.y+i.offsetFromParent.y};m.set(n.childId,{...i,position:o}),y()}function st(t,e){const n=m.get(t),i=m.get(e);if(!(null==n?void 0:n.position)||!(null==i?void 0:i.position))return;const o={x:n.position.x-i.position.x,y:n.position.y-i.position.y};m.set(t,{...n,offsetFromParent:o}),y()}function dt(e){return t.get(z).includes(e)}function at(e){return!!t.get(z).includes(e)&&(t.set(z,t.get(z).filter(t=>t!==e),!0),!0)}function ct(){return t.get(z).length>0}function ut(){return Array.from(m.keys())}function lt(t){return m.get(t)}function ft(t){const e=[];for(const[n,i]of m.entries())if(n!==t&&i.isOpen&&!i.isMinimized&&!i.isHiddenWithParent&&!i.parentId)if(i.position&&i.size)e.push({id:String(n),x:i.position.x,y:i.position.y,width:i.size.width,height:i.size.height});else{const t=document.querySelector(`[data-modal-id="${String(n)}"]`);if(t){const i=t.getBoundingClientRect();e.push({id:String(n),x:i.left,y:i.top,width:i.width,height:i.height})}}return e}function gt(t){const e=[];for(const[n,i]of m.entries())if(n!==t&&i.isOpen&&!i.isMinimized&&!i.isHiddenWithParent)if(i.position&&i.size)e.push({x:i.position.x,y:i.position.y,width:i.size.width,height:i.size.height});else{const t=document.querySelector(`[data-modal-id="${String(n)}"]`);if(t){const n=t.getBoundingClientRect();e.push({x:n.left,y:n.top,width:n.width,height:n.height})}}return e}function ht(){return t.get(x)}function pt(){const e=t.get(T);return t.set(T,null),e}function mt(e){return t.get(M).includes(e)}function xt(e){return!!t.get(M).includes(e)&&(t.set(M,t.get(M).filter(t=>t!==e),!0),!0)}function It(e){return t.get(v).includes(e)}function yt(e){return!!t.get(v).includes(e)&&(t.set(v,t.get(v).filter(t=>t!==e),!0),!0)}function wt(e){return t.get(O).includes(e)}function zt(e){return!!t.get(O).includes(e)&&(t.set(O,t.get(O).filter(t=>t!==e),!0),!0)}function Mt(e){return t.get(P).includes(e)}function vt(e){return!!t.get(P).includes(e)&&(t.set(P,t.get(P).filter(t=>t!==e),!0),!0)}function Ot(e){return t.get(C).includes(e)}function Pt(e){return!!t.get(C).includes(e)&&(t.set(C,t.get(C).filter(t=>t!==e),!0),!0)}function Ct(e){return t.get(D).includes(e)}function Dt(e){return!!t.get(D).includes(e)&&(t.set(D,t.get(D).filter(t=>t!==e),!0),!0)}function kt(e){m.get(e)&&(t.get(D).includes(e)||t.get(k).includes(e)||(t.set(D,[...t.get(D),e],!0),y()))}function Tt(e){t.get(k).includes(e)||t.set(k,[...t.get(k),e],!0)}function bt(e){t.set(k,t.get(k).filter(t=>t!==e),!0)}function At(){return t.get(A)}function Ft(e){if(!t.get(A)||t.get(A).childId!==e)return null;const n=t.get(A);return t.set(A,null),n}function Wt(t,e){b.set(t,e)}function Ht(t){const e=b.get(t);return e&&b.delete(t),e??null}function Bt(t,e){e?W.add(t):W.delete(t)}function St(t){return W.has(t)}function Rt(t){const e=m.get(t);return void 0!==e&&e.isOpen&&!e.isMinimized&&!e.isHiddenWithParent}function Xt(t){return m.has(t)}function Et(){return{get modals(){return m},get pendingMinimize(){return t.get(z)},get pendingOpen(){return t.get(M)},get pendingClose(){return t.get(v)},get pendingRestore(){return t.get(P)},get dockOrder(){return t.get(B)}}}function Yt(t){H.has(t)?H.delete(t):H.add(t);const e=m.get(t);e&&(m.set(t,{...e,isTransparent:H.has(t)}),y())}function qt(t){H.delete(t);const e=m.get(t);e&&(m.set(t,{...e,isTransparent:!1}),y())}function Lt(t){t.animate([{transform:"translateX(0)"},{transform:"translateX(-6px)"},{transform:"translateX(6px)"},{transform:"translateX(-6px)"},{transform:"translateX(6px)"},{transform:"translateX(0)"}],{duration:300,easing:"ease-in-out"})}function Nt(t){const e=F.get(t);if(!e)return;const n=m.get(t);n&&(m.set(t,{...n,isAnimatingPosition:!0,position:e}),F.delete(t),y())}function _t(t){const e=m.get(t);e&&(m.set(t,{...e,isAnimatingPosition:!1}),y())}function Gt(t){return F.has(t)}function Kt(t){F.delete(t)}function Vt(t){const e=oe().parentChild.animationDuration;for(const[e,n]of t){const t=m.get(e);t&&m.set(e,{...t,position:n,isAnimatingPosition:!0,hasBeenDragged:!0})}y(),setTimeout(()=>{for(const e of t.keys()){const t=m.get(e);t&&m.set(e,{...t,isAnimatingPosition:!1})}y()},e)}function $t(t){const e=oe();if("animated"!==e.parentChild.movementMode)return;const n=e.parentChild.animationDuration,i=[];let o=t;for(;;){const t=m.get(o);if(!(null==t?void 0:t.parentId))break;i.push({parentId:t.parentId,childId:o}),o=t.parentId}i.forEach(({parentId:t,childId:e},i)=>{setTimeout(()=>{const i=m.get(e),o=m.get(t);if(!(null==i?void 0:i.position)||!i.offsetFromParent||!o)return;const r={x:i.position.x-i.offsetFromParent.x,y:i.position.y-i.offsetFromParent.y};F.set(t,r),Nt(t),setTimeout(()=>_t(t),n)},i*n)})}function jt(t){}function Qt(t){S=t}function Jt(t){R=t}function Ut(){return{modals:m,pendingMinimize:t.get(z),pendingOpen:t.get(M),pendingClose:t.get(v),pendingRestore:t.get(P),dockOrder:t.get(B),animatingModals:W,transparentModals:H}}function Zt(){m.clear(),t.get(z).length=0,t.get(M).length=0,t.get(v).length=0,t.get(O).length=0,t.get(P).length=0,t.get(C).length=0,t.set(T,null),b.clear(),t.set(A,null),F.clear(),W.clear(),H.clear(),t.get(B).length=0,S=null,R=null}const te={features:{dock:!0,minimize:!0,transparency:!0,resize:!0,drag:!0,focusTrap:!0,animations:!0,backdrop:!0,parentChild:!0},dock:{position:"bottom",labelMode:"beside",enableReorder:!0,enableFreeDrag:!0},animations:{open:400,close:250,minimize:500,restore:400},appearance:{headerLayout:"macos",defaultWidth:"480px",defaultHeight:"auto",minWidth:280,minHeight:200},zIndex:{base:400,dock:8e3,toast:9e3},parentChild:{movementMode:"animated",animationDuration:300},positioning:{strategy:"smart",modalGap:16,avoidElements:[]},portalTarget:"#modal-portal"};let ee={...te},ne=t.state(0);function ie(){return t.get(ne)}function oe(){return ee}function re(e){const n=ee;ee=de(te,e),t.update(ne),n.features.dock&&!ee.features.dock&&L()}function se(){ee={...te},t.update(ne)}function de(t,e){return{features:{...t.features,...e.features},dock:{...t.dock,...e.dock},animations:{...t.animations,...e.animations},appearance:{...t.appearance,...e.appearance},zIndex:{...t.zIndex,...e.zIndex},parentChild:{...t.parentChild,...e.parentChild},positioning:{...t.positioning,...e.positioning},portalTarget:e.portalTarget??t.portalTarget}}function ae(t){return ee.features[t]}export{Ut as _getInternalState,Zt as _resetInternalState,o as acquireModalZIndex,Vt as animateModalsToPositions,Nt as animateParentToPosition,V as bringToFront,u as calculateOverlap,g as calculatePositionScore,p as calculateRearrangement,l as calculateTotalOverlap,_t as clearParentAnimationFlag,Kt as clearPendingParentAnimation,Z as closeAllModals,U as closeModal,c as constrainSizeToViewport,a as constrainToViewport,Ht as consumeOpenSourcePosition,Dt as consumePendingAttention,Pt as consumePendingChildRestore,yt as consumePendingClose,zt as consumePendingForceClose,at as consumePendingMinimize,pt as consumePendingMinimizeTarget,xt as consumePendingOpen,Ft as consumePendingParentLink,vt as consumePendingRestore,J as createModal,te as defaultConfig,bt as endAttentionAnimation,tt as finalizeModalClose,h as findSmartPosition,oe as getConfig,ie as getConfigVersion,f as getElementBounds,r as getLayerZIndex,lt as getModalState,Et as getModalsStore,et as getModalsToClose,gt as getOpenModalBounds,ft as getOpenModalBoundsWithIds,At as getPendingParentLink,ut as getRegisteredModalIds,ht as getStateVersion,ct as hasAnyPendingMinimize,Ct as hasPendingAttention,Ot as hasPendingChildRestore,It as hasPendingClose,wt as hasPendingForceClose,dt as hasPendingMinimize,mt as hasPendingOpen,Gt as hasPendingParentAnimation,Mt as hasPendingRestore,ot as hideChildWithParent,i as initializeStacking,ae as isFeatureEnabled,St as isModalAnimating,Rt as isModalOpen,Xt as isModalRegistered,$ as isTopModal,it as linkModals,de as mergeConfig,Y as minimizeModal,nt as openChildModal,Q as openModal,X as registerModal,j as reorderDock,se as resetConfig,qt as resetModalTransparency,s as resetStacking,L as restoreAllMinimizedModals,N as restoreChildModal,q as restoreModal,st as setChildOffsetFromParent,re as setConfig,Jt as setDockPositionGetter,Bt as setModalAnimating,jt as setRegistryFunctions,Qt as setURLStateCallbacks,Lt as shakeElement,Tt as startAttentionAnimation,Wt as storeOpenSourcePosition,w as subscribe,Yt as toggleModalTransparency,kt as triggerAttention,$t as triggerCascadingParentAnimations,E as unregisterModal,rt as updateChildPosition,K as updateModal,_ as updateModalPosition,G as updateModalSize};

package/dist/react/Dock.d.ts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+export interface DockProps {
+    /** Custom icon renderer - receives icon name, returns React element */
+    renderIcon?: (props: {
+        icon: string;
+    }) => ReactNode;
+}
+export declare function Dock({ renderIcon }: DockProps): React.ReactElement<{
+    ref: React.RefObject<HTMLDivElement | null>;
+    'data-dock-bridge': boolean;
+}, string | React.JSXElementConstructor<any>>;
+export default Dock;
+//# sourceMappingURL=Dock.d.ts.map

package/dist/react/Modal.d.ts

@@ -0,0 +1,11 @@
+import { default as React, ReactNode } from 'react';
+import { BaseModalProps } from '../core/types';
+export interface ModalProps extends BaseModalProps {
+    children?: ReactNode;
+    footer?: ReactNode;
+    /** Custom icon as React element (overrides icon string if provided) */
+    customIcon?: ReactNode;
+}
+export declare function Modal({ id, title, icon, customIcon, maxWidth, preferredHeight, autoOpen, openSourcePosition, glow, config, closeOnEscape, onClose, children, footer, }: ModalProps): React.FunctionComponentElement<React.ProviderProps<import('..').ModalId | null>>;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/react/ModalProvider.d.ts

@@ -0,0 +1,11 @@
+import { default as React, ReactNode } from 'react';
+import { ModalLibraryConfig } from '../core/config.svelte';
+export interface ModalProviderProps {
+    /** Configuration overrides */
+    config?: Partial<ModalLibraryConfig>;
+    /** Children to render */
+    children?: ReactNode;
+}
+export declare function ModalProvider({ config: configOverride, children }: ModalProviderProps): React.FunctionComponentElement<React.FragmentProps>;
+export default ModalProvider;
+//# sourceMappingURL=ModalProvider.d.ts.map

package/dist/react/context.d.ts

@@ -0,0 +1,4 @@
+import { ModalId } from '../core/types';
+/** Context for current modal ID */
+export declare const ModalIdContext: import('react').Context<ModalId | null>;
+//# sourceMappingURL=context.d.ts.map

package/dist/react/index.d.ts

@@ -0,0 +1,15 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { ModalProvider } from './ModalProvider';
+export type { ModalProviderProps } from './ModalProvider';
+export { Dock } from './Dock';
+export type { DockProps } from './Dock';
+export { useModal, useModals } from './useModal';
+export { useModalZIndex } from './useModalZIndex';
+export type { UseModalZIndexReturn } from './useModalZIndex';
+export { ModalIdContext } from './context';
+export { createSvelteBridge, reactChildrenToSvelteSnippet } from './svelte-bridge';
+export { openModal, closeModal, minimizeModal, restoreModal, bringToFront, isModalOpen, isModalRegistered, openChildModal, triggerAttention, } from '../core/state.svelte';
+export { init, createBackdrop, createDock } from '../vanilla/index';
+export type { InitOptions, InitControl, BackdropControl, DockControl } from '../vanilla/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/svelte-bridge.d.ts

@@ -0,0 +1,18 @@
+import { default as React, ReactNode } from 'react';
+import { Component, Snippet } from 'svelte';
+/**
+ * Create a React wrapper for a Svelte component
+ */
+export declare function createSvelteBridge<P extends Record<string, unknown>>(SvelteComponent: Component<any>): (props: P & {
+    children?: ReactNode;
+}) => React.ReactElement<{
+    ref: React.RefObject<HTMLDivElement | null>;
+    'data-svelte-bridge': string;
+}, string | React.JSXElementConstructor<any>>;
+/**
+ * Convert React children to a Svelte-compatible format
+ * Note: This is a basic implementation. Complex React children
+ * may require a portal-based approach.
+ */
+export declare function reactChildrenToSvelteSnippet(children: ReactNode): Snippet | undefined;
+//# sourceMappingURL=svelte-bridge.d.ts.map