@dosgato/dialog 1.4.5 → 1.5.0

package/dist/FieldText.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { HTMLActionEntry } from '@txstate-mws/svelte-components'
   import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
+  import type { FullAutoFill } from 'svelte/elements'
   import FieldStandard from './FieldStandard.svelte'
   import Input from './Input.svelte'
   import MaxLength from './MaxLength.svelte'
@@ -10,11 +11,11 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let placeholder: string | undefined = undefined
   export let notNull = false
   export let defaultValue: any = notNull ? '' : undefined
-  export let type: string = 'text'
+  export let type = 'text'
   export let allowlastpass = false
   export let maxlength: number | undefined = undefined
   export let conditional: boolean | undefined = undefined
@@ -22,13 +23,13 @@
   export let use: HTMLActionEntry[] = []
   export let inputelement: HTMLInputElement = undefined as any
   export let related: true | number = 0
-  export let autocomplete = 'off'
+  export let autocomplete: FullAutoFill = 'off'
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement {type} {placeholder} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {messagesid} {helptextid} {extradescid} {use}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
+  <Input bind:inputelement {type} {placeholder} {autocomplete} name={path} {value} id={fieldid} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {messagesid} {helptextid} {extradescid} {use}></Input>
   {#if isNotNull(maxlength)}
     <MaxLength {value} {maxlength}/>
   {/if}

package/dist/FieldText.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
+import type { FullAutoFill } from 'svelte/elements';
 declare const __propDef: {
     props: {
         class?: string;
@@ -17,7 +18,7 @@ declare const __propDef: {
         use?: HTMLActionEntry[];
         inputelement?: HTMLInputElement;
         related?: true | number;
-        autocomplete?: string;
+        autocomplete?: FullAutoFill;
         extradescid?: string | undefined;
         helptext?: string | undefined;
     };

package/dist/FieldTextArea.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getDescribedBy } from './'
   import { type HTMLActionEntry, passActions } from '@txstate-mws/svelte-components'
-  import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
   import FieldStandard from './FieldStandard.svelte'
   import MaxLength from './MaxLength.svelte'
   import { isNotNull } from 'txstate-utils'
@@ -9,7 +8,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let placeholder: string | undefined = undefined
   export let notNull = false
   export let defaultValue: any = notNull ? '' : undefined
@@ -24,8 +23,8 @@
   export let helptext: string | undefined = undefined
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <textarea bind:this={inputelement} {placeholder} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste use:passActions={use}></textarea>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
+  <textarea bind:this={inputelement} {placeholder} name={path} {value} id={fieldid} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste use:passActions={use}></textarea>
   {#if isNotNull(maxlength)}
     <MaxLength {value} {maxlength}/>
   {/if}

package/dist/FileIcon.svelte

@@ -3,7 +3,7 @@
   import { iconForMime } from './fileIcons'
   export let mime: string
   export let hiddenLabel: string | undefined = undefined
-  export let inline: boolean = false
+  export let inline = false
   export let width: string | number = '1em'
   export let height: string | number = width
 

package/dist/Form.svelte

@@ -47,7 +47,7 @@
   {@const successMessages = messages.filter(m => m.type === 'success')}
   {#if errorMessages.length || showingInlineErrors}
     <ul class="form-errors" aria-live='assertive'>
-      {#each errorMessages as message}
+      {#each errorMessages as message (message.path, message.message)}
         <li><Icon icon={messageIcons[message.type] ?? messageIcons.error} inline hiddenLabel="error"/> {message.message}</li>
       {/each}
       {#if showingInlineErrors}
@@ -57,21 +57,21 @@
   {/if}
   {#if warningMessages.length}
     <ul class="form-warnings" aria-live='assertive'>
-      {#each warningMessages as message}
+      {#each warningMessages as message (message.message)}
         <li><Icon icon={messageIcons.warning} inline hiddenLabel="warning"/> {message.message}</li>
       {/each}
     </ul>
   {/if}
   {#if infoMessages.length}
     <ul class="form-info" aria-live='assertive'>
-      {#each infoMessages as message}
+      {#each infoMessages as message (message.message)}
         <li><Icon icon={messageIcons.info} inline hiddenLabel="info"/> {message.message}</li>
       {/each}
     </ul>
   {/if}
   {#if successMessages.length}
     <ul class="form-successes" aria-live='assertive'>
-      {#each successMessages as message}
+      {#each successMessages as message (message.message)}
         <li><Icon icon={messageIcons.success} inline hiddenLabel="success" /> {message.message}</li>
       {/each}
     </ul>

package/dist/FormDialog.svelte

@@ -2,7 +2,7 @@
   import type { IconifyIcon } from '@iconify/svelte'
   import contentSave from '@iconify-icons/mdi/content-save'
   import type { Feedback, FormStore } from '@txstate-mws/svelte-forms'
-  import { type ComponentProps } from 'svelte'
+  import type { ComponentProps } from 'svelte'
   import { Form } from './'
   import Dialog from './Dialog.svelte'
 
@@ -28,7 +28,7 @@
   }
 
   export let store: FormStore<T> | undefined = undefined
-  export let title: string = ''
+  export let title = ''
   export let icon: IconifyIcon | undefined = undefined
   export let size: 'tiny' | 'small' | 'normal' | 'large' = 'normal'
   export let expandable = true

package/dist/Icon.svelte

@@ -12,7 +12,7 @@
   export let icon: IconifyIcon | undefined
   /** Label used in a `<ScreenReaderOnly>`. */
   export let hiddenLabel: string | undefined = undefined
-  export let inline: boolean = false
+  export let inline = false
   export let width: string | number | undefined = undefined
   export let height: string | number | undefined = undefined
   export let tooltip: string | undefined = undefined
@@ -21,24 +21,25 @@
   export { className as class }
 
   function replaceIDs (body: string): string {
-    const matches = body.matchAll(/\sid="(\S+)"/g)
+    const matches = body.matchAll(/\sid="(\S+)"/gv)
     const ids = Array.from(matches).map(m => m[1])
     if (!ids.length) return body
 
     // Replace with unique ids
-    ids.forEach((id) => {
-      const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    ids.forEach(id => {
+      const escapedID = id.replace(/[.*+?^$\{\}\(\)\]\\]/gv, '\\$&')
 
       body = body.replace(
         // Allowed characters before id: [#;"]
         // Allowed characters after id: [)"], .[a-z]
-        new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', 'g'),
+        new RegExp('([#;"])(' + escapedID + ')([\\)"]|\\.[a-z])', 'gv'),
         '$1' + randomid() + '$3'
       )
     })
     return body
   }
 
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- no need for reactivity
   const fixedSVG = new Map<IconifyIcon, string>()
   function svgBody (icon: IconifyIcon) {
     if (!fixedSVG.has(icon)) fixedSVG.set(icon, replaceIDs(icon.body))
@@ -46,7 +47,10 @@
   }
 
   // If neither is defined, set both to 1em
-  if (!width && !height) width = height = '1em'
+  if (!width && !height) {
+    width = '1em'
+    height = '1em'
+  }
   height ??= width
 </script>
 

package/dist/InlineMessage.svelte

@@ -13,13 +13,13 @@
   $: iconLabel = messageLabels[message.type] ?? messageLabels.error
 
   function addMarkup (msg: string) {
-    const lines = msg.split(/\r?\n/)
+    const lines = msg.split(/\r?\n/v)
     const output: string[] = []
     for (const line of lines) {
-      const splitLinks = line.split(/((?:\[[^\]]+\])?\([^)]+\))/)
+      const splitLinks = line.split(/((?:\[[^\]]+\])?\([^\)]+\))/v)
       const replaced: string[] = []
       for (const segment of splitLinks) {
-        const m = segment.match(/(?:\[([^\]]+)\])?\(([^)]+)\)/)
+        const m = segment.match(/(?:\[([^\]]+)\])?\(([^\)]+)\)/v)
         if (m) {
           try {
             const url = new URL(m[2])

package/dist/InlineMessages.svelte

@@ -15,7 +15,7 @@
 
 {#if id}
   <div {id}>
-    {#each messages as message}
+    {#each messages as message (message.type, message.path, message.message)}
       <InlineMessage {message} />
     {/each}
   </div>

package/dist/Input.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { passActions, type HTMLActionEntry } from '@txstate-mws/svelte-components'
   import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms'
+  import type { FullAutoFill } from 'svelte/elements'
   import { isNotBlank } from 'txstate-utils'
 
   let className = ''
   export { className as class }
   export let name: string
   export let value: string
-  export let type: string = 'text'
+  export let type = 'text'
   export let allowlastpass = false
   export let placeholder: string | undefined = undefined
   export let maxlength: number | undefined = undefined
@@ -16,7 +17,7 @@
   export let step: number | undefined = undefined
   export let id: string | undefined = undefined
   export let disabled = false
-  export let autocomplete = 'off'
+  export let autocomplete: FullAutoFill = 'off'
   export let extradescid: string | undefined = undefined
   export let messagesid: string | undefined = undefined
   export let helptextid: string | undefined = undefined
@@ -40,5 +41,4 @@
   $: maxStr = resolveMinMax(max)
 </script>
 
-<!-- svelte-ignore a11y-autocomplete-valid -->
 <input bind:this={inputelement} {type} {id} {autocomplete} {placeholder} class={className} data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/dist/Input.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+import type { FullAutoFill } from 'svelte/elements';
 declare const __propDef: {
     props: {
         class?: string;
@@ -18,7 +19,7 @@ declare const __propDef: {
         step?: number | undefined;
         id?: string | undefined;
         disabled?: boolean;
-        autocomplete?: string;
+        autocomplete?: FullAutoFill;
         extradescid?: string | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;

package/dist/Listbox.svelte

@@ -6,7 +6,7 @@
   const dispatch = createEventDispatcher()
   export let items: PopupMenuItem[] = []
   export let label: string
-  export let multiselect: boolean = false
+  export let multiselect = false
   export let selected: { value: string, label?: string }[] = []
   export let descid: string | undefined = undefined
   export let valid = false
@@ -67,13 +67,13 @@
       e.preventDefault()
       if (items.length < 1) return
       let i = (hilited ?? firstactive - 1) + 1
-      while (items[i]?.disabled) i++
+      while (items[i]?.disabled) i += 1
       move(i)
     } else if (e.key === 'ArrowUp') {
       e.preventDefault()
       if (items.length < 1) return
       let i = (hilited ?? lastactive + 1) - 1
-      while (items[i]?.disabled) i--
+      while (items[i]?.disabled) i -= 1
       move(i)
     } else if (e.key === ' ') {
       e.preventDefault()
@@ -114,7 +114,6 @@
 
 <div class="listbox-container" class:valid class:invalid>
   <span id={labelId}>{label}</span>
-  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul bind:this={listboxElement} role="listbox" id={listId} class="listbox-items" tabindex="0" aria-describedby={descid} aria-labelledby={labelId} aria-multiselectable={multiselect} on:keydown={onkeydown} on:focus={focusListbox}>
     {#each items as item, i (item.value)}
       <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/Radio.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { isNotBlank } from 'txstate-utils'
 
-
   export let id: string | undefined = undefined
   export let name: string
   export let value: string

package/dist/Switcher.svelte

@@ -9,7 +9,7 @@
   let className = ''
   export { className as class }
   export let id: string | undefined = randomid()
-  export let path: string = ''
+  export let path = ''
   export let name = randomid()
   export let choices: { label?: string, value: string, disabled?: boolean }[]
   export let horizontal = false

package/dist/Tabs.svelte

@@ -49,7 +49,7 @@
     return () => store.activate(idx)
   }
   function onKeyDown (idx: number) {
-    return async (e) => {
+    return async e => {
       if (modifierKey(e)) return
       if (['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
         e.preventDefault()
@@ -98,13 +98,13 @@
     if (!activeelement) return
     const tabelement = tabelements[$currentIdx]
     if (!tabelement) return
-    const span = tabelement.querySelector(':scope > span') as HTMLSpanElement
+    const span = tabelement.querySelector<HTMLElement>(':scope > span')!
     if (!span) return
     const left = span.offsetLeft - activeelement.offsetLeft - activeOversize
     const width = span.offsetWidth + (activeOversize * 2)
     activeelement.style.transform = `translateX(${left}px)`
     activeelement.style.width = `${width}px`
-    hiddenTabs = $store.tabs.filter((tab, idx) => { return tabIsHidden(idx) })
+    hiddenTabs = $store.tabs.filter((tab, idx) => tabIsHidden(idx))
   }
 
   $: active = $currentName
@@ -115,7 +115,6 @@
 
 {#if $store.tabs.length > 1}
   {#if !$accordion}
-    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
       {#each $store.tabs as tab, idx (tab.name)}
         {@const active = isActive(idx, $store.current)}

package/dist/Tooltip.svelte

@@ -4,12 +4,12 @@
   import { randomid } from 'txstate-utils'
 
   export let tip: string | undefined = undefined
-  export let top: boolean = false
-  export let right: boolean = false
-  export let bottom: boolean = false
-  export let left: boolean = false
+  export let top = false
+  export let right = false
+  export let bottom = false
+  export let left = false
   export let align: GlueAlignOpts | undefined = undefined
-  export let active: boolean = false
+  export let active = false
 
   const tooltipId = randomid()
   const anchorName = `--tip-${tooltipId}`
@@ -56,6 +56,7 @@
     opacity: 0;
     z-index: 1;
     visibility: hidden;
+    white-space: pre-line;
     transition: opacity 150ms, visibility 150ms;
   }
   .default-tip {

package/dist/chooser/AssetTabs.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
   import { bytesToHuman } from 'txstate-utils'
-  import type { Asset } from './ChooserAPI'
   import { Dialog, FieldTextArea } from '..'
   import Button from '../Button.svelte'
   import Icon from '../Icon.svelte'
   import outIcon from '@iconify-icons/ph/arrow-square-out-bold'
   import warningIcon from '@iconify-icons/ph/warning'
   import { getContext } from 'svelte'
-  import type { Client } from './ChooserAPI'
-  import { CHOOSER_API_CONTEXT } from './ChooserAPI'
+  import { CHOOSER_API_CONTEXT, type Asset, type Client } from './ChooserAPI'
 
   export let id: string
   export let selectedAsset: Asset
-  export let showMetadata: boolean = false
-  export let altTextRequired: boolean = false
+  export let showMetadata = false
+  export let altTextRequired = false
   // if they say it's required but don't provide a path, default to 'altText'
   export let altTextPath: string | undefined = altTextRequired ? 'altText' : undefined
   export let altTextHelp: string | undefined
@@ -31,26 +29,30 @@
     { id: `${id}-details`, label: 'Asset Details' },
     ...(showMetadata ? [{ id: `${id}-metadata`, label: 'Metadata' }] : [])
   ]
-  $: activeTab = tabs ? tabs[0].id : 0
+  let activeTab: string | number = 0
+  function reactToTabs (..._: any[]) {
+    activeTab = tabs ? tabs[0].id : 0
+  }
+  $: reactToTabs(tabs)
   let focusedTabIdx = 0
 
-  function selectTab(tabId: string) {
+  function selectTab (tabId: string) {
     activeTab = tabId
     focusedTabIdx = tabs.findIndex(t => t.id === tabId)
     // ensure the focused tab is visible
-    const tabEls = tabListEl.querySelectorAll(`[role="tab"][data-tab-asset]`)
-    tabEls[focusedTabIdx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center'})
+    const tabEls = tabListEl.querySelectorAll('[role="tab"][data-tab-asset]')
+    tabEls[focusedTabIdx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
   }
 
-  function focusTab(idx: number) {
+  function focusTab (idx: number) {
     focusedTabIdx = idx
     activeTab = tabs[idx].id
-    const tabEls = tabListEl.querySelectorAll(`[role="tab"][data-tab-asset]`)
+    const tabEls = tabListEl.querySelectorAll('[role="tab"][data-tab-asset]')
     if (tabEls[idx]) (tabEls[idx] as HTMLElement).focus()
-    tabEls[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center'})
+    tabEls[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
   }
 
-  function onTabKeydown(e: KeyboardEvent, idx: number) {
+  function onTabKeydown (e: KeyboardEvent, idx: number) {
     if (e.key === 'ArrowRight') {
       e.preventDefault()
       focusTab((idx + 1) % tabs.length)
@@ -63,7 +65,7 @@
     }
   }
 
-  async function navigateToManageAsset() {
+  async function navigateToManageAsset () {
     manageAssetsModalOpen = false
     const url = chooserClient.idToEditingUrl ? await chooserClient.idToEditingUrl(selectedAsset.id) : undefined
     if (url) {
@@ -74,7 +76,7 @@
 
 {#if useTabs}
   <ul bind:this={tabListEl} class="tabs" role="tablist">
-    {#each tabs as tab, idx}
+    {#each tabs as tab, idx (tab.id)}
       <li
         id="{tab.id}-tab"
         class="tab {activeTab === tab.id ? 'active' : ''}"
@@ -84,7 +86,7 @@
         tabindex={focusedTabIdx === idx ? 0 : -1}
         data-tab-asset
         on:click={() => selectTab(tab.id)}
-        on:keydown={(e) => onTabKeydown(e, idx)}
+        on:keydown={e => onTabKeydown(e, idx)}
         on:focus={() => { focusedTabIdx = idx }}
       >
         <span>{tab.label}</span>
@@ -203,4 +205,4 @@
     justify-content: center;
     gap: 0.4em;
   }
-</style>
+</style>

package/dist/chooser/AssetTabs.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Asset } from './ChooserAPI';
+import { type Asset } from './ChooserAPI';
 declare const __propDef: {
     props: {
         id: string;

package/dist/chooser/Chooser.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="F">
+<script lang="ts" generics="F extends object">
   import browserIcon from '@iconify-icons/ph/browser'
   import folderIcon from '@iconify-icons/ph/folder'
   import folderNotchOpen from '@iconify-icons/ph/folder-notch-open'
@@ -41,7 +41,7 @@
   $: store.setPreview($selected)
 
   function onChoose () {
-    dispatch('change', { preview: $store.preview, copyAltText: altTextCheckbox?.checked ?? false } )
+    dispatch('change', { preview: $store.preview, copyAltText: altTextCheckbox?.checked ?? false })
   }
 
   function onDeselect () {
@@ -54,7 +54,7 @@
     showuploader = false
   }
 
-  async function selectPreview (preloadPath) {
+  async function selectPreview (preloadPath: string | undefined) {
     if (!$store.initialized) return
     if (preloadPath) {
       const currentSelection = await expandTreePath(treeStore, preloadPath.split('/').filter(isNotBlank))

package/dist/chooser/Chooser.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type AnyItem } from './ChooserAPI';
 import { ChooserStore } from './ChooserStore';
-declare class __sveltets_Render<F> {
+declare class __sveltets_Render<F extends object> {
     props(): {
         label?: string | undefined;
         images?: boolean;
@@ -25,9 +25,9 @@ declare class __sveltets_Render<F> {
     };
     slots(): {};
 }
-export type ChooserProps<F> = ReturnType<__sveltets_Render<F>['props']>;
-export type ChooserEvents<F> = ReturnType<__sveltets_Render<F>['events']>;
-export type ChooserSlots<F> = ReturnType<__sveltets_Render<F>['slots']>;
-export default class Chooser<F> extends SvelteComponentTyped<ChooserProps<F>, ChooserEvents<F>, ChooserSlots<F>> {
+export type ChooserProps<F extends object> = ReturnType<__sveltets_Render<F>['props']>;
+export type ChooserEvents<F extends object> = ReturnType<__sveltets_Render<F>['events']>;
+export type ChooserSlots<F extends object> = ReturnType<__sveltets_Render<F>['slots']>;
+export default class Chooser<F extends object> extends SvelteComponentTyped<ChooserProps<F>, ChooserEvents<F>, ChooserSlots<F>> {
 }
 export {};

package/dist/chooser/ChooserStore.js

@@ -13,7 +13,7 @@ export function combinePath(path, name) {
 export function bytesToHuman(bytes) {
     const scales = [' bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
     const scale = Math.floor(Math.log(bytes) / Math.log(1024));
-    return String(parseFloat((bytes / Math.pow(1024, scale)).toPrecision(3))) + scales[scale];
+    return String(parseFloat((bytes / 1024 ** scale).toPrecision(3))) + scales[scale];
 }
 export class ChooserStore extends Store {
     client;
@@ -85,7 +85,7 @@ export class ChooserStore extends Store {
         this.update(v => {
             if (!v.initialized && !init)
                 return v;
-            name ??= [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].filter(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true)[0].name;
+            name ??= [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].find(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true)?.name;
             const pageSource = v.sources?.page.findIndex(s => s.name === name);
             const assetSource = v.sources?.asset.findIndex(s => s.name === name);
             if ((pageSource ?? -1) >= 0)

package/dist/chooser/UploadUI.svelte

@@ -6,7 +6,7 @@
 
   export let title: string
   export let folder: Folder
-  export let maxFiles: number = 200
+  export let maxFiles = 200
   export let escapable = true
   export let mimeWhitelist: string[] = []
   export let mimeBlacklist: string[] = []
@@ -23,11 +23,11 @@
   let uploadError: string | undefined
 
   function onUploadEnter (e: DragEvent) {
-    if (e.dataTransfer?.items.length) dragover++
+    if (e.dataTransfer?.items.length) dragover += 1
   }
 
   function onUploadLeave (e: DragEvent) {
-    if (e.dataTransfer?.items.length) dragover--
+    if (e.dataTransfer?.items.length) dragover -= 1
   }
 
   function onUploadDrop (e: DragEvent) {
@@ -99,7 +99,7 @@
       <input type="file" id="uploader_input" multiple on:change={onUploadChange}>
       <label for="uploader_input">Choose or drag files</label>
       <ul>
-        {#each uploadList as file}
+        {#each uploadList as file (file)}
           <li>
             <FileIcon width="1.5em" mime={file.type} inline />{file.name}<button type="button" on:click={onDeleteFile(file)}><Icon icon={trashLight} width="1.5em" hiddenLabel="Remove File" inline /></button>
             {#if (whitelist.size && !whitelist.has(file.type)) || (blacklist.size && blacklist.has(file.type))}

package/dist/code/FieldCodeEditor.svelte

@@ -7,7 +7,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let notNull = false
   export let defaultValue: any = notNull ? '' : undefined
   export let rows = 8
@@ -21,6 +21,6 @@
   export let language: 'js' | 'css' | 'html'
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
-  <CodeEditor {id} bind:inputelement {language} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => setVal(e.detail)}/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:messagesid let:helptextid>
+  <CodeEditor id={fieldid} bind:inputelement {language} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => setVal(e.detail)}/>
 </FieldStandard>

package/dist/code/FieldGraphQLEditor.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { HTMLActionEntry } from '@txstate-mws/svelte-components'
+  import type { GraphQLSchema } from 'graphql'
+  import { FieldStandard } from '..'
+  import GraphQLEditor from './GraphQLEditor.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label = ''
+  export let notNull = false
+  export let defaultValue: any = notNull ? '' : undefined
+  export let rows = 8
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let schema: GraphQLSchema | undefined = undefined
+  export let noMutations = false
+  export let allowInvalid = false
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:messagesid let:helptextid let:deserialize>
+  <GraphQLEditor id={fieldid} bind:inputelement {schema} {noMutations} {allowInvalid} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => { console.log(e.detail); setVal(deserialize?.(e.detail)) }}/>
+</FieldStandard>