@witchcraft/ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,71 @@
+import { type Ref } from "vue";
+import type { Point } from "../types/index.js.js";
+/**
+ * A composable for dragging items only after a certain threshold of movement has been reached.
+ *
+ * What to do with the actual pointer coordinates is up to you.
+ *
+ * The is compatible with the `useScrollNearContainerEdges` composable as well.
+ *
+ * ```ts
+ * const {
+ * 	pointerCoords,
+ * 	passedDragThreshold,
+ * 	startDragThresholdCheck,
+ * 	endDragThresholdCheck,
+ * 	checkDragThreshold,
+ * } = useDragWithThreshold({ threshold: ref(5) })
+ *
+ * function grabPointerDown(e: PointerEvent): void {
+ * 	startDragThresholdCheck(e)
+ * 	e.preventDefault()
+ *
+ * 	document.addEventListener("pointermove", grabPointerMove)
+ * 	document.addEventListener("pointerup", grabPointerUp)
+ * 	document.addEventListener("keyup", escapeDrag)
+ * }
+ * function grabPointerMove(e: PointerEvent): void {
+ * 	e.preventDefault()
+ * 	checkDragThreshold(e)
+ * 	if (passedDragThreshold.value) {
+ *
+ * 	}
+ * }
+ * function grabPointerUp(e: PointerEvent): void {
+ * 	if (passedDragThreshold.value) {
+ *			// drag
+ * 	} else  {
+ * 		// handleAsClick(e)
+ * 	}
+ * 	stopDrag()
+ * }
+ *
+ * function stopDrag(): void {
+ * 	endDragThresholdCheck()
+ * 	document.removeEventListener("keyup", escapeDrag)
+ * 	document.removeEventListener("pointermove", grabPointerMove)
+ * 	document.removeEventListener("pointerup", grabPointerUp)
+ * }
+ *
+ * function escapeDrag(e: KeyboardEvent): void {
+ * 	if (e.code === "Escape") stopDrag()
+ * }
+ * ```
+ */
+export declare const useDragWithThreshold: ({ initialOffset, pointerCoords, threshold, }?: {
+    initialOffset?: Ref<Point | undefined>;
+    pointerCoords?: Ref<Point | undefined>;
+    threshold?: Ref<number>;
+}) => {
+    initialOffset: Ref<Point | undefined, Point | undefined>;
+    pointerCoords: Ref<Point | undefined, Point | undefined>;
+    threshold: Ref<number, number>;
+    passedDragThreshold: Ref<boolean, boolean>;
+    getEventCoords: (e: {
+        clientX: number;
+        clientY: number;
+    }) => Point;
+    checkDragThreshold: (e: PointerEvent) => void;
+    startDragThresholdCheck: (e: PointerEvent) => void;
+    endDragThresholdCheck: () => void;
+};

package/dist/runtime/composables/useDragWithThreshold.js

@@ -0,0 +1,40 @@
+import { ref } from "vue";
+export const useDragWithThreshold = ({
+  initialOffset = ref({ x: 0, y: 0 }),
+  pointerCoords = ref({ x: 0, y: 0 }),
+  threshold = ref(10)
+} = {}) => {
+  const passedDragThreshold = ref(false);
+  function getDistance(p1, p2) {
+    const xDiff = p2.x - p1.x;
+    const yDiff = p2.y - p1.y;
+    return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+  }
+  function getEventCoords(e) {
+    return { x: e.clientX, y: e.clientY };
+  }
+  function checkDragThreshold(e) {
+    pointerCoords.value = getEventCoords(e);
+    passedDragThreshold.value ||= initialOffset.value !== void 0 && getDistance(initialOffset.value, pointerCoords.value) >= threshold.value;
+  }
+  function startDragThresholdCheck(e) {
+    passedDragThreshold.value = false;
+    initialOffset.value = getEventCoords(e);
+    pointerCoords.value = getEventCoords(e);
+  }
+  function endDragThresholdCheck() {
+    passedDragThreshold.value = false;
+    initialOffset.value = void 0;
+    pointerCoords.value = void 0;
+  }
+  return {
+    initialOffset,
+    pointerCoords,
+    threshold,
+    passedDragThreshold,
+    getEventCoords,
+    checkDragThreshold,
+    startDragThresholdCheck,
+    endDragThresholdCheck
+  };
+};

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

