@dosgato/dialog 0.0.45 → 0.0.47

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

@@ -91,23 +91,28 @@ onMount(async () => {
         <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} />
       {/if}
     </header>
-    <section class="dialog-chooser-chooser">
-      {#if $store.initialized}
-        <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
-        ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
-      {/if}
-    </section>
-    <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>
-      {/if}
-    </section>
+    <div class="dialog-chooser-body">
+      <section class="dialog-chooser-chooser">
+        {#if $store.initialized}
+          <Tree headers={[
+            { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
+          ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
+        {/if}
+      </section>
+      <section class="dialog-chooser-preview" tabindex="-1">
+        {#if $preview}
+          <Thumbnail item={$preview} larger />
+          <Details item={$preview}>
+            {#if $preview.type === 'folder'}
+              <div class="folder-info">
+                <dt>Contents:</dt>
+                <dd>{$selected?.children?.length ?? 0} sub-items</dd>
+              </div>
+            {/if}
+          </Details>
+        {/if}
+      </section>
+    </div>
   </section>
 </Dialog>
 
@@ -115,7 +120,6 @@ onMount(async () => {
   .dialog-chooser-window {
     position: relative;
     height: 80vh;
-    display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     justify-content: flex-end;
@@ -124,6 +128,10 @@ onMount(async () => {
   .dialog-chooser-window * {
     box-sizing: border-box;
   }
+
+  .dialog-chooser-body {
+    display: flex;
+  }
   .dialog-chooser-chooser {
     position: relative;
     width: 75%;
@@ -140,6 +148,12 @@ onMount(async () => {
     padding: 1em;
     overflow-y: auto;
   }
+  .folder-info dt {
+    font-weight: bold;
+  }
+  .folder-info dd {
+    margin: 0;
+  }
   header {
     position: relative;
     width: 100%;

package/dist/chooser/Details.svelte

@@ -2,25 +2,48 @@
 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="asset-properties">
+      {#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>
+    <div>
+      <dt>Title:</dt>
+      <dd>{item.title}</dd>
+    </div>
   {:else if item.type === 'folder'}
-    <li>{item.path}</li>
-  {/if}
-  {#if item.type === 'asset'}
-    <li>{item.mime}</li>
-    <li>{bytesToHuman(item.bytes)}</li>
+    <div>
+      <dt>Path:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {/if}
   <slot />
-</ul>
+</dl>
 
 <style>
   .dialog-chooser-info {
@@ -28,5 +51,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;
+  }
+  .asset-properties {
+    display: flex;
+    justify-content: space-between;
+  }
+  :global([data-eq~="1400px"]) .asset-properties {
+    flex-direction: column;
+  }
+  :global([data-eq~="1400px"]) .asset-properties div:not(:last-child){
+    margin-bottom: 1em;
+  }
 
 </style>

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,24 @@ function headerDragEnd() {
 function headerDragReset() {
     store.resetHeaderOverride();
 }
+let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
     const saveFocusId = $store.focused?.id;
+    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;
     await store.refresh();
     if ($store.focused?.id && $store.focused.id === saveFocusId) {
-        const el = document.getElementById(hashid($store.focused.id));
+        const el = document.getElementById(getHashId($store.focused.id));
         el?.scrollIntoView({ block: 'center' });
     }
-    headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
 });
 onDestroy(() => {
-    document.removeEventListener('dragend', onDragEnd);
+    if (typeof document !== 'undefined')
+        document.removeEventListener('dragend', onDragEnd);
 });
 let hadFocus = false;
 beforeUpdate(() => {
@@ -112,7 +117,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 +135,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.45",
+  "version": "0.0.47",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -10,14 +10,17 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint --ignore-path .gitignore ."
   },
+  "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./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",