@witchcraft/ui 0.3.2 → 0.3.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/animations.css

@@ -0,0 +1 @@
+@theme{--animate-blinkInf:blink 1s linear-infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideIn:slideIn 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}

package/dist/runtime/assets/base.css

@@ -1 +1 @@
-.v-enter-active,.v-leave-active{transition:opacity .5s ease}.v-enter-from,.v-leave-to{opacity:0}.list-enter-active,.list-leave-active,.list-move{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translateX(100%)}.list-leave-active{position:absolute}.list-leave-to,.list-move{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}@keyframes slide{0%{background-position:0}to{background-position:100%}}a{@apply link-like}*{@apply styled-scrollbar}textarea{@apply styled-resizer}
+.v-enter-active,.v-leave-active{transition:opacity .5s ease}.v-enter-from,.v-leave-to{opacity:0}.list-enter-active,.list-leave-active,.list-move{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translateX(100%)}.list-leave-active{position:absolute}.list-leave-to,.list-move{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}a{@apply link-like}*{@apply styled-scrollbar}textarea{@apply styled-resizer}

package/dist/runtime/assets/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss" source("../../");@import "./theme.css";@import "./base.css";@import "./utils.css";
+@import "tailwindcss" source("../../");@import "./theme.css";@import "./animations.css";@import "./base.css";@import "./utils.css";

package/dist/runtime/components/LibNotifications/LibNotification.d.vue.ts

@@ -9,9 +9,22 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: import("vue").DefineComponent<Props, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     handler: NotificationHandler;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    top?: (props: {
+        notification: any;
+    }) => any;
+} & {
+    title?: (props: any) => any;
+} & {
+    message?: (props: any) => any;
+}>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibNotifications/LibNotification.vue

@@ -1,7 +1,9 @@
 <template>
 <div
+	v-if="notification"
 	:class="twMerge(
-  `notification
+  `
+		notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -9,11 +11,15 @@
 		dark:text-bg
 		border
 		border-neutral-400
+		dark:border-neutral-700
 		rounded-sm
 		focus-outline
-		flex-flex-col
+		flex
+		flex-col
 		gap-2
-		p-2 m-2
+		p-1
+		text-sm
+		focus:border-accent-500
 	`,
   $attrs.class
 )"
@@ -22,30 +28,59 @@
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
-	<div class="notification--header flex-reverse flex justify-between">
-		<div
+	<slot
+		name="top"
+		:notification="notification"
+	/>
+	<div
+		class="
+			notification--header
+			flex-reverse
+			flex
+			justify-between
+			items-center
+		"
+	>
+		<slot
 			v-if="notification.title"
-			tabindex="0"
-			class="title
-				focus-outline flex
-				rounded-sm
-				font-bold
-			"
+			name="title"
+			v-bind="setSlotVar('title', {
+  title: notification.title,
+  class: `
+					notification--title
+					focus-outline
+					rounded-sm
+					font-bold
+				`,
+  tabindex: 0
+})"
 		>
-			{{ notification.title }}
-		</div>
+			<div
+				v-bind="slotVars.title"
+			>
+				{{ notification.title }}
+			</div>
+		</slot>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
 			<LibButton
 				:border="false"
-				class="notification--copy-button text-neutral-700"
+				class="
+					notification--title-button
+					notification--copy-button
+					text-neutral-700
+					dark:text-neutral-300
+				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
 				<icon><i-fa6-regular-copy/></icon>
 			</LibButton>
 			<lib-button
 				v-if="notification.cancellable"
-				class="notification--cancel-button"
+				class="
+					notification--title-button
+					notification--cancel-button
+				"
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
@@ -53,12 +88,27 @@
 			</lib-button>
 		</div>
 	</div>
-	<div
-		class="notification--message whitespace-pre-wrap"
-		tabindex="0"
+	<slot
+		v-if="notification.message"
+		name="message"
+		v-bind="setSlotVar('message', {
+  class: `
+				notification--message
+				whitespace-pre-wrap
+				text-neutral-800
+				dark:text-neutral-200
+				mb-1
+			`,
+  message: notification.message,
+  tabindex: 0
+})"
 	>
-		{{ notification.message }}
-	</div>
+		<div
+			v-bind="slotVars.message"
+		>
+			{{ notification.message }}
+		</div>
+	</slot>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"
@@ -69,8 +119,11 @@
 		<div class="notification--footer-spacer flex-1 py-1"/>
 		<div
 			v-if="notification.options"
-			class="notification--options
-				flex flex-wrap justify-end
+			class="
+				notification--options
+				flex
+				flex-wrap
+				justify-end
 				gap-2
 			"
 		>
@@ -78,11 +131,12 @@
 				:label="option"
 				:class="twMerge(
   `
