@securancy/file-explorer 1.0.5 → 1.1.0

package/dist/components/FileExplorer.svelte

@@ -1,14 +1,16 @@
-<script context="module"></script>
+<script context="module">export {};
+</script>
 
-<script>import { createEventDispatcher, tick } from "svelte";
-import FileExplorerBreadcrumb from "./FileExplorerBreadcrumb.svelte";
-import FileExplorerDisplayModeSwitcher from "./FileExplorerDisplayModeSwitcher.svelte";
-import { defaultTranslations, FileExplorerDisplayMode } from "../index.js";
-import FileExplorerCreateDirectory from "./FileExplorerCreateDirectory.svelte";
-import { Button, Modal } from "@securancy/svelte-components";
-import FileExplorerDirectory from "./FileExplorerDirectory.svelte";
-import { Icon } from "@securancy/svelte-components";
-import { fade } from "svelte/transition";
+<script>import { createEventDispatcher, tick } from 'svelte';
+import FileExplorerBreadcrumb from './FileExplorerBreadcrumb.svelte';
+import FileExplorerDisplayModeSwitcher from './FileExplorerDisplayModeSwitcher.svelte';
+import { defaultTranslations, FileExplorerDisplayMode } from '../index.js';
+import FileExplorerCreateDirectory from './FileExplorerCreateDirectory.svelte';
+import { Button, Modal } from '@securancy/svelte-components';
+import FileExplorerDirectory from './FileExplorerDirectory.svelte';
+import { Icon } from '@securancy/svelte-components';
+import { fade } from 'svelte/transition';
+import { pathsEqual } from '../utilities';
 export let displayMode = FileExplorerDisplayMode.Columns;
 export let filePath;
 export let documents;
@@ -17,128 +19,146 @@ export let routePrefix;
 export let canEdit;
 export let translations = defaultTranslations;
 export let getFilePreview;
-export let createDirectory = void 0;
-export let uploadFiles = void 0;
-export let deleteFile = void 0;
+// When provided, it will use the default implementation for creating directories, otherwise it will dispatch an event
+export let createDirectory = undefined;
+// When provided, it will use the default implementation for uploading files, otherwise it will dispatch an event
+export let uploadFiles = undefined;
+// When provided, it will use the default implementation for deleting files, otherwise it will dispatch an event
+export let deleteFile = undefined;
 const dispatch = createEventDispatcher();
 const scrollBackButtonThreshold = 200;
 let fileExplorerContentContainer;
 let showScrollBackButton = false;
+// Create directory state
 let createDirectoryPath;
 let createDirectoryModalOpen = false;
+// Delete item state
 let deleteFileModalOpen = false;
 let deleteFileEvent;
 let deleting = false;
 let overrideFilesModalOpen = false;
 let overrideFiles = [];
 let uploadFilesRequest;