@@ -0,0 +1,12 @@
+import { type Ref } from "vue";
+/**
+ *
+ * This takes the value of the element at the given id (onBeforeMount, i.e. pre-hydration if available), and sets the given ref to that value onMounted.
+ *
+ * This should be compatible with both nuxt and vue.
+ *
+ * Nore that while it's generic, you will need to provide a transform function to convert the string to the desired type.
+ *
+ * @experimental
+ */
+export declare function usePreHydrationValue<T>(id: string, refVal: Ref<T>, transform?: (val: string) => T): void;

package/dist/runtime/composables/usePreHydrationValue.js

@@ -0,0 +1,15 @@
+import { onBeforeMount, onMounted } from "vue";
+export function usePreHydrationValue(id, refVal, transform = (val) => val) {
+  let temp = "";
+  onBeforeMount(() => {
+    const el = document.getElementById(id);
+    if (el?.value) {
+      temp = el.value;
+    }
+  });
+  onMounted(() => {
+    if (temp) {
+      refVal.value = transform(temp);
+    }
+  });
+}

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

@@ -6,6 +6,8 @@ export type TranslationFunction = (key: string, replacements?: Record<string, an
  * Should be called only once. You can choose to await it or not (see the `useDummyMessageSetWhileLoading` option).
  *
  * A default function is available, see {@link defaultTranslationFunction}.
+ *
+ * To avoid hydration errors, on the server, the message loading is awaited.
  */
 export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyMessageSetWhileLoading, translationFunction, }: {
     locale: Ref<string>;

package/dist/runtime/composables/useSetupI18n.js

@@ -40,7 +40,11 @@ export async function useSetupI18n({
         messages.value = newMessages;
       }
     }
-    void loadMessageSet(locale.value);
+    if (import.meta.server) {
+      await loadMessageSet(locale.value);
+    } else {
+      void loadMessageSet(locale.value);
+    }
     watch(locale, async () => {
       void loadMessageSet(locale.value);
     });

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

@@ -1,3 +1,4 @@
+import { type AnyFunction } from "@alanscodelog/utils";
 import { type Ref } from "vue";
 import { type SuggestionsEmits, type SuggestionsOptions } from "../components/shared/props.js.js";
 /**
@@ -5,7 +6,7 @@ import { type SuggestionsEmits, type SuggestionsOptions } from "../components/sh
  *
  * Note that while object suggestions are supported, the `suggestionLabel` prop is required and $inputModel and $modelValue will still be string values (as returned by the suggestionLabel function).
  */
-export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $modelValue: Ref<string>, emit: SuggestionsEmits, opts: SuggestionsOptions<TSuggestion>, debug?: boolean): {
+export declare function useSuggestions<TSuggestion, TMultivalue extends boolean = false>($inputValue: Ref<string>, $modelValue: Ref<TMultivalue extends true ? string[] : string>, $open: Ref<boolean>, emit: SuggestionsEmits, opts: SuggestionsOptions<TSuggestion>, debug?: boolean): {
     list: import("vue").ComputedRef<any[] | undefined>;
     filtered: import("vue").ComputedRef<any[] | undefined>;
     active: Ref<number, number>;
@@ -16,11 +17,11 @@ export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $m
     hasValidSuggestion: import("vue").ComputedRef<boolean>;
     openable: import("vue").ComputedRef<boolean | undefined>;
     getLabel: (item: any) => string;
-    isOpen: Ref<boolean, boolean>;
+    $open: Ref<boolean, boolean>;
     open: () => void;
     close: () => void;
-    enterSelected: () => void;
-    enterSuggestion: (num: number) => void;
+    enterSelected: (doClose?: boolean) => void;
+    enterIndex: (num: number, doClose?: boolean) => void;
     toggle: () => void;
     cancel: () => void;
     select: (num: number) => void;
@@ -29,10 +30,11 @@ export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $m
     first: () => void;
     last: () => void;
 };
-export declare function useSuggestionsInputAria(id: Ref<string>, isOpen: Ref<boolean>, activeSuggestion: Ref<number>, suggestions: Ref<any | undefined>): import("vue").ComputedRef<{
+export declare function useSuggestionsInputAria(id: Ref<string>, $open: Ref<boolean>, activeSuggestion: Ref<number>, suggestions: Ref<any | undefined>): import("vue").ComputedRef<{
     "aria-autocomplete": "both" | undefined;
     "aria-controls": string | undefined;
     role: string | undefined;
     "aria-expanded": boolean | undefined;
     "aria-activedescendant": string | undefined;
 }>;
+export declare function suggestionLabelGuard<TFunction extends AnyFunction>(item: any, suggestionLabeler: TFunction | undefined): asserts suggestionLabeler is TFunction;

package/dist/runtime/composables/useSuggestions.js

@@ -1,33 +1,42 @@
 import { isBlank } from "@alanscodelog/utils/isBlank.js";
 import { isObject } from "@alanscodelog/utils/isObject.js";
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js";
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js";
 import { computed, ref, toRaw, watch } from "vue";
-export function useSuggestions($inputValue, $modelValue, emit, opts, debug = false) {
+export function useSuggestions($inputValue, $modelValue, $open, emit, opts, debug = false) {
   if (typeof opts.suggestions?.[0] === "object" && !opts.suggestionLabel && !opts.suggestionsFilter) {
     throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.");
   }
-  const isOpen = ref(false);
   const activeSuggestion = ref(-1);
-  watch(isOpen, (val) => {
-    emit("update:isOpen", val);
-  });
   watch(activeSuggestion, (val) => {
     emit("update:activeSuggestion", val);
   });
-  const suggestionKey = (item) => {
+  if (opts.suggestions) {
+    for (const suggestion of opts.suggestions) {
+      suggestionLabelGuard(suggestion, opts.suggestionLabel);
+    }
+  }
+  const getSuggestionLabel = (item) => {
+    suggestionLabelGuard(item, opts.suggestionLabel);
     if (isObject(item)) {
-      if (opts.suggestionLabel) {
-        return opts.suggestionLabel(item);
-      }
-      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
+      return opts.suggestionLabel(item);
     }
     return item;
   };
-  const getSuggestionLabel = (item) => opts.suggestionLabel?.(item) ?? suggestionKey(item) ?? "";
-  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase()));
+  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => {
+    if (Array.isArray($modelValue.value)) {
+      if ($modelValue.value.includes(getSuggestionLabel(item))) return true;
+    }
+    return getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase());
+  });
   const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter);
   const suggestionsList = computed(() => {
     if (opts.suggestions) {
-      const res = suggestionsFilter.value($inputValue.value, opts.suggestions);
+      const suggestions = [...opts.suggestions];
+      if (Array.isArray($modelValue.value) && !opts.showSelectedValues) {
+        pushIfNotIn(suggestions, $modelValue.value);
+      }
+      const res = suggestionsFilter.value($inputValue.value, suggestions);
       return res;
     }
     return void 0;
@@ -43,19 +52,30 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     if (opts.suggestions) {
       const res = suggestionAvailable.value ? suggestionsList.value : opts.suggestions;
       if (opts.restrictToSuggestions && !isValidSuggestion.value) return res;
-      if (opts.preventDuplicateValues && opts.values) {
-        return res.filter((suggestion) => !opts.values.includes(suggestionKey(suggestion)));
-      }
       return res;
     }
     return void 0;
   });
