@dosgato/dialog 0.0.46 → 0.0.48

package/dist/FieldRadio.svelte

@@ -11,6 +11,8 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let horizontal = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let number = false;
 export let date = false;
@@ -21,5 +23,5 @@ export let deserialize = undefined;
 </script>
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize>
-  <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
+  <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldRadio.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         horizontal?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         number?: boolean | undefined;
         date?: boolean | undefined;

package/dist/FieldSelect.svelte

@@ -13,6 +13,8 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let number = false;
 export let date = false;
@@ -22,8 +24,8 @@ export let serialize = undefined;
 export let deserialize = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
-  <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid])}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
+  <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
       {@const serializedValue = serialize(choice.value)}

package/dist/FieldSelect.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLSelectElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         number?: boolean | undefined;
         date?: boolean | undefined;

package/dist/FieldStandard.svelte

@@ -16,11 +16,12 @@ export let deserialize = undefined;
 export let finalize = undefined;
 export let conditional = undefined;
 export let required = false;
+export let related = 0;
 export let helptext = undefined;
 </script>
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} {finalize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid let:serialize let:deserialize>
-  <Container {id} {label} {messages} {descid} {required} {helptext} let:messagesid let:helptextid>
+  <Container {id} {label} {messages} {descid} {required} {related} {helptext} let:messagesid let:helptextid>
     <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} {serialize} {deserialize} />
   </Container>
 </Field>

package/dist/FieldStandard.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         finalize?: ((value: any) => any) | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        related?: number | true | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldText.svelte

@@ -15,9 +15,11 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<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 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} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {extradescid} {use}></Input>
 </FieldStandard>

package/dist/FieldText.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         use?: HTMLActionEntry<any>[] | undefined;
         inputelement?: HTMLInputElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/FieldTextArea.svelte

@@ -15,11 +15,13 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
-<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 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} 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 {maxlength} use:passActions={use}></textarea>
 </FieldStandard>
 
 <style>

