epic-modals 1.0.1 → 1.0.3

package/dist/vanilla.d.ts

@@ -1,3 +1,148 @@
-
-export * from './vanilla/index';
-//# sourceMappingURL=vanilla.d.ts.map
+import { bringToFront } from '../core/state';
+import { closeAllModals } from '../core/state';
+import { closeModal } from '../core/state';
+import { getConfig } from '../core/config';
+import { getDockOrder } from '../core/state';
+import { getModalsStore } from '../core/state';
+import { getModalState } from '../core/state';
+import { isModalOpen } from '../core/state';
+import { isModalRegistered } from '../core/state';
+import { minimizeModal } from '../core/state';
+import { ModalConfigOverrides } from '../core/types';
+import { ModalGlow } from '../core/types';
+import { ModalId } from '../core/types';
+import { ModalLibraryConfig } from '../core/config';
+import { openChildModal } from '../core/state';
+import { openModal } from '../core/state';
+import { Position } from '../core/types';
+import { reorderDock } from '../core/state';
+import { restoreAllMinimizedModals } from '../core/state';
+import { restoreModal } from '../core/state';
+import { setConfig } from '../core/config';
+import { toggleModalTransparency } from '../core/state';
+
+export declare interface BackdropControl {
+    destroy: () => void;
+}
+
+export { bringToFront }
+
+export { closeAllModals }
+
+export { closeModal }
+
+export declare function createBackdrop(): BackdropControl;
+
+export declare function createDock(): DockControl;
+
+export declare function createModal(options: ModalOptions): ModalControl;
+
+export declare interface DockControl {
+    destroy: () => void;
+}
+
+export { getConfig }
+
+export { getDockOrder }
+
+export { getModalsStore }
+
+export { getModalState }
+
+export declare function init(options?: InitOptions): InitControl;
+
+export declare interface InitControl {
+    destroy: () => void;
+    backdrop: BackdropControl | null;
+    dock: DockControl | null;
+}
+
+export declare interface InitOptions {
+    config?: Partial<ModalLibraryConfig>;
+
+    backdrop?: boolean;
+
+    dock?: boolean;
+}
+
+export { isModalOpen }
+
+export { isModalRegistered }
+
+export { minimizeModal }
+
+export declare interface ModalControl {
+    destroy: () => void;
+
+    update: (options: Partial<ModalOptions>) => void;
+}
+
+export declare interface ModalOptions extends Omit<VanillaModalOptions, 'container' | 'content' | 'footer'> {
+
+    content?: string | HTMLElement;
+
+    footer?: string | HTMLElement;
+
+    customIcon?: string | HTMLElement;
+}
+
+export { openChildModal }
+
+export { openModal }
+
+export { reorderDock }
+
+export { restoreAllMinimizedModals }
+
+export { restoreModal }
+
+export { setConfig }
+
+export { toggleModalTransparency }
+
+export declare interface VanillaBackdropOptions {
+    container: HTMLElement;
+}
+
+export declare interface VanillaDockOptions {
+    container: HTMLElement;
+
+    renderIcon?: (icon: string) => HTMLElement | null;
+}
+
+export declare interface VanillaModalOptions {
+
+    id: ModalId;
+
+    title: string;
+
+    container: HTMLElement;
+
+    icon?: string;
+
+    iconElement?: HTMLElement;
+
+    renderIcon?: (icon: string) => HTMLElement | null;
+
+    config?: ModalConfigOverrides;
+
+    maxWidth?: string;
+
+    preferredHeight?: string;
+
+    glow?: ModalGlow;
+
+    closeOnEscape?: boolean;
+
+    autoOpen?: boolean;
+
+    openSourcePosition?: Position | null;
+
+    onClose?: () => void;
+
+    content?: HTMLElement;
+
+    footer?: HTMLElement;
+}
+
+export { }

package/dist/vanilla.js