-$: if (filePath) tick().then(() => scrollToRight());
+// If the route changes, always scroll to the right to show the new column
+$: if (filePath)
+    tick().then(() => scrollToRight());
 async function scrollToRight() {
-  if (!fileExplorerContentContainer) return;
-  fileExplorerContentContainer.scroll({
-    left: fileExplorerContentContainer.scrollWidth,
-    behavior: "smooth"
-  });
+    if (!fileExplorerContentContainer)
+        return;
+    fileExplorerContentContainer.scroll({
+        left: fileExplorerContentContainer.scrollWidth,
+        behavior: 'smooth',
+    });
 }
 function handleScroll() {
-  showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
+    showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
 }
 function handleScrollBack() {
-  fileExplorerContentContainer.scroll({
-    left: 0,
-    behavior: "smooth"
-  });
+    fileExplorerContentContainer.scroll({
+        left: 0,
+        behavior: 'smooth',
+    });
 }
 async function handleUploadFile(event) {
-  if (uploadFiles) {
-    if (event.detail.files) {
-      await uploadFilesInternal({
-        path: event.detail.path,
-        files: event.detail.files
-      });
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.multiple = true;
-      input.click();
-      input.addEventListener("change", async () => {
-        if (input.files) {
-          await uploadFilesInternal({
-            path: event.detail.path,
-            files: input.files
-          });
+    // When the uploadFiles function is set, use the default implementation
+    if (uploadFiles) {
+        // If the user has dropped files, upload them
+        if (event.detail.files) {
+            await uploadFilesInternal({
+                path: event.detail.path,
+                files: event.detail.files,
+            });
+        }
+        else {
+            // When the user has not dropped files, allow the user to select files from their filesystem
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.click();
+            input.addEventListener('change', async () => {
+                if (input.files) {
+                    await uploadFilesInternal({
+                        path: event.detail.path,
+                        files: input.files,
+                    });
+                }
+            });
         }
-      });
     }
-  } else {
-    dispatch("upload-file", event.detail);
-  }
+    else {
+        // Otherwise, dispatch an event
+        dispatch('upload-file', event.detail);
+    }
 }
 async function uploadFilesInternal(request) {
-  const filesInDirectory = Array.from(flattenedFiles($documents)).filter((x) => x.path === request.path);
-  const existingFiles = Array.from(request.files).filter((file) => filesInDirectory.some((document2) => document2.name === file.name));
-  if (existingFiles.length > 0) {
-    overrideFiles = existingFiles;
-    overrideFilesModalOpen = true;
-    uploadFilesRequest = request;
-  } else {
-    await uploadFiles(request);
-    documents.refresh();
-  }
+    const filesInDirectory = Array.from(flattenedFiles($documents)).filter(x => pathsEqual(x.path, request.path));
+    const existingFiles = Array.from(request.files).filter(file => filesInDirectory.some(document => document.name === file.name));
+    if (existingFiles.length > 0) {
+        overrideFiles = existingFiles;
+        overrideFilesModalOpen = true;
+        uploadFilesRequest = request;
+    }
+    else {
+        await uploadFiles(request);
+        documents.refresh();
+    }
 }
 async function confirmOverrideFiles() {
-  await uploadFiles(uploadFilesRequest);
-  documents.refresh();
-  overrideFilesModalOpen = false;
-  overrideFiles = [];
-  uploadFilesRequest = void 0;
+    await uploadFiles(uploadFilesRequest);
+    documents.refresh();
+    overrideFilesModalOpen = false;
+    overrideFiles = [];
+    uploadFilesRequest = undefined;
 }
 async function cancelOverrideFiles() {
-  overrideFilesModalOpen = false;
-  overrideFiles = [];
-  uploadFilesRequest = void 0;
+    overrideFilesModalOpen = false;
+    overrideFiles = [];
+    uploadFilesRequest = undefined;
 }
 function handleCreateDirectory(event) {
-  if (createDirectory) {
-    createDirectoryPath = event.detail.path;
-    setTimeout(() => createDirectoryModalOpen = true);
-  } else {
-    dispatch("create-directory", event.detail);
-  }
+    if (createDirectory) {
+        createDirectoryPath = event.detail.path;
+        // To avoid closing the modal immediately
+        setTimeout(() => createDirectoryModalOpen = true);
+    }
+    else {
+        dispatch('create-directory', event.detail);
+    }
 }
 function handleDeleteFile(event) {
-  if (deleteFile) {
-    deleteFileEvent = event.detail;
-    deleteFileModalOpen = true;
-  } else {
-    dispatch("delete-file", event.detail);
-  }
+    if (deleteFile) {
+        deleteFileEvent = event.detail;
+        deleteFileModalOpen = true;
+    }
+    else {
+        dispatch('delete-file', event.detail);
+    }
 }
 function deleteFileInternal() {
-  if (deleteFile && deleteFileEvent) {
-    deleting = true;
-    deleteFile({
-      type: "file",
-      ...deleteFileEvent
-    }).then(() => {
-      documents.refresh();
-      deleteFileModalOpen = false;
-    }).catch((error) => {
-      console.error("Failed to delete item.", error);
-    }).finally(() => {
-      deleting = false;
-      deleteFileModalOpen = false;
-    });
-  }
+    if (deleteFile && deleteFileEvent) {
+        deleting = true;
+        deleteFile({
+            type: 'file',
+            ...deleteFileEvent,
+        }).then(() => {
+            documents.refresh();
+            deleteFileModalOpen = false;
+        }).catch((error) => {
+            console.error('Failed to delete item.', error);
+        }).finally(() => {
+            deleting = false;
+            deleteFileModalOpen = false;
+        });
+    }
 }
-function* flattenedFiles(documents2) {
-  for (const document2 of documents2) {
-    if (document2.type === "file") {
-      yield document2;
-      continue;
+function* flattenedFiles(documents) {
+    for (const document of documents) {
+        if (document.type === 'file') {
+            yield document;
+            continue;
+        }
+        yield* flattenedFiles(document.children);
     }
-    yield* flattenedFiles(document2.children);
-  }
 }
 </script>
 
@@ -244,7 +264,7 @@ function* flattenedFiles(documents2) {
       {translations.overrideFilesConfirmation}
     </div>
     <div class="file-explorer__text file-explorer__text--semi-bold">
-      {overrideFiles.map((file) => file.name).join(', ')}
+      {overrideFiles.map(file => file.name).join(', ')}
     </div>
     <svelte:fragment slot="footer">
       <Button
@@ -261,8 +281,7 @@ function* flattenedFiles(documents2) {
   </Modal>
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -322,7 +341,7 @@ function* flattenedFiles(documents2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -369,7 +388,7 @@ function* flattenedFiles(documents2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -517,5 +536,4 @@ function* flattenedFiles(documents2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorer.svelte.d.ts

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-export type UploadFileEvent = {
+import { SvelteComponentTyped } from "svelte";
+export interface UploadFileEvent {
     path: string;
     files?: FileList;
-};
-export type CreateDirectoryEvent = {
+}
+export interface CreateDirectoryEvent {
     path: string;
-};
-export type DeleteFileEvent = {
+}
+export interface DeleteFileEvent {
     path: string;
     name: string;
-};
+}
 import type { Refreshable } from '@securancy/svelte-utilities';
 import { type CreateDirectoryRequest, FileExplorerDisplayMode, type FileItem, type FilePreview, type FileSystemItem, type UploadFilesRequest } from '../index.js';
 declare const __propDef: {
@@ -65,12 +65,10 @@ declare const __propDef: {
     slots: {
         search: {};
     };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerProps = typeof __propDef.props;
 export type FileExplorerEvents = typeof __propDef.events;
 export type FileExplorerSlots = typeof __propDef.slots;
-export default class FileExplorer extends SvelteComponent<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
+export default class FileExplorer extends SvelteComponentTyped<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
 }
 export {};

package/dist/components/FileExplorerBreadcrumb.svelte

@@ -1,13 +1,16 @@
-<script>import { Icon } from "@securancy/svelte-components";
+<script>import { Icon } from '@securancy/svelte-components';
 export let filePath;
 export let routePrefix;
-$: parts = filePath.split("/");
-function getHref(parts2, index, routePrefix2) {
-  const href = [
-    ...routePrefix2.split("/"),
-    ...parts2.slice(0, index + 1)
-  ].filter((node) => node !== "").map(encodeURIComponent).join("/");
-  return "/" + href;
+$: parts = filePath.split('/');
+function getHref(parts, index, routePrefix) {
+    const href = [
+        ...routePrefix.split('/'),
+        ...parts.slice(0, index + 1),
+    ]
+        .filter(node => node !== '')
+        .map(encodeURIComponent)
+        .join('/');
+    return '/' + href;
 }
 </script>
 
@@ -23,8 +26,7 @@ function getHref(parts2, index, routePrefix2) {
   {/each}
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -84,7 +86,7 @@ function getHref(parts2, index, routePrefix2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -131,7 +133,7 @@ function getHref(parts2, index, routePrefix2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -279,5 +281,4 @@ function getHref(parts2, index, routePrefix2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerBreadcrumb.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         filePath: string;
@@ -8,12 +8,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerBreadcrumbProps = typeof __propDef.props;
 export type FileExplorerBreadcrumbEvents = typeof __propDef.events;
 export type FileExplorerBreadcrumbSlots = typeof __propDef.slots;
-export default class FileExplorerBreadcrumb extends SvelteComponent<FileExplorerBreadcrumbProps, FileExplorerBreadcrumbEvents, FileExplorerBreadcrumbSlots> {
+export default class FileExplorerBreadcrumb extends SvelteComponentTyped<FileExplorerBreadcrumbProps, FileExplorerBreadcrumbEvents, FileExplorerBreadcrumbSlots> {
 }
 export {};

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -1,33 +1,36 @@
-<script>import { Button, FormElement, Modal } from "@securancy/svelte-components";
+<script>import { Button, FormElement, Modal } from '@securancy/svelte-components';
 export let createDirectoryPath;
 export let createDirectoryModalOpen = false;
 export let documents;
 export let createDirectory;
 export let translations;
-let request = { path: "", name: "" };
+let request = { path: '', name: '' };
 let submitting = false;
-let input = void 0;
+let input = undefined;
 $: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
-$: directoryAlreadyExists = existingFoldersInPath.some((x) => x.name === request.name);
-$: request.path = createDirectoryPath ?? "";
-$: if (input) input.focus();
+$: directoryAlreadyExists = existingFoldersInPath.some(x => x.name === request.name);
+$: request.path = createDirectoryPath ?? '';
+// Clear inputs when modal is opened
+$: if (input)
+    input.focus();
 async function submitFiles() {
-  submitting = true;
-  await createDirectory(request).then(() => {
-    createDirectoryModalOpen = false;
-  }).finally(() => {
-    submitting = false;
-  });
-  documents.refresh();
+    submitting = true;
+    await createDirectory(request)
+        .then(() => {
+        createDirectoryModalOpen = false;
+    }).finally(() => {
+        submitting = false;
+    });
+    documents.refresh();
 }
-function getExistingFoldersInPath(path, documents2) {
-  const pathParts = path ? path.split("/") : [];
-  let existingFoldersInPath2 = documents2.filter((x) => x.type === "directory");
-  for (const pathPart of pathParts) {
-    const currentFolder = existingFoldersInPath2.find((document) => document.name === pathPart);
-    existingFoldersInPath2 = currentFolder ? currentFolder.children.filter((x) => x.type === "directory") : [];
-  }
-  return existingFoldersInPath2;
+function getExistingFoldersInPath(path, documents) {
+    const pathParts = path ? path.split('/') : [];
+    let existingFoldersInPath = documents.filter(x => x.type === 'directory');
+    for (const pathPart of pathParts) {
+        const currentFolder = existingFoldersInPath.find(document => document.name === pathPart);
+        existingFoldersInPath = currentFolder ? currentFolder.children.filter(x => x.type === 'directory') : [];
+    }
+    return existingFoldersInPath;
 }
 </script>
 
@@ -87,5 +90,4 @@ function getExistingFoldersInPath(path, documents2) {
       border: 1px solid var(--file-explorer-create-directory-border);
       border-radius: var(--file-explorer-create-directory-border-radius);
       padding: 10px;
-    }
-</style>
+    }</style>

package/dist/components/FileExplorerCreateDirectory.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { Refreshable } from '@securancy/svelte-utilities';
 import type { CreateDirectoryRequest, DocumentTranslations, FileSystemItem } from '../models/index.js';
 declare const __propDef: {
@@ -13,12 +13,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerCreateDirectoryProps = typeof __propDef.props;
 export type FileExplorerCreateDirectoryEvents = typeof __propDef.events;
 export type FileExplorerCreateDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerCreateDirectory extends SvelteComponent<FileExplorerCreateDirectoryProps, FileExplorerCreateDirectoryEvents, FileExplorerCreateDirectorySlots> {
+export default class FileExplorerCreateDirectory extends SvelteComponentTyped<FileExplorerCreateDirectoryProps, FileExplorerCreateDirectoryEvents, FileExplorerCreateDirectorySlots> {
 }
 export {};

package/dist/components/FileExplorerDirectory.svelte

@@ -1,7 +1,7 @@
-<script>import {} from "..";
-import FileExplorerDirectoryColumn from "./FileExplorerDirectoryColumn.svelte";
-import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
-import FileExplorerDirectoryIndex from "./FileExplorerDirectoryIndex.svelte";
+<script>import {} from '..';
+import FileExplorerDirectoryColumn from './FileExplorerDirectoryColumn.svelte';
+import FileExplorerFileDetailColumn from './FileExplorerFileDetailColumn.svelte';
+import FileExplorerDirectoryIndex from './FileExplorerDirectoryIndex.svelte';
 export let item;
 export let translations;
 export let routePrefix;
@@ -9,16 +9,16 @@ export let currentPath;
 export let canEdit;
 export let displayMode;
 export let getFilePreview;
-$: currentPathParts = currentPath.split("/");
+$: currentPathParts = currentPath.split('/');
 $: activeFileItem = item.children.find((fileItem) => {
-  const parts = [
-    ...fileItem.path.split("/").filter((part) => part !== ""),
-    fileItem.name
-  ];
-  return parts.every((part, index) => currentPathParts[index] === part);
+    const parts = [
+        ...fileItem.path.split('/').filter(part => part !== ''),
+        fileItem.name,
+    ];
+    return parts.every((part, index) => currentPathParts[index] === part);
 });
-function canEditItem(item2, canEdit2) {
-  return typeof canEdit2 === "function" ? canEdit2(item2) : canEdit2 === true;
+function canEditItem(item, canEdit) {
+    return typeof canEdit === 'function' ? canEdit(item) : canEdit === true;
 }
 </script>
 
@@ -69,8 +69,7 @@ function canEditItem(item2, canEdit2) {
     />
   {/if}
 {/if}
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -130,7 +129,7 @@ function canEditItem(item2, canEdit2) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -177,7 +176,7 @@ function canEditItem(item2, canEdit2) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -325,5 +324,4 @@ function canEditItem(item2, canEdit2) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerDirectory.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { FileExplorerDisplayMode, FileSystemItem } from '..';
 import { type DirectoryItem, type DocumentTranslations, type FileItem, type FilePreview } from '..';
 declare const __propDef: {
@@ -19,12 +19,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDirectoryProps = typeof __propDef.props;
 export type FileExplorerDirectoryEvents = typeof __propDef.events;
 export type FileExplorerDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerDirectory extends SvelteComponent<FileExplorerDirectoryProps, FileExplorerDirectoryEvents, FileExplorerDirectorySlots> {
+export default class FileExplorerDirectory extends SvelteComponentTyped<FileExplorerDirectoryProps, FileExplorerDirectoryEvents, FileExplorerDirectorySlots> {
 }
 export {};

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -1,10 +1,10 @@
-<script>import { createEventDispatcher } from "svelte";
-import {} from "..";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, getItemHref } from "../utilities/index.js";
-import FileIcon from "./FileIcon.svelte";
-import { joinPaths } from "../utilities/index.js";
+<script>import { createEventDispatcher } from 'svelte';
+import {} from '..';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
+import { getExtension, getItemHref } from '../utilities/index.js';
+import FileIcon from './FileIcon.svelte';
+import { joinPaths } from '../utilities/index.js';
 const dispatch = createEventDispatcher();
 export let item;
 export let sticky = false;
@@ -12,42 +12,42 @@ export let routePrefix;
 export let canEdit;
 export let translations;
 export let activeFileItem;
-let dragoverIndex = 0;
+let dragoverIndex = 0; // Incremented/decremented when entering/leaving a child element of the column
 let innerWidth = 0;
 function addItem() {
-  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
+    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
+    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
 }
 function handleDragEnter(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex++;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex++;
 }
 function handleDrop(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex = 0;
-  const eventData = { path: joinPaths(item.path, item.name) };
-  if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
-    eventData.files = event.dataTransfer.files;
-  }
-  dispatch("upload-file", eventData);
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex = 0;
+    const eventData = { path: joinPaths(item.path, item.name) };
+    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+        eventData.files = event.dataTransfer.files;
+    }
+    dispatch('upload-file', eventData);
 }
 function handleDragLeave(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex--;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex--;
 }
 function handleDragEnd(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  dragoverIndex = 0;
+    event.preventDefault();
+    event.stopPropagation();
+    dragoverIndex = 0;
 }
 function handleDragOver(event) {
-  event.preventDefault();
-  event.stopPropagation();
+    event.preventDefault();
+    event.stopPropagation();
 }
 </script>
 
@@ -115,8 +115,7 @@ function handleDragOver(event) {
   </div>
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -176,7 +175,7 @@ function handleDragOver(event) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -223,7 +222,7 @@ function handleDragOver(event) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -371,5 +370,4 @@ function handleDragOver(event) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerDirectoryColumn.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { UploadFileEvent } from './FileExplorer.svelte';
 import { type DirectoryItem, type DocumentTranslations, type FileSystemItem } from '..';
 import type { CreateDirectoryEvent } from './FileExplorer.svelte';
@@ -12,19 +12,17 @@ declare const __propDef: {
         activeFileItem: FileSystemItem | undefined;
     };
     events: {
-        'scroll-back': CustomEvent<void>;
+        'scroll-back': CustomEvent<undefined>;
         'upload-file': CustomEvent<UploadFileEvent>;
         'create-directory': CustomEvent<CreateDirectoryEvent>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDirectoryColumnProps = typeof __propDef.props;
 export type FileExplorerDirectoryColumnEvents = typeof __propDef.events;
 export type FileExplorerDirectoryColumnSlots = typeof __propDef.slots;
-export default class FileExplorerDirectoryColumn extends SvelteComponent<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
+export default class FileExplorerDirectoryColumn extends SvelteComponentTyped<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
 }
 export {};

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -1,8 +1,8 @@
-<script>import FileIcon from "./FileIcon.svelte";
-import { createEventDispatcher } from "svelte";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, getItemHref, joinPaths } from "../utilities/index.js";
+<script>import FileIcon from './FileIcon.svelte';
+import { createEventDispatcher } from 'svelte';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
+import { getExtension, getItemHref, joinPaths } from '../utilities/index.js';
 const dispatch = createEventDispatcher();
 export let item;
 export let routePrefix;
@@ -11,10 +11,10 @@ export let canEdit;
 export let activeFileItem;
 let innerWidth = 0;
 function addItem() {
-  dispatch("upload-file", { path: joinPaths(item.path, item.name) });
+    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-  dispatch("create-directory", { path: joinPaths(item.path, item.name) });
+    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
 }
 </script>
 
@@ -74,8 +74,7 @@ function createDirectory() {
   </div>
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -135,7 +134,7 @@ function createDirectory() {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -182,7 +181,7 @@ function createDirectory() {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -330,5 +329,4 @@ function createDirectory() {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerDirectoryIndex.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { DirectoryItem, DocumentTranslations, FileSystemItem } from '../index.js';
 import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
 declare const __propDef: {
@@ -16,12 +16,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDirectoryIndexProps = typeof __propDef.props;
 export type FileExplorerDirectoryIndexEvents = typeof __propDef.events;
 export type FileExplorerDirectoryIndexSlots = typeof __propDef.slots;
-export default class FileExplorerDirectoryIndex extends SvelteComponent<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
+export default class FileExplorerDirectoryIndex extends SvelteComponentTyped<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
 }
 export {};

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -1,11 +1,11 @@
-<script>import { FileExplorerDisplayMode } from "../index.js";
-import { Icon } from "@securancy/svelte-components";
+<script>import { FileExplorerDisplayMode } from '../index.js';
+import { Icon } from '@securancy/svelte-components';
 export let displayMode;
 export let translations;
 let modes = Object.values(FileExplorerDisplayMode);
 const modeIcons = {
-  columns: "fa-columns-3",
-  index: "fa-grid"
+    columns: 'fa-columns-3',
+    index: 'fa-grid',
 };
 </script>
 
@@ -25,8 +25,7 @@ const modeIcons = {
   {/each}
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -86,7 +85,7 @@ const modeIcons = {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -133,7 +132,7 @@ const modeIcons = {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -296,5 +295,4 @@ input[type="radio"] {
   }
 input[type="radio"]:checked + :global(i) {
       color: var(--file-explorer-action-primary-color);
-    }
-</style>
+    }</style>

package/dist/components/FileExplorerDisplayModeSwitcher.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import { type DocumentTranslations, FileExplorerDisplayMode } from '../index.js';
 declare const __propDef: {
     props: {
@@ -9,12 +9,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerDisplayModeSwitcherProps = typeof __propDef.props;
 export type FileExplorerDisplayModeSwitcherEvents = typeof __propDef.events;
 export type FileExplorerDisplayModeSwitcherSlots = typeof __propDef.slots;
-export default class FileExplorerDisplayModeSwitcher extends SvelteComponent<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
+export default class FileExplorerDisplayModeSwitcher extends SvelteComponentTyped<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
 }
 export {};

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -1,24 +1,25 @@
-<script>import { Card, Icon } from "@securancy/svelte-components";
-import FileIcon from "./FileIcon.svelte";
-import { resize, ResizeDirections } from "@securancy/svelte-utilities";
-import { formatBytes, getExtension, isImage } from "../utilities/index.js";
-import { DateTime } from "luxon";
-import { createEventDispatcher } from "svelte";
+<script>import { Card, Icon } from '@securancy/svelte-components';
+import FileIcon from './FileIcon.svelte';
+import { resize, ResizeDirections } from '@securancy/svelte-utilities';
+import { formatBytes, getExtension, isImage } from '../utilities/index.js';
+import { DateTime } from 'luxon';
+import { createEventDispatcher } from 'svelte';
 export let fileItem;
 export let getFilePreview;
 export let translations;
 export let canEdit;
 const dispatch = createEventDispatcher();
-const fileDateFormat = "cccc FF";
+const fileDateFormat = 'cccc FF';
 let filePreview;
 let extension;
 $: refresh(fileItem);
 async function refresh(_fileItem) {
-  filePreview = await getFilePreview(_fileItem).catch((error) => {
-    console.error(error);
-    return void 0;
-  });
-  extension = getExtension(_fileItem.name);
+    filePreview = await getFilePreview(_fileItem)
+        .catch((error) => {
+        console.error(error);
+        return undefined;
+    });
+    extension = getExtension(_fileItem.name);
 }
 </script>
 
@@ -86,8 +87,7 @@ async function refresh(_fileItem) {
   </div>
 </div>
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -147,7 +147,7 @@ async function refresh(_fileItem) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -194,7 +194,7 @@ async function refresh(_fileItem) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -342,5 +342,4 @@ async function refresh(_fileItem) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileExplorerFileDetailColumn.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { DocumentTranslations, FileItem, FilePreview } from '..';
 import type { DeleteFileEvent } from './FileExplorer.svelte';
 declare const __propDef: {
@@ -14,12 +14,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileExplorerFileDetailColumnProps = typeof __propDef.props;
 export type FileExplorerFileDetailColumnEvents = typeof __propDef.events;
 export type FileExplorerFileDetailColumnSlots = typeof __propDef.slots;
-export default class FileExplorerFileDetailColumn extends SvelteComponent<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
+export default class FileExplorerFileDetailColumn extends SvelteComponentTyped<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
 }
 export {};

package/dist/components/FileIcon.svelte

@@ -1,43 +1,45 @@
-<script>import { Icon } from "@securancy/svelte-components";
-import { imageExtensions, videoExtensions } from "../utilities/index.js";
+<script>import { Icon } from '@securancy/svelte-components';
+import { imageExtensions, videoExtensions } from '../utilities/index.js';
 export let extension;
-export let size = "default";
+export let size = 'default';
 let iconClass;
 $: iconClass = determineIconString(extension);
 function determineIconString(_extension) {
-  if (imageExtensions.includes(_extension)) return "fa-file-image";
-  if (videoExtensions.includes(_extension)) return "fa-file-video";
-  switch (_extension) {
-    case "pdf": {
-      return "fa-file-pdf";
+    if (imageExtensions.includes(_extension))
+        return 'fa-file-image';
+    if (videoExtensions.includes(_extension))
+        return 'fa-file-video';
+    switch (_extension) {
+        case 'pdf': {
+            return 'fa-file-pdf';
+        }
+        case 'doc':
+        case 'docx': {
+            return 'fa-file-word';
+        }
+        case 'xls':
+        case 'xlsx': {
+            return 'fa-file-spreadsheet';
+        }
+        case 'ppt':
+        case 'pptx': {
+            return 'fa-file-powerpoint';
+        }
+        case 'csv': {
+            return 'fa-file-csv';
+        }
+        case 'txt': {
+            return 'fa-file-lines';
+        }
+        case 'zip':
+        case 'tar':
+        case 'rar': {
+            return 'fa-file-zipper';
+        }
+        default: {
+            return 'fa-file';
+        }
     }
-    case "doc":
-    case "docx": {
-      return "fa-file-word";
-    }
-    case "xls":
-    case "xlsx": {
-      return "fa-file-spreadsheet";
-    }
-    case "ppt":
-    case "pptx": {
-      return "fa-file-powerpoint";
-    }
-    case "csv": {
-      return "fa-file-csv";
-    }
-    case "txt": {
-      return "fa-file-lines";
-    }
-    case "zip":
-    case "tar":
-    case "rar": {
-      return "fa-file-zipper";
-    }
-    default: {
-      return "fa-file";
-    }
-  }
 }
 </script>
 
@@ -53,8 +55,7 @@ function determineIconString(_extension) {
   {/if}
 {/if}
 
-<style>/* eslint-disable */
-/**
+<style>/**
  * Media queries and devices
  */
 /**
@@ -114,7 +115,7 @@ function determineIconString(_extension) {
       z-index: 1;
     }
 .file-explorer__column::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -161,7 +162,7 @@ function determineIconString(_extension) {
     margin-left: auto;
   }
 .file-explorer__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 .file-explorer__list {
     margin-bottom: var(--file-explorer-default-spacing);
@@ -309,5 +310,4 @@ function determineIconString(_extension) {
     min-height: 50px;
     height: 100%;
     font-size: 25px;
-  }
-</style>
+  }</style>

package/dist/components/FileIcon.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         extension: string;
@@ -8,12 +8,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FileIconProps = typeof __propDef.props;
 export type FileIconEvents = typeof __propDef.events;
 export type FileIconSlots = typeof __propDef.slots;
-export default class FileIcon extends SvelteComponent<FileIconProps, FileIconEvents, FileIconSlots> {
+export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
 }
 export {};

package/dist/file-explorer.pcss

@@ -1,4 +1,3 @@
-/* eslint-disable */
 @import url("@securancy/svelte-components/styles/custom-media.pcss");
 
 .file-explorer {
@@ -64,7 +63,7 @@
     }
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
@@ -121,7 +120,7 @@
   }
 
   &__search {
-    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0 calc(var(--file-explorer-default-spacing) * 0.5);
+    padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
   }
 
   &__list {

package/dist/models/file-item.d.ts

@@ -1,8 +1,8 @@
 export type FileSystemItem = FileItem | DirectoryItem;
-type FileSystemItemProperties = {
+interface FileSystemItemProperties {
     name: string;
     path: string;
-};
+}
 export type FileItem = {
     type: 'file';
 } & FileSystemItemProperties;

package/dist/utilities/file-utilities.d.ts

@@ -5,5 +5,5 @@ export declare const imageExtensions: string[];
 export declare const videoExtensions: string[];
 export declare function isImage(path: string): boolean;
 export declare function formatBytes(bytes: number, decimals?: number): string;
-export declare function formatBytesParts(bytes: number, decimals?: number): [number, string];
 export declare function joinPaths(...paths: string[]): string;
+export declare function pathsEqual(path1: string, path2: string): boolean;

package/dist/utilities/file-utilities.js

@@ -4,7 +4,7 @@ export function getItemHref(item, routePrefix) {
         ...item.path.split('/'),
         item.name,
     ]
-        .filter((node) => node !== '')
+        .filter(node => node !== '')
         .map(encodeURIComponent)
         .join('/');
     return itemPath.startsWith('/') ? itemPath : `/${itemPath}`;
@@ -37,17 +37,23 @@ export function formatBytes(bytes, decimals = 2) {
     const values = formatBytesParts(bytes, decimals);
     return `${values[0]} ${values[1]}`;
 }
-export function formatBytesParts(bytes, decimals = 2) {
+function formatBytesParts(bytes, decimals = 2) {
     if (bytes === 0)
         return [0, 'Bytes'];
     const k = 1000;
-    const dm = decimals < 0 ? 0 : decimals;
+    const dm = Math.max(decimals, 0);
     const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
     const index = Math.floor(Math.log(bytes) / Math.log(k));
     return [Number.parseFloat((bytes / Math.pow(k, index)).toFixed(dm)), sizes[index]];
 }
 export function joinPaths(...paths) {
-    return '/' + paths
-        .map((path) => path.split('/').filter((part) => part !== '').join('/'))
+    return paths
+        .map(path => path.split('/').filter(part => part !== '').join('/'))
+        .filter(path => path !== '')
         .join('/');
 }
+export function pathsEqual(path1, path2) {
+    const path1Parts = path1.split('/').filter(part => part !== '');
+    const path2Parts = path2.split('/').filter(part => part !== '');
+    return path1Parts.length === path2Parts.length && path1Parts.every((part, index) => part === path2Parts[index]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -19,40 +19,32 @@
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@faker-js/faker": "^8.4.1",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@faker-js/faker": "^9.0.3",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/luxon": "^3.4.2",
-    "autoprefixer": "^10.4.19",
-    "esm-env": "^1.0.0",
-    "fast-cartesian": "^9.0.0",
-    "luxon": "^3.4.4",
-    "postcss": "^8.4.39",
-    "postcss-custom-media": "^10.0.8",
+    "autoprefixer": "^10.4.20",
+    "luxon": "^3.5.0",
+    "postcss": "^8.4.47",
+    "postcss-custom-media": "^11.0.3",
     "postcss-each": "^1.1.0",
     "postcss-easy-import": "^4.0.0",
     "postcss-extend": "^1.0.5",
     "postcss-for": "^2.1.1",
-    "postcss-mixins": "^10.0.1",
+    "postcss-mixins": "^11.0.3",
     "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
-    "publint": "^0.2.9",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.4",
-    "the-new-css-reset": "^1.11.2",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4",
-    "zod": "^3.23.8",
-    "@securancy/eslint-config": "0.2.1",
-    "@securancy/svelte-components": "4.3.1",
-    "@securancy/stylelint-config": "0.1.2",
-    "@securancy/svelte-utilities": "2.0.2"
-  },
-  "peerDependencies": {
-    "svelte": "^4.2.18"
+    "publint": "^0.2.11",
+    "svelte": "^4.2.19",
+    "svelte-check": "^4.0.5",
+    "svelte-preprocess": "^6.0.3",
+    "the-new-css-reset": "^1.11.3",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "@securancy/svelte-components": "4.5.0",
+    "@securancy/svelte-utilities": "2.2.0"
   },
   "scripts": {
     "dev": "vite dev",
@@ -62,10 +54,6 @@
     "preview": "vite preview",
     "package": "svelte-package && publint",
     "package-watch": "svelte-package -w",
-    "lint": "eslint \"./**/*.*{ts,js,svelte,json}\" --config ../../.eslintrc.json --ignore-path ../../.eslintignore",
-    "lint-fix": "npm run lint -- --fix",
-    "stylelint": "stylelint \"src/**/*.{pcss,svelte,css}\" --config ../../.stylelintrc.json",
-    "stylelint-fix": "npm run stylelint -- --fix",
     "svelte-check": "svelte-check --fail-on-warnings --compiler-warnings \"css-unused-selector:ignore\""
   }
 }