package/dist/FieldTextArea.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         use?: HTMLActionEntry<any>[] | undefined;
         inputelement?: HTMLTextAreaElement | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
     };
     events: {

package/dist/Input.svelte

@@ -13,6 +13,7 @@ export let max = undefined;
 export let step = undefined;
 export let id = undefined;
 export let disabled = false;
+export let extradescid = undefined;
 export let messagesid = undefined;
 export let helptextid = undefined;
 export let valid = false;
@@ -22,7 +23,7 @@ export let onBlur;
 export let onSelect = undefined;
 export let use = [];
 export let inputelement = undefined;
-$: descby = [helptextid, messagesid].filter(isNotBlank).join(' ');
+$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;

package/dist/Input.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         step?: number | undefined;
         id?: string | undefined;
         disabled?: boolean | undefined;
+        extradescid?: string | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
         valid?: boolean | undefined;

package/dist/Listbox.svelte

@@ -120,6 +120,7 @@ function focusListbox() {
 
 <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

@@ -7,10 +7,11 @@ export let onChange = undefined;
 export let onBlur = undefined;
 export let messagesid = undefined;
 export let helptextid = undefined;
+export let extradescid = undefined;
 export let disabled = false;
 export let valid = false;
 export let invalid = false;
-$: descby = [messagesid, helptextid].filter(isNotBlank).join(' ');
+$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
 </script>
 
 <input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={descby} {value} on:change={onChange} on:blur={onBlur}>

package/dist/Radio.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         onBlur?: any;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
+        extradescid?: string | undefined;
         disabled?: boolean | undefined;
         valid?: boolean | undefined;
         invalid?: boolean | undefined;

package/dist/Switcher.svelte

@@ -12,6 +12,8 @@ export let choices;
 export let horizontal = false;
 export let label;
 export let required = false;
+export let related = 0;
+export let extradescid = undefined;
 export let helptext = undefined;
 export let messages = [];
 export let iptValue = choices[0].value;
@@ -28,12 +30,12 @@ function onChange(e) {
 $: columns = Math.floor($store.width / 250);
 $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 && columns === 3 ? 2 : columns) : 100) + '%';
 </script>
-<Container {id} {label} {messages} descid={groupid} {required} {helptext} let:helptextid>
+<Container {id} {label} {messages} descid={groupid} {required} {related} {helptext} let:helptextid>
   <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
     {#each choices as choice, idx}
       {@const radioid = `${groupid}.${idx}`}
       <label for={radioid} style:width>
-        <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
+        <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid} {extradescid} />
         <span>{choice.label || choice.value}</span>
       </label>
     {/each}

package/dist/Switcher.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         horizontal?: boolean | undefined;
         label: string;
         required?: boolean | undefined;
+        related?: number | true | undefined;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         messages?: Feedback[] | undefined;
         iptValue?: string | undefined;

package/dist/Tabs.svelte

@@ -87,6 +87,7 @@ onMount(reactToCurrent);
 
 {#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/chooser/Chooser.svelte

@@ -101,11 +101,7 @@ onMount(async () => {
     <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
         <Thumbnail item={$preview} larger />
-        <Details item={$preview}>
-          {#if $preview.type === 'folder'}
-            <li>{$selected?.children?.length ?? 0} sub-items</li>
-          {/if}
-        </Details>
+        <Details item={$preview} />
       {/if}
     </section>
   </section>

package/dist/chooser/ChooserStore.d.ts

@@ -18,7 +18,7 @@ export interface IAssetStore {
     activetype: ChooserType;
     activesource: number;
     initialized: boolean;
-    preview?: AnyItem;
+    preview?: AnyUIItem;
 }
 export interface ChooserStoreOptions<F> {
     pages?: boolean;
@@ -44,11 +44,11 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     setOptions(options: ChooserStoreOptions<F>): void;
     sources: import("@txstate-mws/svelte-store").DerivedStore<UISource[], IAssetStore>;
     source: import("@txstate-mws/svelte-store").DerivedStore<UISource | undefined, IAssetStore>;
-    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem | undefined, IAssetStore>;
+    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyUIItem | 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;
+    setPreview(item?: AnyUIItem): void;
     clearPreview(): void;
     setSource(name?: string, init?: boolean): void;
 }

package/dist/chooser/ChooserStore.js

@@ -24,7 +24,7 @@ export class ChooserStore extends Store {
     setOptions(options) {
         const userFilter = options.filter ?? nofilter;
         const filter = options.images
-            ? (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && userFilter(itm)
+            ? async (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && await userFilter(itm)
             : userFilter;
         this.options = {
             ...options,
@@ -58,8 +58,10 @@ export class ChooserStore extends Store {
         this.update(v => ({ ...v, initialized: true }));
     }
     setPreview(item) {
-        if (!item)
-            return this.clearPreview();
+        if (!item) {
+            this.clearPreview();
+            return;
+        }
         if (item.type === 'folder' && !this.options.folders)
             return;
         this.update(v => ({ ...v, preview: item }));

package/dist/chooser/Details.svelte

@@ -2,25 +2,52 @@
 export let item;
 </script>
 
-<ul class="dialog-chooser-info" aria-live="polite">
+<dl class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
-    <li>{item.path}</li>
+    <div class="top-row">
+      <dt>Name:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {:else if item.id}
-    <li>External Link<br>{item.url}</li>
+    <div>
+      <dt>External Link:</dt>
+      <dd>{item.url}</dd>
+    </div>
   {/if}
-  {#if item.type === 'asset' && item.image}
-    <li>{item.image.width}x{item.image.height}</li>
+  {#if item.type === 'asset'}
+    <div class="horizontal-group">
+      {#if item.image}
+        <div>
+          <dt>Dimensions:</dt>
+          <dd>{item.image.width}x{item.image.height}</dd>
+        </div>
+      {/if}
+      <div>
+        <dt>File Type:</dt>
+        <dd>{item.mime}</dd>
+      </div>
+      <div>
+        <dt>File Size:</dt>
+        <dd>{bytesToHuman(item.bytes)}</dd>
+      </div>
+    </div>
   {:else if item.type === 'page' && item.title}
-    <li>{item.title}</li>
+    <dt>Title:</dt>
+    <dd>{item.title}</dd>
   {:else if item.type === 'folder'}
-    <li>{item.path}</li>
-  {/if}
-  {#if item.type === 'asset'}
-    <li>{item.mime}</li>
-    <li>{bytesToHuman(item.bytes)}</li>
+    <div class="horizontal-group">
+      <div>
+        <dt>Path:</dt>
+        <dd>{item.path}</dd>
+      </div>
+      <div>
+        <dt>Contents:</dt>
+        <dd>{item.children?.length ?? 0} sub-items</dd>
+      </div>
+    </div>
   {/if}
   <slot />
-</ul>
+</dl>
 
 <style>
   .dialog-chooser-info {
@@ -28,5 +55,24 @@ export let item;
     margin: 0;
     list-style: none;
   }
+  .dialog-chooser-info dt {
+    font-weight: bold;
+  }
+  .dialog-chooser-info dd {
+    margin: 0;
+  }
+  .top-row {
+    margin-bottom: 1em;
+  }
+  .horizontal-group {
+    display: flex;
+    justify-content: space-between;
+  }
+  :global([data-eq~="1400px"]) .horizontal-group {
+    flex-direction: column;
+  }
+  :global([data-eq~="1400px"]) .horizontal-group div:not(:last-child){
+    margin-bottom: 1em;
+  }
 
 </style>

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

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AnyItem } from './ChooserAPI';
-import { type RawURL } from './ChooserStore';
+import { type AnyUIItem, type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyItem | RawURL;
+        item: AnyUIItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/helpers.d.ts

@@ -1 +1 @@
-export declare function getDescribedBy(ids: (string | undefined)[]): string | null;
+export declare function getDescribedBy(ids: (string | undefined)[]): string | undefined;

package/dist/helpers.js

@@ -1,5 +1,5 @@
 import { isNotBlank } from 'txstate-utils';
 export function getDescribedBy(ids) {
     const descby = ids.filter(isNotBlank).join(' ');
-    return isNotBlank(descby) ? descby : null;
+    return isNotBlank(descby) ? descby : undefined;
 }

package/dist/tree/Tree.svelte

@@ -1,10 +1,9 @@
 <script>import { resize } from '@txstate-mws/svelte-components';
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
-import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
-import { hashid } from 'txstate-utils';
+import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
-import { TreeStore, TREE_STORE_CONTEXT } from './treestore';
+import { getHashId, TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
 export let nodeClass = undefined;
 export let singleSelect = undefined;
@@ -93,18 +92,23 @@ function headerDragEnd() {
 function headerDragReset() {
     store.resetHeaderOverride();
 }
+let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
     const saveFocusId = $store.focused?.id;
-    await store.refresh();
-    if ($store.focused?.id && $store.focused.id === saveFocusId) {
-        const el = document.getElementById(hashid($store.focused.id));
-        el?.scrollIntoView({ block: 'center' });
-    }
     headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    // need to wait long enough for headers to redraw before trying to mount the rows
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    mounted = true;
+    const el = saveFocusId ? document.getElementById(getHashId(saveFocusId)) : undefined;
+    if ($store.focused?.id && $store.focused.id === saveFocusId)
+        el?.scrollIntoView({ block: 'center' });
+    await store.refresh();
 });
 onDestroy(() => {
-    document.removeEventListener('dragend', onDragEnd);
+    if (typeof document !== 'undefined')
+        document.removeEventListener('dragend', onDragEnd);
 });
 let hadFocus = false;
 beforeUpdate(() => {
@@ -112,7 +116,7 @@ beforeUpdate(() => {
 });
 afterUpdate(() => {
     if ($store.focused?.id) {
-        const el = document.getElementById(hashid($store.focused.id));
+        const el = document.getElementById(getHashId($store.focused.id));
         if (el && hadFocus) {
             if (el !== document.activeElement)
                 el.focus();
@@ -130,7 +134,8 @@ afterUpdate(() => {
     {#if enableResize && i !== headers.length - 1}<div class="tree-separator" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>
-{#if $rootItems?.length}
+{#if mounted && $rootItems?.length}
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd}>
     {#each $rootItems as item, i (item.id)}
       <TreeNode

package/dist/tree/TreeNode.svelte

@@ -4,9 +4,9 @@ import menuDown from '@iconify-icons/mdi/menu-down';
 import menuRight from '@iconify-icons/mdi/menu-right';
 import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, getContext } from 'svelte';
-import { hashid, isNotBlank, toArray } from 'txstate-utils';
+import { isNotBlank, toArray } from 'txstate-utils';
 import { Icon } from '..';
-import { TREE_STORE_CONTEXT } from './treestore';
+import { TREE_STORE_CONTEXT, getHashId } from './treestore';
 import LoadIcon from './LoadIcon.svelte';
 import TreeCell from './TreeCell.svelte';
 export let headers;
@@ -26,7 +26,7 @@ let nodeelement;
 let userWantsCopy = false;
 $: isSelected = $selected.has(item.id);
 $: showChildren = !!item.open && !!item.children?.length;
-$: hashedId = hashid(item.id);
+$: hashedId = getHashId(item.id);
 $: isDraggable = $draggable && ((isSelected && !$selectedUndraggable) || store.dragEligible([item], true) || store.dragEligible([item], false));
 $: dropZone = $dragging && store.dropEffect(item, false, userWantsCopy) !== 'none';
 $: dropDisabled = $dragging && !dropZone;

package/dist/tree/treestore.d.ts

@@ -48,7 +48,7 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     #private;
     fetchChildren: FetchChildrenFn<T>;
     treeElement?: HTMLElement;
-    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[] | undefined, ITreeStore<T>>;
+    rootItems: import("svelte/store").Readable<any>;
     draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean | undefined, ITreeStore<T>>;
@@ -115,3 +115,5 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     setHeaderOverride(id: string, width: string): void;
     resetHeaderOverride(): void;
 }
+export declare const hashedIds: Record<string, string>;
+export declare function getHashId(str: string): string;

package/dist/tree/treestore.js

@@ -1,10 +1,12 @@
 import { ActiveStore, derivedStore } from '@txstate-mws/svelte-store';
-import { keyby } from 'txstate-utils';
+import { derived } from 'svelte/store';
+import { hashid, keyby } from 'txstate-utils';
 export const TREE_STORE_CONTEXT = {};
+const rootItems = v => v.rootItems;
 export class TreeStore extends ActiveStore {
     fetchChildren;
     treeElement;
-    rootItems = derivedStore(this, 'rootItems');
+    rootItems = derived(this, rootItems);
     draggable = derivedStore(this, v => v.draggable && !v.loading);
     dragging = derivedStore(this, 'dragging');
     selectedUndraggable = derivedStore(this, 'selectedUndraggable');
@@ -29,7 +31,7 @@ export class TreeStore extends ActiveStore {
     }
     async visit(item, cb) {
         await cb(item);
-        await Promise.all((item.children ?? []).map(async (child) => await this.visit(child, cb)));
+        await Promise.all((item.children ?? []).map(async (child) => { await this.visit(child, cb); }));
     }
     visitSync(item, cb) {
         cb(item);
@@ -77,15 +79,17 @@ export class TreeStore extends ActiveStore {
         try {
             const children = await this.fetch(item);
             // re-open any open children
-            await Promise.all(children.map(async (child) => await this.visit(child, async (child) => {
-                child.open = this.value.itemsById[child.id]?.open;
-                if (child.open) {
-                    child.children = await this.fetch(child);
-                    child.hasChildren = child.children.length > 0;
-                    if (!child.hasChildren)
-                        child.open = false;
-                }
-            })));
+            await Promise.all(children.map(async (child) => {
+                await this.visit(child, async (child) => {
+                    child.open = this.value.itemsById[child.id]?.open;
+                    if (child.open) {
+                        child.children = await this.fetch(child);
+                        child.hasChildren = child.children.length > 0;
+                        if (!child.hasChildren)
+                            child.open = false;
+                    }
+                });
+            }));
             if (item) {
                 this.visitSync(item, itm => { if (itm.id !== item.id)
                     this.value.itemsById[itm.id] = undefined; });
@@ -336,3 +340,8 @@ export class TreeStore extends ActiveStore {
         this.trigger();
     }
 }
+export const hashedIds = {};
+export function getHashId(str) {
+    hashedIds[str] ??= hashid(str);
+    return hashedIds[str];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -20,7 +20,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.9",
+    "@txstate-mws/svelte-components": "^1.4.5",
     "@txstate-mws/svelte-forms": "^1.3.4",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",