@cloudron/pankow 4.3.2 → 4.3.4

package/components/SaveIndicator.vue

@@ -0,0 +1,92 @@
+<script setup>
+
+import { ref } from 'vue';
+import { Icon } from '@cloudron/pankow';
+
+function useSaveIndicator() {
+  const visible = ref(false);
+  const success = ref(false);
+  const TIMEOUT = 1500;
+  let timeoutId;
+
+  function flash(state) {
+    clearTimeout(timeoutId);
+
+    success.value = state;
+
+    if (visible.value) {
+      visible.value = false;
+      setTimeout(() => visible.value = true, 0);
+    } else {
+      visible.value = true;
+    }
+
+    timeoutId = setTimeout(() => {
+      visible.value = false;
+    }, TIMEOUT);
+  }
+
+  function showSuccess() { flash(true); }
+  function showError() { flash(false); }
+
+  return { visible, success, showSuccess, showError };
+}
+
+const { visible, success, showSuccess, showError } = useSaveIndicator();
+
+defineExpose({ success: showSuccess, error: showError });
+
+</script>
+
+<template>
+  <div class="pankow-save-indicator-wrapper">
+    <slot />
+    <Transition name="pankow-save-indicator-bounce">
+      <div class="pankow-save-indicator" v-if="visible" :class="{ success: success, error: !success }"><Icon :icon="success ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/></div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+
+.pankow-save-indicator-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.pankow-save-indicator {
+  position: absolute;
+  right: -2em;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pankow-save-indicator.success {
+  color: var(--pankow-color-success);
+}
+
+.pankow-save-indicator.error {
+  color: var(--pankow-color-danger);
+}
+
+.pankow-save-indicator-bounce-enter-active {
+  animation: pankow-save-indicator-bounce-in 0.5s;
+}
+
+.pankow-save-indicator-bounce-leave-active {
+  animation: pankow-save-indicator-bounce-in 0.5s reverse;
+}
+
+@keyframes pankow-save-indicator-bounce-in {
+  0% {
+    transform: translateY(-50%) scale(0);
+  }
+  50% {
+    transform: translateY(-50%) scale(1.5);
+  }
+  100% {
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+</style>

package/components/SectionItem.vue

@@ -29,6 +29,7 @@ onUnmounted(() => {
   <div class="pankow-section-item">
     <h2 class="pankow-section-item-header">
       <div>
+        <slot name="header-buttons-left"></slot>
         <div class="pankow-section-item-header-title-text">
           <slot name="header-title">{{ title }}</slot>
           <slot name="header-title-extra"></slot>

package/index.js

@@ -38,6 +38,7 @@ import PasswordInput from './components/PasswordInput.vue';
 import Popover from './components/Popover.vue';
 import ProgressBar from './components/ProgressBar.vue';
 import RadioButton from './components/RadioButton.vue';
+import SaveIndicator from './components/SaveIndicator.vue';
 import SectionItem from './components/SectionItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
@@ -91,6 +92,7 @@ export {
     Popover,
     ProgressBar,
     RadioButton,
+    SaveIndicator,
     SectionItem,
     SideBar,
     SplitLayout,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.3.2",
+  "version": "4.3.4",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -29,7 +29,7 @@
   ],
   "scripts": {
     "gallery": "cd gallery && vite",
-    "build": "cd gallery && vite build",
+    "build": "cd gallery && vite-ssg build",
     "types": "tsc --allowJs --emitDeclarationOnly --declaration index.js --outDir types --skipLibCheck",
     "prepack": "npm run types"
   },
@@ -39,7 +39,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.3.0",
-    "filesize": "^11.0.19",
+    "filesize": "^11.0.22",
     "monaco-editor": "^0.55.1",
     "online-3d-viewer": "^0.18.0"
   },
@@ -48,10 +48,12 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@vitejs/plugin-vue": "^6.0.7",
+    "@unhead/vue": "^2.1.15",
+    "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.3",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.4",
+    "vite-ssg": "^28.3.0",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0"
   }

package/plugin.js

@@ -25,7 +25,7 @@ export default {
             setNotifyPosition(options.notification.position);
         }
 
-        if (typeof document !== 'undefined') {
+        if (typeof document !== 'undefined' && !import.meta.env.SSR) {
             const existing = document.getElementById(CONTAINER_ID);
             if (existing) existing.remove();
 

package/types/fallbackImage.d.ts

@@ -1,6 +1,16 @@
-export default fallbackImage;
+/**
+ * FallbackImage Directive
+ *
+ * Usage:
+ * ```
+ * import fallbackImage from 'pankow/fallbackImage';
+ * app.directive('fallback-image', fallbackImage);
+ * // <img v-fallback-image="'/fallback.png'"/>
+ * ```
+ */
 /**
  * Vue directive for image fallback. Register via `app.directive('fallback-image', fallbackImage)`.
  * @type {import('vue').Directive}
  */
-declare const fallbackImage: import("vue").Directive;
+declare const fallbackImage: import('vue').Directive;
+export default fallbackImage;

package/types/fetcher.d.ts

@@ -1,15 +1,9 @@
-declare namespace _default {
-    export { globalOptions };
-    export { head };
-    export { get };
-    export { post };
-    export { put };
-    export { del };
-    export { del as delete };
-}
-export default _default;
 /**
  * Shared configuration for all HTTP requests.
+ * @typedef {Object} FetcherGlobalOptions
+ * @property {string} credentials - Fetch credentials mode
+ * @property {string} redirect - Fetch redirect mode
+ * @property {?function(Response|Error): void} errorHook - Called on non-2xx responses or network errors
  */
 export type FetcherGlobalOptions = {
     /**
@@ -21,15 +15,10 @@ export type FetcherGlobalOptions = {
      */
     redirect: string;
     /**
-     * - Called on non-2xx responses or network errors
+     * (Response|Error): void} errorHook - Called on non-2xx responses or network errors
      */
-    errorHook: ((arg0: Response | Error) => void) | null;
+    : Function | null;
 };
-declare namespace globalOptions {
-    let credentials: string;
-    let redirect: string;
-    let errorHook: null;
-}
 /**
  * Sends a HEAD request.
  * @param {string} uri
@@ -88,3 +77,17 @@ declare function del(uri: string, body: Object | FormData, query?: Object, optio
     status: number;
     body: any;
 }>;
+declare const _default: {
+    globalOptions: {
+        credentials: string;
+        redirect: string;
+        errorHook: null;
+    };
+    head: typeof head;
+    get: typeof get;
+    post: typeof post;
+    put: typeof put;
+    del: typeof del;
+    delete: typeof del;
+};
+export default _default;

package/types/gestures.d.ts

@@ -1,7 +1,3 @@
-declare namespace _default {
-    export { onSwipe };
-}
-export default _default;
 /**
  * Swipe handler
  *
@@ -17,4 +13,9 @@ export default _default;
  * @param {function('left'|'right'|'up'|'down'): void} callback
  * @param {number} [threshold=50] - Minimum pixel distance to trigger a swipe
  */
-export function onSwipe(elem: HTMLElement, callback: (arg0: "left" | "right" | "up" | "down") => void, threshold?: number): void;
+declare function onSwipe(elem: HTMLElement, callback: Function, threshold?: number): void;
+declare const _default: {
+    onSwipe: typeof onSwipe;
+};
+export default _default;
+export { onSwipe };

package/types/index.d.ts

@@ -1,9 +1,61 @@
-export { useNotify } from "./notifyState.js";
-export default pankowPlugin;
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import './style.css';
+import pankowPlugin from './plugin.js';
+import BottomBar from './components/BottomBar.vue';
+import BreadCrumb from './components/BreadCrumb.vue';
+import Button from './components/Button.vue';
+import ButtonGroup from './components/ButtonGroup.vue';
+import ClipboardAction from './components/ClipboardAction.vue';
+import ClipboardButton from './components/ClipboardButton.vue';
+import CheckBox from './components/CheckBox.vue';
+import DateTimeInput from './components/DateTimeInput.vue';
+import Dialog from './components/Dialog.vue';
+import DirectoryView from './components/DirectoryView.vue';
+import EmailInput from './components/EmailInput.vue';
+import FileUploader from './components/FileUploader.vue';
+import FormGroup from './components/FormGroup.vue';
+import Icon from './components/Icon.vue';
+import InputDialog from './components/InputDialog.vue';
+import ListItem from './components/ListItem.vue';
+import LoginView from './components/LoginView.vue';
+import MainLayout from './components/MainLayout.vue';
+import MaskedInput from './components/MaskedInput.vue';
+import Menu from './components/Menu.vue';
+import MenuItem from './components/MenuItem.vue';
+import SingleSelect from './components/SingleSelect.vue';
+import MultiSelect from './components/MultiSelect.vue';
+import Notification from './components/Notification.vue';
+import NumberInput from './components/NumberInput.vue';
+import OfflineBanner from './components/OfflineBanner.vue';
+import PasswordInput from './components/PasswordInput.vue';
+import Popover from './components/Popover.vue';
+import ProgressBar from './components/ProgressBar.vue';
+import RadioButton from './components/RadioButton.vue';
+import SaveIndicator from './components/SaveIndicator.vue';
+import SectionItem from './components/SectionItem.vue';
+import SideBar from './components/SideBar.vue';
+import SplitLayout from './components/SplitLayout.vue';
+import Spinner from './components/Spinner.vue';
+import Switch from './components/Switch.vue';
+import TableView from './components/TableView.vue';
+import TableViewActionBar from './components/TableViewActionBar.vue';
+import TabView from './components/TabView.vue';
+import TagInput from './components/TagInput.vue';
+import TextInput from './components/TextInput.vue';
+import TextInputRaw from './components/TextInputRaw.vue';
+import TopBar from './components/TopBar.vue';
+import TreeView from './components/TreeView.vue';
+import InputGroup from './components/InputGroup.vue';
 import fetcher from './fetcher.js';
 import gestures from './gestures.js';
+import utils from './utils.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
-import utils from './utils.js';
-import pankowPlugin from './plugin.js';
-export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils, CheckBox as Checkbox, RadioButton as Radiobutton, BreadCrumb as Breadcrumb };
+export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SaveIndicator, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils, };
+export { CheckBox as Checkbox };
+export { RadioButton as Radiobutton };
+export { BreadCrumb as Breadcrumb };
+export { useNotify } from './notifyState.js';
+export default pankowPlugin;

package/types/notifyState.d.ts

@@ -1,8 +1,9 @@
-export const messages: import("vue").Reactive<never[]>;
-export const position: import("vue").Ref<string, string>;
-export function pushNotify(options: any): void;
-export function removeNotify(id: any): void;
-export function setNotifyPosition(pos: any): void;
-export function useNotify(): {
+declare const messages: import("vue").Reactive<never[]>;
+declare const position: import("vue").Ref<string, string>;
+declare function pushNotify(options: any): void;
+declare function removeNotify(id: any): void;
+declare function useNotify(): {
     notify: typeof pushNotify;
 };
+declare function setNotifyPosition(pos: any): void;
+export { messages, position, pushNotify, removeNotify, setNotifyPosition, useNotify };

package/types/plugin.d.ts

@@ -1,4 +1,4 @@
-declare namespace _default {
-    function install(app: any, options?: {}): void;
-}
+declare const _default: {
+    install(app: any, options?: {}): void;
+};
 export default _default;

package/types/tooltip.d.ts

@@ -1,6 +1,18 @@
-export default tooltip;
+/**
+ * Tooltip Directive
+ *
+ * Usage:
+ * ```
+ * import tooltip from 'pankow/tooltip';
+ * app.directive('tooltip', tooltip);
+ * // <div v-tooltip.top="'hello'"></div>
+ * ```
+ *
+ * Position modifiers: `.top`, `.left`, `.right` (default: bottom).
+ */
 /**
  * Vue directive for tooltips. Register via `app.directive('tooltip', tooltip)`.
  * @type {import('vue').Directive}
  */
-declare const tooltip: import("vue").Directive;
+declare const tooltip: import('vue').Directive;
+export default tooltip;

package/types/utils.d.ts

@@ -1,74 +1,39 @@
-declare namespace _default {
-    export { getFileTypeGroup };
-    export { translation };
-    export { useDebouncedRef };
-    export { isValidDomain };
-    export { isValidDomainOrURL };
-    export { isValidEmail };
-    export { prettyBinarySize };
-    export { prettyDecimalSize };
-    export { prettyDate };
-    export { prettyShortDate };
-    export { prettyLongDate };
-    export { prettyFileSize };
-    export { prettyEmailAddresses };
-    export { prettyDuration };
-    export { sanitize };
-    export { pathJoin };
-    export { download };
-    export { getExtension };
-    export { copyToClipboard };
-    export { urlSearchQuery };
-    export { parseResourcePath };
-    export { getEntryIdentifier };
-    export { entryListSort };
-    export { sleep };
-    export { uuidv4 };
-}
-export default _default;
+/**
+ * Creates a debounced reactive ref that delays value updates.
+ * @see https://vuejs.org/api/reactivity-advanced.html#customref
+ * @param {any} value
+ * @param {number} [delay=300] - Debounce delay in milliseconds
+ * @returns {import('vue').Ref}
+ */
+declare function useDebouncedRef(value: any, delay?: number): import('vue').Ref;
 /**
  * Extracts the MIME type group from an item (e.g. "image" from "image/png").
  * @param {{ mimeType: string }} item
  * @returns {string}
  * @throws {string} If item has no mimeType string property
  */
-export function getFileTypeGroup(item: {
+declare function getFileTypeGroup(item: {
     mimeType: string;
 }): string;
 /**
- * Looks up a translation string by dot-separated key (e.g. "filemanager.title").
- * Falls back to the key itself if the translation is not found.
- * @param {string} id - Dot-separated translation key
- * @returns {string}
- */
-export function translation(id: string): string;
-/**
- * Creates a debounced reactive ref that delays value updates.
- * @see https://vuejs.org/api/reactivity-advanced.html#customref
- * @param {any} value
- * @param {number} [delay=300] - Debounce delay in milliseconds
- * @returns {import('vue').Ref}
- */
-export function useDebouncedRef(value: any, delay?: number): import("vue").Ref;
-/**
- * Validates whether a string is a valid domain name.
+ * Validates whether a string is a valid domain or URL (extracts hostname from URLs first).
  * @param {string} domain
  * @returns {boolean}
  */
-export function isValidDomain(domain: string): boolean;
+declare function isValidDomainOrURL(domain: string): boolean;
 /**
- * Validates whether a string is a valid domain or URL (extracts hostname from URLs first).
+ * Validates whether a string is a valid domain name.
  * @param {string} domain
  * @returns {boolean}
  */
-export function isValidDomainOrURL(domain: string): boolean;
+declare function isValidDomain(domain: string): boolean;
 /**
  * Validates whether a string is a valid email address.
  * Does not match: quoted local-parts, IP-literal domains, comments, or internationalized addresses.
  * @param {string} email
  * @returns {boolean}
  */
-export function isValidEmail(email: string): boolean;
+declare function isValidEmail(email: string): boolean;
 /**
  * Formats a byte count into human-readable IEC binary units (KiB, MiB, GiB, TiB).
  * @see https://en.wikipedia.org/wiki/Binary_prefix
@@ -76,69 +41,69 @@ export function isValidEmail(email: string): boolean;
  * @param {string|number} [fallback] - Value returned when size is falsy (0, null, undefined)
  * @returns {string|number}
  */
-export function prettyBinarySize(size: number, fallback?: string | number): string | number;
+declare function prettyBinarySize(size: number, fallback?: string | number): string | number;
 /**
  * Formats a byte count into human-readable SI decimal units (kB, MB, GB, TB).
  * @param {number} size - Byte count
  * @param {string|number} [fallback] - Value returned when size is falsy
  * @returns {string|number}
  */
-export function prettyDecimalSize(size: number, fallback?: string | number): string | number;
+declare function prettyDecimalSize(size: number, fallback?: string | number): string | number;
 /**
  * Formats a value as a human-friendly relative time offset from now (e.g. "2 days ago").
  * @param {string|number} value - Date string or timestamp; falsy returns "never"
  * @returns {string}
  */
-export function prettyDate(value: string | number): string;
-/**
- * Formats a value as a short time string (medium time style via Intl.DateTimeFormat).
- * @param {string|number} value - Date string or timestamp; falsy returns "unknown"
- * @returns {string}
- */
-export function prettyShortDate(value: string | number): string;
+declare function prettyDate(value: string | number): string;
 /**
  * Formats a date using a named format preset.
  * @param {'hh:mm A'|'hh:mm:ss A'|'DD MMM'|'DD MMM hh:mm A'} format - Preset format key
  * @param {string|number} value - Date string or timestamp
  * @returns {string}
  */
-export function formatDate(format: "hh:mm A" | "hh:mm:ss A" | "DD MMM" | "DD MMM hh:mm A", value: string | number): string;
+declare function formatDate(format: 'hh:mm A' | 'hh:mm:ss A' | 'DD MMM' | 'DD MMM hh:mm A', value: string | number): string;
+/**
+ * Formats a value as a short time string (medium time style via Intl.DateTimeFormat).
+ * @param {string|number} value - Date string or timestamp; falsy returns "unknown"
+ * @returns {string}
+ */
+declare function prettyShortDate(value: string | number): string;
 /**
  * Formats a value as a long date string (day, month, year, time).
  * @param {string|number} value - Date string or timestamp; falsy returns "unknown"
  * @returns {string}
  */
-export function prettyLongDate(value: string | number): string;
+declare function prettyLongDate(value: string | number): string;
 /**
  * Formats a numeric value as a human-readable file size string (uses the `filesize` library).
  * @param {number} value - Byte count
  * @returns {string}
  */
-export function prettyFileSize(value: number): string;
+declare function prettyFileSize(value: number): string;
 /**
  * Strips angle brackets from email address strings or arrays.
  * @param {string|string[]} addresses - Format: "<name@example.com>"; returns empty string if falsy
  * @returns {string}
  */
-export function prettyEmailAddresses(addresses: string | string[]): string;
+declare function prettyEmailAddresses(addresses: string | string[]): string;
 /**
  * Formats milliseconds as a human-readable duration string using Intl.DurationFormat.
  * @param {number} ms - Duration in milliseconds
  * @returns {string}
  */
-export function prettyDuration(ms: number): string;
+declare function prettyDuration(ms: number): string;
 /**
  * Normalizes a file path: ensures leading slash and collapses consecutive slashes.
  * @param {string} path
  * @returns {string}
  */
-export function sanitize(path: string): string;
+declare function sanitize(path: string): string;
 /**
  * Joins path segments and normalizes the result (via sanitize).
  * @param {...string} args - Path segments to join
  * @returns {string}
  */
-export function pathJoin(...args: string[]): string;
+declare function pathJoin(): string;
 /**
  * Triggers a file download via the browser. Single entry: direct download.
  * Multiple entries: zipped archive download via /api/v1/download.
@@ -146,7 +111,7 @@ export function pathJoin(...args: string[]): string;
  * @param {string} [name] - Archive name for multi-file downloads
  * @returns {void}
  */
-export function download(entries: Array<{
+declare function download(entries: Array<{
     filePath: string;
     share?: {
         id: string;
@@ -157,7 +122,7 @@ export function download(entries: Array<{
  * @param {{ isFile: boolean, fileName: string }} entry
  * @returns {string} Extension without leading dot (empty string for directories or files without extension)
  */
-export function getExtension(entry: {
+declare function getExtension(entry: {
     isFile: boolean;
     fileName: string;
 }): string;
@@ -167,21 +132,19 @@ export function getExtension(entry: {
  * @returns {void}
  * @deprecated Prefer the native `navigator.clipboard.writeText()` API.
  */
-export function copyToClipboard(value: string): void;
+declare function copyToClipboard(value: string): void;
 /**
  * Parses the current page's URL query string into a key/value object.
  * @returns {Object<string, string>}
  */
-export function urlSearchQuery(): {
-    [x: string]: string;
-};
+declare function urlSearchQuery(): Record<string, string>;
 /**
  * Parses a Cloudron resource path into its components (type, path, shareId, apiPath).
  * Handles paths like "files/folder/filename" or "shares/:shareId/folder/filename".
  * @param {string} resourcePath
  * @returns {{ type: string, path: string, shareId: string, apiPath: string, resourcePath: string }}
  */
-export function parseResourcePath(resourcePath: string): {
+declare function parseResourcePath(resourcePath: string): {
     type: string;
     path: string;
     shareId: string;
@@ -193,7 +156,7 @@ export function parseResourcePath(resourcePath: string): {
  * @param {{ share?: { id: string }, filePath: string }} entry
  * @returns {string}
  */
-export function getEntryIdentifier(entry: {
+declare function getEntryIdentifier(entry: {
     share?: {
         id: string;
     };
@@ -206,15 +169,51 @@ export function getEntryIdentifier(entry: {
  * @param {boolean} desc - If falsey, reverses the sort (descending order)
  * @returns {Array<Object>}
  */
-export function entryListSort(list: Array<Object>, prop: string, desc: boolean): Array<Object>;
+declare function entryListSort(list: Array<Object>, prop: string, desc: boolean): Array<Object>;
 /**
  * Returns a promise that resolves after the specified number of milliseconds.
  * @param {number} ms
  * @returns {Promise<void>}
  */
-export function sleep(ms: number): Promise<void>;
+declare function sleep(ms: number): Promise<void>;
+/**
+ * Looks up a translation string by dot-separated key (e.g. "filemanager.title").
+ * Falls back to the key itself if the translation is not found.
+ * @param {string} id - Dot-separated translation key
+ * @returns {string}
+ */
+declare function translation(id: string): string;
 /**
  * Generates a random UUID v4 string using crypto.getRandomValues.
  * @returns {string}
  */
-export function uuidv4(): string;
+declare function uuidv4(): string;
+export { getFileTypeGroup, translation, useDebouncedRef, isValidDomain, isValidDomainOrURL, isValidEmail, prettyBinarySize, prettyDecimalSize, prettyDate, prettyShortDate, formatDate, prettyLongDate, prettyFileSize, prettyEmailAddresses, prettyDuration, sanitize, pathJoin, download, getExtension, copyToClipboard, urlSearchQuery, parseResourcePath, getEntryIdentifier, entryListSort, sleep, uuidv4 };
+declare const _default: {
+    getFileTypeGroup: typeof getFileTypeGroup;
+    translation: typeof translation;
+    useDebouncedRef: typeof useDebouncedRef;
+    isValidDomain: typeof isValidDomain;
+    isValidDomainOrURL: typeof isValidDomainOrURL;
+    isValidEmail: typeof isValidEmail;
+    prettyBinarySize: typeof prettyBinarySize;
+    prettyDecimalSize: typeof prettyDecimalSize;
+    prettyDate: typeof prettyDate;
+    prettyShortDate: typeof prettyShortDate;
+    prettyLongDate: typeof prettyLongDate;
+    prettyFileSize: typeof prettyFileSize;
+    prettyEmailAddresses: typeof prettyEmailAddresses;
+    prettyDuration: typeof prettyDuration;
+    sanitize: typeof sanitize;
+    pathJoin: typeof pathJoin;
+    download: typeof download;
+    getExtension: typeof getExtension;
+    copyToClipboard: typeof copyToClipboard;
+    urlSearchQuery: typeof urlSearchQuery;
+    parseResourcePath: typeof parseResourcePath;
+    getEntryIdentifier: typeof getEntryIdentifier;
+    entryListSort: typeof entryListSort;
+    sleep: typeof sleep;
+    uuidv4: typeof uuidv4;
+};
+export default _default;

package/viewers/ImageViewer.vue

@@ -175,6 +175,8 @@ function onNext() {
   open(entries.value[curIndex.value+1], entries.value, false);
 }
 
+defineExpose({ canHandle, open });
+
 </script>
 
 <style scoped>

package/viewers/PdfViewer.vue

@@ -57,6 +57,8 @@ function onDownload() {
   window.location.href = entry.value.downloadFileUrl;
 }
 
+defineExpose({ canHandle, open });
+
 </script>
 
 <style scoped>

package/viewers/TextViewer.vue

@@ -196,6 +196,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', beforeunloadHandler);
 });
 
+defineExpose({ canHandle, open });
+
 </script>
 
 <style scoped>

package/vite-plugin.js

@@ -3,9 +3,23 @@ import { fileURLToPath } from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
+const PANKOW_PACKAGE = '@cloudron/pankow';
+
 export default function pankowPlugin() {
     return {
         name: 'vite-plugin-pankow',
+        config(config) {
+            const existing = config.optimizeDeps?.exclude;
+            const exclude = Array.isArray(existing)
+                ? existing.includes(PANKOW_PACKAGE) ? existing : [...existing, PANKOW_PACKAGE]
+                : [PANKOW_PACKAGE];
+            return {
+                optimizeDeps: {
+                    ...config.optimizeDeps,
+                    exclude,
+                },
+            };
+        },
         configureServer(server) {
             const allow = server.config.server.fs.allow;
             if (Array.isArray(allow) && !allow.includes(__dirname)) {