-  const closeSuggestions = () => {
+  function setValue(val) {
+    if (Array.isArray($modelValue.value)) {
+      if ($modelValue.value.includes(val)) {
+        removeIfIn($modelValue.value, val);
+        return true;
+      } else {
+        pushIfNotIn($modelValue.value, [val]);
+      }
+    } else {
+      $modelValue.value = val;
+    }
+    return false;
+  }
+  function closeSuggestions() {
+    if (!opts.canClose) return;
     if (debug) console.log("closeSuggestions");
-    isOpen.value = false;
+    $open.value = false;
     activeSuggestion.value = -1;
-  };
-  const openSuggestions = () => {
+  }
+  function openSuggestions() {
     if (debug) console.log("openSuggestions", { openable: openable.value });
     if (!openable.value) return;
     if (activeSuggestion.value === -1) {
@@ -65,20 +85,22 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
         activeSuggestion.value = 0;
       }
     }
-    isOpen.value = true;
-  };
-  function enterSuggestion(num) {
+    $open.value = true;
+  }
+  function enterSuggestion(num, doClose = true) {
     if (num < -1 || num > (filteredSuggestions.value?.length ?? 0)) return;
     if (debug) console.log("enterSuggestion", num);
     if (filteredSuggestions.value === void 0) return;
     const suggestion = filteredSuggestions.value[num];
-    const val = suggestionKey(suggestion);
-    $modelValue.value = val;
-    $inputValue.value = getSuggestionLabel(suggestion);
-    closeSuggestions();
-    emit("submit", val, toRaw(suggestion));
+    const val = getSuggestionLabel(suggestion);
+    const wasRemoved = setValue(val);
+    $inputValue.value = Array.isArray($modelValue.value) ? "" : getSuggestionLabel(suggestion);
+    if (doClose) {
+      closeSuggestions();
+    }
+    emit("submit", val, toRaw(suggestion), wasRemoved);
   }