+					notification--button
 					notification--option-button
+					px-2
 				`,
-  buttonColors[i] == 'secondary' && 'p-0'
+  notification.default === option && `notification--default`
 )"
-				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
 				:key="option"
@@ -94,9 +148,10 @@
 </template>
 
 <script setup>
-import { computed, ref, useAttrs } from "vue";
+import { computed, onMounted, ref, useAttrs } from "vue";
 import IFa6RegularCopy from "~icons/fa6-regular/copy";
 import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+import { useSlotVars } from "../../composables/useSlotVars.js";
 import { copy } from "../../helpers/copy.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
@@ -107,6 +162,7 @@ defineOptions({
   inheritAttrs: false
 });
 const $attrs = useAttrs();
+const { setSlotVar, slotVars } = useSlotVars();
 const props = defineProps({
   notification: { type: null, required: true },
   handler: { type: Object, required: false, default: void 0 }
@@ -114,6 +170,9 @@ const props = defineProps({
 const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
 const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
 const notificationEl = ref(null);
+onMounted(() => {
+  notificationEl.value?.focus();
+});
 defineExpose({
   focus: () => {
     notificationEl.value?.focus();

package/dist/runtime/components/LibNotifications/LibNotification.vue.d.ts

@@ -9,9 +9,22 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: import("vue").DefineComponent<Props, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     handler: NotificationHandler;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    top?: (props: {
+        notification: any;
+    }) => any;
+} & {
+    title?: (props: any) => any;
+} & {
+    message?: (props: any) => any;
+}>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -1,67 +1,129 @@
 <template>
+<!-- using custom toasts, reka-ui toasts still have issues, like like of control over pause, and I can't get the leave event to animate or transition with vue transitions to work -->
 <TransitionGroup
 	name="list"
 	tag="div"
-	:class="twMerge(`notifications
-			absolute
-			z-50
-			inset-y-0 right-0
-			w-1/3
-			min-w-[300px]
-			pointer-events-none
-			overflow-hidden
-			flex flex-col
-		`, $attrs.class)"
+	:class="twMerge(`
+		notifications
+		[--notification-width:300px]
+		fixed
+		top-0
+		z-50
+		right-[calc(var(--notification-width)*-1)]
+		py-2
+		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
+		[&_.notification]:w-[var(--notification-width)]
+		max-h-[100dvh]
+		flex
+		flex-col
+		[&_.notification]:shrink-0
+		gap-1
+		list-none
+		outline-none
+		overflow-y-auto
+		overflow-x-clip
+		scrollbar-hidden
+	`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<lib-notification
-		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
+		class="overflow-hidden"
 		v-for="notification of notifications"
 		:key="notification.id"
-	/>
-</TransitionGroup>
-<Transition>
-	<div
-		v-show="topNotifications.length > 0"
-		:class="twMerge(`notifications--none`, $attrs.class)"
-	/>
-</Transition>
-<Transition>
-	<dialog
-		v-show="topNotifications.length > 0"
-		:id="id"
-		:class="twMerge(`notifications-modal
-			bg-transparent
-			p-0
-			backdrop:bg-black/50
-			backdrop:p-5
-		`, $attrs.class)"
-		ref="dialogEl"
-		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
+		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
 	>
-		<form>
+		<template #top>
+			<LibProgressBar
+				v-if="notification.timeout !== void 0"
+				class="
+					w-full
+					h-1
+					before:duration-[10ms]
+					-mt-1
+					-mx-[calc(var(--spacing)*2+2px)]
+					rounded-none
+				"
+				:progress="100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100"
+			/>
+		</template>
+	</lib-notification>
+</TransitionGroup>
+<!-- we don't need to worry about the user accidentally closing a non-closable dialog as keeping open=true (which the handler handles when the component tries to close) is enough to keep it open without issues -->
+<AlertDialogRoot
+	:open="topNotifications.length > 0 && topNotifications[0] !== void 0"
+	@update:open="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+>
+	<AlertDialogPortal :to="'#root'">
+		<AlertDialogOverlay
+			class="
+				fixed inset-0 z-30
+				bg-neutral-950/20
+				data-[state=open]:animate-overlayShow
+			"
+		/>
+		<AlertDialogContent
+			class="
+				data-[state=open]:animate-contentShow
+				fixed
+				top-[50%]
+				left-[50%]
+				translate-x-[-50%]
+				translate-y-[-50%]
+				max-h-[80dvh]
+				max-w-[700px]
+				z-100
+			"
+		>
 			<lib-notification
-				v-if="topNotifications.length > 0 && topNotifications[0]"
+				class="
+					top-notification
+					text-md
+					gap-2
+					p-2
+					[&_.notification--button]:p-2
+					[&_.notification--button]:py-1
+					[&_.notification--header]:text-lg
+					[&_.notification--message]:py-3
+				"
 				:handler="handler"
-				class="top-notification"
 				:notification="topNotifications[0]"
 				ref="topNotificationComp"
-			/>
-		</form>
-	</dialog>
-</Transition>
+			>
+				<template #title="slotProps">
+					<AlertDialogTitle v-bind="slotProps">
+						{{ slotProps.title }}
+					</AlertDialogTitle>
+				</template>
+				<template #message="slotProps">
+					<AlertDialogDescription v-bind="slotProps">
+						{{ slotProps.message }}
+					</AlertDialogDescription>
+				</template>
+			</lib-notification>
+		</AlertDialogContent>
+	</AlertDialogPortal>
+</AlertDialogRoot>
 </template>
 
 <script setup>
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue";
+import {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle
+} from "reka-ui";
+import { computed, ref } from "vue";
 import LibNotification from "./LibNotification.vue";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
+import LibProgressBar from "../LibProgressBar/LibProgressBar.vue";
 defineOptions({
   name: "LibNotifications",
   inheritAttrs: false
@@ -70,54 +132,15 @@ const props = defineProps({
   id: { type: String, required: false },
   handler: { type: Object, required: false }
 });
-const dialogEl = ref(null);
-const isOpen = ref(false);
-const notifications = shallowReactive([]);
-const topNotifications = shallowReactive([]);
-const open = () => {
-  if (!isOpen.value) {
-    void nextTick(() => {
-      dialogEl.value.showModal();
-      isOpen.value = true;
-    });
-  }
-};
-const close = () => {
-  if (isOpen.value && topNotifications.length === 0) {
-    dialogEl.value.close();
-    isOpen.value = false;
-  }
-};
-const addNotification = (entry) => {
-  if (entry.resolution === void 0) {
-    if (entry.requiresAction) {
-      topNotifications.push(entry);
-      open();
-      entry.promise.then(() => {
-        removeIfIn(topNotifications, entry);
-        close();
-      });
-    } else {
-      notifications.splice(0, 0, entry);
-      entry.promise.then(() => {
-        removeIfIn(notifications, entry);
-      });
-    }
-  }
-};
-const notificationListener = (entry, type) => {
-  if (type === "added") {
-    addNotification(entry);
-  }
-};
+const topNotifications = computed(() => handler.queue.filter((entry) => entry.requiresAction).reverse());
+const notifications = computed(() => handler.queue.filter((entry) => !entry.requiresAction));
+const time = ref(Date.now());
+setInterval(() => {
+  requestAnimationFrame(() => {
+    time.value = Date.now();
+  });
+}, 50);
 const handler = props.handler ?? useNotificationHandler();
-handler.addNotificationListener(notificationListener);
-for (const entry of handler.queue) {
-  addNotification(entry);
-}
-onBeforeUnmount(() => {
-  handler.removeNotificationListener(notificationListener);
-});
 </script>
 
 <script>

package/dist/runtime/components/LibPopup/LibPopup.vue

@@ -76,7 +76,7 @@ const buttonEl = ref(null);
 const backgroundEl = ref(null);
 const pos = ref({});
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-let isOpen = false;
+let isOpen = modelValue.value;
 const getDialogBoundingRect = () => ({
   x: 0,
   y: 0,
@@ -324,10 +324,6 @@ const close = () => {
     if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.close();
   }
 };
-const toggle = () => {
-  if (!isOpen) show();
-  else close();
-};
 const recomputeListener = () => recompute();
 const bindListeners = () => {
   window.addEventListener("resize", recomputeListener);
@@ -348,7 +344,7 @@ watch([modelValue, popupEl], () => {
 });
 const handleMouseup = ($event) => {
   $event.preventDefault();
-  toggle();
+  close();
 };
 onMounted(() => {
   recompute();

package/dist/runtime/components/LibProgressBar/LibProgressBar.d.vue.ts

@@ -1,6 +1,7 @@
 import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    /** A number from 0-100. It is auto-clamped. */
     progress: number;
     /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
     autohideOnComplete?: number;

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -28,7 +28,7 @@
 			before:shadow-black/50
 			before:rounded-sm
 			before:bg-bars-gradient
-			before:animate-[slide_10s_linear_infinite]
+			before:animate-slideBgInf
 			before:[background-size:15px_15px]
 			before:absolute
 			before:w-[var(--progress)]

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue.d.ts

@@ -1,6 +1,7 @@
 import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    /** A number from 0-100. It is auto-clamped. */
     progress: number;
     /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
     autohideOnComplete?: number;

package/dist/runtime/components/LibRecorder/LibRecorder.vue

@@ -55,7 +55,7 @@
 				hover:bg-red-500
 			`,
   recording && `
-				animate-[blink_1s_infinite]
+				animate-blinkInf
 				bg-red-500
 			`,
   (disabled || readonly) && `

package/dist/runtime/composables/index.d.ts

@@ -11,5 +11,7 @@ export { useNotificationHandler } from "./useNotificationHandler.js";
 export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
+export { useSetupLocale } from "./useSetupLocale.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
+export { useSlotVars } from "./useSlotVars.js";
 export { useSuggestions } from "./useSuggestions.js";

package/dist/runtime/composables/index.js

@@ -11,5 +11,7 @@ export { useNotificationHandler } from "./useNotificationHandler.js";
 export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
+export { useSetupLocale } from "./useSetupLocale.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
+export { useSlotVars } from "./useSlotVars.js";
 export { useSuggestions } from "./useSuggestions.js";

package/dist/runtime/composables/useSlotVars.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Helper for managing props passed to slots and their fallbacks.
+ *
+ * Most slots have a default style but vue makes it hard to pass them both to the slot and the fallback content without repitition.
+ *
+ * This helper allows setting the variables from the template when creating the slot WHILE also using the created state without having to use any wrapper components, {@link https://github.com/vuejs/core/issues/1172 | see also this issue}.
+ *
+ * @example
+ * ```vue
+ * <template>
+ * 	<div>
+ * 		<slot
+ * 			v-bind="setSlotVar('title', {
+ * 				class: 'title focus-outline flex rounded-sm font-bold'
+ * 				someOtherProp: true
+ * 			})"
+ * 		>
+ * 			<FallbackComponent v-bind="slotVars.title"/>
+ * 		<slot/>
+ * 	</div>
+ * </template>
+ * <script setup lang="ts">
+ * import { useSlotVars } from "@witchcraft/ui/composables/useSlotVars"
+ * const { slotVars, setSlotVar } = useSlotVars()
+ * </script>
+ * ```
+ * The magic is that setSlotVar both sets and returns the value for the slot name passed. You can then access the state in a fallback component by accessing slotVars[slotName]. Unfortunately this is untyped unless you set the generic in useSlotsVars, but we usually don't need them to be typed.
+ */
+export declare function useSlotVars<T extends Record<string, Record<string, any>>, TKey extends keyof T>(): {
+    slotVars: import("vue").Reactive<Record<TKey, Record<string, any>>>;
+    setSlotVar: <T_1 extends Record<string, any>>(name: TKey, obj: T_1) => T_1;
+};

package/dist/runtime/composables/useSlotVars.js

@@ -0,0 +1,12 @@
+import { reactive } from "vue";
+export function useSlotVars() {
+  const state = reactive({});
+  function setSlotVar(name, obj) {
+    state[name] = obj;
+    return state[name];
+  }
+  return {
+    slotVars: state,
+    setSlotVar
+  };
+}

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -1,10 +1,11 @@
 import type { AnyFunction, MakeRequired } from "@alanscodelog/utils";
+import { type Reactive } from "vue";
 export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>, TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>> {
     timeout: number;
     debug: boolean;
     private id;
-    readonly queue: TEntry[];
-    readonly history: TEntry[];
+    readonly queue: Reactive<TEntry[]>;
+    readonly history: Readonly<TEntry[]>;
     maxHistory: number;
     listeners: NotificationListener<TEntry>[];
     stringifier?: NotificationStringifier<TEntry>;
@@ -16,12 +17,12 @@ export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<
     private _checkEntry;
     protected _createEntry<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): TEntry;
     notify<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): NotificationPromise<TNotifyEntry["options"][number] extends string ? TNotifyEntry["options"][number] : "Ok" | "Cancel">;
+    pause(notification: NotificationEntry): void;
+    resume(notification: NotificationEntry): void;
     static resolveToDefault(notification: NotificationEntry): void;
     static dismiss(notification: NotificationEntry): void;
     stringify(notification: NotificationEntry): string;
     clear(): void;
-    addNotificationListener(cb: NotificationListener<TEntry>): void;
-    removeNotificationListener(cb: NotificationListener<TEntry>): void;
 }
 export type NotificationPromise<TOption extends string = string> = Promise<TOption>;
 export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], TCancellable extends boolean | TOptions[number] = "Cancel"> = {
@@ -48,6 +49,12 @@ export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> =
     timeout?: number;
     resolution?: string;
     id: number;
+    startTime: number;
+    isPaused: boolean;
+    _timer: {
+        id?: ReturnType<typeof setTimeout>;
+        elapsedBeforePause: number;
+    };
 };
 export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void;
 export type NotificationStringifier<T extends NotificationEntry<any>> = (notification: T) => string;