epic-modals 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +93 -0
- package/README.md +287 -0
- package/dist/core/config.svelte.d.ts +85 -0
- package/dist/core/index.d.ts +6 -0
- package/dist/core/stacking.svelte.d.ts +19 -0
- package/dist/core/state.svelte.d.ts +321 -0
- package/dist/core/types.d.ts +98 -0
- package/dist/core/viewport.d.ts +92 -0
- package/dist/core/viewport.test.d.ts +2 -0
- package/dist/epic-modals.css +9 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/react/Dock.d.ts +13 -0
- package/dist/react/Modal.d.ts +11 -0
- package/dist/react/ModalProvider.d.ts +11 -0
- package/dist/react/context.d.ts +4 -0
- package/dist/react/index.d.ts +15 -0
- package/dist/react/svelte-bridge.d.ts +18 -0
- package/dist/react/useModal.d.ts +27 -0
- package/dist/react/useModalZIndex.d.ts +35 -0
- package/dist/react.d.ts +11 -0
- package/dist/react.js +1 -0
- package/dist/styles/animations.css +1 -0
- package/dist/styles/dock.css +1 -0
- package/dist/styles/index.css +1 -0
- package/dist/styles/modal.css +1 -0
- package/dist/styles/themes/dark.css +1 -0
- package/dist/styles/themes/light.css +1 -0
- package/dist/styles/variables.css +1 -0
- package/dist/svelte/context.d.ts +8 -0
- package/dist/svelte/hooks/index.d.ts +13 -0
- package/dist/svelte/hooks/useFocusTrap.svelte.d.ts +20 -0
- package/dist/svelte/hooks/useModal.svelte.d.ts +41 -0
- package/dist/svelte/hooks/useModalAnimation.svelte.d.ts +16 -0
- package/dist/svelte/hooks/useModalDrag.svelte.d.ts +16 -0
- package/dist/svelte/hooks/useModalResize.svelte.d.ts +18 -0
- package/dist/svelte/hooks/useModalZIndex.svelte.d.ts +30 -0
- package/dist/svelte/hooks/usePortal.svelte.d.ts +13 -0
- package/dist/svelte/hooks/useWindowEvent.svelte.d.ts +12 -0
- package/dist/svelte/index.d.ts +14 -0
- package/dist/svelte.d.ts +10 -0
- package/dist/svelte.js +1 -0
- package/dist/vanilla/index.d.ts +51 -0
- package/dist/vanilla.d.ts +10 -0
- package/dist/vanilla.js +1 -0
- package/package.json +89 -0
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ModalId } from '../core/types';
|
|
2
|
+
/**
|
|
3
|
+
* React hook for controlling a specific modal
|
|
4
|
+
*/
|
|
5
|
+
export declare function useModal(id: ModalId): {
|
|
6
|
+
open: (sourceElement: HTMLElement) => void;
|
|
7
|
+
close: () => void;
|
|
8
|
+
minimize: () => void;
|
|
9
|
+
restore: () => void;
|
|
10
|
+
openChild: (childId: ModalId, sourceElement?: HTMLElement) => void;
|
|
11
|
+
shake: () => void;
|
|
12
|
+
bringToFront: () => void;
|
|
13
|
+
isOpen: boolean;
|
|
14
|
+
isMinimized: boolean;
|
|
15
|
+
isRegistered: boolean;
|
|
16
|
+
};
|
|
17
|
+
interface ModalsSnapshot {
|
|
18
|
+
modals: Map<ModalId, unknown>;
|
|
19
|
+
minimizedCount: number;
|
|
20
|
+
openCount: number;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* React hook for accessing all modals state
|
|
24
|
+
*/
|
|
25
|
+
export declare function useModals(): ModalsSnapshot;
|
|
26
|
+
export default useModal;
|
|
27
|
+
//# sourceMappingURL=useModal.d.ts.map
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ModalId } from '../core/types';
|
|
2
|
+
export interface UseModalZIndexReturn {
|
|
3
|
+
/** Z-index for floating elements (same as modal, appears on top due to DOM order) */
|
|
4
|
+
zIndex: number;
|
|
5
|
+
/** Portal target element or selector */
|
|
6
|
+
portalTarget: string | HTMLElement;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* React hook for getting z-index and portal target for floating elements inside a modal
|
|
10
|
+
* @param modalId - Optional modal ID. If not provided, uses context from parent Modal component.
|
|
11
|
+
* @returns Object with zIndex and portalTarget for positioning
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* import { useModalZIndex } from '@modals/react';
|
|
16
|
+
* import { createPortal } from 'react-dom';
|
|
17
|
+
*
|
|
18
|
+
* function MyDropdown() {
|
|
19
|
+
* // Automatically uses parent modal's ID from context
|
|
20
|
+
* const { zIndex, portalTarget } = useModalZIndex();
|
|
21
|
+
* const portalEl = typeof portalTarget === 'string'
|
|
22
|
+
* ? document.querySelector(portalTarget)
|
|
23
|
+
* : portalTarget;
|
|
24
|
+
*
|
|
25
|
+
* return portalEl && createPortal(
|
|
26
|
+
* <div className="dropdown" style={{ zIndex }}>
|
|
27
|
+
* Dropdown content
|
|
28
|
+
* </div>,
|
|
29
|
+
* portalEl
|
|
30
|
+
* );
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function useModalZIndex(modalId?: ModalId): UseModalZIndexReturn;
|
|
35
|
+
//# sourceMappingURL=useModalZIndex.d.ts.map
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { Modal } from './react/Modal';
|
|
2
|
+
export type { ModalProps } from './react/Modal';
|
|
3
|
+
export { ModalProvider } from './react/ModalProvider';
|
|
4
|
+
export type { ModalProviderProps } from './react/ModalProvider';
|
|
5
|
+
export { Dock } from './react/Dock';
|
|
6
|
+
export type { DockProps } from './react/Dock';
|
|
7
|
+
export { useModal, useModals } from './react/useModal';
|
|
8
|
+
export { openModal, closeModal, minimizeModal, restoreModal, bringToFront, isModalOpen, isModalRegistered, openChildModal, closeAllModals, isTopModal, reorderDock, toggleModalTransparency, } from './core/state.svelte';
|
|
9
|
+
export { getConfig, setConfig } from './core/config.svelte';
|
|
10
|
+
export type { ModalState, Position, Dimensions, } from './core/types';
|
|
11
|
+
//# sourceMappingURL=react.d.ts.map
|
package/dist/react.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{createContext as t,useRef as i,useEffect as n,useCallback as o,useSyncExternalStore as r}from"react";import{onMount as d,getContext as s,setContext as a,tick as l,onDestroy as c,mount as g,unmount as u}from"svelte";import"svelte/internal/disclose-version";import*as h from"svelte/internal/client";import{scale as p,fly as f}from"svelte/transition";import{cubicOut as m,backOut as v}from"svelte/easing";const w={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 y={...w},x=h.state(0);function z(){return h.get(x)}function I(){return y}function b(e){const t=y;var i,n;y={features:{...(i=w).features,...(n=e).features},dock:{...i.dock,...n.dock},animations:{...i.animations,...n.animations},appearance:{...i.appearance,...n.appearance},zIndex:{...i.zIndex,...n.zIndex},parentChild:{...i.parentChild,...n.parentChild},positioning:{...i.positioning,...n.positioning},portalTarget:n.portalTarget??i.portalTarget},h.update(x),t.features.dock&&!y.features.dock&&(Array.from(E.values()).filter(e=>e.isMinimized).map(e=>e.id).forEach(e=>{const t=E.get(e);if(t){E.set(e,{...t,isMinimized:!1,isOpen:!0}),h.set(L,[...h.get(L),e],!0),oe(e);const i=t.lastChildId||t.childId;i&&te(i)}}),h.set(K,[],!0),T())}let M=h.state(h.proxy(400));const _=8;function k(e,t,i,n,o={}){const{margin:r=_,allowPartialVisibility:d=!1}=o,s="undefined"!=typeof window?window.innerWidth:1920,a="undefined"!=typeof window?window.innerHeight:1080;let l,c,g,u;return d&&i>s-2*r?(l=40-i,c=s-40):(l=r,c=Math.max(r,s-i-r)),d&&n>a-2*r?(g=40-n,u=a-40):(g=r,u=Math.max(r,a-n-r)),{x:Math.max(l,Math.min(c,e)),y:Math.max(g,Math.min(u,t))}}function C(e,t,i,n,o={}){const{margin:r=_}=o,d=("undefined"!=typeof window?window.innerWidth:1920)-2*r,s=("undefined"!=typeof window?window.innerHeight:1080)-2*r,a=Math.min(i,d),l=Math.min(n,s),c=k(e,t,a,l,o);return{x:c.x,y:c.y,width:a,height:l}}function P(e,t){return Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x))*Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y))}function D(e,t,i,n,o,r){const d={x:e-r,y:t-r,width:i+2*r,height:n+2*r};let s=0;for(const e of o)s+=P(d,e);return s}function B(e,t,i,n,o,r,d){const s=(o-i)/2,a=(r-n)/2,l=s-d,c=a-d,g=Math.abs(e-s)/(l||1),u=Math.abs(t-a)/(c||1),h=Math.sqrt(g*g+u*u)/Math.SQRT2,p=50,f=e-d,m=o-i-d-e,v=t-d,w=r-n-d-t;let y=0;return f<p&&(y+=.3*(1-f/p)),m<p&&(y+=.3*(1-m/p)),v<p&&(y+=.2*(1-v/p)),w<p&&(y+=.2*(1-w/p)),Math.min(1,h+y)}let E=h.proxy(new Map),R=h.state(0);const O=new Set;function T(){h.update(R),queueMicrotask(()=>{O.forEach(e=>e())})}function H(e){return O.add(e),()=>O.delete(e)}let S=h.state(h.proxy([])),W=h.state(h.proxy([])),F=h.state(h.proxy([])),$=h.state(h.proxy([])),L=h.state(h.proxy([])),X=h.state(h.proxy([])),A=h.state(h.proxy([])),Y=h.state(h.proxy([])),q=h.state(null),j=h.proxy(new Map),N=h.state(null),G=h.proxy(new Map),U=h.proxy(new Set),V=h.proxy(new Set),K=h.state(h.proxy([]));function Q(e){const t=E.get(e.id),i=(null==t?void 0:t.zIndex)??function(){const e=h.get(M);return h.set(M,h.get(M)+2),e}();t?E.set(e.id,{...t,title:e.title,icon:e.icon,glow:e.glow,zIndex:i}):E.set(e.id,{...e,zIndex:i,isAnimating:!1}),T(),e.isMinimized&&!h.get(K).includes(e.id)&&h.get(K).push(e.id)}function J(e){const t=E.get(e);if(t){if(h.set(K,h.get(K).filter(t=>t!==e),!0),t.childId){const e=E.get(t.childId);e&&E.set(t.childId,{...e,parentId:void 0})}if(t.parentId){const e=E.get(t.parentId);e&&E.set(t.parentId,{...e,childId:void 0,lastChildId:t.id})}E.delete(e),T(),V.delete(e),U.delete(e)}}function Z(e){const t=E.get(e);if(!t||t.isMinimized)return;if(ke(e),t.parentId){const e=E.get(t.parentId);if(e&&!e.isMinimized)return void Z(t.parentId)}h.set(S,[...h.get(S),e],!0),t.position&&t.size;const i=t.childId;E.set(e,{...t,isMinimized:!0,lastChildId:i}),T(),h.get(K).includes(e)||h.get(K).push(e),t.childId&&function(e){const t=E.get(e);if(!(null==t?void 0:t.childId))return;const i=E.get(t.childId);i&&(E.set(t.childId,{...i,isHiddenWithParent:!0}),T())}(e)}function ee(e){const t=E.get(e);if(!t||!t.isMinimized)return;E.set(e,{...t,isMinimized:!1,isOpen:!0}),T(),h.set(L,[...h.get(L),e],!0),oe(e);const i=t.lastChildId||t.childId;i&&te(i)}function te(e){const t=E.get(e);t&&t.isHiddenWithParent&&(E.set(e,{...t,isHiddenWithParent:!1}),T(),h.set(X,[...h.get(X),e],!0))}function ie(e,t,i){const n=E.get(e);if(!n)return;let o=t;if((null==i?void 0:i.constrain)&&n.size&&(o=k(t.x,t.y,n.size.width,n.size.height)),E.set(e,{...n,position:o,size:(null==i?void 0:i.size)??n.size,hasBeenDragged:n.hasBeenDragged||(null==i?void 0:i.drag)||!1}),n.childId){let t=e,i=o;for(;;){const e=E.get(t);if(!(null==e?void 0:e.childId))break;const n=E.get(e.childId);if(!(null==n?void 0:n.offsetFromParent))break;const o={x:i.x+n.offsetFromParent.x,y:i.y+n.offsetFromParent.y};E.set(e.childId,{...n,position:o,hasBeenDragged:!0}),t=e.childId,i=o}}if(n.parentId&&n.offsetFromParent){const t=I();let i=e,r=n;for(;r.parentId&&r.offsetFromParent;){const n=E.get(r.parentId);if(!n)break;const d=i===e?o:E.get(i).position,s={x:d.x-r.offsetFromParent.x,y:d.y-r.offsetFromParent.y};"animated"===t.parentChild.movementMode?G.set(r.parentId,s):E.set(r.parentId,{...n,position:s,hasBeenDragged:!0}),i=r.parentId,r=n}}T()}function ne(e,t){const i=E.get(e);i&&(E.set(e,{...i,...t}),T())}function oe(e){var t;const i=E.get(e);if(!i)return;const n=Math.max(...Array.from(E.values()).map(e=>e.zIndex),0);if(i.parentId){const o=E.get(i.parentId);o&&o.zIndex<n&&E.set(i.parentId,{...o,zIndex:n+2});const r=(null==(t=E.get(i.parentId))?void 0:t.zIndex)??n+2;return i.zIndex<=r&&E.set(e,{...i,zIndex:r+2}),void T()}if(i.zIndex<n&&(E.set(e,{...i,zIndex:n+2}),T()),i.childId){const t=E.get(i.childId),n=E.get(e);t&&n&&t.zIndex<=n.zIndex&&(E.set(i.childId,{...t,zIndex:n.zIndex+2}),T())}}function re(e){const t=E.get(e);if(!t)return!1;const i=Math.max(...Array.from(E.values()).map(e=>e.zIndex),0);return t.zIndex===i&&!t.isMinimized&&!t.isHiddenWithParent}function de(e){h.set(K,e,!0)}function se(e,t,i){const n=t.getBoundingClientRect();j.set(e,{x:n.left+n.width/2,y:n.top+n.height/2});const o=I();(null==i?void 0:i.parentId)&&o.features.parentChild&&h.set(N,{parentId:i.parentId,childId:e},!0),h.get(W).includes(e)||h.set(W,[...h.get(W),e],!0),T();const r=E.get(e);if(r){if(r.isOpen&&!r.isMinimized&&!r.isHiddenWithParent)return h.set(W,h.get(W).filter(t=>t!==e),!0),xe(e),void oe(e);if(r.isMinimized)return h.set(W,h.get(W).filter(t=>t!==e),!0),void ee(e);E.set(e,{...r,isOpen:!0}),oe(e)}}function ae(e,t=!1){const i=E.get(e);i&&(ke(e),t?h.set($,[...h.get($),e],!0):h.set(F,[...h.get(F),e],!0),T(),i.childId&&ae(i.childId,t))}function le(){Array.from(E.keys()).forEach(e=>ae(e,!0))}function ce(e,t,i){const n=I();if(i&&!j.has(e.id)){const t=i.getBoundingClientRect();j.set(e.id,{x:t.left+t.width/2,y:t.top+t.height/2})}const o={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(!n.features.parentChild){Q(o);const t=E.get(e.id);return t&&E.set(e.id,{...t,isOpen:!0}),h.set(W,[...h.get(W),e.id],!0),T(),void oe(e.id)}const r=E.get(t);if(!r)return;r.childId&&ae(r.childId,!0),Q({...o,parentId:t});const d=E.get(e.id);d&&E.set(e.id,{...d,isOpen:!0,parentId:t}),h.set(W,[...h.get(W),e.id],!0),T(),oe(e.id),h.set(N,{parentId:t,childId:e.id},!0)}function ge(e){return h.get(S).includes(e)}function ue(e){return E.get(e)}function he(){return h.get(R)}function pe(e){return h.get(W).includes(e)}function fe(e){return h.get(F).includes(e)}function me(e){return h.get($).includes(e)}function ve(e){return!!h.get($).includes(e)&&(h.set($,h.get($).filter(t=>t!==e),!0),!0)}function we(e){return h.get(L).includes(e)}function ye(e){return h.get(X).includes(e)}function xe(e){E.get(e)&&(h.get(A).includes(e)||h.get(Y).includes(e)||(h.set(A,[...h.get(A),e],!0),T()))}function ze(e){const t=E.get(e);return void 0!==t&&t.isOpen&&!t.isMinimized&&!t.isHiddenWithParent}function Ie(e){return E.has(e)}function be(){return{get modals(){return E},get pendingMinimize(){return h.get(S)},get pendingOpen(){return h.get(W)},get pendingClose(){return h.get(F)},get pendingRestore(){return h.get(L)},get dockOrder(){return h.get(K)}}}function Me(e){V.has(e)?V.delete(e):V.add(e);const t=E.get(e);t&&(E.set(e,{...t,isTransparent:V.has(e)}),T())}function _e(e){V.delete(e);const t=E.get(e);t&&(E.set(e,{...t,isTransparent:!1}),T())}function ke(e){G.delete(e)}const Ce=Symbol("modal-render-icon"),Pe=Symbol("modal-id");function De(){return I().features.animations}const Be=["button:not([disabled])","[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function Ee(e){return Array.from(e.querySelectorAll(Be)).filter(e=>null!==e.offsetParent||"A"===e.tagName)}function Re(e,t){if("Tab"!==e.key)return;const i=Ee(t);if(0===i.length)return void e.preventDefault();const n=i[0],o=i[i.length-1],r=document.activeElement;e.shiftKey?r===n&&(o.focus(),e.preventDefault()):r===o&&(n.focus(),e.preventDefault())}function Oe(e){const t=Ee(e);return t.length>0&&(t[0].focus(),!0)}const Te="modal-portal";var He=h.from_html('<div style="display: contents;"><!></div>');function Se(e,t){h.push(t,!0);let i=h.prop(t,"target",3,"body"),n=null,o=null;const{mount:r}={mount:function(e,t=null){const i=function(e){if("undefined"==typeof window)return null;if(e instanceof HTMLElement)return e;if("string"==typeof e){const t=document.querySelector(e);if(t)return t;if(e.startsWith("#")){const t=e.slice(1),i=document.createElement("div");return i.id=t,document.body.appendChild(i),i}}let t=document.getElementById(Te);return t||(t=document.createElement("div"),t.id=Te,document.body.appendChild(t)),t}(t);return i?(i.appendChild(e),()=>{e.parentNode===i&&i.removeChild(e),i.id!==Te&&0===i.children.length&&i.parentNode&&i.parentNode.removeChild(i)}):()=>{}}};d(()=>(n&&(o=r(n,i())),()=>{null==o||o()}));var s=He(),a=h.child(s);h.snippet(a,()=>t.children),h.reset(s),h.bind_this(s,e=>n=e,()=>n),h.append(e,s),h.pop()}var We=h.from_html('<button type="button" aria-label="Minimize"></button>'),Fe=h.from_html('<button type="button" class="modal-header-light modal-header-light-style" aria-label="Toggle style"></button>'),$e=h.from_html('<div class="modal-header-icon"><!></div>'),Le=h.from_html('<div class="modal-header-icon"><!></div>'),Xe=h.from_html('<h2 class="modal-header-title"> </h2>'),Ae=h.from_html('<h2 class="modal-header-title"> </h2>'),Ye=h.from_html('<div class="modal-header-traffic-lights"><button type="button" class="modal-header-light modal-header-light-close" aria-label="Close"></button> <!> <!></div> <div class="modal-header-mac-center"><!> <div class="modal-header-title-group"><!></div></div> <div class="modal-header-mac-spacer"></div>',1),qe=h.from_html('<div class="modal-header-icon"><!></div>'),je=h.from_html('<div class="modal-header-icon"><!></div>'),Ne=h.from_html('<h2 class="modal-header-title"> </h2>'),Ge=h.from_html('<h2 class="modal-header-title"> </h2>'),Ue=h.from_html('<button type="button" class="modal-header-btn-windows modal-header-btn-windows-style" aria-label="Toggle style">◇</button>'),Ve=h.from_html('<button type="button" aria-label="Minimize">–</button>'),Ke=h.from_html('<div class="modal-header-title-group"><!> <!></div> <div class="modal-header-actions"><!> <!> <button type="button" class="modal-header-btn-windows modal-header-btn-windows-close" aria-label="Close">×</button></div>',1),Qe=h.from_html("<header><!></header>");h.delegate(["pointerdown","click"]);var Je=h.from_html("<div></div>"),Ze=h.from_html('<div class="modal-resize-handles"></div>');h.delegate(["pointerdown"]);var et=h.from_html('<div class="modal-footer"><!></div>'),tt=h.from_html("<div></div>"),it=h.from_html('<div role="dialog" aria-modal="true" tabindex="-1"><!> <div class="modal-body"><!></div> <!> <!> <!></div>');function nt(e,t){h.push(t,!0);let i=h.prop(t,"maxWidth",3,"600px"),n=h.prop(t,"autoOpen",3,!1),o=h.prop(t,"closeOnEscape",3,!0),r=h.state(!1);d(()=>{Q({id:t.id,title:t.title,icon:t.icon??"",isOpen:n(),isMinimized:!1,isHiddenWithParent:!1,isTransparent:!1,isRejected:!1,position:null,size:null,hasBeenDragged:!1,dockPosition:0,glow:t.glow??null,parentId:void 0,childId:void 0,offsetFromParent:void 0}),h.set(r,!0)}),c(()=>{J(t.id)});const g=h.derived(()=>{if(!h.get(r))return!1;he();const e=ue(t.id);return!!e&&(e.isOpen||e.isMinimized||pe(t.id)||fe(t.id)||ge(t.id))});var u=h.comment(),p=h.first_child(u),f=e=>{!function(e,t){h.push(t,!0);let i=h.prop(t,"maxWidth",3,"600px"),n=h.prop(t,"autoOpen",3,!1),o=h.prop(t,"closeOnEscape",3,!0),r=h.prop(t,"skipRegistration",3,!1);a(Pe,t.id);const g=I().portalTarget;function u(e){var i,n;return(null==(n=null==(i=t.config)?void 0:i.features)?void 0:n[e])??function(e){return y.features[e]}(e)}const p=h.derived(()=>(z(),u("drag"))),f=h.derived(()=>(z(),u("minimize"))),m=h.derived(()=>(z(),!u("dock"))),v=h.derived(()=>(z(),u("transparency"))),w=h.derived(()=>(z(),u("resize"))),x=h.derived(()=>{var e,i;return z(),(null==(i=null==(e=t.config)?void 0:e.appearance)?void 0:i.headerLayout)??I().appearance.headerLayout});let b=h.state(null),M=h.state(!1),_=h.state(!1),P=h.state(!1),R=h.state(!1),O=h.state(!1);const H=h.derived(()=>(he(),ue(t.id))),$=h.derived(()=>h.get(H)&&(h.get(H).isOpen||fe(t.id))&&(!h.get(H).isMinimized||ge(t.id))&&!h.get(H).isHiddenWithParent),U=h.derived(()=>{var e;return!!(null==(e=h.get(H))?void 0:e.childId)}),V=h.derived(()=>{var e;return!!(null==(e=h.get(H))?void 0:e.parentId)}),K=h.derived(()=>h.get(U)||h.get(_)),ee=h.derived(()=>!!t.glow),te=h.derived(()=>`modal-title-${t.id}`),de=h.derived(()=>{var e;return(null==(e=h.get(H))?void 0:e.zIndex)??1e3}),se=function(e={x:0,y:0}){const t=h.proxy({...e}),i=h.proxy({isDragging:!1,startX:0,startY:0,initialX:0,initialY:0,hasBeenDragged:!1});return{get position(){return t},get hasBeenDragged(){return i.hasBeenDragged},get isDragging(){return i.isDragging},onPointerDown:function(e,n){if(0===e.button){if(!i.hasBeenDragged){const e=n.getBoundingClientRect();t.x=e.left,t.y=e.top}i.isDragging=!0,i.startX=e.clientX,i.startY=e.clientY,i.initialX=t.x,i.initialY=t.y,n.setPointerCapture(e.pointerId)}},onPointerMove:function(e,n,o){if(!i.isDragging)return;const r=e.clientX-i.startX,d=e.clientY-i.startY,s=k(i.initialX+r,i.initialY+d,o.width,o.height);t.x=s.x,t.y=s.y,i.hasBeenDragged=!0},onPointerUp:function(e,t){i.isDragging&&(i.isDragging=!1,t.releasePointerCapture(e.pointerId))},setPosition:function(e){t.x=e.x,t.y=e.y},setHasBeenDragged:function(e){i.hasBeenDragged=e},reset:function(){t.x=e.x,t.y=e.y,i.hasBeenDragged=!1}}}({x:0,y:0});let le=h.state(!1);const ce=function(e,i,n){let o=h.state(!1),r=h.state(""),d=h.state(h.proxy({width:0,height:0})),s=h.state(!1),a=h.state(!1),l={x:0,y:0,width:0,height:0,posX:0,posY:0},c=null;function g(t,a){t.preventDefault(),t.stopPropagation();const g=e();if(!g)return;const f=g.getBoundingClientRect();se.hasBeenDragged||(n({x:f.left,y:f.top}),se.setHasBeenDragged(!0)),h.get(s)||(h.set(d,{width:f.width,height:f.height},!0),h.set(s,!0));const m=i();h.set(o,!0),h.set(r,a,!0),c=t.pointerId,l={x:t.clientX,y:t.clientY,width:h.get(d).width,height:h.get(d).height,posX:m.x,posY:m.y,centerX:m.x+h.get(d).width/2,centerY:m.y+h.get(d).height/2},window.addEventListener("pointermove",u),window.addEventListener("pointerup",p),window.addEventListener("pointercancel",p)}function u(e){if(e.pointerId!==c)return;const t=e.clientX-l.x,i=e.clientY-l.y,o=window.innerWidth,s=window.innerHeight;let a=l.width,g=l.height,u=l.posX,p=l.posY;if(h.get(r).includes("e")){const e=o-u;a=Math.max(280,Math.min(l.width+t,e))}if(h.get(r).includes("w")){const e=l.width-280,i=Math.min(t,e);a=l.width-i,u=l.posX+i}if(h.get(r).includes("s")){const e=s-p;g=Math.max(200,Math.min(l.height+i,e))}if(h.get(r).includes("n")){const e=l.height-200,t=Math.min(i,e);g=l.height-t,p=l.posY+t}const f=C(u,p,a,g);h.set(d,{width:f.width,height:f.height},!0),n({x:f.x,y:f.y})}function p(e){e.pointerId===c&&(h.set(o,!1),c=null,window.removeEventListener("pointermove",u),window.removeEventListener("pointerup",p),window.removeEventListener("pointercancel",p),h.set(a,!0),((e,i)=>{const n=ue(t.id);if(null==n?void 0:n.parentId){const e=ue(n.parentId),o=document.querySelector(`[data-modal-id="${n.parentId}"]`);if(e&&o){const n=e.position??{x:o.getBoundingClientRect().left,y:o.getBoundingClientRect().top},r=e.size??{width:o.offsetWidth,height:o.offsetHeight},d={x:n.x+(r.width-i.width)/2,y:n.y+(r.height-i.height)/2};h.set(le,!0),se.setPosition(d);const s={x:d.x-n.x,y:d.y-n.y};return ne(t.id,{position:d,size:i,hasBeenDragged:!0,offsetFromParent:s}),void setTimeout(()=>{h.set(le,!1)},200)}}ne(t.id,{position:e,size:i,hasBeenDragged:!0})})(i(),h.get(d)),setTimeout(()=>{h.set(a,!1)},0))}const f={startResize:g};return{get isResizing(){return h.get(o)},get resizeDirection(){return h.get(r)},get size(){return h.get(d)},get hasBeenResized(){return h.get(s)},get isActive(){return h.get(o)},get justFinishedResizing(){return h.get(a)},start:g,setHasBeenResized:()=>{},setSize:function(e){h.set(d,e,!0),h.set(s,!0)},reset:function(){h.set(s,!1),h.set(d,{width:0,height:0},!0)},constrainToViewport:function(){const t=i(),o=e();if(!o)return;const r=C(t.x,t.y,h.get(d).width||o.offsetWidth,h.get(d).height||o.offsetHeight);h.set(d,{width:r.width,height:r.height},!0),n({x:r.x,y:r.y})},handlers:f}}(()=>h.get(b),()=>se.position,e=>se.setPosition(e)),xe=function(e,i,n,o,r,d,s,a,l){let c=h.state(!1),g=h.state(!1),u=h.state(!1),p=h.state(!1),f=h.state(null),m=h.state(null),v=null,w=null;function y(){w&&(clearTimeout(w),w=null)}function x(){const e=t.id,i=document.querySelector(`.modal-dock-item[data-modal-id="${e}"]`),n=document.querySelector('[data-dock-container="true"]'),o=i||n;if(o){const e=o.getBoundingClientRect();return{x:e.left+e.width/2,y:e.top+e.height/2}}return{x:window.innerWidth/2,y:window.innerHeight-40}}return h.user_effect(()=>()=>{y(),h.set(c,!1),h.set(g,!1),h.set(u,!1),h.set(p,!1),h.set(f,null),h.set(m,null),v=null}),{get isMinimizing(){return h.get(c)},get isRestoring(){return h.get(g)},get isOpening(){return h.get(u)},get isClosing(){return h.get(p)},get animationTransform(){return h.get(f)},get pendingOpenSource(){return h.get(m)},startMinimize:function(e,t){const p=i();if(h.get(c)||!p)return;if(h.set(g,!1),h.set(u,!1),y(),!De()){const e=p.getBoundingClientRect();let i=r()?n():{x:e.left,y:e.top},c=s()?a():{width:e.width,height:e.height};return r()||(o(i),d(!0)),void(t?t():l(i,!0,c))}const m=p.getBoundingClientRect(),v=m.left+m.width/2,z=m.top+m.height/2;let I=r()?n():{x:m.left,y:m.top},b=s()?a():{width:m.width,height:m.height};r()||(o(I),d(!0));const M=e??x(),_=M.x-m.left,k=M.y-m.top,C={x:M.x-v,y:M.y-z,originX:_,originY:k};h.set(f,C,!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{h.set(c,!0)})}),w=setTimeout(()=>{t?t():l(I,!0,b)},500)},startRestore:function(e,t){if(!De()){const t=e||{x:window.innerWidth/2,y:window.innerHeight/2};return o(t),void d(!0)}const i=x(),n=e||{x:window.innerWidth/2,y:window.innerHeight/2},r=t||{width:480,height:400};o(n),d(!0);const s=n.x+r.width/2,a=n.y+r.height/2,l=i.x-n.x,c=i.y-n.y;h.set(f,{x:i.x-s,y:i.y-a,originX:l,originY:c},!0),h.set(g,!0),setTimeout(()=>{h.set(g,!1),h.set(f,null)},400)},startClose:function(e){h.get(p)||h.get(c)||(De()?(v=e,h.set(p,!0),setTimeout(()=>{h.set(p,!1),v&&(v(),v=null)},250)):e())},setPendingOpenSource:function(e){h.set(m,e,!0)},tryStartOpenAnimation:function(){const e=i();if(!h.get(m)||!e||h.get(u))return!1;if(!De())return h.set(m,null),!1;const t=h.get(m);h.set(m,null);const s=e.getBoundingClientRect(),a=r()?n():{x:s.left,y:s.top},l=s.width,c=s.height,g=a.x+l/2,p=a.y+c/2;r()||(o(a),d(!0));const v=t.x-a.x,w=t.y-a.y;return h.set(f,{x:t.x-g,y:t.y-p,originX:v,originY:w},!0),h.set(u,!0),setTimeout(()=>{h.set(u,!1),h.set(f,null)},400),!0},forceClearMinimize:function(){y(),h.set(c,!1),h.set(f,null)}}}(0,()=>h.get(b),()=>se.position,e=>se.setPosition(e),()=>se.hasBeenDragged,e=>se.setHasBeenDragged(e),()=>ce.hasBeenResized,()=>ce.size,(e,i,n)=>{ne(t.id,{position:e,size:n,hasBeenDragged:i}),Z(t.id)}),{trapFocus:ze,focusFirstElement:Ie}={trapFocus:Re,focusFirstElement:Oe},be=h.derived(()=>xe.isMinimizing||xe.isRestoring||xe.isOpening||xe.isClosing),ke=h.derived(()=>(ye(t.id)||we(t.id))&&!xe.isRestoring);let Be=h.state(!1);const Ee=h.derived(()=>xe.isRestoring||xe.isOpening||h.get(Be)),Te=h.derived(()=>h.get($)&&!se.hasBeenDragged&&!h.get(be)&&!xe.pendingOpenSource&&!h.get(ke)),He=h.derived(()=>{const e=[];return e.push(`z-index: ${h.get(de)};`),xe.animationTransform?(e.push(`left: ${se.position.x}px; top: ${se.position.y}px;`),e.push(`--genie-origin-x: ${xe.animationTransform.originX}px;`),e.push(`--genie-origin-y: ${xe.animationTransform.originY}px;`),e.push(`--genie-translate-x: ${xe.animationTransform.x}px;`),e.push(`--genie-translate-y: ${xe.animationTransform.y}px;`)):se.hasBeenDragged&&e.push(`left: ${se.position.x}px; top: ${se.position.y}px; transform: none;`),ce.hasBeenResized?e.push(`width: ${ce.size.width}px; height: ${ce.size.height}px; max-width: none; max-height: none;`):(t.preferredHeight&&e.push(`min-height: ${t.preferredHeight};`),i()&&e.push(`max-width: ${i()};`)),h.get(ee)&&t.glow&&(e.push(`--modal-glow-color: ${t.glow.color};`),e.push(`--modal-glow-intensity: ${t.glow.intensity};`)),e.join(" ")});function nt(){h.get(f)&&Z(t.id)}function ot(){var e;me(t.id)&&ve(t.id),ae(t.id),null==(e=t.onClose)||e.call(t)}function rt(){Me(t.id)}function dt(e){h.get(p)&&h.get(b)&&se.onPointerDown(e,h.get(b))}function st(e){o()&&"Escape"===e.key&&re(t.id)&&(e.stopPropagation(),ot())}function at(e){if(!h.get(b))return;const i=se.isDragging,n=ce.hasBeenResized?ce.size:{width:h.get(b).offsetWidth,height:h.get(b).offsetHeight};se.onPointerMove(e,h.get(b),n),se.isDragging&&i&&ie(t.id,se.position,{drag:!0})}function lt(e){if(!h.get(b))return;const i=se.isDragging;se.onPointerUp(e,h.get(b)),i&&!ce.justFinishedResizing&&(ie(t.id,se.position,{drag:!0}),function(e){const t=I();if("animated"!==t.parentChild.movementMode)return;const i=t.parentChild.animationDuration,n=[];let o=e;for(;;){const e=E.get(o);if(!(null==e?void 0:e.parentId))break;n.push({parentId:e.parentId,childId:o}),o=e.parentId}n.forEach(({parentId:e,childId:t},n)=>{setTimeout(()=>{const n=E.get(t),o=E.get(e);if(!(null==n?void 0:n.position)||!n.offsetFromParent||!o)return;const r={x:n.position.x-n.offsetFromParent.x,y:n.position.y-n.offsetFromParent.y};G.set(e,r),function(e){const t=G.get(e);if(!t)return;const i=E.get(e);i&&(E.set(e,{...i,isAnimatingPosition:!0,position:t}),G.delete(e),T())}(e),setTimeout(()=>function(e){const t=E.get(e);t&&(E.set(e,{...t,isAnimatingPosition:!1}),T())}(e),i)},n*i)})}(t.id))}function ct(){var e;const i=I();if("smart"!==(null==(e=i.positioning)?void 0:e.strategy))return!1;const n=ue(t.id);if(null==n?void 0:n.parentId)return!1;if((null==n?void 0:n.hasBeenDragged)||(null==n?void 0:n.position))return!1;const o=h.get(b)||document.querySelector(`[data-modal-id="${t.id}"]`);if(!o)return!1;const r=o.offsetWidth,d=o.offsetHeight;if(r<=0||d<=0)return!1;const s=i.positioning.modalGap??16,a=function(e){const t=[];for(const[i,n]of E.entries())if(i!==e&&n.isOpen&&!n.isMinimized&&!n.isHiddenWithParent)if(n.position&&n.size)t.push({x:n.position.x,y:n.position.y,width:n.size.width,height:n.size.height});else{const e=document.querySelector(`[data-modal-id="${String(i)}"]`);if(e){const i=e.getBoundingClientRect();t.push({x:i.left,y:i.top,width:i.width,height:i.height})}}return t}(t.id),l=function(e){if("undefined"==typeof document)return[];const t=[];for(const i of e)try{const e=document.querySelectorAll(i);for(const i of e){const e=i.getBoundingClientRect();e.width>0&&e.height>0&&t.push({x:e.left,y:e.top,width:e.width,height:e.height})}}catch{}return t}(i.positioning.avoidElements??[]),c=function(e,t,i,n={}){const{modalGap:o=16,gridResolution:r=10,avoidBounds:d=[],avoidMargin:s=16}=n,a=n.margin??o,l="undefined"!=typeof window?window.innerWidth:1920,c="undefined"!=typeof window?window.innerHeight:1080,g=d.map(e=>({x:e.x-s,y:e.y-s,width:e.width+2*s,height:e.height+2*s})),u={x:(l-e)/2,y:(c-t)/2};if(0===i.length&&0===g.length)return u;const h=a,p=Math.max(a,l-e-a),f=a,m=Math.max(a,c-t-a);if(p<=h||m<=f)return u;const v=D(u.x,u.y,e,t,i,o),w=D(u.x,u.y,e,t,g,0);if(0===v&&0===w)return u;const y=[],x=(p-h)/r,z=(m-f)/r;for(let n=0;n<=r;n++)for(let d=0;d<=r;d++){const r=h+n*x,s=f+d*z,u=D(r,s,e,t,i,o),p=D(r,s,e,t,g,0),m=B(r,s,e,t,l,c,a);y.push({pos:{x:r,y:s},modalOverlap:u,avoidOverlap:p,centerDist:m})}const I=y.filter(e=>0===e.avoidOverlap),b=I.length>0?I:y,M=e*t,_=Math.min(...b.map(e=>e.modalOverlap))/M;return b.sort((e,t)=>{if(0===I.length&&e.avoidOverlap!==t.avoidOverlap)return e.avoidOverlap-t.avoidOverlap;const i=e.modalOverlap/M,n=t.modalOverlap/M;if(_<.3){const o=.3,r=i<=o,d=n<=o;if(r&&d)return e.centerDist+.3*i-(t.centerDist+.3*n);if(r)return-1;if(d)return 1}return.6*i+.4*e.centerDist-(.6*n+.4*t.centerDist)}),b[0].pos}(r,d,a,{modalGap:s,avoidBounds:l});if(D(c.x,c.y,r,d,a,s)/(r*d)>.1&&a.length>0){const e=function(e){const t=[];for(const[i,n]of E.entries())if(i!==e&&n.isOpen&&!n.isMinimized&&!n.isHiddenWithParent&&!n.parentId)if(n.position&&n.size)t.push({id:String(i),x:n.position.x,y:n.position.y,width:n.size.width,height:n.size.height});else{const e=document.querySelector(`[data-modal-id="${String(i)}"]`);if(e){const n=e.getBoundingClientRect();t.push({id:String(i),x:n.left,y:n.top,width:n.width,height:n.height})}}return t}(t.id),i=function(e,t,i,n={}){const{modalGap:o=16}=n,r=n.margin??o,d="undefined"!=typeof window?window.innerWidth:1920,s="undefined"!=typeof window?window.innerHeight:1080,a=i.reduce((e,t)=>e+t.width,0)+e,l=i.length*o,c=d-2*r;if(a+l>c)return null;const g=c-a-l;i.length;const u=g/2,h=d/2,p=[...i.map(e=>({id:e.id,width:e.width,height:e.height,currentX:e.x+e.width/2,currentY:e.y,isNew:!1})),{id:"__new__",width:e,height:t,currentX:h,currentY:(s-t)/2,isNew:!0}];p.sort((e,t)=>e.currentX-t.currentX);let f=r+u;const m=new Map;let v=null;for(const e of p){const t=f;if(e.isNew)v={x:Math.round(t),y:Math.round(e.currentY)};else{const n=i.find(t=>t.id===e.id);Math.abs(t-n.x)>5&&m.set(e.id,{x:Math.round(t),y:Math.round(n.y)})}f+=e.width+o}return v?{newModalPosition:v,existingModalMoves:m}:null}(r,d,e,{modalGap:s});if(i&&i.existingModalMoves.size>0)return function(e){const t=I().parentChild.animationDuration;for(const[t,i]of e){const e=E.get(t);e&&E.set(t,{...e,position:i,isAnimatingPosition:!0,hasBeenDragged:!0})}T(),setTimeout(()=>{for(const t of e.keys()){const e=E.get(t);e&&E.set(t,{...e,isAnimatingPosition:!1})}T()},t)}(i.existingModalMoves),se.setPosition(i.newModalPosition),se.setHasBeenDragged(!0),ie(t.id,i.newModalPosition,{size:{width:r,height:d}}),!0}return se.setPosition(c),se.setHasBeenDragged(!0),ie(t.id,c,{size:{width:r,height:d}}),!0}function gt(){l().then(()=>l()).then(()=>{let e=0;const t=()=>{e+=1,ct()||e>5||requestAnimationFrame(t)};h.get(b)?t():requestAnimationFrame(t)})}d(()=>{var e;function i(){const e=ue(t.id);if(!(null==e?void 0:e.position)||!h.get(b))return;if(e.parentId)return;const i=ce.hasBeenResized?ce.size.width:h.get(b).offsetWidth,n=ce.hasBeenResized?ce.size.height:h.get(b).offsetHeight;if(i<=0||n<=0)return;const o=k(e.position.x,e.position.y,i,n);(Math.abs(o.x-e.position.x)>1||Math.abs(o.y-e.position.y)>1)&&(se.setPosition(o),ie(t.id,o))}return r()||(e=n(),Q({id:t.id,title:t.title,icon:t.icon??"",isOpen:e,isMinimized:!1,isHiddenWithParent:!1,isTransparent:!1,isRejected:!1,position:null,size:null,hasBeenDragged:!1,dockPosition:0,glow:t.glow??null,parentId:void 0,childId:void 0,offsetFromParent:void 0}),e&&oe(t.id)),n()&&(l().then(()=>{h.get(b)&&Ie(h.get(b))}),gt()),window.addEventListener("pointermove",at),window.addEventListener("pointerup",lt),window.addEventListener("resize",i),()=>{window.removeEventListener("pointermove",at),window.removeEventListener("pointerup",lt),window.removeEventListener("resize",i)}}),c(()=>{_e(t.id),r()||J(t.id)}),h.user_effect(()=>{he();const e=ue(t.id);if(e){if(h.set(M,e.isTransparent,!0),!se.isDragging&&!ce.isResizing&&e.position){const t=se.position,i=e.position;(Math.abs(t.x-i.x)>.5||Math.abs(t.y-i.y)>.5)&&(se.setPosition(i),e.hasBeenDragged&&se.setHasBeenDragged(!0))}l().then(()=>function(){var e,i;if(!ue(t.id))return;if(me(t.id))return ve(t.id),void(null==(e=t.onClose)||e.call(t));if(ge(t.id)&&!h.get(R)){if(h.set(R,!0),h.get(q),h.set(q,null),h.get(b)){const e=h.get(b).getBoundingClientRect(),i=se.hasBeenDragged?se.position:{x:e.left,y:e.top},n=ce.hasBeenResized?ce.size:{width:e.width,height:e.height};ne(t.id,{position:i,size:n,hasBeenDragged:!0})}xe.startMinimize(void 0,()=>{var e;e=t.id,h.get(S).includes(e)&&h.set(S,h.get(S).filter(t=>t!==e),!0),h.set(R,!1)})}if(we(t.id)){i=t.id,h.get(L).includes(i)&&h.set(L,h.get(L).filter(e=>e!==i),!0);const e=ue(t.id);xe.startRestore((null==e?void 0:e.position)??void 0,(null==e?void 0:e.size)??void 0),l().then(()=>{h.get(b)&&Ie(h.get(b))})}if(ye(t.id)){!function(e){h.get(X).includes(e)&&h.set(X,h.get(X).filter(t=>t!==e),!0)}(t.id);const e=ue(t.id);xe.startRestore((null==e?void 0:e.position)??void 0,(null==e?void 0:e.size)??void 0)}if(fe(t.id)&&(function(e){h.get(F).includes(e)&&h.set(F,h.get(F).filter(t=>t!==e),!0)}(t.id),xe.startClose(()=>{var e;_e(t.id),function(e){const t=E.get(e);if(t){if(t.parentId){const i=E.get(t.parentId);i&&i.childId===e&&E.set(t.parentId,{...i,childId:void 0,lastChildId:e})}E.set(e,{...t,isOpen:!1,isMinimized:!1,isHiddenWithParent:!1,isTransparent:!1,position:null,size:null,hasBeenDragged:!1,parentId:void 0,childId:void 0,offsetFromParent:void 0}),T()}}(t.id),null==(e=t.onClose)||e.call(t)})),pe(t.id)){!function(e){h.get(W).includes(e)&&h.set(W,h.get(W).filter(t=>t!==e),!0)}(t.id);const e=function(e){const t=j.get(e);return t&&j.delete(e),t??null}(t.id)||t.openSourcePosition||null;e?(xe.setPendingOpenSource(e),l().then(()=>l()).then(()=>{ct(),xe.tryStartOpenAnimation()})):gt(),l().then(()=>{h.get(b)&&Ie(h.get(b))})}(function(e){return h.get(A).includes(e)})(t.id)&&(function(e){h.get(A).includes(e)&&h.set(A,h.get(A).filter(t=>t!==e),!0)}(t.id),function(e){h.get(Y).includes(e)||h.set(Y,[...h.get(Y),e],!0)}(t.id),h.set(O,!0),setTimeout(()=>{h.set(O,!1),function(e){h.set(Y,h.get(Y).filter(t=>t!==e),!0)}(t.id)},600));const n=function(e){if(!h.get(N)||h.get(N).childId!==e)return null;const t=h.get(N);return h.set(N,null),t}(t.id);var o;n&&h.get(b)&&(o=n.parentId,l().then(()=>l()).then(()=>{let e=0;const i=()=>{e+=1;const n=function(e){var i,n;const o=ue(e);if(!o)return!1;const r=h.get(b)||document.querySelector(`[data-modal-id="${t.id}"]`),d=document.querySelector(`[data-modal-id="${e}"]`),s=null==d?void 0:d.getBoundingClientRect(),a=o.position??(s?{x:s.left,y:s.top}:null);if(!a||!r)return!1;const l=(null==(i=o.size)?void 0:i.width)??(null==d?void 0:d.offsetWidth)??(null==s?void 0:s.width)??480,c=(null==(n=o.size)?void 0:n.height)??(null==d?void 0:d.offsetHeight)??(null==s?void 0:s.height)??400,g=r.offsetWidth,u=r.offsetHeight;if(l<=0||c<=0||g<=0||u<=0)return!1;const p={x:a.x+(l-g)/2,y:a.y+(c-u)/2};return se.setPosition(p),se.setHasBeenDragged(!0),ie(t.id,p,{size:{width:g,height:u}}),o.position&&o.size||!s||ie(e,{x:s.left,y:s.top},{size:{width:l,height:c}}),function(e,t){if(!I().features.parentChild)return;const i=E.get(e),n=E.get(t);if(!i||!n)return;let o={x:40,y:40};i.position&&n.position&&(o={x:n.position.x-i.position.x,y:n.position.y-i.position.y});const r=Math.max(n.zIndex,i.zIndex+1);E.set(e,{...i,childId:t,lastChildId:t}),E.set(t,{...n,parentId:e,offsetFromParent:o,zIndex:r}),T()}(e,t.id),!0}(o);n||e>5||requestAnimationFrame(i)};h.get(b)?i():requestAnimationFrame(i)}))}())}}),h.user_effect(()=>{const e=ue(t.id);e&&e.isTransparent!==h.get(M)&&h.set(M,e.isTransparent,!0)}),h.user_effect(()=>{if(h.get($)&&h.get(b)){const e=e=>function(e){h.get(b)&&ze(e,h.get(b))}(e);return h.get(b).addEventListener("keydown",e),()=>{var t;return null==(t=h.get(b))?void 0:t.removeEventListener("keydown",e)}}}),h.user_effect(()=>{!h.get($)&&xe.isMinimizing&&xe.forceClearMinimize()}),h.user_effect(()=>{xe.isRestoring||xe.isOpening?h.set(Be,!0):h.get(Be)&&requestAnimationFrame(()=>{h.set(Be,!1)})}),h.user_effect(()=>{h.get(P)&&!h.get(U)&&(h.set(_,!0),setTimeout(()=>{h.set(_,!1)},200)),h.set(P,h.get(U),!0)});var ut=h.comment(),ht=h.first_child(ut),pt=e=>{Se(e,{get target(){return g},children:(e,i)=>{var n=it();let o;n.__keydown=st;var r=h.child(n);{let e=h.derived(()=>h.get(p)?dt:void 0);!function(e,t){h.push(t,!0);let i=h.prop(t,"isTransparent",3,!1),n=h.prop(t,"headerLayout",3,"macos"),o=h.prop(t,"minimizable",3,!0),r=h.prop(t,"minimizeDisabled",3,!1),d=h.prop(t,"transparencyEnabled",3,!0);const a=s(Ce),l=h.derived(()=>null==a?void 0:a()),c=h.derived(()=>"macos"===n());var g=Qe();let u;g.__pointerdown=function(e){var i;e.target.closest("button")||null==(i=t.onStartDrag)||i.call(t,e)};var p=h.child(g),f=e=>{var i=Ye(),n=h.first_child(i),s=h.child(n);s.__click=function(...e){var i;null==(i=t.onClose)||i.apply(this,e)};var a=h.sibling(s,2),c=e=>{var i=We();let n;i.__click=function(...e){var i;null==(i=r()?void 0:t.onMinimize)||i.apply(this,e)},h.template_effect(()=>{n=h.set_class(i,1,"modal-header-light modal-header-light-minimize",null,n,{"modal-header-light-disabled":r()}),i.disabled=r(),h.set_attribute(i,"title",r()?"Enable dock to minimize":void 0)}),h.append(e,i)};h.if(a,e=>{o()&&e(c)});var g=h.sibling(a,2),u=e=>{var i=Fe();i.__click=function(...e){var i;null==(i=t.onToggleStyle)||i.apply(this,e)},h.append(e,i)};h.if(g,e=>{d()&&e(u)}),h.reset(n);var p=h.sibling(n,2),f=h.child(p),m=e=>{var i=$e(),n=h.child(i);h.snippet(n,()=>t.customIcon),h.reset(i),h.append(e,i)},v=e=>{var i=h.comment(),n=h.first_child(i),o=e=>{var i=Le(),n=h.child(i);h.snippet(n,()=>h.get(l),()=>t.icon),h.reset(i),h.append(e,i)};h.if(n,e=>{t.icon&&h.get(l)&&e(o)},!0),h.append(e,i)};h.if(f,e=>{t.customIcon?e(m):e(v,!1)});var w=h.sibling(f,2),y=h.child(w),x=e=>{var i=Xe(),n=h.child(i,!0);h.reset(i),h.template_effect(()=>{h.set_attribute(i,"id",t.titleId),h.set_text(n,t.title)}),h.append(e,i)},z=e=>{var i=Ae(),n=h.child(i,!0);h.reset(i),h.template_effect(()=>h.set_text(n,t.title)),h.append(e,i)};h.if(y,e=>{t.titleId?e(x):e(z,!1)}),h.reset(w),h.reset(p),h.next(2),h.append(e,i)},m=e=>{var i=Ke(),n=h.first_child(i),s=h.child(n),a=e=>{var i=qe(),n=h.child(i);h.snippet(n,()=>t.customIcon),h.reset(i),h.append(e,i)},c=e=>{var i=h.comment(),n=h.first_child(i),o=e=>{var i=je(),n=h.child(i);h.snippet(n,()=>h.get(l),()=>t.icon),h.reset(i),h.append(e,i)};h.if(n,e=>{t.icon&&h.get(l)&&e(o)},!0),h.append(e,i)};h.if(s,e=>{t.customIcon?e(a):e(c,!1)});var g=h.sibling(s,2),u=e=>{var i=Ne(),n=h.child(i,!0);h.reset(i),h.template_effect(()=>{h.set_attribute(i,"id",t.titleId),h.set_text(n,t.title)}),h.append(e,i)},p=e=>{var i=Ge(),n=h.child(i,!0);h.reset(i),h.template_effect(()=>h.set_text(n,t.title)),h.append(e,i)};h.if(g,e=>{t.titleId?e(u):e(p,!1)}),h.reset(n);var f=h.sibling(n,2),m=h.child(f),v=e=>{var i=Ue();i.__click=function(...e){var i;null==(i=t.onToggleStyle)||i.apply(this,e)},h.append(e,i)};h.if(m,e=>{d()&&e(v)});var w=h.sibling(m,2),y=e=>{var i=Ve();let n;i.__click=function(...e){var i;null==(i=r()?void 0:t.onMinimize)||i.apply(this,e)},h.template_effect(()=>{n=h.set_class(i,1,"modal-header-btn-windows",null,n,{"modal-header-btn-windows-disabled":r()}),i.disabled=r(),h.set_attribute(i,"title",r()?"Enable dock to minimize":void 0)}),h.append(e,i)};h.if(w,e=>{o()&&e(y)}),h.sibling(w,2).__click=function(...e){var i;null==(i=t.onClose)||i.apply(this,e)},h.reset(f),h.append(e,i)};h.if(p,e=>{h.get(c)?e(f):e(m,!1)}),h.reset(g),h.template_effect(()=>u=h.set_class(g,1,"modal-header",null,u,{"modal-header-draggable":!!t.onStartDrag,transparent:i()})),h.append(e,g),h.pop()}(r,{get title(){return t.title},get customIcon(){return t.customIcon},get icon(){return t.icon},get isTransparent(){return h.get(M)},get titleId(){return h.get(te)},get headerLayout(){return h.get(x)},get onStartDrag(){return h.get(e)},onToggleStyle:rt,onMinimize:nt,onClose:ot,get minimizable(){return h.get(f)},get minimizeDisabled(){return h.get(m)},get transparencyEnabled(){return h.get(v)}})}var d=h.sibling(r,2),a=h.child(d);h.snippet(a,()=>t.children??h.noop),h.reset(d);var l=h.sibling(d,2),c=e=>{var i=et(),n=h.child(i);h.snippet(n,()=>t.footer),h.reset(i),h.append(e,i)};h.if(l,e=>{t.footer&&e(c)});var g=h.sibling(l,2);{let e=h.derived(()=>h.get(w)&&!h.get(U)?ce.handlers.startResize:void 0);!function(e,t){h.push(t,!0);const i=["n","s","e","w","ne","nw","se","sw"];var n=h.comment(),o=h.first_child(n),r=e=>{var n=Ze();h.each(n,21,()=>i,h.index,(e,i)=>{var n=Je();n.__pointerdown=e=>function(e,i){var n;null==(n=t.onStartResize)||n.call(t,e,i)}(e,h.get(i)),h.template_effect(()=>h.set_class(n,1,`modal-resize-handle modal-resize-${h.get(i)??""}`)),h.append(e,n)}),h.reset(n),h.append(e,n)};h.if(o,e=>{t.onStartResize&&e(r)}),h.append(e,n),h.pop()}(g,{get onStartResize(){return h.get(e)}})}var u=h.sibling(g,2),y=e=>{var t=tt();let i;h.template_effect(()=>i=h.set_class(t,1,"modal-child-overlay",null,i,{"modal-overlay-closing":h.get(_)})),h.append(e,t)};h.if(u,e=>{h.get(K)&&e(y)}),h.reset(n),h.bind_this(n,e=>h.set(b,e),()=>h.get(b)),h.template_effect(()=>{var e;o=h.set_class(n,1,"modal-dialog",null,o,{"modal-dragging":se.isDragging,"modal-resizing":ce.isResizing,"modal-positioned":se.hasBeenDragged,"modal-minimizing":xe.isMinimizing,"modal-restoring":xe.isRestoring,"modal-opening":xe.isOpening,"modal-closing":xe.isClosing,"modal-centered":h.get(Te),"modal-solid":!h.get(M),"modal-transparent":h.get(M),"modal-glow":h.get(ee),"modal-has-child":h.get(U),"modal-is-child":h.get(V),"modal-visible-by-animation":h.get(Ee),"modal-animating-to-center":h.get(le),"modal-animating-position":null==(e=h.get(H))?void 0:e.isAnimatingPosition,"modal-attention":h.get(O)}),h.set_attribute(n,"data-modal-id",t.id),h.set_style(n,h.get(He)),h.set_attribute(n,"aria-labelledby",h.get(te))}),h.event("pointerdown",n,()=>oe(t.id),!0),h.append(e,n)},$$slots:{default:!0}})};h.if(ht,e=>{h.get($)&&e(pt)}),h.append(e,ut),h.pop()}(e,{get id(){return t.id},get title(){return t.title},get icon(){return t.icon},get customIcon(){return t.customIcon},get maxWidth(){return i()},get preferredHeight(){return t.preferredHeight},get autoOpen(){return n()},get openSourcePosition(){return t.openSourcePosition},get glow(){return t.glow},get config(){return t.config},get closeOnEscape(){return o()},get onClose(){return t.onClose},get children(){return t.children},get footer(){return t.footer},skipRegistration:!0})};h.if(p,e=>{h.get(g)&&e(f)}),h.append(e,u),h.pop()}h.delegate(["keydown"]);const ot=t(null);function rt({id:t,title:o,icon:r,customIcon:d,maxWidth:s,preferredHeight:a,autoOpen:l=!1,openSourcePosition:c,glow:h,config:p,closeOnEscape:f=!0,onClose:m,children:v,footer:w}){const y=i(null),x=i(null),z=i(null),I=i(null),b=i(null);n(()=>{if(!y.current)return;const e=v?()=>z.current:void 0,i=w?()=>I.current:void 0,n=d?()=>b.current:void 0;return x.current=g(nt,{target:y.current,props:{id:t,title:o,icon:r,customIcon:n,maxWidth:s,preferredHeight:a,autoOpen:l,openSourcePosition:c,glow:h,config:p,closeOnEscape:f,onClose:m,children:e,footer:i}}),()=>{x.current&&(u(x.current),x.current=null)}},[t]),n(()=>{x.current&&Object.assign(x.current,{title:o,maxWidth:s,preferredHeight:a,glow:h,config:p,closeOnEscape:f,onClose:m})},[o,s,a,h,p,f,m]);const M="symbol"==typeof t?t.description??"symbol":t;return e.createElement(ot.Provider,{value:t},e.createElement("div",{ref:y,"data-modal-bridge":M}),e.createElement("div",{style:{display:"none"}},v&&e.createElement("div",{ref:z},v),w&&e.createElement("div",{ref:I},w),d&&e.createElement("div",{ref:b},d)))}function dt({config:t,children:i}){return n(()=>{t&&b(t),h.set(M,I().zIndex.base,!0);const e=I().portalTarget;let i=null;return"string"==typeof e&&"undefined"!=typeof document&&(document.querySelector(e)||(i=document.createElement("div"),i.id=e.replace("#",""),document.body.appendChild(i))),()=>{y={...w},h.update(x),h.set(M,I().zIndex.base,!0),i&&i.remove()}},[t]),e.createElement(e.Fragment,null,i)}var st=h.from_html('<button type="button" aria-label="Drag dock"></button>'),at=h.from_html('<span class="modal-dock-item-icon-placeholder"> </span>'),lt=h.from_html('<span class="modal-dock-item-label"> </span>'),ct=h.from_html("<span>+</span>"),gt=h.from_html('<span class="modal-dock-child-indicator"><!></span>'),ut=h.from_html('<button><span class="modal-dock-item-icon"><!></span> <!> <span class="modal-dock-item-glow"></span> <!></button>'),ht=h.from_html('<div data-dock-container="true"><div><!> <!></div></div>');function pt(e,t){h.push(t,!0);const i=s(Ce),n=h.derived(()=>t.renderIcon??(null==i?void 0:i())),o=be(),r=h.derived(()=>(z(),I())),d=h.derived(()=>I().zIndex.dock),a=h.derived(()=>h.get(r).dock.position),l=h.derived(()=>h.get(r).dock.labelMode);let c=h.state("horizontal"),g=h.state(h.proxy({x:100,y:100})),u=h.state(null),w=h.state(!1),y={x:0,y:0},x=null;const b=h.derived(()=>(he(),Array.from(o.modals.values()).filter(e=>e.isMinimized).sort((e,t)=>e.dockPosition-t.dockPosition))),M=h.derived(()=>{switch(h.get(a)){case"left":return{x:-20,duration:250,easing:m};case"right":return{x:20,duration:250,easing:m};default:return{y:20,duration:250,easing:m}}});function _(e){var t;"free"===h.get(a)&&(h.set(w,!0),x=e.pointerId,y={x:e.clientX-h.get(g).x,y:e.clientY-h.get(g).y},null==(t=e.currentTarget)||t.setPointerCapture(e.pointerId),window.addEventListener("pointermove",C),window.addEventListener("pointerup",P),window.addEventListener("pointercancel",P))}function C(e){if(e.pointerId!==x||!h.get(u))return;const t=h.get(u).getBoundingClientRect(),i=window.innerWidth-t.width-8,n=window.innerHeight-t.height-8,o=Math.min(Math.max(e.clientX-y.x,8),Math.max(8,i)),r=Math.min(Math.max(e.clientY-y.y,8),Math.max(8,n));h.set(g,{x:Math.round(o),y:Math.round(r)},!0)}function P(e){e.pointerId===x&&(h.set(w,!1),x=null,window.removeEventListener("pointermove",C),window.removeEventListener("pointerup",P),window.removeEventListener("pointercancel",P))}const{addListener:D}=function(){function e(e,t,i){return"undefined"==typeof window?()=>{}:(window.addEventListener(e,t,i),()=>{window.removeEventListener(e,t,i)})}return{addListener:e,addListenerEffect:function(t,i,n){h.user_effect(()=>{if("undefined"!=typeof window)return e(t,i,n)})}}}();function B(){if("free"!==h.get(a)||!h.get(u))return;const e=h.get(u).getBoundingClientRect(),t=k(h.get(g).x,h.get(g).y,e.width,e.height);t.x===h.get(g).x&&t.y===h.get(g).y||h.set(g,{x:Math.round(t.x),y:Math.round(t.y)},!0)}h.user_effect(()=>{"undefined"!=typeof window&&D("resize",B)});var E={setDockOrientation:function(e){h.set(c,e,!0)},setDockFreePosition:function(e){h.set(g,e,!0)},getDockState:function(){return{dockPosition:h.get(a),dockOrientation:h.get(c),dockFreePosition:h.get(g),dockLabelMode:h.get(l)}}};return Se(e,{get target(){return h.get(r).portalTarget},children:(e,t)=>{var i=ht();let r,s;var m=h.child(i);let y;var x=h.child(m),z=e=>{var t=st();let i;t.__pointerdown=_,h.template_effect(()=>i=h.set_class(t,1,"modal-dock-handle",null,i,{"modal-dock-handle-dragging":h.get(w)})),h.append(e,t)};h.if(x,e=>{"free"===h.get(a)&&e(z)});var I=h.sibling(x,2);h.each(I,19,()=>h.get(b),e=>e.id,(e,t,i)=>{const r=h.derived(()=>h.get(t).lastChildId?o.modals.get(h.get(t).lastChildId):null);var d=ut();let s;d.__click=e=>{var i;i=h.get(t).id,U.has(i)?e.currentTarget.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"}):ee(h.get(t).id)};var a=h.child(d),c=h.child(a),g=e=>{var i=h.comment(),o=h.first_child(i);h.snippet(o,()=>h.get(n),()=>h.get(t).icon),h.append(e,i)},u=e=>{var i=at(),n=h.child(i,!0);h.reset(i),h.template_effect(e=>h.set_text(n,e),[()=>h.get(t).title.charAt(0)]),h.append(e,i)};h.if(c,e=>{h.get(t).icon&&h.get(n)?e(g):e(u,!1)}),h.reset(a);var f=h.sibling(a,2),m=e=>{var i=lt(),n=h.child(i,!0);h.reset(i),h.template_effect(()=>h.set_text(n,h.get(t).title)),h.append(e,i)};h.if(f,e=>{"hidden"!==h.get(l)&&e(m)});var w=h.sibling(f,4),y=e=>{var t=gt(),i=h.child(t),o=e=>{var t=h.comment(),i=h.first_child(t);h.snippet(i,()=>h.get(n),()=>h.get(r).icon),h.append(e,t)},d=e=>{var t=ct();h.append(e,t)};h.if(i,e=>{h.get(r).icon&&h.get(n)?e(o):e(d,!1)}),h.reset(t),h.append(e,t)};h.if(w,e=>{h.get(t).lastChildId&&h.get(r)&&e(y)}),h.reset(d),h.template_effect(()=>{s=h.set_class(d,1,"modal-dock-item",null,s,{"modal-dock-item-has-glow":!!h.get(t).glow,"modal-dock-item-has-child":!!h.get(t).lastChildId,"modal-dock-item-label-beside":"beside"===h.get(l),"modal-dock-item-label-below":"below"===h.get(l)}),h.set_attribute(d,"data-modal-id",h.get(t).id),h.set_style(d,h.get(t).glow?`--modal-dock-glow-color: ${h.get(t).glow.color};`:"")}),h.transition(3,d,()=>p,()=>({duration:300,delay:50*h.get(i),easing:v,start:.5})),h.append(e,d)}),h.reset(m),h.reset(i),h.bind_this(i,e=>h.set(u,e),()=>h.get(u)),h.template_effect(()=>{r=h.set_class(i,1,"modal-dock-container",null,r,{"modal-dock-left":"left"===h.get(a),"modal-dock-right":"right"===h.get(a),"modal-dock-bottom":"bottom"===h.get(a),"modal-dock-free":"free"===h.get(a),"modal-dock-empty":0===h.get(b).length}),s=h.set_style(i,"free"===h.get(a)?`left: ${h.get(g).x}px; top: ${h.get(g).y}px;`:"",s,{"z-index":h.get(d)}),y=h.set_class(m,1,"modal-dock",null,y,{"modal-dock-free-horizontal":"free"===h.get(a)&&"horizontal"===h.get(c),"modal-dock-free-vertical":"free"===h.get(a)&&"vertical"===h.get(c)})}),h.transition(3,i,()=>f,()=>h.get(b).length>0?h.get(M):{duration:0}),h.append(e,i)},$$slots:{default:!0}}),h.pop(E)}function ft({renderIcon:t}){const o=i(null),r=i(null);return n(()=>{if(o.current)return r.current=g(pt,{target:o.current,props:{}}),()=>{r.current&&(u(r.current),r.current=null)}},[]),e.createElement("div",{ref:o,"data-dock-bridge":!0})}function mt(e,t){if(!Ie(e))throw new Error(`Cannot call ${t}() on unregistered modal "${String(e)}". Ensure the Modal component is rendered.`)}h.delegate(["pointerdown","click"]);const vt=new Map;function wt(e){const t=o(()=>function(e){const t=be().modals.get(e),i=void 0!==t&&!t.isMinimized,n=(null==t?void 0:t.isMinimized)??!1,o=void 0!==t,r=vt.get(e);if(r&&r.isOpen===i&&r.isMinimized===n&&r.isRegistered===o)return r;const d={isOpen:i,isMinimized:n,isRegistered:o};return vt.set(e,d),d}(e),[e]);return{...r(H,t,t),open:o(t=>{mt(e,"open"),se(e,t)},[e]),close:o(()=>{mt(e,"close"),ae(e)},[e]),minimize:o(()=>{mt(e,"minimize"),Z(e)},[e]),restore:o(()=>{mt(e,"restore"),ee(e)},[e]),openChild:o((t,i)=>{mt(e,"openChild"),ce({id:t},e,i)},[e]),shake:o(()=>{mt(e,"shake"),xe(e)},[e]),bringToFront:o(()=>{mt(e,"bringToFront"),oe(e)},[e])}}let yt=null;function xt(){const e=be(),t=Array.from(e.modals.values()),i=t.filter(e=>e.isMinimized).length,n=t.filter(e=>!e.isMinimized).length;return yt&&yt.modals===e.modals&&yt.minimizedCount===i&&yt.openCount===n||(yt={modals:e.modals,minimizedCount:i,openCount:n}),yt}function zt(){return r(H,xt,xt)}export{ft as Dock,rt as Modal,dt as ModalProvider,oe as bringToFront,le as closeAllModals,ae as closeModal,I as getConfig,ze as isModalOpen,Ie as isModalRegistered,re as isTopModal,Z as minimizeModal,ce as openChildModal,se as openModal,de as reorderDock,ee as restoreModal,b as setConfig,Me as toggleModalTransparency,wt as useModal,zt as useModals};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@keyframes modal-genie-minimize{0%{opacity:1;transform:scale(1)translate(0,0)}to{transform:scale(.05,.02)translate3d(var(--genie-translate-x,0px),var(--genie-translate-y,0px),0);opacity:0}}@keyframes modal-genie-restore{0%{transform:scale(.05,.02)translate3d(var(--genie-translate-x,0px),var(--genie-translate-y,0px),0);opacity:0}to{opacity:1;transform:scale(1)translate(0,0)}}@keyframes modal-close{0%{opacity:1;transform:scale(1)translate(0,0)}to{opacity:0;transform:scale(.95)translateY(10px)}}@keyframes modal-close-centered{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-45%)scale(.95)}}@keyframes modal-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes modal-shake-positioned{0%,to{transform:none}10%{transform:translate(-8px)rotate(-.5deg)}20%{transform:translate(8px)rotate(.5deg)}30%{transform:translate(-6px)rotate(-.3deg)}40%{transform:translate(6px)rotate(.3deg)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-2px)}80%{transform:translate(2px)}90%{transform:translate(-1px)}}@keyframes modal-shake-centered{0%,to{transform:translate(-50%,-50%)}10%{transform:translate(calc(-50% - 8px),-50%)rotate(-.5deg)}20%{transform:translate(calc(8px - 50%),-50%)rotate(.5deg)}30%{transform:translate(calc(-50% - 6px),-50%)rotate(-.3deg)}40%{transform:translate(calc(6px - 50%),-50%)rotate(.3deg)}50%{transform:translate(calc(-50% - 4px),-50%)}60%{transform:translate(calc(4px - 50%),-50%)}70%{transform:translate(calc(-50% - 2px),-50%)}80%{transform:translate(calc(2px - 50%),-50%)}90%{transform:translate(calc(-50% - 1px),-50%)}}@keyframes modal-attention-glow{0%{box-shadow:var(--modal-shadow-lg),0 0 0 0 rgba(var(--modal-attention-color,255,180,100),0)}15%{box-shadow:var(--modal-shadow-lg),0 0 30px 8px rgba(var(--modal-attention-color,255,180,100),.6),0 0 60px 16px rgba(var(--modal-attention-color,255,180,100),.3)}30%{box-shadow:var(--modal-shadow-lg),0 0 40px 12px rgba(var(--modal-attention-color,255,180,100),.5),0 0 80px 24px rgba(var(--modal-attention-color,255,180,100),.25)}to{box-shadow:var(--modal-shadow-lg),0 0 0 0 rgba(var(--modal-attention-color,255,180,100),0)}}@keyframes modal-overlay-fade-in{0%{opacity:0;backdrop-filter:blur()}to{opacity:1;backdrop-filter:blur(var(--modal-child-overlay-blur))}}@keyframes modal-overlay-fade-out{0%{opacity:1;backdrop-filter:blur(var(--modal-child-overlay-blur))}to{opacity:0;backdrop-filter:blur()}}@keyframes modal-child-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes modal-child-disappear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes modal-glow-low{0%,to{box-shadow:0 0 10px rgba(var(--modal-glow-color),.3),0 0 20px rgba(var(--modal-glow-color),.2),0 0 30px rgba(var(--modal-glow-color),.15)}50%{box-shadow:0 0 15px rgba(var(--modal-glow-color),.4),0 0 30px rgba(var(--modal-glow-color),.3),0 0 45px rgba(var(--modal-glow-color),.2)}}@keyframes modal-glow-medium{0%,to{box-shadow:0 0 20px rgba(var(--modal-glow-color),.6),0 0 40px rgba(var(--modal-glow-color),.5),0 0 60px rgba(var(--modal-glow-color),.4),0 0 80px rgba(var(--modal-glow-color),.25)}50%{box-shadow:0 0 30px rgba(var(--modal-glow-color),.8),0 0 60px rgba(var(--modal-glow-color),.6),0 0 90px rgba(var(--modal-glow-color),.5),0 0 120px rgba(var(--modal-glow-color),.35),0 0 150px rgba(var(--modal-glow-color),.2)}}@keyframes modal-glow-high{0%,to{box-shadow:0 0 30px rgba(var(--modal-glow-color),.7),0 0 60px rgba(var(--modal-glow-color),.6),0 0 90px rgba(var(--modal-glow-color),.5),0 0 120px rgba(var(--modal-glow-color),.4)}50%{box-shadow:0 0 50px rgba(var(--modal-glow-color),.9),0 0 100px rgba(var(--modal-glow-color),.7),0 0 150px rgba(var(--modal-glow-color),.6),0 0 200px rgba(var(--modal-glow-color),.45),0 0 250px rgba(var(--modal-glow-color),.3)}}@keyframes modal-dock-glow-pulse{0%,to{opacity:.35}50%{opacity:.65}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.modal-dock-container{position:fixed}.modal-dock-container.modal-dock-empty{pointer-events:none;opacity:0}.modal-dock-container.modal-dock-free{transform:none}.modal-dock-container.modal-dock-bottom{bottom:1.25rem;left:50%;transform:translate(-50%)}.modal-dock-container.modal-dock-bottom .modal-dock{flex-direction:row;align-items:flex-end}.modal-dock-container.modal-dock-left{top:50%;left:1.25rem;transform:translateY(-50%)}.modal-dock-container.modal-dock-left .modal-dock{flex-direction:column;align-items:stretch}.modal-dock-container.modal-dock-right{top:50%;right:1.25rem;transform:translateY(-50%)}.modal-dock-container.modal-dock-right .modal-dock{flex-direction:column;align-items:stretch}.modal-dock{gap:var(--modal-dock-gap);padding:var(--modal-dock-padding);background:var(--modal-dock-bg);border:1px solid var(--modal-dock-border);border-radius:var(--modal-dock-border-radius);box-shadow:var(--modal-dock-shadow);display:flex}.modal-dock.modal-dock-free-horizontal{flex-direction:row;align-items:center}.modal-dock.modal-dock-free-vertical{flex-direction:column;align-items:stretch}.modal-dock-handle{background:var(--modal-dock-handle-bg);border:1px solid var(--modal-dock-handle-border);cursor:grab;opacity:.85;appearance:none;touch-action:none;border-radius:12px;flex:none;width:22px;height:44px;padding:0;position:relative}.modal-dock-handle:hover{opacity:1;border-color:var(--modal-dock-item-hover-border)}.modal-dock-handle.modal-dock-handle-dragging{cursor:grabbing;opacity:1}.modal-dock-handle:before{content:"";background-image:radial-gradient(var(--modal-dock-handle-dots)1px,transparent 1px);opacity:.6;background-position:50%;background-size:7px 7px;position:absolute;inset:8px 6px}.modal-dock.modal-dock-free-vertical .modal-dock-handle{align-self:stretch;width:auto;min-width:44px;height:22px}.modal-dock.modal-dock-free-vertical .modal-dock-handle:before{inset:6px 8px}.modal-dock-item{width:var(--modal-dock-item-size);height:var(--modal-dock-item-size);background:var(--modal-dock-item-bg);border:1px solid var(--modal-dock-item-border);border-radius:var(--modal-dock-item-border-radius);box-shadow:var(--modal-dock-item-shadow,none);cursor:pointer;touch-action:none;justify-content:center;align-items:center;padding:.375rem;transition:transform .15s ease-out,opacity .15s ease-out,background .2s,border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:visible}.modal-dock-item:hover{background:var(--modal-dock-item-hover-bg);border-color:var(--modal-dock-item-hover-border);box-shadow:var(--modal-dock-item-hover-shadow,0 6px 16px #00000026,0 2px 6px #0000001a)}.modal-dock-item:hover .modal-dock-item-icon{transform:scale(1.05)}.modal-dock-item:hover .modal-dock-item-glow{opacity:.4}.modal-dock-item:active{transition-duration:.1s}.modal-dock-container.modal-dock-bottom .modal-dock-item:hover{transform:translateY(-4px)scale(1.05)}.modal-dock-container.modal-dock-bottom .modal-dock-item:active{transform:translateY(-2px)scale(1.02)}.modal-dock-container.modal-dock-left .modal-dock-item:hover{transform:translate(4px)scale(1.05)}.modal-dock-container.modal-dock-left .modal-dock-item:active{transform:translate(2px)scale(1.02)}.modal-dock-container.modal-dock-right .modal-dock-item:hover{transform:translate(-4px)scale(1.05)}.modal-dock-container.modal-dock-right .modal-dock-item:active{transform:translate(-2px)scale(1.02)}.modal-dock-item-icon{filter:drop-shadow(0 2px 4px #00000026);justify-content:center;align-items:center;font-size:1.25rem;line-height:1;transition:transform .2s;display:inline-flex;position:relative}.modal-dock-item-icon-placeholder{color:var(--modal-dock-label-color);font-size:1.25rem;font-weight:600}.modal-dock-item-glow{opacity:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle,currentColor,#0000 70%);transition:opacity .3s;position:absolute;inset:0}.modal-dock-item-label{font-size:var(--modal-dock-label-size);color:var(--modal-dock-label-color);white-space:nowrap;text-overflow:ellipsis;max-width:80px;font-weight:500;overflow:hidden}.modal-dock-item.modal-dock-item-label-beside{flex-direction:row;gap:.5rem;width:auto;padding:.375rem .75rem .375rem .5rem}.modal-dock-item.modal-dock-item-label-below{flex-direction:column;gap:.25rem;width:auto;min-width:52px;height:auto;padding:.375rem .5rem}.modal-dock-item.modal-dock-item-label-below .modal-dock-item-label{max-width:60px;font-size:.55rem}.modal-dock-item.modal-dock-item-has-glow{--modal-dock-glow-color:20,184,166;border-color:rgba(var(--modal-dock-glow-color),.6);box-shadow:0 0 10px rgba(var(--modal-dock-glow-color),.5),0 0 20px rgba(var(--modal-dock-glow-color),.3)}.modal-dock-item.modal-dock-item-has-glow .modal-dock-item-glow{background:radial-gradient(circle at center,rgb(var(--modal-dock-glow-color)),transparent 60%);animation:2.5s cubic-bezier(.4,0,.6,1) infinite modal-dock-glow-pulse}.modal-dock-item.modal-dock-item-has-glow:hover .modal-dock-item-glow{opacity:.8;animation:none}.modal-dock-child-indicator{color:#141822;background:#ffd54a;border:2px solid #00000040;border-radius:6px;justify-content:center;align-items:center;width:18px;height:18px;font-size:.7rem;display:inline-flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 6px #00000059}.modal-dock-item.modal-dock-item-has-child{border-color:var(--modal-dock-item-hover-border)}.modal-dock-item.modal-dock-item-has-child:hover .modal-dock-child-indicator{transform:scale(1.2)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "./variables.css";@import "./animations.css";@import "./modal.css";@import "./dock.css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.modal-dialog{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:var(--modal-border-radius);width:calc(100% - 2rem);max-width:480px;max-height:80vh;box-shadow:var(--modal-shadow-lg);opacity:0;outline:none;flex-direction:column;transition:height .15s ease-out,background-color .2s,border-color .2s;display:flex;position:fixed;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.modal-dialog.modal-positioned{opacity:1;transform:none}.modal-dialog.modal-centered{opacity:1}.modal-dialog.modal-awaiting-restore{pointer-events:none;opacity:0!important}.modal-dialog.modal-dragging{opacity:.9;user-select:none;transition:none}.modal-dialog.modal-resizing{user-select:none;transition:none}.modal-dialog.modal-animating-to-center{transition:left .2s ease-out,top .2s ease-out}.modal-dialog.modal-animating-position{transition:left var(--modal-parent-animation-duration)ease-out,top var(--modal-parent-animation-duration)ease-out}.modal-dialog.modal-solid{background:var(--modal-bg)}.modal-dialog.modal-transparent{background:var(--modal-bg-transparent);opacity:.4}.modal-dialog.modal-minimizing{pointer-events:none;animation:modal-genie-minimize var(--modal-animation-duration-minimize)ease-in forwards;transform-origin:var(--genie-origin-x,50%)var(--genie-origin-y,100%);will-change:transform,opacity;backface-visibility:hidden}.modal-dialog.modal-restoring{pointer-events:none;animation:modal-genie-restore var(--modal-animation-duration-restore)ease-out forwards;transform-origin:var(--genie-origin-x,50%)var(--genie-origin-y,100%);will-change:transform,opacity;backface-visibility:hidden}.modal-dialog.modal-opening{pointer-events:none;animation:modal-genie-restore var(--modal-animation-duration-open)ease-out forwards;transform-origin:var(--genie-origin-x,50%)var(--genie-origin-y,50%);will-change:transform,opacity;backface-visibility:hidden}.modal-dialog.modal-closing{pointer-events:none;animation:modal-close var(--modal-animation-duration-close)ease-in forwards;will-change:transform,opacity;backface-visibility:hidden}.modal-dialog.modal-closing:not(.modal-positioned){animation-name:modal-close-centered}.modal-dialog.modal-positioned.modal-minimizing,.modal-dialog.modal-positioned.modal-closing{transform:unset;opacity:unset}.modal-dialog.modal-positioned.modal-opening,.modal-dialog.modal-positioned.modal-restoring{transform:unset;opacity:1}.modal-dialog.modal-visible-by-animation{opacity:1}.modal-dialog.modal-attention{animation:.5s cubic-bezier(.36,.07,.19,.97) both modal-shake-positioned,.6s ease-out both modal-attention-glow}.modal-dialog.modal-attention:not(.modal-positioned){animation:.5s cubic-bezier(.36,.07,.19,.97) both modal-shake-centered,.6s ease-out both modal-attention-glow}.modal-dialog.modal-attention.modal-glow{--modal-attention-color:var(--modal-glow-color)}.modal-dialog.modal-glow{border-color:rgb(var(--modal-glow-color));animation:2s ease-in-out infinite modal-glow-medium}.modal-dialog.modal-glow.modal-glow-low{animation-name:modal-glow-low}.modal-dialog.modal-glow.modal-glow-high{animation-name:modal-glow-high}.modal-dialog.modal-glow.modal-minimizing{animation:modal-genie-minimize var(--modal-animation-duration-minimize)ease-in forwards}.modal-dialog.modal-glow.modal-restoring{animation:modal-genie-restore var(--modal-animation-duration-restore)ease-out forwards}.modal-dialog.modal-glow.modal-opening{animation:modal-genie-restore var(--modal-animation-duration-open)ease-out forwards}.modal-dialog.modal-glow.modal-closing{animation:modal-close var(--modal-animation-duration-close)ease-in forwards}.modal-header{padding:var(--modal-header-padding);border-bottom:1px solid var(--modal-header-border);z-index:101;outline:none;flex-shrink:0;align-items:center;gap:.75rem;display:flex;position:relative;overflow:visible}.modal-header.modal-header-draggable{cursor:grab;user-select:none;touch-action:none}.modal-header.modal-header-draggable:active{cursor:grabbing}.modal-header-traffic-lights{gap:var(--modal-btn-gap);z-index:100;flex-shrink:0;display:flex;position:relative}.modal-header-traffic-lights .modal-header-light{width:var(--modal-btn-size);height:var(--modal-btn-size);cursor:pointer;border:none;border-radius:50%;outline:none;flex-shrink:0;padding:0;transition:filter .15s,transform .1s;position:relative}.modal-header-traffic-lights .modal-header-light:before{content:"";opacity:0;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.modal-header-traffic-lights .modal-header-light:hover{transform:scale(1.1)}.modal-header-traffic-lights .modal-header-light:hover:before{opacity:1}.modal-header-traffic-lights .modal-header-light:focus-visible{box-shadow:0 0 0 2px #ffffff80,0 0 0 4px #0003}.modal-header-light-close{background:var(--modal-btn-close);box-shadow:inset 0 0 0 .5px #0000001f}.modal-header-light-close:hover{filter:brightness(.92)}.modal-header-traffic-lights .modal-header-light.modal-header-light-close:before{content:"×";color:#4a0002cc;font-size:11px;font-weight:600;line-height:13px}.modal-header-light-minimize{background:var(--modal-btn-minimize);box-shadow:inset 0 0 0 .5px #0000001f}.modal-header-light-minimize:hover{filter:brightness(.92)}.modal-header-traffic-lights .modal-header-light.modal-header-light-minimize:before{content:"−";color:#995700cc;font-size:13px;font-weight:600;line-height:12px}.modal-header-light-style{background:var(--modal-btn-style);box-shadow:inset 0 0 0 .5px #0000001f}.modal-header-light-style:hover{filter:brightness(.92)}.modal-header-traffic-lights .modal-header-light.modal-header-light-style:before{content:"◇";color:#006500cc;font-size:7px;line-height:13px}.modal-header-light.modal-header-light-disabled{opacity:.5;cursor:not-allowed;background:#ccc}.modal-header-light.modal-header-light-disabled:hover{filter:none}.modal-header-traffic-lights .modal-header-light.modal-header-light-disabled:before{opacity:.4}.modal-header-mac-center{pointer-events:none;justify-content:center;align-items:center;gap:.5rem;display:flex;position:absolute;left:0;right:0}.modal-header-mac-center .modal-header-title-group{flex:unset;pointer-events:auto}.modal-header-mac-center .modal-header-icon{pointer-events:auto}.modal-header-mac-spacer{display:none}.modal-header-title-group{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.modal-header-title{font-size:var(--modal-title-size);color:var(--modal-title-color);white-space:nowrap;text-overflow:ellipsis;min-width:0;margin:0;overflow:hidden}.modal-header-icon{font-size:var(--modal-icon-size);width:var(--modal-icon-size);height:var(--modal-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.modal-header-icon-badge{font-size:var(--modal-icon-badge-size);background:var(--modal-bg);border-radius:50%;padding:2px;line-height:1;position:absolute;bottom:-6px;right:-8px;box-shadow:0 1px 3px #0003}.modal-header-btn-windows{color:var(--modal-btn-windows-color);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25rem;font-size:1.25rem;line-height:1;transition:background-color .15s,color .15s}.modal-header-btn-windows:hover{color:var(--modal-btn-windows-hover-color);background:var(--modal-btn-windows-hover-bg)}.modal-header-btn-windows-style{font-size:.9rem}.modal-header-btn-windows-close{padding:0;font-size:1.5rem}.modal-header-btn-windows.modal-header-btn-windows-disabled{opacity:.35;cursor:not-allowed}.modal-header-btn-windows.modal-header-btn-windows-disabled:hover{color:var(--modal-btn-windows-color);background:0 0}.modal-body{min-height:0;padding:var(--modal-content-padding);flex-direction:column;flex:auto;display:flex;position:relative;overflow-y:auto}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:#0000000d}.modal-body::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.modal-footer{padding:var(--modal-footer-padding);border-top:1px solid var(--modal-footer-border);flex-shrink:0}.modal-resize-handle{z-index:10;touch-action:none;position:absolute}.modal-resize-n,.modal-resize-s{height:var(--modal-resize-handle-size);cursor:ns-resize;left:8px;right:8px}.modal-resize-n{top:calc(var(--modal-resize-handle-size)/-2)}.modal-resize-s{bottom:calc(var(--modal-resize-handle-size)/-2)}.modal-resize-e,.modal-resize-w{width:var(--modal-resize-handle-size);cursor:ew-resize;top:8px;bottom:8px}.modal-resize-e{right:calc(var(--modal-resize-handle-size)/-2)}.modal-resize-w{left:calc(var(--modal-resize-handle-size)/-2)}.modal-resize-ne,.modal-resize-nw,.modal-resize-se,.modal-resize-sw{width:var(--modal-resize-corner-size);height:var(--modal-resize-corner-size)}.modal-resize-ne{top:calc(var(--modal-resize-handle-size)/-2);right:calc(var(--modal-resize-handle-size)/-2);cursor:nesw-resize}.modal-resize-nw{top:calc(var(--modal-resize-handle-size)/-2);left:calc(var(--modal-resize-handle-size)/-2);cursor:nwse-resize}.modal-resize-se{bottom:calc(var(--modal-resize-handle-size)/-2);right:calc(var(--modal-resize-handle-size)/-2);cursor:nwse-resize}.modal-resize-sw{bottom:calc(var(--modal-resize-handle-size)/-2);left:calc(var(--modal-resize-handle-size)/-2);cursor:nesw-resize}.modal-child-overlay{background:var(--modal-child-overlay-bg);backdrop-filter:blur(var(--modal-child-overlay-blur));border-radius:inherit;z-index:100;cursor:not-allowed;pointer-events:all;animation:.2s ease-out forwards modal-overlay-fade-in;position:absolute;inset:0}.modal-child-overlay.modal-overlay-closing{pointer-events:none;animation:.2s ease-in forwards modal-overlay-fade-out}.modal-dialog.modal-has-child .modal-header-actions{pointer-events:none;opacity:.5}.modal-dialog.modal-has-child .modal-header-draggable{cursor:not-allowed}.modal-dialog.modal-is-child.modal-positioned:not(.modal-closing):not(.modal-minimizing):not(.modal-restoring){animation:.25s ease-out forwards modal-child-appear}.modal-dialog.modal-is-child.modal-closing{animation:.2s ease-in forwards modal-child-disappear}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--modal-bg:#1e1e2e;--modal-bg-transparent:#1e1e2ee6;--modal-border:#ffffff1a;--modal-title-color:#f0f0f0;--modal-content-color:#d0d0d0;--modal-header-border:#ffffff14;--modal-footer-border:#ffffff14;--modal-dock-bg:linear-gradient(to bottom,#2a2a3e,#1e1e2e);--modal-dock-border:#ffffff1a;--modal-dock-label-color:#e0e0e0;--modal-btn-windows-color:#a0a0a0;--modal-btn-windows-hover-bg:#ffffff1a;--modal-btn-windows-hover-color:#f0f0f0;--modal-dock-item-bg:linear-gradient(145deg,#ffffff0d,transparent);--modal-dock-item-border:#ffffff14;--modal-dock-item-hover-bg:linear-gradient(145deg,#ffffff1a,#ffffff0d);--modal-dock-item-hover-border:#fff3;--modal-dock-handle-bg:linear-gradient(145deg,#ffffff0d,transparent);--modal-dock-handle-border:#ffffff14;--modal-dock-handle-dots:#ffffff4d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--modal-bg:#fff;--modal-bg-transparent:#ffffffd9;--modal-border:#0000001a;--modal-title-color:#1a1a1a;--modal-content-color:#333;--modal-header-border:#00000014;--modal-footer-border:#00000014;--modal-dock-bg:linear-gradient(to bottom,#f8f9fa,#f0f1f3);--modal-dock-border:#0000001a;--modal-dock-label-color:#333;--modal-btn-windows-color:#666;--modal-btn-windows-hover-bg:#0000000d;--modal-btn-windows-hover-color:#1a1a1a}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--modal-bg:#fff;--modal-bg-transparent:#ffffffd9;--modal-border:#0000001a;--modal-border-radius:12px;--modal-shadow:0 25px 50px -12px #00000040;--modal-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--modal-header-bg:transparent;--modal-header-border:#00000014;--modal-header-height:48px;--modal-header-padding:.875rem 1.25rem;--modal-title-color:#1a1a1a;--modal-title-size:1rem;--modal-btn-close:#ff5f57;--modal-btn-minimize:#febc2e;--modal-btn-style:#28c840;--modal-btn-size:13px;--modal-btn-gap:7px;--modal-btn-windows-color:#666;--modal-btn-windows-hover-bg:#0000000d;--modal-btn-windows-hover-color:#1a1a1a;--modal-content-padding:0;--modal-content-color:#333;--modal-footer-bg:transparent;--modal-footer-border:#00000014;--modal-footer-padding:1rem 1.25rem;--modal-backdrop-bg:#0000004d;--modal-backdrop-blur:2px;--modal-dock-bg:linear-gradient(to bottom,#f8f9fa,#f0f1f3);--modal-dock-border:#0000001a;--modal-dock-shadow:0 4px 6px -1px #0000001a;--modal-dock-padding:.5rem .625rem;--modal-dock-gap:.5rem;--modal-dock-border-radius:14px;--modal-dock-item-size:44px;--modal-dock-item-bg:linear-gradient(145deg,#00000005,transparent);--modal-dock-item-border:#00000014;--modal-dock-item-shadow:none;--modal-dock-item-hover-bg:linear-gradient(145deg,#0000000d,#00000005);--modal-dock-item-hover-border:#00000026;--modal-dock-item-hover-shadow:0 6px 16px #00000026,0 2px 6px #0000001a;--modal-dock-item-border-radius:10px;--modal-dock-label-color:#333;--modal-dock-label-size:.65rem;--modal-dock-handle-bg:linear-gradient(145deg,#00000005,transparent);--modal-dock-handle-border:#00000014;--modal-dock-handle-dots:#0000004d;--modal-animation-duration-open:.4s;--modal-animation-duration-close:.25s;--modal-animation-duration-minimize:.5s;--modal-animation-duration-restore:.4s;--modal-animation-easing:cubic-bezier(.4,0,.2,1);--modal-parent-animation-duration:.3s;--modal-resize-handle-size:12px;--modal-resize-corner-size:20px;--modal-glow-color:126,200,191;--modal-attention-color:255,180,100;--modal-attention-duration:.6s;--modal-child-overlay-bg:#00000040;--modal-child-overlay-blur:1px;--modal-icon-size:1.5rem;--modal-icon-badge-size:.85rem}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Context keys for the modal library
|
|
3
|
+
*/
|
|
4
|
+
/** Context key for renderIcon snippet */
|
|
5
|
+
export declare const RENDER_ICON_CONTEXT: unique symbol;
|
|
6
|
+
/** Context key for current modal ID */
|
|
7
|
+
export declare const MODAL_ID_CONTEXT: unique symbol;
|
|
8
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Svelte hooks for modal library
|
|
3
|
+
* All hooks use Svelte 5 runes ($state, $effect) and provide reactive functionality
|
|
4
|
+
*/
|
|
5
|
+
export { useModal } from './useModal.svelte';
|
|
6
|
+
export { useModalDrag } from './useModalDrag.svelte';
|
|
7
|
+
export { useModalResize } from './useModalResize.svelte';
|
|
8
|
+
export { useModalAnimation } from './useModalAnimation.svelte';
|
|
9
|
+
export { trapFocus, focusFirstElement, useFocusTrap } from './useFocusTrap.svelte';
|
|
10
|
+
export { usePortal } from './usePortal.svelte';
|
|
11
|
+
export { useModalZIndex } from './useModalZIndex.svelte';
|
|
12
|
+
export { useWindowEvent } from './useWindowEvent.svelte';
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook for keyboard focus management
|
|
3
|
+
* Implements Tab key focus trapping within modal containers
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Trap focus within a container for Tab key navigation
|
|
7
|
+
*/
|
|
8
|
+
export declare function trapFocus(event: KeyboardEvent, container: HTMLElement): void;
|
|
9
|
+
/**
|
|
10
|
+
* Focus the first focusable element within a container
|
|
11
|
+
*/
|
|
12
|
+
export declare function focusFirstElement(container: HTMLElement): boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Hook factory for focus trap functionality
|
|
15
|
+
*/
|
|
16
|
+
export declare function useFocusTrap(): {
|
|
17
|
+
trapFocus: typeof trapFocus;
|
|
18
|
+
focusFirstElement: typeof focusFirstElement;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useFocusTrap.svelte.d.ts.map
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ModalId } from '../../core/types';
|
|
2
|
+
export interface UseModalReturn {
|
|
3
|
+
/** Trigger shake + glow attention effect on the modal */
|
|
4
|
+
shake: () => void;
|
|
5
|
+
/** Bring modal to the front (highest z-index) */
|
|
6
|
+
bringToFront: () => void;
|
|
7
|
+
/** Check if the modal is currently open and visible */
|
|
8
|
+
isOpen: () => boolean;
|
|
9
|
+
/** Check if the modal is registered in the system */
|
|
10
|
+
isRegistered: () => boolean;
|
|
11
|
+
/** Open the modal (requires source element for animation) */
|
|
12
|
+
open: (sourceElement: HTMLElement) => void;
|
|
13
|
+
/** Close the modal */
|
|
14
|
+
close: () => void;
|
|
15
|
+
/** Minimize the modal to dock */
|
|
16
|
+
minimize: () => void;
|
|
17
|
+
/** Restore the modal from dock */
|
|
18
|
+
restore: () => void;
|
|
19
|
+
/** Open a child modal linked to this modal */
|
|
20
|
+
openChild: (childId: ModalId, sourceElement?: HTMLElement) => void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Hook to interact with a specific modal by ID
|
|
24
|
+
* @param id - The modal ID to interact with
|
|
25
|
+
* @returns Object with utility functions for the modal
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```svelte
|
|
29
|
+
* <script lang="ts">
|
|
30
|
+
* import { useModal } from '@modals/core/svelte';
|
|
31
|
+
*
|
|
32
|
+
* const modal = useModal('my-modal');
|
|
33
|
+
*
|
|
34
|
+
* function handleError() {
|
|
35
|
+
* modal.shake(); // Trigger attention effect
|
|
36
|
+
* }
|
|
37
|
+
* </script>
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare function useModal(id: ModalId): UseModalReturn;
|
|
41
|
+
//# sourceMappingURL=useModal.svelte.d.ts.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AnimationTransform, Position, Dimensions } from '../../core/types';
|
|
2
|
+
export declare function useModalAnimation(getId: () => string, getModalEl: () => HTMLElement | null, getPosition: () => Position, setPosition: (pos: Position) => void, getHasBeenDragged: () => boolean, setHasBeenDragged: (value: boolean) => void, getHasBeenResized: () => boolean, getSize: () => Dimensions, onMinimize: (position: Position, hasBeenDragged: boolean, size: Dimensions) => void): {
|
|
3
|
+
readonly isMinimizing: boolean;
|
|
4
|
+
readonly isRestoring: boolean;
|
|
5
|
+
readonly isOpening: boolean;
|
|
6
|
+
readonly isClosing: boolean;
|
|
7
|
+
readonly animationTransform: AnimationTransform | null;
|
|
8
|
+
readonly pendingOpenSource: Position | null;
|
|
9
|
+
startMinimize: (customTarget?: Position, onComplete?: () => void) => void;
|
|
10
|
+
startRestore: (storePosition: Position | undefined, modalSize: Dimensions | undefined) => void;
|
|
11
|
+
startClose: (callback: () => void) => void;
|
|
12
|
+
setPendingOpenSource: (source: Position | null) => void;
|
|
13
|
+
tryStartOpenAnimation: () => boolean;
|
|
14
|
+
forceClearMinimize: () => void;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=useModalAnimation.svelte.d.ts.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Position } from '../../core/types';
|
|
2
|
+
export declare function useModalDrag(initialPosition?: Position): {
|
|
3
|
+
readonly position: Position;
|
|
4
|
+
readonly hasBeenDragged: boolean;
|
|
5
|
+
readonly isDragging: boolean;
|
|
6
|
+
onPointerDown: (event: PointerEvent, element: HTMLElement) => void;
|
|
7
|
+
onPointerMove: (_event: PointerEvent, _element: HTMLElement, modalSize: {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
}) => void;
|
|
11
|
+
onPointerUp: (event: PointerEvent, element: HTMLElement) => void;
|
|
12
|
+
setPosition: (newPosition: Position) => void;
|
|
13
|
+
setHasBeenDragged: (value: boolean) => void;
|
|
14
|
+
reset: () => void;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=useModalDrag.svelte.d.ts.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Position, Dimensions } from '../../core/types';
|
|
2
|
+
export declare function useModalResize(getModalEl: () => HTMLElement | null, getPosition: () => Position, setPosition: (pos: Position) => void, getHasBeenDragged: () => boolean, setHasBeenDragged: (value: boolean) => void, onPositionChange: (position: Position, size: Dimensions) => void, getSymmetricResize?: () => boolean): {
|
|
3
|
+
readonly isResizing: boolean;
|
|
4
|
+
readonly resizeDirection: string;
|
|
5
|
+
readonly size: Dimensions;
|
|
6
|
+
readonly hasBeenResized: boolean;
|
|
7
|
+
readonly isActive: boolean;
|
|
8
|
+
readonly justFinishedResizing: boolean;
|
|
9
|
+
start: (e: PointerEvent, direction: string) => void;
|
|
10
|
+
setHasBeenResized: () => void;
|
|
11
|
+
setSize: (newSize: Dimensions) => void;
|
|
12
|
+
reset: () => void;
|
|
13
|
+
constrainToViewport: () => void;
|
|
14
|
+
handlers: {
|
|
15
|
+
startResize: (e: PointerEvent, direction: string) => void;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=useModalResize.svelte.d.ts.map
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ModalId } from '../../core/types';
|
|
2
|
+
export interface UseModalZIndexReturn {
|
|
3
|
+
/** Z-index for floating elements (same as modal, appears on top due to DOM order) */
|
|
4
|
+
zIndex: number;
|
|
5
|
+
/** Portal target element or selector */
|
|
6
|
+
portalTarget: string | HTMLElement;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Get z-index and portal target for floating elements inside a modal
|
|
10
|
+
* @param modalId - Optional modal ID. If not provided, uses context from parent Modal component.
|
|
11
|
+
* @returns Object with zIndex and portalTarget for positioning
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```svelte
|
|
15
|
+
* <script lang="ts">
|
|
16
|
+
* import { useModalZIndex, Portal } from '@modals/core/svelte';
|
|
17
|
+
*
|
|
18
|
+
* // Automatically uses parent modal's ID from context
|
|
19
|
+
* const { zIndex, portalTarget } = useModalZIndex();
|
|
20
|
+
* </script>
|
|
21
|
+
*
|
|
22
|
+
* <Portal target={portalTarget}>
|
|
23
|
+
* <div class="dropdown" style:z-index={zIndex}>
|
|
24
|
+
* Dropdown content
|
|
25
|
+
* </div>
|
|
26
|
+
* </Portal>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare function useModalZIndex(modalId?: ModalId): UseModalZIndexReturn;
|
|
30
|
+
//# sourceMappingURL=useModalZIndex.svelte.d.ts.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook for DOM portal mounting
|
|
3
|
+
* Handles rendering content into a different part of the DOM tree
|
|
4
|
+
*/
|
|
5
|
+
type PortalTarget = string | HTMLElement | null;
|
|
6
|
+
/**
|
|
7
|
+
* Hook factory for portal functionality
|
|
8
|
+
*/
|
|
9
|
+
export declare function usePortal(): {
|
|
10
|
+
mount: (element: HTMLElement, target?: PortalTarget) => () => void;
|
|
11
|
+
};
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=usePortal.svelte.d.ts.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook for window event listeners
|
|
3
|
+
* Manages event listeners with automatic cleanup on unmount
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Hook factory for window event functionality
|
|
7
|
+
*/
|
|
8
|
+
export declare function useWindowEvent(): {
|
|
9
|
+
addListener: <K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => unknown, options?: AddEventListenerOptions) => () => void;
|
|
10
|
+
addListenerEffect: <K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => unknown, options?: AddEventListenerOptions) => void;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=useWindowEvent.svelte.d.ts.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { default as Modal } from './Modal.svelte';
|
|
2
|
+
export { default as Dock } from './Dock.svelte';
|
|
3
|
+
export { default as Backdrop } from './Backdrop.svelte';
|
|
4
|
+
export { default as ModalProvider } from './ModalProvider.svelte';
|
|
5
|
+
export { default as ModalHeader } from './ModalHeader.svelte';
|
|
6
|
+
export { default as ResizeHandles } from './ResizeHandles.svelte';
|
|
7
|
+
export { default as Portal } from './Portal.svelte';
|
|
8
|
+
export { RENDER_ICON_CONTEXT, MODAL_ID_CONTEXT } from './context';
|
|
9
|
+
export * from './hooks';
|
|
10
|
+
export { openModal, closeModal, minimizeModal, restoreModal, bringToFront, isModalOpen, isModalRegistered, getModalsStore, openChildModal, restoreAllMinimizedModals, triggerAttention, } from '../core/state.svelte';
|
|
11
|
+
export type { UseModalReturn } from './hooks/useModal.svelte';
|
|
12
|
+
export type { UseModalZIndexReturn } from './hooks/useModalZIndex.svelte';
|
|
13
|
+
export { getConfig, setConfig, resetConfig, getConfigVersion } from '../core/config.svelte';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
package/dist/svelte.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export * from './core';
|
|
2
|
+
export { default as Modal } from './svelte/Modal.svelte';
|
|
3
|
+
export { default as Dock } from './svelte/Dock.svelte';
|
|
4
|
+
export { default as Backdrop } from './svelte/Backdrop.svelte';
|
|
5
|
+
export { default as ModalProvider } from './svelte/ModalProvider.svelte';
|
|
6
|
+
export { default as ModalHeader } from './svelte/ModalHeader.svelte';
|
|
7
|
+
export { default as ResizeHandles } from './svelte/ResizeHandles.svelte';
|
|
8
|
+
export { default as Portal } from './svelte/Portal.svelte';
|
|
9
|
+
export * from './svelte/hooks';
|
|
10
|
+
//# sourceMappingURL=svelte.d.ts.map
|