@dosgato/dialog 0.0.5 → 0.0.8

package/ButtonGroup.svelte

@@ -1,4 +1,4 @@
-<script >import { modifierKey } from '@txstate-mws/svelte-components';
+<script>import { modifierKey } from '@txstate-mws/svelte-components';
 import { createEventDispatcher } from 'svelte';
 export let name = undefined;
 export let choices;

package/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script >import { isNotBlank } from 'txstate-utils';
+<script>import { isNotBlank } from 'txstate-utils';
 export let id = undefined;
 export let name;
 export let value;

package/Container.svelte

@@ -1,4 +1,4 @@
-<script >import { eq } from '@txstate-mws/svelte-components';
+<script>import { eq } from '@txstate-mws/svelte-components';
 import InlineMessages from './InlineMessages.svelte';
 export let id = undefined;
 export let descid = undefined;
@@ -83,4 +83,8 @@ let messagesid;
     background-color: var(--dialog-field-bg2, #ffffff);
     color: var(--dialog-field-text2, inherit);
   }
+  .dialog-field-container :global(.field-help-text) {
+    font-size: 0.9em;
+    color: #595959;
+  }
 </style>

package/FieldAutocomplete.svelte

@@ -0,0 +1,62 @@
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+import { randomid } from 'txstate-utils';
+import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+export let id = undefined;
+export let path;
+export let label = '';
+export let placeholder = 'Select' + (label ? ' ' + label : '');
+let className = '';
+export { className as class };
+export let notNull = false;
+export let disabled = false;
+export let choices;
+export let defaultValue = notNull ? choices[0].value : undefined;
+export let conditional = undefined;
+export let required = false;
+export let helptext = '';
+let inputelement;
+let inputvalue = '';
+let popupvalue = undefined;
+let savedLabel = '';
+let changed = false;
+if (defaultValue) {
+    const selected = choices.find(c => c.value === defaultValue);
+    inputvalue = selected.label || selected.value;
+    savedLabel = inputvalue;
+}
+const listId = randomid();
+const liveTextId = randomid();
+const helpTextId = randomid();
+$: filteredChoices = changed
+    ? choices.filter((item) => {
+        return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
+    })
+    : choices;
+function onchangepopup(setVal) {
+    return (e) => {
+        inputvalue = e.detail.label || e.detail.value;
+        savedLabel = inputvalue;
+        popupvalue = undefined;
+        setVal(e.detail.value);
+        changed = false;
+    };
+}
+async function checkifchanged(e) {
+    await setTimeout(function () {
+        if (inputelement.value !== savedLabel)
+            changed = true;
+    }, 1);
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:setVal let:valid let:invalid let:id let:onBlur let:onChange>
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} {onBlur} {onChange} aria-owns={listId} autocapitalize="none" type="text" autocomplete="off"  aria-autocomplete="list" role="combobox" aria-expanded="false" {disabled} aria-describedby={helptext.length ? helpTextId : ''} on:keydown={checkifchanged}>
+  <PopupMenu align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+  {#if helptext.length}
+    <span id={helpTextId} class="field-help-text">{helptext}</span>
+  {/if}
+  <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
+    {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
+  </ScreenReaderOnly>
+</FieldStandard>

package/FieldAutocomplete.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        placeholder?: string;
+        class?: string;
+        notNull?: boolean;
+        disabled?: boolean;
+        choices: {
+            label?: string;
+            value: string;
+            disabled?: boolean;
+        }[];
+        defaultValue?: any;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        helptext?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldAutocompleteProps = typeof __propDef.props;
+export declare type FieldAutocompleteEvents = typeof __propDef.events;
+export declare type FieldAutocompleteSlots = typeof __propDef.slots;
+export default class FieldAutocomplete extends SvelteComponentTyped<FieldAutocompleteProps, FieldAutocompleteEvents, FieldAutocompleteSlots> {
+}
+export {};

package/FieldCheckbox.svelte

@@ -1,4 +1,4 @@
-<script >import { randomid } from 'txstate-utils';
+<script>import { randomid } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import Checkbox from './Checkbox.svelte';
 let className = '';

package/FieldChoices.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { Field, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';

package/FieldChooserLink.svelte

@@ -1,6 +1,6 @@
-<script  context="module">export {};
+<script context="module">export {};
 </script>
-<script >import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+<script>import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { randomid } from 'txstate-utils';
 import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';

package/FieldDate.svelte

@@ -1,4 +1,4 @@
-<script >import { dateSerialize, dateDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { dateSerialize, dateDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 import Input from './Input.svelte';
 let className = '';

package/FieldDateTime.svelte

@@ -1,4 +1,4 @@
-<script >import { datetimeSerialize, datetimeDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { datetimeSerialize, datetimeDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 import Input from './Input.svelte';
 let className = '';

package/FieldDualListbox.svelte

@@ -1,4 +1,4 @@
-<script >import menuRight from '@iconify-icons/mdi/menu-right.js';
+<script>import menuRight from '@iconify-icons/mdi/menu-right.js';
 import menuLeft from '@iconify-icons/mdi/menu-left.js';
 import FieldStandard from './FieldStandard.svelte';
 import { ScreenReaderOnly, modifierKey } from '@txstate-mws/svelte-components';

package/FieldMultiple.svelte

@@ -1,4 +1,4 @@
-<script >import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<script>import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext } from 'svelte';
 import { isNotNull } from 'txstate-utils';

package/FieldMultiselect.svelte

@@ -1,4 +1,4 @@
-<script >import { MultiSelect } from '@txstate-mws/svelte-components';
+<script>import { MultiSelect } from '@txstate-mws/svelte-components';
 import FieldStandard from './FieldStandard.svelte';
 export let id = undefined;
 export let path;

package/FieldNumber.svelte

@@ -1,4 +1,4 @@
-<script >import FieldStandard from './FieldStandard.svelte';
+<script>import FieldStandard from './FieldStandard.svelte';
 import Input from './Input.svelte';
 import { numberDeserialize, numberNullableDeserialize, numberSerialize } from '@txstate-mws/svelte-forms';
 let className = '';

package/FieldRadio.svelte

@@ -1,4 +1,4 @@
-<script >import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import { randomid } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import Radio from './Radio.svelte';

package/FieldSelect.svelte

@@ -1,4 +1,4 @@
-<script >import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };

package/FieldSelect.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: any;
+            value: string;
             disabled?: boolean;
         }[];
         defaultValue?: any;

package/FieldStandard.svelte

@@ -1,4 +1,4 @@
-<script >import { Field } from '@txstate-mws/svelte-forms';
+<script>import { Field } from '@txstate-mws/svelte-forms';
 import { randomid } from 'txstate-utils';
 import Container from './Container.svelte';
 export let id = randomid();

package/FieldText.svelte

@@ -1,4 +1,4 @@
-<script >import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 import Input from './Input.svelte';
 let className = '';

package/FileIcon.svelte

@@ -1,56 +1,12 @@
-<script  context="module">import archiveOutline from '@iconify-icons/mdi/archive-outline.js';
-import fileCodeOutline from '@iconify-icons/mdi/file-code-outline.js';
-import fileDocumentOutline from '@iconify-icons/mdi/file-document-outline.js';
-import fileMusicOutline from '@iconify-icons/mdi/file-music-outline.js';
-import fileOutline from '@iconify-icons/mdi/file-outline.js';
-import fileTableOutline from '@iconify-icons/mdi/file-table-outline.js';
-import fileVideoOutline from '@iconify-icons/mdi/file-video-outline.js';
-import fileImageOutline from '@iconify-icons/mdi/file-image-outline.js';
-import microsoftExcel from '@iconify-icons/mdi/microsoft-excel.js';
-import microsoftWord from '@iconify-icons/mdi/microsoft-word.js';
-import noteTextOutline from '@iconify-icons/mdi/note-text-outline.js';
-const icons = {
-    'application/vnd.ms-excel': microsoftExcel,
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': microsoftExcel,
-    'application/vnd.oasis.opendocument.spreadsheet': microsoftExcel,
-    'text/csv': fileTableOutline,
-    'application/msword': microsoftWord,
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': microsoftWord,
-    'application/vnd.oasis.opendocument.text': microsoftWord,
-    'application/rtf': microsoftWord,
-    'application/pdf': fileDocumentOutline,
-    'application/json': fileCodeOutline,
-    'application/x-httpd-php': fileCodeOutline,
-    'application/x-sh': fileCodeOutline,
-    'application/xml': fileCodeOutline,
-    'text/css': fileCodeOutline,
-    'text/html': fileCodeOutline,
-    'text/javascript': fileCodeOutline,
-    'application/gzip': archiveOutline,
-    'application/java-archive': archiveOutline,
-    'application/zip': archiveOutline,
-    'application/vnd.apple.installer+xml': archiveOutline,
-    'application/vnd.rar': archiveOutline,
-    'application/x-7z-compressed': archiveOutline,
-    'application/x-bzip': archiveOutline,
-    'application/x-bzip2': archiveOutline,
-    'application/x-tar': archiveOutline
-};
-const prefixes = {
-    image: fileImageOutline,
-    text: noteTextOutline,
-    video: fileVideoOutline,
-    audio: fileMusicOutline
-};
-</script>
-<script >import Icon from './Icon.svelte';
+<script>import Icon from './Icon.svelte';
+import { iconForMime } from './fileIcons';
 export let mime;
 export let hiddenLabel = undefined;
 export let inline = false;
 export let width = '1em';
 export let height = width;
 export let vAlign = 'middle';
-$: icon = icons[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileOutline;
+$: icon = iconForMime(mime);
 </script>
 
 <Icon {icon} {hiddenLabel} {inline} {width} {height} {vAlign} />

package/Form.svelte

@@ -1,4 +1,4 @@
-<script >import { Form, FormStore } from '@txstate-mws/svelte-forms';
+<script>import { Form, FormStore } from '@txstate-mws/svelte-forms';
 import { setContext } from 'svelte';
 import { CHOOSER_API_CONTEXT } from './chooser';
 let className = '';

package/Icon.svelte

@@ -1,4 +1,4 @@
-<script >import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+<script>import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
 import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
 export let icon;
 export let hiddenLabel = undefined;

package/InlineMessage.svelte

@@ -1,4 +1,4 @@
-<script >import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline.js';
+<script>import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline.js';
 import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline.js';
 import informationOutline from '@iconify-icons/mdi/information-outline.js';
 import closeOctagonOutline from '@iconify-icons/mdi/close-octagon-outline.js';

package/InlineMessages.svelte

@@ -1,4 +1,4 @@
-<script >import { randomid } from 'txstate-utils';
+<script>import { randomid } from 'txstate-utils';
 import InlineMessage from './InlineMessage.svelte';
 export let id = randomid();
 export let messages;

package/Input.svelte

@@ -1,4 +1,4 @@
-<script >import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
+<script>import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
 let className = '';
 export { className as class };
 export let name;

package/Listbox.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { modifierKey } from '@txstate-mws/svelte-components';
 import check from '@iconify-icons/mdi/check.js';
 import Icon from './Icon.svelte';

package/Radio.svelte

@@ -1,4 +1,4 @@
-<script >export let id = undefined;
+<script>export let id = undefined;
 export let name;
 export let value;
 export let selected = false;

package/Tab.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
 export let title;

package/TabStore.js

@@ -2,6 +2,7 @@ import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { findIndex, randomid } from 'txstate-utils';
 export const TAB_CONTEXT = {};
 export class TabStore extends Store {
+    initialTab;
     constructor(tabs, initialTab) {
         super({
             tabs,

package/Tabs.svelte

@@ -1,4 +1,4 @@
-<script >import { modifierKey, resize } from '@txstate-mws/svelte-components';
+<script>import { modifierKey, resize } from '@txstate-mws/svelte-components';
 import { setContext } from 'svelte';
 import { roundTo } from 'txstate-utils';
 import Icon from './Icon.svelte';

package/chooser/Asset.svelte

@@ -1,4 +1,4 @@
-<script >import { modifierKey } from '@txstate-mws/svelte-components';
+<script>import { modifierKey } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, getContext } from 'svelte';
 import { hashid } from 'txstate-utils';
 import { CHOOSER_STORE_CONTEXT } from './ChooserStore';

package/chooser/AssetFolder.svelte

@@ -1,4 +1,4 @@
-<script >import folderOutline from '@iconify-icons/mdi/folder-outline.js';
+<script>import folderOutline from '@iconify-icons/mdi/folder-outline.js';
 import folderOpenOutline from '@iconify-icons/mdi/folder-open-outline.js';
 import folderSyncOutline from '@iconify-icons/mdi/folder-sync-outline.js';
 import { modifierKey } from '@txstate-mws/svelte-components';

package/chooser/Chooser.svelte

@@ -1,4 +1,4 @@
-<script >import fileTree from '@iconify-icons/mdi/file-tree.js';
+<script>import fileTree from '@iconify-icons/mdi/file-tree.js';
 import viewGrid from '@iconify-icons/mdi/view-grid.js';
 import { Loading, Modal } from '@txstate-mws/svelte-components';
 import { derivedStore } from '@txstate-mws/svelte-store';

package/chooser/ChooserStore.js

@@ -13,6 +13,8 @@ export function bytesToHuman(bytes) {
     return String(parseFloat((bytes / Math.pow(1024, scale)).toPrecision(3))) + scales[scale];
 }
 export class ChooserStore extends SafeStore {
+    client;
+    options;
     constructor(client) {
         super({ activetype: 'page', activesource: 0 });
         this.client = client;
@@ -56,7 +58,7 @@ export class ChooserStore extends SafeStore {
             });
         }
         if (this.value.preview)
-            await this.openPathRecursive(combinePath(this.value.preview.path, this.value.preview.name));
+            await this.openPathRecursive(this.value.preview.path);
         else if (this.options.initialPath)
             await this.openPathRecursive(this.options.initialPath);
         else
@@ -75,7 +77,7 @@ export class ChooserStore extends SafeStore {
         return item;
     }
     async open(folder) {
-        return await this.openPath(combinePath(folder.path, folder.name));
+        return await this.openPath(folder.path);
     }
     async openPath(path) {
         const folder = this.itemByPath(this.value, path);
@@ -116,7 +118,7 @@ export class ChooserStore extends SafeStore {
             if (!current || current.type === 'asset')
                 break;
             if (!current.open) {
-                current.children = await filterAsync(await this.client.getChildren(source.name, combinePath(current.path, current.name), this.options.passthruFilters), this.options.filter);
+                current.children = await filterAsync(await this.client.getChildren(source.name, current.path, this.options.passthruFilters), this.options.filter);
                 current.loading = false;
                 current.open = true;
             }
@@ -130,12 +132,12 @@ export class ChooserStore extends SafeStore {
             if (!current)
                 return v;
             v.focus = current.id;
-            v.focusPath = combinePath(current.path, current.name);
+            v.focusPath = current.path;
             return v;
         });
     }
     async close(folder) {
-        return await this.closePath(combinePath(folder.path, folder.name));
+        return await this.closePath(folder.path);
     }
     async closePath(path) {
         this.update(v => {
@@ -156,7 +158,7 @@ export class ChooserStore extends SafeStore {
             return this.clearPreview();
         if (item.type === 'folder' && !this.options.chooseFolder)
             return;
-        this.update(v => ({ ...v, preview: item, focus: item.id, focusPath: combinePath(item.path, item.name) }));
+        this.update(v => ({ ...v, preview: item, focus: item.id, focusPath: item.path }));
     }
     clearPreview() {
         this.update(v => ({ ...v, preview: undefined }));
@@ -170,7 +172,7 @@ export class ChooserStore extends SafeStore {
             if (source.children?.length) {
                 const firstchild = source.children[0];
                 v.focus = firstchild.id;
-                v.focusPath = combinePath(firstchild.path, firstchild.name);
+                v.focusPath = firstchild.path;
             }
             return v;
         });
@@ -180,7 +182,7 @@ export class ChooserStore extends SafeStore {
             const source = this.getSource(v);
             source.children = children;
             v.focus = children[0]?.id;
-            v.focusPath = children[0] ? combinePath(children[0]?.path, children[0].name) : undefined;
+            v.focusPath = children[0] ? children[0]?.path : undefined;
             return v;
         });
     }
@@ -193,7 +195,7 @@ export class ChooserStore extends SafeStore {
             return;
         this.update(v => {
             v.focus = itm.id;
-            v.focusPath = combinePath(itm.path, itm.name);
+            v.focusPath = itm.path;
             return v;
         });
     }

package/chooser/Details.svelte

@@ -1,4 +1,4 @@
-<script >import { bytesToHuman, combinePath } from './ChooserStore';
+<script>import { bytesToHuman } from './ChooserStore';
 export let item;
 </script>
 
@@ -11,7 +11,7 @@ export let item;
   {:else if item.type === 'page'}
     <li>{item.title}</li>
   {:else if item.type === 'folder'}
-    <li>{combinePath(item.path, item.name)}</li>
+    <li>{item.path}</li>
   {/if}
   {#if item.type === 'asset'}
     <li>{item.mime}</li>

package/chooser/Page.svelte

@@ -1,4 +1,4 @@
-<script >import fileOutline from '@iconify-icons/mdi/file-outline.js';
+<script>import fileOutline from '@iconify-icons/mdi/file-outline.js';
 import fileSyncOutline from '@iconify-icons/mdi/file-sync-outline.js';
 import { modifierKey } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, getContext } from 'svelte';

package/chooser/Thumbnail.svelte

@@ -1,4 +1,4 @@
-<script >import folderOutline from '@iconify-icons/mdi/folder-outline.js';
+<script>import folderOutline from '@iconify-icons/mdi/folder-outline.js';
 import fileLinkOutline from '@iconify-icons/mdi/file-link-outline.js';
 import FileIcon from '../FileIcon.svelte';
 import Icon from '../Icon.svelte';

package/fileIcons.d.ts

@@ -0,0 +1 @@
+export declare function iconForMime(mime: string): import("@iconify/types").IconifyIcon;

package/fileIcons.js

@@ -0,0 +1,47 @@
+import archiveOutline from '@iconify-icons/mdi/archive-outline.js';
+import fileCodeOutline from '@iconify-icons/mdi/file-code-outline.js';
+import fileDocumentOutline from '@iconify-icons/mdi/file-document-outline.js';
+import fileMusicOutline from '@iconify-icons/mdi/file-music-outline.js';
+import fileOutline from '@iconify-icons/mdi/file-outline.js';
+import fileTableOutline from '@iconify-icons/mdi/file-table-outline.js';
+import fileVideoOutline from '@iconify-icons/mdi/file-video-outline.js';
+import fileImageOutline from '@iconify-icons/mdi/file-image-outline.js';
+import microsoftExcel from '@iconify-icons/mdi/microsoft-excel.js';
+import microsoftWord from '@iconify-icons/mdi/microsoft-word.js';
+import noteTextOutline from '@iconify-icons/mdi/note-text-outline.js';
+const fileIconsByMime = {
+    'application/vnd.ms-excel': microsoftExcel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': microsoftExcel,
+    'application/vnd.oasis.opendocument.spreadsheet': microsoftExcel,
+    'text/csv': fileTableOutline,
+    'application/msword': microsoftWord,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': microsoftWord,
+    'application/vnd.oasis.opendocument.text': microsoftWord,
+    'application/rtf': microsoftWord,
+    'application/pdf': fileDocumentOutline,
+    'application/json': fileCodeOutline,
+    'application/x-httpd-php': fileCodeOutline,
+    'application/x-sh': fileCodeOutline,
+    'application/xml': fileCodeOutline,
+    'text/css': fileCodeOutline,
+    'text/html': fileCodeOutline,
+    'text/javascript': fileCodeOutline,
+    'application/gzip': archiveOutline,
+    'application/java-archive': archiveOutline,
+    'application/zip': archiveOutline,
+    'application/vnd.apple.installer+xml': archiveOutline,
+    'application/vnd.rar': archiveOutline,
+    'application/x-7z-compressed': archiveOutline,
+    'application/x-bzip': archiveOutline,
+    'application/x-bzip2': archiveOutline,
+    'application/x-tar': archiveOutline
+};
+const prefixes = {
+    image: fileImageOutline,
+    text: noteTextOutline,
+    video: fileVideoOutline,
+    audio: fileMusicOutline
+};
+export function iconForMime(mime) {
+    return fileIconsByMime[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileOutline;
+}