@@ -1 +1 @@
-var e=Object.defineProperty,t=(t,n,i)=>((t,n,i)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[n]=i)(t,"symbol"!=typeof n?n+"":n,i);import{J as n,r as i,d as o,b as s,M as a,u as r,K as l,L as d,R as c,v as h,w as p,x as m,j as u,A as b,t as E,p as g,s as C,q as f,k as y,B as k,f as A,N as v,h as H,O as w,l as I,m as N,o as z}from"./runtime.js";import{E as L,P as M,Q as $,S as D,I as O,F as S,G as T,D as x,T as P,U as B,V as W}from"./runtime.js";class F{constructor(e){t(this,"controller"),t(this,"dialogEl"),t(this,"headerEl"),t(this,"bodyEl"),t(this,"footerEl",null),t(this,"resizeHandlesContainer",null),t(this,"container"),t(this,"options"),t(this,"configHelper"),t(this,"unsubscribe",null),t(this,"abortController",new AbortController),this.options=e,this.container=e.container,this.configHelper=n(e.config),i(o({id:e.id,title:e.title,icon:e.icon,autoOpen:e.autoOpen??!0,glow:e.glow})),(e.autoOpen??1)&&s(e.id),this.dialogEl=this.createDialogElement(),this.headerEl=this.createHeaderElement(),this.bodyEl=this.createBodyElement(),e.footer&&(this.footerEl=this.createFooterElement(),this.footerEl.appendChild(e.footer)),this.configHelper.isFeatureEnabled("resize")&&(this.resizeHandlesContainer=this.createResizeHandles()),this.dialogEl.appendChild(this.headerEl),this.dialogEl.appendChild(this.bodyEl),this.footerEl&&this.dialogEl.appendChild(this.footerEl),this.resizeHandlesContainer&&this.dialogEl.appendChild(this.resizeHandlesContainer),e.content&&this.bodyEl.appendChild(e.content);const r={id:e.id,title:e.title,icon:e.icon,config:e.config,maxWidth:e.maxWidth,preferredHeight:e.preferredHeight,glow:e.glow,closeOnEscape:e.closeOnEscape??!0,autoOpen:e.autoOpen??!0,openSourcePosition:e.openSourcePosition,onClose:e.onClose,skipRegistration:!0,configHelper:this.configHelper};this.controller=new a(r),this.container.appendChild(this.dialogEl),this.controller.mount(this.dialogEl),this.unsubscribe=this.controller.subscribe(e=>{this.updateFromState(e)}),this.updateFromState(this.controller.getState()),this.setupEventHandlers()}destroy(){var e;this.abortController.abort(),null==(e=this.unsubscribe)||e.call(this),this.controller.destroy(),r(this.options.id),this.dialogEl.remove()}createDialogElement(){const e=document.createElement("div");return e.className=l.dialog,e.setAttribute(d.modalId,String(this.options.id)),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-labelledby",`${this.options.id}-title`),e.setAttribute("tabindex","-1"),e}createHeaderElement(){const e=document.createElement("header"),t=this.configHelper.isFeatureEnabled("drag"),n=this.configHelper.getAppearance("headerLayout"),i=this.configHelper.isFeatureEnabled("minimize"),o=!this.configHelper.isFeatureEnabled("dock"),s=this.configHelper.isFeatureEnabled("transparency");e.className=t?`${l.header} ${l.headerDraggable}`:l.header;const a=this.getIconElement();return"macos"===n?this.createMacOSHeader(e,a,i,o,s):this.createWindowsHeader(e,a,i,o,s),e}getIconElement(){return this.options.iconElement?this.options.iconElement:this.options.icon&&this.options.renderIcon?this.options.renderIcon(this.options.icon):null}createMacOSHeader(e,t,n,i,o){const s=document.createElement("div");s.className=l.headerTrafficLights;const a=document.createElement("button");if(a.type="button",a.className=`${l.headerLight} ${l.headerLightClose}`,a.setAttribute("aria-label","Close"),a.setAttribute("data-control","close"),s.appendChild(a),n){const e=document.createElement("button");e.type="button",e.className=`${l.headerLight} ${l.headerLightMinimize}${i?` ${l.headerLightDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),i&&(e.disabled=!0,e.title="Enable dock to minimize"),s.appendChild(e)}if(o){const e=document.createElement("button");e.type="button",e.className=`${l.headerLight} ${l.headerLightStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),s.appendChild(e)}e.appendChild(s);const r=document.createElement("div");if(r.className=l.headerMacCenter,t){const e=document.createElement("div");e.className=l.headerIcon,e.appendChild(t),r.appendChild(e)}const d=document.createElement("div");d.className=l.headerTitleGroup;const c=document.createElement("h2");c.className=l.headerTitle,c.id=`${this.options.id}-title`,c.textContent=this.options.title,d.appendChild(c),r.appendChild(d),e.appendChild(r);const h=document.createElement("div");h.className=l.headerMacSpacer,e.appendChild(h)}createWindowsHeader(e,t,n,i,o){const s=document.createElement("div");if(s.className=l.headerTitleGroup,t){const e=document.createElement("div");e.className=l.headerIcon,e.appendChild(t),s.appendChild(e)}const a=document.createElement("h2");a.className=l.headerTitle,a.id=`${this.options.id}-title`,a.textContent=this.options.title,s.appendChild(a),e.appendChild(s);const r=document.createElement("div");if(r.className=l.headerActions,o){const e=document.createElement("button");e.type="button",e.className=`${l.headerBtnWindows} ${l.headerBtnWindowsStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),e.innerHTML="◇",r.appendChild(e)}if(n){const e=document.createElement("button");e.type="button",e.className=`${l.headerBtnWindows}${i?` ${l.headerBtnWindowsDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),e.innerHTML="–",i&&(e.disabled=!0,e.title="Enable dock to minimize"),r.appendChild(e)}const d=document.createElement("button");d.type="button",d.className=`${l.headerBtnWindows} ${l.headerBtnWindowsClose}`,d.setAttribute("aria-label","Close"),d.setAttribute("data-control","close"),d.innerHTML="×",r.appendChild(d),e.appendChild(r)}createBodyElement(){const e=document.createElement("div");return e.className=l.body,e}createFooterElement(){const e=document.createElement("div");return e.className=l.footer,e}createResizeHandles(){const e=document.createElement("div");e.className=l.resizeHandles,e.setAttribute("role","group"),e.setAttribute("aria-label","Resize handles");for(const t of c){const n=document.createElement("div");n.className=`${l.resizeHandle} ${l.resizePrefix}${t}`,n.setAttribute("role","separator"),n.setAttribute("tabindex","0"),n.setAttribute("aria-label",`Resize ${t}`),n.setAttribute("aria-orientation","n"===t||"s"===t?"horizontal":"vertical"),n.setAttribute(d.resizeDirection,t),e.appendChild(n)}return e}updateFromState(e){this.dialogEl.className=e.cssClasses.join(" "),this.updateStyles(e.style),this.dialogEl.setAttribute("data-state",e.dataState),this.dialogEl.setAttribute("data-animation-phase",e.dataAnimationPhase)}updateStyles(e){for(const[t,n]of Object.entries(e))t.startsWith("--")?this.dialogEl.style.setProperty(t,String(n)):this.dialogEl.style.setProperty(t,"number"==typeof n?String(n):n)}setupEventHandlers(){const e=this.abortController.signal,t="macos"===this.configHelper.getAppearance("headerLayout")?`.${l.headerLight}`:`.${l.headerBtnWindows}`;this.headerEl.addEventListener("pointerdown",e=>{e.target.closest(t)||this.controller.startDrag(e)},{signal:e}),this.dialogEl.addEventListener("pointermove",e=>{this.controller.handlePointerMove(e)},{signal:e}),this.dialogEl.addEventListener("pointerup",e=>{this.controller.handlePointerUp(e)},{signal:e}),this.headerEl.addEventListener("click",e=>{const t=e.target.closest("button");if(!t)return;const n=t.getAttribute("data-control");"close"===n?this.controller.close():"minimize"===n?this.controller.minimize():"style"===n&&this.controller.toggleTransparency()},{signal:e}),this.resizeHandlesContainer&&this.resizeHandlesContainer.addEventListener("pointerdown",e=>{const t=e.target.closest(`.${l.resizeHandle}`);if(!t)return;const n=t.getAttribute(d.resizeDirection);n&&this.controller.startResize(e,n)},{signal:e}),this.dialogEl.addEventListener("keydown",e=>{this.controller.handleKeyDown(e)},{signal:e}),this.dialogEl.addEventListener("pointerdown",()=>{this.controller.bringToFront()},{signal:e})}}class R{constructor(e){t(this,"containerEl"),t(this,"dockEl"),t(this,"parentContainer"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),t(this,"isAttached",!1),t(this,"options"),this.options=e,this.parentContainer=e.container,this.containerEl=this.createContainerDOM(),this.dockEl=this.createDockDOM(),this.containerEl.appendChild(this.dockEl),this.unsubscribe=h(()=>{this.render()}),this.render()}createContainerDOM(){const e=document.createElement("div");return e.setAttribute("data-dock-container","true"),e}createDockDOM(){const e=document.createElement("div");return e.className=l.dock,e}render(){const e=y();if(!e.features.dock)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));const t=p();if(0===t.length)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));this.isAttached||(this.parentContainer.appendChild(this.containerEl),this.isAttached=!0);const n=e.dock.position;if(this.containerEl.className=m(n,0===t.length),this.containerEl.style.zIndex=String(u("DOCK")),this.dockEl.className=b(n,"horizontal"),this.dockEl.innerHTML="","free"===n){const e=this.createDockHandle();this.dockEl.appendChild(e)}const i=k(),o=e.dock.labelMode;for(const e of t){const t=e.lastChildId?i.get(e.lastChildId):null,n=this.createDockItem(e,t??null,o);this.dockEl.appendChild(n)}}createDockHandle(){const e=document.createElement("button");return e.type="button",e.className=l.dockHandle,e.setAttribute("aria-label","Drag dock"),e}createDockItem(e,t,n){const i=document.createElement("button"),o=[l.dockItem,e.glow&&l.dockItemHasGlow,e.lastChildId&&l.dockItemHasChild,"beside"===n&&l.dockItemLabelBeside,"below"===n&&l.dockItemLabelBelow].filter(Boolean).join(" ");i.className=o,i.setAttribute(d.modalId,E(e.id)),i.setAttribute("aria-label",`Restore ${e.title}`),e.glow&&i.style.setProperty("--modal-dock-glow-color",e.glow.color);const s=document.createElement("span");if(s.className=l.dockItemIcon,e.icon&&this.options.renderIcon){const t=this.options.renderIcon(e.icon);t?s.appendChild(t):s.appendChild(this.createIconPlaceholder(e.title))}else s.appendChild(this.createIconPlaceholder(e.title));if(i.appendChild(s),"hidden"!==n){const t=document.createElement("span");t.className=l.dockItemLabel,t.textContent=e.title,i.appendChild(t)}const a=document.createElement("span");if(a.className=l.dockItemGlow,i.appendChild(a),e.lastChildId&&t){const e=document.createElement("span");if(e.className=l.dockChildIndicator,t.icon&&this.options.renderIcon){const n=this.options.renderIcon(t.icon);n?e.appendChild(n):e.textContent="+"}else e.textContent="+";i.appendChild(e)}return i.addEventListener("click",t=>{g(e.id)?C(t.currentTarget):f(e.id)},{signal:this.abortController.signal}),i}createIconPlaceholder(e){const t=document.createElement("span");return t.className=l.dockItemIconPlaceholder,t.textContent=e.charAt(0),t}destroy(){this.abortController.abort(),this.unsubscribe(),this.isAttached&&(this.containerEl.remove(),this.isAttached=!1)}}class j{constructor(e){t(this,"element"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),this.element=this.createDOM(),e.container.appendChild(this.element),this.unsubscribe=h(()=>{this.render()}),this.render()}createDOM(){const e=document.createElement("div");return e.className=l.backdrop,e.addEventListener("click",()=>{A().blockClicks&&v()},{signal:this.abortController.signal}),e}render(){A().visible?H()?(this.element.classList.add(l.backdropVisible),this.element.style.display=""):(this.element.classList.remove(l.backdropVisible),this.element.style.display="none"):this.element.style.display="none"}destroy(){this.abortController.abort(),this.unsubscribe(),this.element.remove()}}function G(e){if("string"==typeof e){const t=document.createElement("div");return t.innerHTML=e,t}return e}function K(e){const{content:t,footer:n,customIcon:i,...o}=e,s=t?G(t):void 0,a=n?G(n):void 0,r=new F({...o,container:document.body,content:s,footer:a});return{destroy:()=>r.destroy(),update:e=>{}}}function V(){const e=new R({container:document.body});return{destroy:()=>e.destroy()}}function q(){const e=new j({container:document.body});return{destroy:()=>e.destroy()}}function J(e={}){const{config:t}=e;t&&w(t),I(),N();const n=y(),i=e.backdrop??n.features.backdrop?q():null,o=e.dock??n.features.dock?V():null;return{backdrop:i,dock:o,destroy:()=>{null==i||i.destroy(),null==o||o.destroy(),z()}}}export{s as bringToFront,v as closeAllModals,L as closeModal,q as createBackdrop,V as createDock,K as createModal,y as getConfig,M as getDockOrder,$ as getModalState,k as getModalsStore,J as init,D as isModalOpen,O as isModalRegistered,S as minimizeModal,T as openChildModal,x as openModal,P as reorderDock,B as restoreAllMinimizedModals,f as restoreModal,w as setConfig,W as toggleModalTransparency};
+var e=Object.defineProperty,t=(t,o,i)=>((t,o,i)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i)(t,"symbol"!=typeof o?o+"":o,i);import{CSS_CLASSES as o,DATA_ATTRIBUTES as i,RESIZE_DIRECTIONS as s}from"./core.js";import{ModalController as n}from"./core.js";import{registerModal as a,createModalRegistration as r,bringToFront as l,unregisterModal as d,subscribe as c,getModalsStore as h,isModalAnimating as m,shakeElement as p,restoreModal as u,closeAllModals as b}from"./core.js";import{bringToFront as g,closeAllModals as E,closeModal as C,getDockOrder as f,getModalState as y,getModalsStore as k,isModalOpen as A,isModalRegistered as M,minimizeModal as v,openChildModal as H,openModal as I,reorderDock as z,restoreAllMinimizedModals as N,restoreModal as w,toggleModalTransparency as L}from"./core.js";import{createConfigHelper as D,getConfig as S,setConfig as $}from"./core.js";import{getConfig as T,setConfig as O}from"./core.js";import{getMinimizedModals as j,getDockContainerClasses as B,getDockClasses as R}from"./core.js";import{getLayerZIndex as x,initializeStacking as F}from"./core.js";import{toDataId as P}from"./core.js";import{getBackdropConfig as W,hasOpenModals as G}from"./core.js";import{initializeResizeListener as _,cleanupResizeListener as K}from"./core.js";class U{constructor(e){t(this,"controller"),t(this,"dialogEl"),t(this,"headerEl"),t(this,"bodyEl"),t(this,"footerEl",null),t(this,"resizeHandlesContainer",null),t(this,"container"),t(this,"options"),t(this,"configHelper"),t(this,"unsubscribe",null),t(this,"abortController",new AbortController),this.options=e,this.container=e.container,this.configHelper=D(e.config),a(r({id:e.id,title:e.title,icon:e.icon,autoOpen:e.autoOpen??!0,glow:e.glow})),(e.autoOpen??!0)&&l(e.id),this.dialogEl=this.createDialogElement(),this.headerEl=this.createHeaderElement(),this.bodyEl=this.createBodyElement(),e.footer&&(this.footerEl=this.createFooterElement(),this.footerEl.appendChild(e.footer)),this.configHelper.isFeatureEnabled("resize")&&(this.resizeHandlesContainer=this.createResizeHandles()),this.dialogEl.appendChild(this.headerEl),this.dialogEl.appendChild(this.bodyEl),this.footerEl&&this.dialogEl.appendChild(this.footerEl),this.resizeHandlesContainer&&this.dialogEl.appendChild(this.resizeHandlesContainer),e.content&&this.bodyEl.appendChild(e.content);const o={id:e.id,title:e.title,icon:e.icon,config:e.config,maxWidth:e.maxWidth,preferredHeight:e.preferredHeight,glow:e.glow,closeOnEscape:e.closeOnEscape??!0,autoOpen:e.autoOpen??!0,openSourcePosition:e.openSourcePosition,onClose:e.onClose,skipRegistration:!0,configHelper:this.configHelper};this.controller=new n(o),this.container.appendChild(this.dialogEl),this.controller.mount(this.dialogEl),this.unsubscribe=this.controller.subscribe(e=>{this.updateFromState(e)}),this.updateFromState(this.controller.getState()),this.setupEventHandlers()}destroy(){var e;this.abortController.abort(),null==(e=this.unsubscribe)||e.call(this),this.controller.destroy(),d(this.options.id),this.dialogEl.remove()}createDialogElement(){const e=document.createElement("div");return e.className=o.dialog,e.setAttribute(i.modalId,String(this.options.id)),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-labelledby",`${this.options.id}-title`),e.setAttribute("tabindex","-1"),e}createHeaderElement(){const e=document.createElement("header"),t=this.configHelper.isFeatureEnabled("drag"),i=this.configHelper.getAppearance("headerLayout"),s=this.configHelper.isFeatureEnabled("minimize"),n=!this.configHelper.isFeatureEnabled("dock"),a=this.configHelper.isFeatureEnabled("transparency");e.className=t?`${o.header} ${o.headerDraggable}`:o.header;const r=this.getIconElement();return"macos"===i?this.createMacOSHeader(e,r,s,n,a):this.createWindowsHeader(e,r,s,n,a),e}getIconElement(){return this.options.iconElement?this.options.iconElement:this.options.icon&&this.options.renderIcon?this.options.renderIcon(this.options.icon):null}createMacOSHeader(e,t,i,s,n){const a=document.createElement("div");a.className=o.headerTrafficLights;const r=document.createElement("button");if(r.type="button",r.className=`${o.headerLight} ${o.headerLightClose}`,r.setAttribute("aria-label","Close"),r.setAttribute("data-control","close"),a.appendChild(r),i){const e=document.createElement("button");e.type="button",e.className=`${o.headerLight} ${o.headerLightMinimize}${s?` ${o.headerLightDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),s&&(e.disabled=!0,e.title="Enable dock to minimize"),a.appendChild(e)}if(n){const e=document.createElement("button");e.type="button",e.className=`${o.headerLight} ${o.headerLightStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),a.appendChild(e)}e.appendChild(a);const l=document.createElement("div");if(l.className=o.headerMacCenter,t){const e=document.createElement("div");e.className=o.headerIcon,e.appendChild(t),l.appendChild(e)}const d=document.createElement("div");d.className=o.headerTitleGroup;const c=document.createElement("h2");c.className=o.headerTitle,c.id=`${this.options.id}-title`,c.textContent=this.options.title,d.appendChild(c),l.appendChild(d),e.appendChild(l);const h=document.createElement("div");h.className=o.headerMacSpacer,e.appendChild(h)}createWindowsHeader(e,t,i,s,n){const a=document.createElement("div");if(a.className=o.headerTitleGroup,t){const e=document.createElement("div");e.className=o.headerIcon,e.appendChild(t),a.appendChild(e)}const r=document.createElement("h2");r.className=o.headerTitle,r.id=`${this.options.id}-title`,r.textContent=this.options.title,a.appendChild(r),e.appendChild(a);const l=document.createElement("div");if(l.className=o.headerActions,n){const e=document.createElement("button");e.type="button",e.className=`${o.headerBtnWindows} ${o.headerBtnWindowsStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),e.innerHTML="◇",l.appendChild(e)}if(i){const e=document.createElement("button");e.type="button",e.className=`${o.headerBtnWindows}${s?` ${o.headerBtnWindowsDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),e.innerHTML="–",s&&(e.disabled=!0,e.title="Enable dock to minimize"),l.appendChild(e)}const d=document.createElement("button");d.type="button",d.className=`${o.headerBtnWindows} ${o.headerBtnWindowsClose}`,d.setAttribute("aria-label","Close"),d.setAttribute("data-control","close"),d.innerHTML="×",l.appendChild(d),e.appendChild(l)}createBodyElement(){const e=document.createElement("div");return e.className=o.body,e}createFooterElement(){const e=document.createElement("div");return e.className=o.footer,e}createResizeHandles(){const e=document.createElement("div");e.className=o.resizeHandles,e.setAttribute("role","group"),e.setAttribute("aria-label","Resize handles");for(const t of s){const s=document.createElement("div");s.className=`${o.resizeHandle} ${o.resizePrefix}${t}`,s.setAttribute("role","separator"),s.setAttribute("tabindex","0"),s.setAttribute("aria-label",`Resize ${t}`),s.setAttribute("aria-orientation","n"===t||"s"===t?"horizontal":"vertical"),s.setAttribute(i.resizeDirection,t),e.appendChild(s)}return e}updateFromState(e){this.dialogEl.className=e.cssClasses.join(" "),this.updateStyles(e.style),this.dialogEl.setAttribute("data-state",e.dataState),this.dialogEl.setAttribute("data-animation-phase",e.dataAnimationPhase)}updateStyles(e){for(const[t,o]of Object.entries(e))t.startsWith("--")?this.dialogEl.style.setProperty(t,String(o)):this.dialogEl.style.setProperty(t,"number"==typeof o?String(o):o)}setupEventHandlers(){const e=this.abortController.signal,t="macos"===this.configHelper.getAppearance("headerLayout")?`.${o.headerLight}`:`.${o.headerBtnWindows}`;this.headerEl.addEventListener("pointerdown",e=>{e.target.closest(t)||this.controller.startDrag(e)},{signal:e}),this.dialogEl.addEventListener("pointermove",e=>{this.controller.handlePointerMove(e)},{signal:e}),this.dialogEl.addEventListener("pointerup",e=>{this.controller.handlePointerUp(e)},{signal:e}),this.headerEl.addEventListener("click",e=>{const t=e.target.closest("button");if(!t)return;const o=t.getAttribute("data-control");"close"===o?this.controller.close():"minimize"===o?this.controller.minimize():"style"===o&&this.controller.toggleTransparency()},{signal:e}),this.resizeHandlesContainer&&this.resizeHandlesContainer.addEventListener("pointerdown",e=>{const t=e.target.closest(`.${o.resizeHandle}`);if(!t)return;const s=t.getAttribute(i.resizeDirection);s&&this.controller.startResize(e,s)},{signal:e}),this.dialogEl.addEventListener("keydown",e=>{this.controller.handleKeyDown(e)},{signal:e}),this.dialogEl.addEventListener("pointerdown",()=>{this.controller.bringToFront()},{signal:e})}}class V{constructor(e){t(this,"containerEl"),t(this,"dockEl"),t(this,"parentContainer"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),t(this,"isAttached",!1),t(this,"options"),this.options=e,this.parentContainer=e.container,this.containerEl=this.createContainerDOM(),this.dockEl=this.createDockDOM(),this.containerEl.appendChild(this.dockEl),this.unsubscribe=c(()=>{this.render()}),this.render()}createContainerDOM(){const e=document.createElement("div");return e.setAttribute("data-dock-container","true"),e}createDockDOM(){const e=document.createElement("div");return e.className=o.dock,e}render(){const e=S();if(!e.features.dock)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));const t=j();if(0===t.length)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));this.isAttached||(this.parentContainer.appendChild(this.containerEl),this.isAttached=!0);const o=e.dock.position;if(this.containerEl.className=B(o,0===t.length),this.containerEl.style.zIndex=String(x("DOCK")),this.dockEl.className=R(o,"horizontal"),this.dockEl.innerHTML="","free"===o){const e=this.createDockHandle();this.dockEl.appendChild(e)}const i=h(),s=e.dock.labelMode;for(const e of t){const t=e.lastChildId?i.get(e.lastChildId):null,o=this.createDockItem(e,t??null,s);this.dockEl.appendChild(o)}}createDockHandle(){const e=document.createElement("button");return e.type="button",e.className=o.dockHandle,e.setAttribute("aria-label","Drag dock"),e}createDockItem(e,t,s){const n=document.createElement("button"),a=[o.dockItem,e.glow&&o.dockItemHasGlow,e.lastChildId&&o.dockItemHasChild,"beside"===s&&o.dockItemLabelBeside,"below"===s&&o.dockItemLabelBelow].filter(Boolean).join(" ");n.className=a,n.setAttribute(i.modalId,P(e.id)),n.setAttribute("aria-label",`Restore ${e.title}`),e.glow&&n.style.setProperty("--modal-dock-glow-color",e.glow.color);const r=document.createElement("span");if(r.className=o.dockItemIcon,e.icon&&this.options.renderIcon){const t=this.options.renderIcon(e.icon);t?r.appendChild(t):r.appendChild(this.createIconPlaceholder(e.title))}else r.appendChild(this.createIconPlaceholder(e.title));if(n.appendChild(r),"hidden"!==s){const t=document.createElement("span");t.className=o.dockItemLabel,t.textContent=e.title,n.appendChild(t)}const l=document.createElement("span");if(l.className=o.dockItemGlow,n.appendChild(l),e.lastChildId&&t){const e=document.createElement("span");if(e.className=o.dockChildIndicator,t.icon&&this.options.renderIcon){const o=this.options.renderIcon(t.icon);o?e.appendChild(o):e.textContent="+"}else e.textContent="+";n.appendChild(e)}return n.addEventListener("click",t=>{m(e.id)?p(t.currentTarget):u(e.id)},{signal:this.abortController.signal}),n}createIconPlaceholder(e){const t=document.createElement("span");return t.className=o.dockItemIconPlaceholder,t.textContent=e.charAt(0),t}destroy(){this.abortController.abort(),this.unsubscribe(),this.isAttached&&(this.containerEl.remove(),this.isAttached=!1)}}class Z{constructor(e){t(this,"element"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),this.element=this.createDOM(),e.container.appendChild(this.element),this.unsubscribe=c(()=>{this.render()}),this.render()}createDOM(){const e=document.createElement("div");return e.className=o.backdrop,e.addEventListener("click",()=>{W().blockClicks&&b()},{signal:this.abortController.signal}),e}render(){W().visible?G()?(this.element.classList.add(o.backdropVisible),this.element.style.display=""):(this.element.classList.remove(o.backdropVisible),this.element.style.display="none"):this.element.style.display="none"}destroy(){this.abortController.abort(),this.unsubscribe(),this.element.remove()}}function q(e){if("string"==typeof e){const t=document.createElement("div");return t.innerHTML=e,t}return e}function J(e){const{content:t,footer:o,customIcon:i,...s}=e,n=t?q(t):void 0,a=o?q(o):void 0,r=new U({...s,container:document.body,content:n,footer:a});return{destroy:()=>r.destroy(),update:e=>{}}}function Q(){const e=new V({container:document.body});return{destroy:()=>e.destroy()}}function X(){const e=new Z({container:document.body});return{destroy:()=>e.destroy()}}function Y(e={}){const{config:t}=e;t&&$(t),F(),_();const o=S(),i=e.backdrop??o.features.backdrop?X():null,s=e.dock??o.features.dock?Q():null;return{backdrop:i,dock:s,destroy:()=>{null==i||i.destroy(),null==s||s.destroy(),K()}}}export{g as bringToFront,E as closeAllModals,C as closeModal,X as createBackdrop,Q as createDock,J as createModal,T as getConfig,f as getDockOrder,y as getModalState,k as getModalsStore,Y as init,A as isModalOpen,M as isModalRegistered,v as minimizeModal,H as openChildModal,I as openModal,z as reorderDock,N as restoreAllMinimizedModals,w as restoreModal,O as setConfig,L as toggleModalTransparency};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "epic-modals",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A stunning modal library with macOS-style animations, drag, resize, and dock. Supports Svelte 5, React, and vanilla JS.",
   "keywords": [
     "modal",
@@ -17,22 +17,11 @@
   "author": "Damian Lesiuk",
   "license": "MIT",
   "homepage": "https://epicmodals.eu",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Lesiuk/epic-modals.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Lesiuk/epic-modals/issues"
-  },
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
     "./svelte": {
       "types": "./dist/svelte.d.ts",
       "svelte": "./dist/svelte.js",
@@ -46,9 +35,11 @@
       "types": "./dist/vanilla.d.ts",
       "default": "./dist/vanilla.js"
     },
-    "./styles": "./dist/styles/index.css",
-    "./styles/themes/light": "./dist/styles/themes/light.css",
-    "./styles/themes/dark": "./dist/styles/themes/dark.css"
+    "./styles": "./dist/styles/basic.css",
+    "./styles/dock": "./dist/styles/dock.css",
+    "./styles/wizard": "./dist/styles/wizard.css",
+    "./styles/all": "./dist/styles/all.css",
+    "./styles/showcase": "./dist/styles/showcase.css"
   },
   "files": [
     "dist/**/*.js",
@@ -61,8 +52,8 @@
   "scripts": {
     "dev": "vite dev",
     "dev:fixtures": "vite --config e2e/fixtures/vite.config.ts",
-    "build": "vite build && BUILD_TYPE=standalone vite build && node scripts/build-css.js",
-    "build:dev": "vite build --mode development && BUILD_TYPE=standalone vite build --mode development && node scripts/build-css.js",
+    "build": "BUILD_PHASE=core vite build && BUILD_PHASE=adapters vite build && node scripts/build-css.js",
+    "build:dev": "BUILD_PHASE=core vite build --mode development && BUILD_PHASE=adapters vite build --mode development && node scripts/build-css.js",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint src --ext .ts,.tsx,.svelte",
     "test": "vitest run",

package/dist/core/animation/controller.d.ts

@@ -1,58 +0,0 @@
-import { Position, Dimensions, AnimationTransform } from '../types';
-import { AnimationType } from './timing';
-export interface AnimationState {
-    type: AnimationType;
-    isAnimating: boolean;
-    transform: AnimationTransform | null;
-}
-export interface AnimationEvents {
-    change: AnimationState;
-    animationStart: {
-        type: AnimationType;
-    };
-    animationEnd: {
-        type: AnimationType;
-    };
-}
-export interface AnimationControllerOptions {
-    
-    getId: () => string;
-    
-    getElement: () => HTMLElement | null;
-    
-    getPosition: () => Position;
-    
-    setPosition: (pos: Position) => void;
-    
-    getHasBeenDragged: () => boolean;
-    
-    setHasBeenDragged: (value: boolean) => void;
-    
-    getHasBeenResized: () => boolean;
-    
-    getSize: () => Dimensions;
-    
-    areAnimationsEnabled?: () => boolean;
-    
-    onMinimizeComplete?: (position: Position, hasBeenDragged: boolean, size: Dimensions) => void;
-    
-    onOpenStart?: () => void;
-}
-export interface AnimationController {
-    getState(): AnimationState;
-    isAnimating(): boolean;
-    getAnimationType(): AnimationType;
-    getTransform(): AnimationTransform | null;
-    getPendingOpenSource(): Position | null;
-    setPendingOpenSource(source: Position | null): void;
-    startMinimize(customTarget?: Position, onComplete?: () => void): boolean;
-    startRestore(storePosition: Position | undefined, modalSize: Dimensions | undefined): void;
-    startOpen(): boolean;
-    startClose(onComplete: () => void): boolean;
-    forceClearMinimize(): void;
-    destroy(): void;
-    subscribe(callback: (state: AnimationState) => void): () => void;
-}
-
-export declare function createAnimationController(options: AnimationControllerOptions): AnimationController;
-//# sourceMappingURL=controller.d.ts.map

package/dist/core/animation/flip.d.ts

@@ -1,8 +0,0 @@
-import { Position } from '../types';
-
-export declare function flipAnimate(element: HTMLElement, oldPosition: Position, newPosition: Position, options?: {
-    duration?: number;
-    easing?: string;
-    onComplete?: () => void;
-}): () => void;
-//# sourceMappingURL=flip.d.ts.map

package/dist/core/animation/genie.d.ts

@@ -1,14 +0,0 @@
-import { Position, Dimensions, AnimationTransform } from '../types';
-
-export declare function calculateMinimizeTransform(modalPosition: Position, modalSize: Dimensions, targetPosition: Position): AnimationTransform;
-
-export declare function calculateRestoreTransform(modalPosition: Position, modalSize: Dimensions, sourcePosition: Position): AnimationTransform;
-
-export declare function calculateOpenTransform(modalPosition: Position, modalSize: Dimensions, sourcePosition: Position): AnimationTransform;
-
-export declare function transformToCSSVars(transform: AnimationTransform): Record<string, string>;
-
-export declare function getDefaultDockTarget(): Position;
-
-export declare function getDockItemPosition(modalId: string, fallback?: Position): Position;
-//# sourceMappingURL=genie.d.ts.map

package/dist/core/animation/index.d.ts

@@ -1,6 +0,0 @@
-
-export { DURATIONS, EASINGS, getDuration, getEasing, type AnimationType } from './timing';
-export { calculateMinimizeTransform, calculateRestoreTransform, calculateOpenTransform, transformToCSSVars, getDefaultDockTarget, getDockItemPosition, } from './genie';
-export { createAnimationController, type AnimationController, type AnimationState, type AnimationEvents, type AnimationControllerOptions, } from './controller';
-export { flipAnimate } from './flip';
-//# sourceMappingURL=index.d.ts.map

package/dist/core/animation/timing.d.ts

@@ -1,34 +0,0 @@
-
-
-export declare const DURATIONS: {
-    readonly minimize: 500;
-    readonly restore: 400;
-    readonly open: 400;
-    readonly close: 250;
-    readonly attention: 300;
-    readonly parentMove: 300;
-    
-    readonly parentRetargetInterval: 100;
-    readonly centerAfterResize: 200;
-    readonly glowStabilize: 1000;
-    readonly overlayFade: 200;
-};
-
-export declare const TIMEOUT_SAFETY_MARGIN = 100;
-
-export declare const EASINGS: {
-    
-    readonly easeOut: "ease-out";
-    
-    readonly easeOutCubic: "cubic-bezier(0.25, 0.1, 0.25, 1)";
-    
-    readonly linear: "linear";
-    
-    readonly easeInOut: "ease-in-out";
-};
-export type AnimationType = 'open' | 'close' | 'minimize' | 'restore' | 'attention' | 'none';
-
-export declare function getDuration(type: AnimationType): number;
-
-export declare function getEasing(type: AnimationType): string;
-//# sourceMappingURL=timing.d.ts.map

package/dist/core/behaviors/drag.d.ts

@@ -1,34 +0,0 @@
-import { Position, Dimensions } from '../types';
-export interface DragState {
-    isDragging: boolean;
-    position: Position;
-    hasBeenDragged: boolean;
-}
-export interface DragEvents {
-    change: DragState;
-    dragStart: Position;
-    dragMove: Position;
-    dragEnd: Position;
-}
-export interface DragBehaviorOptions {
-    initialPosition?: Position;
-    constrain?: boolean;
-}
-export interface DragBehavior {
-    getState(): DragState;
-    getPosition(): Position;
-    isDragging(): boolean;
-    hasBeenDragged(): boolean;
-    setPosition(position: Position): void;
-    setHasBeenDragged(value: boolean): void;
-    reset(): void;
-    constrainToViewport(modalSize: Dimensions): void;
-    onPointerDown(e: PointerEvent, element: HTMLElement): void;
-    onPointerMove(e: PointerEvent, modalSize: Dimensions): void;
-    onPointerUp(e: PointerEvent, element: HTMLElement): void;
-    subscribe(callback: (state: DragState) => void): () => void;
-    destroy(): void;
-}
-
-export declare function createDragBehavior(options?: DragBehaviorOptions): DragBehavior;
-//# sourceMappingURL=drag.d.ts.map

package/dist/core/behaviors/focusTrap.d.ts

@@ -1,23 +0,0 @@
-
-
-export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
-
-export declare function trapFocus(event: KeyboardEvent, container: HTMLElement): void;
-
-export declare function focusFirstElement(container: HTMLElement): boolean;
-
-export declare function focusLastElement(container: HTMLElement): boolean;
-
-export declare function containsFocus(container: HTMLElement): boolean;
-
-export declare function createFocusTrap(container: HTMLElement): {
-    
-    activate(): void;
-    
-    deactivate(): void;
-    
-    handleKeyDown(event: KeyboardEvent): void;
-    
-    containsFocus(): boolean;
-};
-//# sourceMappingURL=focusTrap.d.ts.map

package/dist/core/behaviors/index.d.ts

@@ -1,6 +0,0 @@
-
-export { createDragBehavior, type DragBehavior, type DragState, type DragEvents, type DragBehaviorOptions } from './drag';
-export { createResizeBehavior, type ResizeBehavior, type ResizeState, type ResizeEvents, type ResizeBehaviorOptions, type ResizeDirection } from './resize';
-export { trapFocus, focusFirstElement, focusLastElement, getFocusableElements, containsFocus, createFocusTrap } from './focusTrap';
-export { calculateOffsetFromParent, calculateChildPosition, calculateParentPosition, calculateCenteredChildPosition, getModalBounds, findParentModalElement, findChildModalElement, shouldChildBeVisible, getDescendantIds, getAncestorIds, findRootAncestor, } from './parentChild';
-//# sourceMappingURL=index.d.ts.map

package/dist/core/behaviors/parentChild.d.ts

@@ -1,27 +0,0 @@
-import { Position, Dimensions } from '../types';
-
-export declare function calculateOffsetFromParent(childPosition: Position, parentPosition: Position): Position;
-
-export declare function calculateChildPosition(parentPosition: Position, offset: Position): Position;
-
-export declare function calculateParentPosition(childPosition: Position, offset: Position): Position;
-
-export declare function calculateCenteredChildPosition(parentPosition: Position, parentSize: Dimensions, childSize: Dimensions): Position;
-
-export declare function getModalBounds(element: HTMLElement): {
-    position: Position;
-    size: Dimensions;
-};
-
-export declare function findParentModalElement(parentId: string): HTMLElement | null;
-
-export declare function findChildModalElement(childId: string): HTMLElement | null;
-
-export declare function shouldChildBeVisible(parentIsOpen: boolean, parentIsMinimized: boolean, parentIsHiddenWithParent: boolean): boolean;
-
-export declare function getDescendantIds(modalId: string, getChildId: (id: string) => string | undefined): string[];
-
-export declare function getAncestorIds(modalId: string, getParentId: (id: string) => string | undefined): string[];
-
-export declare function findRootAncestor(modalId: string, getParentId: (id: string) => string | undefined): string;
-//# sourceMappingURL=parentChild.d.ts.map

package/dist/core/behaviors/resize.d.ts

@@ -1,49 +0,0 @@
-import { Position, Dimensions } from '../types';
-export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | '';
-export interface ResizeState {
-    isResizing: boolean;
-    direction: ResizeDirection;
-    size: Dimensions;
-    hasBeenResized: boolean;
-}
-export interface ResizeEvents {
-    change: ResizeState;
-    resizeStart: {
-        direction: ResizeDirection;
-    };
-    resizeMove: {
-        size: Dimensions;
-        position: Position;
-    };
-    resizeEnd: {
-        size: Dimensions;
-        position: Position;
-    };
-}
-export interface ResizeBehaviorOptions {
-    minWidth?: number;
-    minHeight?: number;
-    getPosition: () => Position;
-    setPosition: (pos: Position) => void;
-    getHasBeenDragged: () => boolean;
-    setHasBeenDragged: (value: boolean) => void;
-    getElement: () => HTMLElement | null;
-    getSymmetricResize?: () => boolean;
-    onResizeEnd?: (position: Position, size: Dimensions) => void;
-}
-export interface ResizeBehavior {
-    getState(): ResizeState;
-    getSize(): Dimensions;
-    isResizing(): boolean;
-    hasBeenResized(): boolean;
-    justFinishedResizing(): boolean;
-    setSize(size: Dimensions): void;
-    reset(): void;
-    constrainToViewport(): void;
-    startResize(e: PointerEvent, direction: ResizeDirection): void;
-    subscribe(callback: (state: ResizeState) => void): () => void;
-    destroy(): void;
-}
-
-export declare function createResizeBehavior(options: ResizeBehaviorOptions): ResizeBehavior;
-//# sourceMappingURL=resize.d.ts.map

package/dist/core/config/defaults.d.ts

@@ -1,90 +0,0 @@
-import { DockPosition, DockLabelMode, ModalFeatures, AppearanceConfig, DeepPartial, BackdropConfig } from '../types';
-export type { ModalFeatures, AppearanceConfig, BackdropConfig } from '../types';
-export type { DeepPartial } from '../types';
-
-export declare function normalizeBackdropConfig(backdrop: boolean | BackdropConfig): BackdropConfig;
-export interface DockConfig {
-    
-    position: DockPosition;
-    
-    labelMode: DockLabelMode;
-    
-    enableReorder: boolean;
-    
-    enableFreeDrag: boolean;
-}
-export interface AnimationDurations {
-    
-    open: number;
-    
-    close: number;
-    
-    minimize: number;
-    
-    restore: number;
-    
-    easing: string;
-}
-export interface ZIndexConfig {
-    
-    base: number;
-    
-    dock: number;
-    
-    toast: number;
-}
-export interface ParentChildConfig {
-    
-    movementMode: 'realtime' | 'animated';
-    
-    animationDuration: number;
-}
-export interface PositioningConfig {
-    
-    strategy: 'centered' | 'smart';
-    
-    modalGap: number;
-    
-    avoidElements: string[];
-}
-export interface ModalLibraryConfig {
-    features: ModalFeatures;
-    dock: DockConfig;
-    animations: AnimationDurations;
-    appearance: AppearanceConfig;
-    zIndex: ZIndexConfig;
-    parentChild: ParentChildConfig;
-    positioning: PositioningConfig;
-    
-    portalTarget: string | HTMLElement;
-}
-export type PartialModalLibraryConfig = DeepPartial<ModalLibraryConfig>;
-export declare const defaultConfig: ModalLibraryConfig;
-
-export declare function subscribeToConfig(callback: () => void): () => void;
-
-export declare function getConfigVersion(): number;
-
-export declare function getConfig(): ModalLibraryConfig;
-
-export declare function setConfig(config: PartialModalLibraryConfig): void;
-
-export declare function resetConfig(): void;
-
-export declare function mergeConfig(base: ModalLibraryConfig, override: PartialModalLibraryConfig): ModalLibraryConfig;
-
-export declare function isFeatureEnabled(feature: keyof ModalFeatures): boolean;
-
-export interface ModalConfigHelper {
-    isFeatureEnabled: (feature: keyof ModalFeatures) => boolean;
-    getAppearance: <K extends keyof AppearanceConfig>(key: K) => AppearanceConfig[K];
-    getPositioning: <K extends keyof PositioningConfig>(key: K) => PositioningConfig[K];
-    getEffectiveConfig: () => ModalLibraryConfig;
-}
-
-export declare function createConfigHelper(modalConfig?: DeepPartial<{
-    features?: Partial<ModalFeatures>;
-    appearance?: Partial<AppearanceConfig>;
-    positioning?: Partial<PositioningConfig>;
-}>, providerConfig?: PartialModalLibraryConfig): ModalConfigHelper;
-//# sourceMappingURL=defaults.d.ts.map

package/dist/core/config/index.d.ts

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