-  const enterSelected = () => {
+  function enterSelected(doClose = true) {
     if (activeSuggestion.value === -1) {
       if (!opts.restrictToSuggestions) {
         if (debug) console.log("enterSelected, unrestricted, emitting submit");
@@ -89,9 +111,9 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
       return;
     }
     if (debug) console.log("enterSelected");
-    enterSuggestion(activeSuggestion.value);
-  };
-  const selectSuggestion = (num) => {
+    enterSuggestion(activeSuggestion.value, doClose);
+  }
+  function selectSuggestion(num) {
     if (debug) console.log("selectSuggestion", num);
     if (num >= -1) {
       activeSuggestion.value = num;
@@ -99,37 +121,41 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     if (num === Infinity && (filteredSuggestions.value?.length ?? 0) > 0) {
       activeSuggestion.value = filteredSuggestions.value.length - 1;
     }
-  };
-  const toggleSuggestions = () => {
-    isOpen.value ? closeSuggestions() : openSuggestions();
-  };
-  const prevSuggestion = () => {
+  }
+  function toggleSuggestions() {
+    $open.value ? closeSuggestions() : openSuggestions();
+  }
+  function prevSuggestion() {
     if (!filteredSuggestions.value) return;
     if (activeSuggestion.value > 0) {
       activeSuggestion.value--;
     } else if (filteredSuggestions.value) {
       activeSuggestion.value = filteredSuggestions.value.length - 1;
     }
-  };
-  const nextSuggestion = () => {
+  }
+  function nextSuggestion() {
     if (!filteredSuggestions.value) return;
     if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
       activeSuggestion.value = 0;
     } else {
       activeSuggestion.value++;
     }
-  };
-  const firstSuggestion = () => {
+  }
+  function firstSuggestion() {
     selectSuggestion(0);
-  };
-  const lastSuggestion = () => {
+  }
+  function lastSuggestion() {
     selectSuggestion(Infinity);
-  };
-  const cancel = () => {
+  }
+  function cancel() {
+    if (Array.isArray($modelValue.value)) {
+      $inputValue.value = "";
+      return;
+    }
     if (debug) console.log("cancel");
     $inputValue.value = getSuggestionLabel($modelValue.value);
     closeSuggestions();
-  };
+  }
   watch(() => opts.canOpen, (val) => {
     if (!val) {
       if (debug) console.log("canOpen changed to false, closing suggestions");
@@ -149,10 +175,14 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     }
   });
   watch($modelValue, () => {
-    $inputValue.value = getSuggestionLabel($modelValue.value);
+    if (Array.isArray($modelValue.value)) {
+      $inputValue.value = "";
+    } else {
+      $inputValue.value = getSuggestionLabel($modelValue.value);
+    }
     if (debug) console.log("modelValue changed");
   });
-  const defaultSuggestionSelector = (suggestions, input) => {
+  function defaultSuggestionSelector(suggestions, input) {
     if (input.length === 0) return 0;
     let longestMatch;
     let ii = -1;
@@ -168,17 +198,17 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
       }
     }
     return ii;
-  };
+  }
   watch($inputValue, () => {
     if (debug) console.log("input changed:", $inputValue.value, "modelValue:", $modelValue.value);
-    if (getSuggestionLabel($modelValue.value) === $inputValue.value) return;
+    if (!Array.isArray($modelValue.value) && getSuggestionLabel($modelValue.value) === $inputValue.value) return;
     if (suggestionAvailable.value) {
       if (debug) console.log("input changed, suggestion available, opening suggestions");
       openSuggestions();
     }
-    if (!opts.restrictToSuggestions) {
+    if (!opts.restrictToSuggestions && !Array.isArray($modelValue.value)) {
       if (debug) console.log("input changed, unrestricted, setting modelValue");
-      $modelValue.value = $inputValue.value;
+      setValue($inputValue.value);
     }
     if (exactlyMatchingSuggestion.value && suggestionsList.value) {
       if (debug) console.log("input changed, exactly matching, setting activeSuggestion");
@@ -200,11 +230,11 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     hasValidSuggestion: isValidSuggestion,
     openable,
     getLabel: getSuggestionLabel,
-    isOpen,
+    $open,
     open: openSuggestions,
     close: closeSuggestions,
     enterSelected,
-    enterSuggestion,
+    enterIndex: enterSuggestion,
     toggle: toggleSuggestions,
     cancel,
     select: selectSuggestion,
@@ -214,13 +244,20 @@ export function useSuggestions($inputValue, $modelValue, emit, opts, debug = fal
     last: lastSuggestion
   };
 }
-export function useSuggestionsInputAria(id, isOpen, activeSuggestion, suggestions) {
+export function useSuggestionsInputAria(id, $open, activeSuggestion, suggestions) {
   const ariaInputProps = computed(() => ({
     "aria-autocomplete": suggestions !== void 0 ? "both" : void 0,
     "aria-controls": suggestions !== void 0 ? `suggestions-${id.value}` : void 0,
     role: suggestions ? "combobox" : void 0,
-    "aria-expanded": suggestions !== void 0 ? isOpen.value : void 0,
-    "aria-activedescendant": isOpen.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
+    "aria-expanded": suggestions !== void 0 ? $open.value : void 0,
+    "aria-activedescendant": $open.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
   }));
   return ariaInputProps;
 }
+export function suggestionLabelGuard(item, suggestionLabeler) {
+  if (isObject(item)) {
+    if (!suggestionLabeler) {
+      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
+    }
+  }
+}

package/dist/runtime/directives/vResizableCols.js

@@ -213,7 +213,9 @@ const positionGrips = (el) => {
   const $el = getElInfo(el);
   for (const grip of $el.grips.keys()) {
     const col = $el.grips.get(grip);
-    const colBox = getBox(getColEls(el)[col]);
+    const colEls = getColEls(el)[col];
+    if (!colEls) unreachable();
+    const colBox = getBox(colEls);
     const gripBox = getBox(grip);
     grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
     xPos += colBox.width;

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

@@ -28,11 +28,16 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     message: string;
     title?: string;
     code?: string;
+    /** @default ["Ok", "Cancel"] */
     options?: TOptions;
+    /** @default false */
     requiresAction?: boolean;
     cancellable?: TCancellable;
+    /** @default "Ok" */
     default?: TOptions[number];
+    /** @default [] */
     dangerous?: TOptions[number][];
+    /** @default false if cancellable, otherwise the default timeout */
     timeout?: number | boolean;
     icon?: string;
 };

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

@@ -1,7 +1,9 @@
-export { addValue } from "./addValue.js.js";
 export { base64ToImg } from "./base64ToImg.js.js";
 export { copy } from "./copy.js.js";
+export { createNoonUtcDate } from "./createNoonUtcDate.js.js";
 export { createRecorderHandler } from "./storybook.js.js";
+export { defaultTranslationFunction } from "./defaultTranslationFunction.js.js";
+export { getTimeZoneList } from "./getTimeZoneList.js.js";
 export { hasModifiers } from "./hasModifiers.js.js";
 export { NotificationHandler } from "./NotificationHandler.js.js";
 export { readFile } from "./readFile.js.js";

package/dist/runtime/helpers/index.js

@@ -1,7 +1,9 @@
-export { addValue } from "./addValue.js";
 export { base64ToImg } from "./base64ToImg.js";
 export { copy } from "./copy.js";
+export { createNoonUtcDate } from "./createNoonUtcDate.js";
 export { createRecorderHandler } from "./storybook.js";
+export { defaultTranslationFunction } from "./defaultTranslationFunction.js";
+export { getTimeZoneList } from "./getTimeZoneList.js";
 export { hasModifiers } from "./hasModifiers.js";
 export { NotificationHandler } from "./NotificationHandler.js";
 export { readFile } from "./readFile.js";

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

@@ -53,18 +53,24 @@ export type FileInputError = ErrorW<{
     isValidMimeType: boolean;
     isValidExtension: boolean;
 }>;
+/** h 0-360+ (deg), s 0-100%, v 0-100%, a 0-1 */
 export type HsvaColor = {
     h: number;
     s: number;
     v: number;
     a?: number;
 };
+/** rgb 0-255, 0-1 for alpha */
 export type RgbaColor = {
     r: number;
     g: number;
     b: number;
     a?: number;
 };
+export type Point = {
+    x: number;
+    y: number;
+};
 export type ScrollNearContainerEdgesOptions = {
     containerEl: Ref<HTMLElement | null>;
     /** Margin inside contianer that allows scrolling. 10 by default. */

package/dist/runtime/utils/notifyIfError.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Notifies the user if the given value is an error. Useful for making non-critical errors don't go unnoticed.
+ *
+ * Integrates with {@link TypedError} from `@alanscodelog/utils` to display the error code as well if it has one.
+ *
+ * If the value is not an error, it is returned.
+ */
+export declare function notifyIfError<T>(err: T, { logger, ns, force, }?: {
+    logger?: {
+        debug: (...args: any[]) => void;
+    };
+    ns?: string;
+    force?: boolean;
+}): T;

package/dist/runtime/utils/notifyIfError.js

@@ -0,0 +1,29 @@
+import { TypedError } from "@alanscodelog/utils/TypedError.js";
+import { useNotificationHandler } from "../composables/useNotificationHandler.js";
+export function notifyIfError(err, {
+  logger,
+  ns,
+  force = false
+} = {}) {
+  if (force || err instanceof Error) {
+    const errMessage = {
+      message: err instanceof Error ? err.message : `Unknown error ${err}`,
+      code: err instanceof TypedError ? err.code : void 0
+    };
+    if (logger) {
+      logger.debug({
+        ns,
+        ...errMessage,
+        stack: err instanceof Error ? err.stack : void 0
+      });
+    }
+    void useNotificationHandler().notify({
+      title: "Error",
+      ...errMessage,
+      options: ["Ok"],
+      cancellable: "Ok",
+      timeout: true
+    });
+  }
+  return err;
+}