@dosgato/dialog 0.0.33 → 0.0.35

package/FieldStandard.svelte.d.ts

@@ -1,20 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
+        id?: string | undefined;
         descid?: string | undefined;
         path: string;
         defaultValue?: any;
         label: string;
-        notNull?: boolean;
-        number?: boolean;
-        date?: boolean;
-        datetime?: boolean;
-        boolean?: boolean;
-        serialize?: (value: any) => string;
-        deserialize?: (value: string) => any;
+        notNull?: boolean | undefined;
+        number?: boolean | undefined;
+        date?: boolean | undefined;
+        datetime?: boolean | undefined;
+        boolean?: boolean | undefined;
+        serialize?: ((value: any) => string) | undefined;
+        deserialize?: ((value: string) => any) | undefined;
+        finalize?: ((value: any) => any) | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
+        required?: boolean | undefined;
         helptext?: string | undefined;
     };
     events: {
@@ -31,7 +32,7 @@ declare const __propDef: {
             valid: boolean;
             invalid: boolean;
             messagesid: any;
-            helptextid: string;
+            helptextid: string | undefined;
             serialize: (value: any) => string;
             deserialize: (value: string) => any;
         };

package/FieldText.svelte

@@ -18,6 +18,6 @@ export let inputelement = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {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} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {use}></Input>
 </FieldStandard>

package/FieldText.svelte.d.ts

@@ -2,19 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
-        notNull?: boolean;
+        label?: string | undefined;
+        notNull?: boolean | undefined;
         defaultValue?: any;
-        type?: string;
-        allowlastpass?: boolean;
+        type?: string | undefined;
+        allowlastpass?: boolean | undefined;
         maxlength?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        use?: HTMLActionEntry[];
-        inputelement?: HTMLInputElement;
+        required?: boolean | undefined;
+        use?: HTMLActionEntry<any>[] | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldTextArea.svelte

@@ -18,7 +18,7 @@ export let inputelement = undefined;
 export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {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} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
 </FieldStandard>
 

package/FieldTextArea.svelte.d.ts

@@ -2,18 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
-        notNull?: boolean;
+        label?: string | undefined;
+        notNull?: boolean | undefined;
         defaultValue?: any;
         maxlength?: number | undefined;
         rows?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        use?: HTMLActionEntry[];
-        inputelement?: HTMLTextAreaElement;
+        required?: boolean | undefined;
+        use?: HTMLActionEntry<any>[] | undefined;
+        inputelement?: HTMLTextAreaElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FileIcon.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         mime: string;
-        hiddenLabel?: string;
-        inline?: boolean;
-        width?: string | number;
-        height?: string | number;
-        vAlign?: 'top' | 'middle' | 'bottom';
+        hiddenLabel?: string | undefined;
+        inline?: boolean | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        vAlign?: "top" | "bottom" | "middle" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/Form.svelte

@@ -13,8 +13,8 @@ export let preload = undefined;
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
-  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
+  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} {allMessages} {showingInlineErrors} />
   <div class="form-errors" aria-live='assertive'>
     {#if messages.length}
       <ul>
@@ -29,7 +29,7 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
       This form contains validation errors. See inline messages for details.
     {/if}
   </div>
-  <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} />
+  <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} {allMessages} {showingInlineErrors} />
 </Form>
 
 <style>

package/Form.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T, F> {
+declare class __sveltets_Render<T extends any, F extends any> {
     props(): any;
     events(): {
         [evt: string]: CustomEvent<any>;
     };
     slots(): any;
 }
-export type FormProps<T, F> = ReturnType<__sveltets_Render<T, F>['props']>;
-export type FormEvents<T, F> = ReturnType<__sveltets_Render<T, F>['events']>;
-export type FormSlots<T, F> = ReturnType<__sveltets_Render<T, F>['slots']>;
-export default class Form<T, F> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
+export type FormProps<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['props']>;
+export type FormEvents<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['events']>;
+export type FormSlots<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['slots']>;
+export default class Form<T extends any, F extends any> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
 }
 export {};

package/FormDialog.svelte

@@ -22,8 +22,8 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
 <Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size}>
-  <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:saved let:valid let:invalid let:validating let:submitting let:data>
-    <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
+  <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
+    <slot {messages} {allMessages} {saved} {validating} {submitting} {valid} {invalid} {data} {showingInlineErrors} />
   </Form>
 </Dialog>
 

package/FormDialog.svelte.d.ts

@@ -1,18 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 import type { IconifyIcon } from '@iconify/svelte';
 import type { Feedback, FormStore, SubmitResponse } from '@txstate-mws/svelte-forms';
-declare class __sveltets_Render<T> {
+import { type Client } from './';
+declare class __sveltets_Render<T extends any> {
     props(): {
         submit: (state: T) => Promise<SubmitResponse<T>>;
-        validate?: (state: T) => Promise<Feedback[]>;
-        store?: FormStore<T>;
-        chooserClient?: any;
-        autocomplete?: string;
-        name?: string;
-        title?: string;
-        icon?: IconifyIcon;
-        size?: "small" | "normal" | "tiny" | "large";
-        preload?: T;
+        validate?: ((state: T) => Promise<Feedback[]>) | undefined;
+        store?: FormStore<T> | undefined;
+        chooserClient?: Client<any> | undefined;
+        autocomplete?: string | undefined;
+        name?: string | undefined;
+        title?: string | undefined;
+        icon?: IconifyIcon | undefined;
+        size?: "small" | "normal" | "tiny" | "large" | undefined;
+        preload?: T | undefined;
     };
     events(): {
         saved: CustomEvent<T>;
@@ -20,19 +21,21 @@ declare class __sveltets_Render<T> {
     };
     slots(): {
         default: {
-            messages: any;
-            saved: any;
-            validating: any;
-            submitting: any;
-            valid: any;
-            invalid: any;
-            data: any;
+            messages: Feedback[];
+            allMessages: Feedback[];
+            saved: boolean;
+            validating: boolean;
+            submitting: boolean;
+            valid: boolean;
+            invalid: boolean;
+            showingInlineErrors: boolean;
+            data: Partial<T>;
         };
     };
 }
-export type FormDialogProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type FormDialogEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type FormDialogSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class FormDialog<T> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
+export type FormDialogProps<T extends any> = ReturnType<__sveltets_Render<T>['props']>;
+export type FormDialogEvents<T extends any> = ReturnType<__sveltets_Render<T>['events']>;
+export type FormDialogSlots<T extends any> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FormDialog<T extends any> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
 }
 export {};

package/Icon.svelte.d.ts

@@ -3,11 +3,11 @@ import type { IconifyIcon } from '@iconify/svelte';
 declare const __propDef: {
     props: {
         icon: IconifyIcon | undefined;
-        hiddenLabel?: string;
-        inline?: boolean;
-        width?: string | number;
-        height?: string | number;
-        vAlign?: 'top' | 'middle' | 'bottom';
+        hiddenLabel?: string | undefined;
+        inline?: boolean | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        vAlign?: "top" | "bottom" | "middle" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/Input.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         name: string;
         value: string;
-        type?: string;
-        allowlastpass?: boolean;
+        type?: string | undefined;
+        allowlastpass?: boolean | undefined;
         maxlength?: number | undefined;
         min?: string | Date | {
             toJSDate: () => Date;
@@ -16,16 +16,16 @@ declare const __propDef: {
         } | number | undefined;
         step?: number | undefined;
         id?: string | undefined;
-        disabled?: boolean;
+        disabled?: boolean | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
-        valid?: boolean;
-        invalid?: boolean;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
         onChange: any;
         onBlur: any;
         onSelect?: any;
-        use?: HTMLActionEntry[];
-        inputelement?: HTMLInputElement;
+        use?: HTMLActionEntry<any>[] | undefined;
+        inputelement?: HTMLInputElement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/Listbox.svelte

@@ -24,7 +24,7 @@ async function reactToItems(..._) {
     lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled) - 1;
     hilited = undefined;
     if (listboxElement)
-        listboxElement.setAttribute('aria-activedescendant', null);
+        listboxElement.removeAttribute('aria-activedescendant');
 }
 $: reactToItems(items);
 const selectItem = (item, index) => (e) => {
@@ -85,7 +85,7 @@ function onkeydown(e) {
         if (items.length < 1)
             return;
         if (multiselect) {
-            if (typeof hilited !== 'undefined') {
+            if (hilited != null) {
                 if (selectedSet.has(items[hilited].value)) {
                     // remove it from selected
                     selected = selected.filter(s => s.value !== items[hilited].value);

package/Listbox.svelte.d.ts

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import { type PopupMenuItem } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        items?: PopupMenuItem[];
+        items?: PopupMenuItem[] | undefined;
         label: string;
-        multiselect?: boolean;
+        multiselect?: boolean | undefined;
         selected?: {
             value: string;
-            label?: string;
-        }[];
+            label?: string | undefined;
+        }[] | undefined;
         descid?: string | undefined;
-        valid?: boolean;
-        invalid?: boolean;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/Radio.svelte.d.ts

@@ -4,14 +4,14 @@ declare const __propDef: {
         id?: string | undefined;
         name: string;
         value: string;
-        selected?: boolean;
+        selected?: boolean | undefined;
         onChange?: any;
         onBlur?: any;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
-        disabled?: boolean;
-        valid?: boolean;
-        invalid?: boolean;
+        disabled?: boolean | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/Switcher.svelte.d.ts

@@ -2,23 +2,23 @@ import { SvelteComponentTyped } from "svelte";
 import type { Feedback } from '@txstate-mws/svelte-forms';
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
-        name?: string;
+        name?: string | undefined;
         choices: {
-            label?: string;
+            label?: string | undefined;
             value: string;
-            disabled?: boolean;
+            disabled?: boolean | undefined;
         }[];
-        horizontal?: boolean;
+        horizontal?: boolean | undefined;
         label: string;
-        required?: boolean;
+        required?: boolean | undefined;
         helptext?: string | undefined;
-        messages?: Feedback[];
-        iptValue?: string;
-        valid?: boolean;
-        invalid?: boolean;
-        onBlur?: (() => void | Promise<void>);
+        messages?: Feedback[] | undefined;
+        iptValue?: string | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
+        onBlur?: (() => void | Promise<void>) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/TabStore.d.ts

@@ -9,7 +9,7 @@ export interface TabDef {
     required?: boolean;
 }
 interface ITabStore extends ElementSize {
-    current?: number;
+    current: number;
     prevTitle?: string;
     nextTitle?: string;
     requireNext: boolean;
@@ -24,10 +24,10 @@ export declare class TabStore extends Store<ITabStore> {
     set(v: ITabStore): void;
     currentIdx(): import("@txstate-mws/svelte-store").DerivedStore<number, ITabStore>;
     currentName(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
-    currentTitle(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
+    currentTitle(): import("@txstate-mws/svelte-store").DerivedStore<string | undefined, ITabStore>;
     currentTabId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentPanelId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
-    accordion(): import("@txstate-mws/svelte-store").DerivedStore<boolean, ITabStore>;
+    accordion(): import("@txstate-mws/svelte-store").DerivedStore<boolean | 0 | undefined, ITabStore>;
     left(): void;
     right(): void;
     home(): void;

package/TabStore.js

@@ -2,22 +2,23 @@ import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { findIndex, randomid } from 'txstate-utils';
 export const TAB_CONTEXT = {};
 function checkNext(v) {
-    v.visited = { ...v.visited, [v.tabs[v.current].title]: true };
+    v.visited = { ...v.visited, [v.tabs[v.current].name]: true };
     v.prevTitle = v.current > 0 ? v.tabs[v.current - 1].title : undefined;
     v.nextTitle = v.tabs.length - 1 > v.current ? v.tabs[v.current + 1].title : undefined;
-    v.requireNext = v.tabs.some((t, i) => t.required && !v.visited[t.title]);
+    v.requireNext = v.tabs.some((t, i) => t.required && !v.visited[t.name]);
     return v;
 }
 export class TabStore extends Store {
     initialTab;
     constructor(tabs, initialTab) {
-        const current = findIndex(tabs, t => t.title === initialTab, 0);
+        const current = findIndex(tabs, t => t.title === initialTab, 0) ?? 0;
         super(checkNext({
             tabs,
             current,
             visited: {},
-            tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
-            panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
+            requireNext: false,
+            tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
+            panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
             clientWidth: 1024
         }));
         this.initialTab = initialTab;
@@ -48,7 +49,7 @@ export class TabStore extends Store {
         return derivedStore(this, v => v.panelids[v.tabs[v.current].name]);
     }
     accordion() {
-        return derivedStore(this, v => v.clientWidth < 500);
+        return derivedStore(this, v => v.clientWidth && v.clientWidth < 500);
     }
     left() {
         this.update(v => ({ ...v, current: Math.max(0, v.current - 1) }));

package/Tabs.svelte

@@ -23,11 +23,11 @@ $: dialogContext.hasRequired = $store.requireNext;
 $: dialogContext.change($store);
 if (!disableDialogControl)
     setContext(DIALOG_TABS_CONTEXT, { change: () => { } }); // reset context so that any sub-tabs do NOT control the Dialog component
-const currentTitle = store.currentTitle();
+const currentName = store.currentName();
 const currentIdx = store.currentIdx();
 const accordion = store.accordion();
-$: cols = Math.min(Math.floor($store.clientWidth / 90), $store.tabs.length);
-$: scalefactor = Math.min(roundTo($store.clientWidth / (cols * 130), 4), 1);
+$: cols = Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
+$: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
 $: wrapping = cols !== $store.tabs.length;
 $: dialogContext.hasTabs = !$accordion;
 function onClick(idx) {
@@ -80,17 +80,17 @@ async function reactToCurrent(..._) {
     activeelement.style.transform = `translateX(${left}px)`;
     activeelement.style.width = `${width}px`;
 }
-$: active = $currentTitle;
+$: active = $currentName;
 $: reactToCurrent($activeStore);
 onMount(reactToCurrent);
 </script>
 
 {#if !$accordion}
   <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
-    {#each $store.tabs as tab, idx (tab.title)}
+    {#each $store.tabs as tab, idx (tab.name)}
       {@const active = isActive(idx, $store.current)}
       {@const left = idx % cols === 0}
-      <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
+      <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
     {/each}
   </ul>
   <div bind:this={activeelement} class="tabs-active"></div>

package/Tabs.svelte.d.ts

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         tabs: TabDef[];
         active?: string | undefined;
-        store?: TabStore;
-        disableDialogControl?: boolean;
+        store?: TabStore | undefined;
+        disableDialogControl?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/chooser/Chooser.svelte

@@ -51,7 +51,7 @@ async function openRecursive(pathSplit, depth) {
         curr = curr?.children?.find(c => c.name === pathSplit[i + 1]);
     }
     if (!curr)
-        return;
+        throw new Error('tried to open a path that does not exist');
     await treeStore.open(curr, false);
     if (depth + 1 >= pathSplit.length)
         return curr;
@@ -79,7 +79,8 @@ async function selectPreview(..._) {
 }
 onMount(async () => {
     await store.init({ images, pages, assets, folders, activeSources, initialSource, initialPath, passthruFilters, filter });
-    tabStore?.activateName($source.name);
+    if ($source?.name)
+        tabStore?.activateName($source.name);
     await selectPreview();
 });
 </script>
@@ -103,7 +104,7 @@ onMount(async () => {
         <Thumbnail item={$preview} />
         <Details item={$preview}>
           {#if $preview.type === 'folder'}
-            <li>{$selected.children?.length || 0} sub-items</li>
+            <li>{$selected?.children?.length ?? 0} sub-items</li>
           {/if}
         </Details>
       {/if}

package/chooser/Chooser.svelte.d.ts

@@ -3,18 +3,18 @@ import { type AnyItem } from './ChooserAPI';
 import { ChooserStore } from './ChooserStore';
 declare class __sveltets_Render<F> {
     props(): {
-        label?: string;
-        images?: boolean;
-        pages?: boolean;
-        assets?: boolean;
-        folders?: boolean;
-        required?: boolean;
-        initialSource?: string;
-        initialPath?: string;
-        activeSources?: string[];
-        passthruFilters?: F;
-        filter?: (item: AnyItem) => boolean | Promise<boolean>;
-        store?: ChooserStore<F>;
+        label?: string | undefined;
+        images?: boolean | undefined;
+        pages?: boolean | undefined;
+        assets?: boolean | undefined;
+        folders?: boolean | undefined;
+        required?: boolean | undefined;
+        initialSource?: string | undefined;
+        initialPath?: string | undefined;
+        activeSources?: string[] | undefined;
+        passthruFilters?: F | undefined;
+        filter?: ((item: AnyItem) => boolean | Promise<boolean>) | undefined;
+        store?: ChooserStore<F> | undefined;
     };
     events(): {
         escape: CustomEvent<any>;

package/chooser/ChooserStore.d.ts

@@ -6,7 +6,7 @@ export interface UISource extends Source {
 }
 export interface RawURL {
     type: 'raw';
-    id: string;
+    id: string | undefined;
     url: string;
 }
 export type AnyUIItem = TypedTreeItem<Page | Asset | Folder>;
@@ -43,9 +43,9 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     constructor(client: Client);
     setOptions(options: ChooserStoreOptions<F>): void;
     sources: import("@txstate-mws/svelte-store").DerivedStore<UISource[], IAssetStore>;
-    source: import("@txstate-mws/svelte-store").DerivedStore<UISource, IAssetStore>;
-    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem, IAssetStore>;
-    getSource(state?: IAssetStore): UISource;
+    source: import("@txstate-mws/svelte-store").DerivedStore<UISource | undefined, IAssetStore>;
+    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem | undefined, IAssetStore>;
+    getSource(state?: IAssetStore): UISource | undefined;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
     init(options: ChooserStoreOptions<F>): Promise<void>;
     setPreview(item?: AnyItem): void;

package/chooser/ChooserStore.js

@@ -50,7 +50,7 @@ export class ChooserStore extends Store {
             this.options.assets ? this.client.getSources('asset') : []
         ]);
         this.update(v => {
-            const sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [] };
+            const sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s.name)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s.name)) ?? [] };
             return { ...v, sources };
         });
         this.setSource(this.value.preview?.source ?? this.options.initialSource, true);
@@ -74,9 +74,9 @@ export class ChooserStore extends Store {
             name ??= [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].filter(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true)[0].name;
             const pageSource = v.sources?.page.findIndex(s => s.name === name);
             const assetSource = v.sources?.asset.findIndex(s => s.name === name);
-            if (pageSource >= 0)
+            if ((pageSource ?? -1) >= 0)
                 return { ...v, activetype: 'page', activesource: pageSource };
-            else if (assetSource >= 0)
+            else if ((assetSource ?? -1) >= 0)
                 return { ...v, activetype: 'asset', activesource: assetSource };
             return v;
         });

package/colorpicker/FieldColorPicker.svelte.d.ts

@@ -3,13 +3,13 @@ import type { ColorPickerOption } from './colorpicker';
 declare const __propDef: {
     props: {
         id?: string | undefined;
-        class?: string;
+        class?: string | undefined;
         path: string;
         options: ColorPickerOption[];
-        addAllOption?: boolean;
-        label?: string;
-        required?: boolean;
-        notNull?: boolean;
+        addAllOption?: boolean | undefined;
+        label?: string | undefined;
+        required?: boolean | undefined;
+        notNull?: boolean | undefined;
         defaultValue?: any;
         conditional?: boolean | undefined;
         helptext?: string | undefined;