@dosgato/dialog 0.0.19 → 0.0.21

package/chooser/Thumbnail.svelte

@@ -25,12 +25,19 @@ export let item;
     width: 100%;
     padding-top: 75%;
   }
-  img {
+  .dialog-chooser-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: scale-down;
   }
-  .dialog-chooser-thumbnail > * {
+  .dialog-chooser-thumbnail :global(svg) {
+    width: 60%;
+    height: 60%;
+    min-width: 4.5em;
+    min-height: 4.5em;
+    object-fit: scale-down;
+  }
+  .dialog-chooser-thumbnail > :global(*) {
     display: block;
     position: absolute;
     top: 50%;

package/chooser/Thumbnail.svelte.d.ts

@@ -1,17 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AnyUIItem, RawURL } from './ChooserStore';
+import type { AnyItem } from './ChooserAPI';
+import type { RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyUIItem | RawURL;
+        item: AnyItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ThumbnailProps = typeof __propDef.props;
-export declare type ThumbnailEvents = typeof __propDef.events;
-export declare type ThumbnailSlots = typeof __propDef.slots;
+export type ThumbnailProps = typeof __propDef.props;
+export type ThumbnailEvents = typeof __propDef.events;
+export type ThumbnailSlots = typeof __propDef.slots;
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }
 export {};

package/colorpicker/FieldColorPicker.svelte

@@ -1,43 +1,97 @@
 <script>import FieldStandard from '../FieldStandard.svelte';
-import { keyby } from 'txstate-utils';
+import { getDescribedBy, Radio } from '..';
+import { randomid } from 'txstate-utils';
 export let id = undefined;
 let className = '';
 export { className as class };
 export let path;
 export let options;
+export let addAllOption = false;
 export let label = '';
 export let required = false;
-export let disabled = false;
 export let notNull = false;
-export let defaultValue = notNull ? options[0].value : undefined;
+export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].value) : undefined;
 export let conditional = undefined;
-export let placeholder = 'Select' + (label ? ' ' + label : '');
-export let inputelement = undefined;
-const colorsByValue = keyby(options, 'value');
+export let helptext = undefined;
+const groupid = randomid();
 </script>
 
-<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:id let:value let:valid let:invalid let:onBlur let:onChange>
-  <div class="flex-color-container">
-    <div class="selected-color" style="background-color: { value ? colorsByValue[value].color : 'transparent' }"/>
-    <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid>
-      {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
-      {#each options as option (option.value) }
-        <option value={option.value} selected={value === option.value}>{option.name || option.value}</option>
-      {/each}
-    </select>
+<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid>
+  <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
+    {#if addAllOption}
+      <label for={`${path}.alt`} class="colorsel alternating">
+        <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
+        <span class="alternating-bg">
+          {#each options as option}
+            <span style={`background-color: ${option.color}`}></span>
+          {/each}
+        </span>
+        <span class="alternating-text">Alternating</span>
+      </label>
+    {/if}
+    {#each options as option, idx (option.value) }
+      {@const radioid = `${path}.${idx}`}
+      <label for={radioid} class="colorsel">
+        <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
+        <span style={`background-color: ${option.color}`}>{option.name || option.value}</span>
+      </label>
+    {/each}
   </div>
 </FieldStandard>
 
 <style>
-  .flex-color-container {
+  .color-container {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  label.colorsel :global(input[type="radio"]) {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  label.colorsel :global(input[type="radio"] + span) {
+    display: inline-block;
+    font-weight: bold;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid #D1D1D1;
+  }
+
+  label.colorsel :global(input[type="radio"]:checked + span) {
+    outline: 5px solid #93BBC4;
+  }
+
+  label.colorsel.alternating {
+    position: relative;
+  }
+
+  label.colorsel.alternating span.alternating-bg {
     display: flex;
-    align-items: center;
-  }
-  .selected-color {
-    height: 2em;
-    width: 2em;
-    margin-right: 1em;
-    border: 1px solid #6d6d6d;
-    border-radius: 3px;
+    padding: 0;
+    height: 100%;
+  }
+
+  label.colorsel.alternating span.alternating-bg span {
+    width: 100%;
+  }
+
+  label.colorsel.alternating span.alternating-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    color: white;
+    text-shadow: 1px 1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, -1px -1px 0 #222;
   }
 </style>

package/colorpicker/FieldColorPicker.svelte.d.ts

@@ -6,23 +6,22 @@ declare const __propDef: {
         class?: string;
         path: string;
         options: ColorPickerOption[];
+        addAllOption?: boolean;
         label?: string;
         required?: boolean;
-        disabled?: boolean;
         notNull?: boolean;
         defaultValue?: any;
         conditional?: boolean | undefined;
-        placeholder?: string;
-        inputelement?: HTMLSelectElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldColorPickerProps = typeof __propDef.props;
-export declare type FieldColorPickerEvents = typeof __propDef.events;
-export declare type FieldColorPickerSlots = typeof __propDef.slots;
+export type FieldColorPickerProps = typeof __propDef.props;
+export type FieldColorPickerEvents = typeof __propDef.events;
+export type FieldColorPickerSlots = typeof __propDef.slots;
 export default class FieldColorPicker extends SvelteComponentTyped<FieldColorPickerProps, FieldColorPickerEvents, FieldColorPickerSlots> {
 }
 export {};

package/fileIcons.d.ts

@@ -1 +1,2 @@
-export declare function iconForMime(mime: string): import("@iconify/types").IconifyIcon;
+import type { IconifyIcon } from '@iconify/svelte';
+export declare function iconForMime(mime: string): IconifyIcon;

package/helpers.d.ts

@@ -0,0 +1 @@
+export declare function getDescribedBy(ids: string[]): string;

package/helpers.js

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

package/iconpicker/FieldIconPicker.svelte

@@ -3,12 +3,14 @@ import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-compon
 import { FontAwesomeIcons, IconCategories } from './iconpicker';
 import Icon from '@iconify/svelte';
 import { randomid, keyby } from 'txstate-utils';
+import { getDescribedBy } from '../helpers';
 export let id = undefined;
 export let path;
 export let label = '';
 export let required = false;
 export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
 export let conditional = undefined;
+export let helptext = undefined;
 const labelid = randomid();
 const descid = randomid();
 let modalOpen = false;
@@ -101,9 +103,9 @@ function onKeyDown(e) {
 }
 </script>
 
-<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
   <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
-  <button id="btnSelectIcon" on:click={() => { modalOpen = true }}>Select New Icon</button>
+  <button id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -10,15 +10,16 @@ declare const __propDef: {
             prefix: string;
         };
         conditional?: boolean | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldIconPickerProps = typeof __propDef.props;
-export declare type FieldIconPickerEvents = typeof __propDef.events;
-export declare type FieldIconPickerSlots = typeof __propDef.slots;
+export type FieldIconPickerProps = typeof __propDef.props;
+export type FieldIconPickerEvents = typeof __propDef.events;
+export type FieldIconPickerSlots = typeof __propDef.slots;
 export default class FieldIconPicker extends SvelteComponentTyped<FieldIconPickerProps, FieldIconPickerEvents, FieldIconPickerSlots> {
 }
 export {};

package/index.d.ts

@@ -1,5 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as Dialog } from './Dialog.svelte';
 export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
@@ -8,6 +11,7 @@ export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldHidden } from './FieldHidden.svelte';
+export { default as FieldIdentifier } from './FieldIdentifier.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -18,6 +22,7 @@ export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
 export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
@@ -31,3 +36,5 @@ export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
+export * from './helpers.js';
+export * from './tree/index.js';

package/index.js

@@ -1,5 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as Dialog } from './Dialog.svelte';
 export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
@@ -8,6 +11,7 @@ export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldHidden } from './FieldHidden.svelte';
+export { default as FieldIdentifier } from './FieldIdentifier.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -18,6 +22,7 @@ export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
 export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
@@ -31,3 +36,5 @@ export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
+export * from './helpers.js';
+export * from './tree/index.js';

package/package.json

@@ -1,34 +1,36 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.0",
-    "@txstate-mws/svelte-forms": ">=0.0.22",
-    "@iconify/svelte": "^2.2.1",
+    "@txstate-mws/svelte-components": "^1.3.5",
+    "@txstate-mws/svelte-forms": "^1.1.2",
+    "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "txstate-utils": "^1.7.3"
+    "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "@sveltejs/package": "^1.0.0-next.5",
+    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.4.14",
+    "svelte2tsx": "^0.5.20",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
+    "./Button.svelte": "./Button.svelte",
     "./ButtonGroup.svelte": "./ButtonGroup.svelte",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Container.svelte": "./Container.svelte",
+    "./Dialog.svelte": "./Dialog.svelte",
     "./FieldAutocomplete.svelte": "./FieldAutocomplete.svelte",
     "./FieldCheckbox.svelte": "./FieldCheckbox.svelte",
     "./FieldChoices.svelte": "./FieldChoices.svelte",
@@ -48,6 +50,7 @@
     "./FieldTextArea.svelte": "./FieldTextArea.svelte",
     "./FileIcon.svelte": "./FileIcon.svelte",
     "./Form.svelte": "./Form.svelte",
+    "./FormDialog.svelte": "./FormDialog.svelte",
     "./Icon.svelte": "./Icon.svelte",
     "./InlineMessage.svelte": "./InlineMessage.svelte",
     "./InlineMessages.svelte": "./InlineMessages.svelte",
@@ -57,23 +60,27 @@
     "./Tab.svelte": "./Tab.svelte",
     "./TabStore": "./TabStore.js",
     "./Tabs.svelte": "./Tabs.svelte",
-    "./chooser/Asset.svelte": "./chooser/Asset.svelte",
-    "./chooser/AssetFolder.svelte": "./chooser/AssetFolder.svelte",
     "./chooser/Chooser.svelte": "./chooser/Chooser.svelte",
     "./chooser/ChooserAPI": "./chooser/ChooserAPI.js",
     "./chooser/ChooserStore": "./chooser/ChooserStore.js",
     "./chooser/Details.svelte": "./chooser/Details.svelte",
-    "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
     "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
     "./colorpicker/colorpicker": "./colorpicker/colorpicker.js",
     "./colorpicker": "./colorpicker/index.js",
     "./fileIcons": "./fileIcons.js",
+    "./helpers": "./helpers.js",
     "./iconpicker/FieldIconPicker.svelte": "./iconpicker/FieldIconPicker.svelte",
     "./iconpicker/iconpicker": "./iconpicker/iconpicker.js",
     "./iconpicker": "./iconpicker/index.js",
-    ".": "./index.js"
+    ".": "./index.js",
+    "./tree/LoadIcon.svelte": "./tree/LoadIcon.svelte",
+    "./tree/Tree.svelte": "./tree/Tree.svelte",
+    "./tree/TreeCell.svelte": "./tree/TreeCell.svelte",
+    "./tree/TreeNode.svelte": "./tree/TreeNode.svelte",
+    "./tree": "./tree/index.js",
+    "./tree/treestore": "./tree/treestore.js"
   },
   "svelte": "./index.js"
 }

package/tree/LoadIcon.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let size = '1em'
+</script>
+
+<i aria-hidden="true" style:width={size} style:padding-top={size}></i>
+
+<style>
+  i {
+    display: inline-block;
+    box-sizing: content-box;
+    border-color: var(--loadicon-bg-color, #FFFFFF);
+    border-top-color: var(--loadicon-moving-color, #333333);
+    border-style: solid;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+    margin-left: 0.3em;
+    vertical-align: middle;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+</style>

package/tree/LoadIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LoadIconProps */
+/** @typedef {typeof __propDef.events}  LoadIconEvents */
+/** @typedef {typeof __propDef.slots}  LoadIconSlots */
+export default class LoadIcon extends SvelteComponentTyped<{
+    size?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LoadIconProps = typeof __propDef.props;
+export type LoadIconEvents = typeof __propDef.events;
+export type LoadIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/tree/Tree.svelte

@@ -0,0 +1,203 @@
+<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 TreeNode from './TreeNode.svelte';
+import { TreeStore, TREE_STORE_CONTEXT } from './treestore';
+export let headers;
+export let nodeClass = undefined;
+export let singleSelect = undefined;
+export let enableResize = false;
+export let fetchChildren = undefined;
+export let dragEligible = undefined;
+export let moveHandler = undefined;
+export let copyHandler = undefined;
+export let dropEffect = undefined;
+export let store = new TreeStore(fetchChildren, { copyHandler, dragEligible, dropEffect, moveHandler });
+setContext(TREE_STORE_CONTEXT, store);
+const { rootItems, headerOverride } = store;
+let checkboxelement;
+const headerelements = [];
+const treeWidth = new Store({});
+function calcHeaderSizes() {
+    const headerSizes = [];
+    let totalFixed = checkboxelement?.offsetWidth ?? 0;
+    for (let i = 0; i < headers.length; i++) {
+        const header = headers[i];
+        if (header.fixed || $headerOverride[header.id]) {
+            headerSizes[i] = $headerOverride[header.id] ?? header.fixed;
+            totalFixed += headerelements[i]?.offsetWidth ?? 0;
+        }
+    }
+    const remainingWidth = ($treeWidth.clientWidth ?? 1024) - totalFixed;
+    const growHeaders = headers.filter((h, i) => !h.fixed && !$headerOverride[h.id] && headerelements[i]?.offsetWidth);
+    const totalGrowShares = growHeaders.reduce((sum, h) => sum + (h.grow ?? 1), 0);
+    for (let i = 0; i < headers.length; i++) {
+        const header = headers[i];
+        if (!header.fixed && !$headerOverride[header.id] && headerelements[i]?.offsetWidth) {
+            headerSizes[i] = `${remainingWidth * (header.grow ?? 1) / totalGrowShares}px`;
+        }
+    }
+    return headerSizes;
+}
+const headerSizes = derivedStore([headerOverride, treeWidth], calcHeaderSizes);
+$: store.singleSelect = singleSelect;
+function onDragEnd() {
+    store.update(v => ({ ...v, dragging: false }));
+}
+let dragheaderid;
+let dragheaderidx;
+let dragtarget;
+let widthStart;
+let mouseStart;
+function headerDragStart(header, idx) {
+    return (e) => {
+        if (!enableResize)
+            return;
+        dragtarget = headerelements[idx];
+        if (!dragtarget.isConnected)
+            dragtarget = undefined;
+        else {
+            e.preventDefault();
+            dragheaderid = header.id;
+            dragheaderidx = idx;
+            widthStart = dragtarget.clientWidth;
+            mouseStart = e instanceof TouchEvent ? e.touches[0].screenX : e.screenX;
+        }
+    };
+}
+function headerDrag(e) {
+    if (e instanceof TouchEvent && e.touches.length > 1)
+        return;
+    if (dragheaderid && dragheaderidx != null && dragtarget?.isConnected) {
+        for (let i = 0; i < dragheaderidx; i++) {
+            store.setHeaderOverride(headers[i].id, $headerSizes[i]);
+        }
+        const screenX = e instanceof TouchEvent ? e.touches[0].screenX : e.screenX;
+        store.setHeaderOverride(dragheaderid, `${widthStart - (mouseStart - screenX)}px`);
+    }
+}
+function headerDragEnd() {
+    dragtarget = undefined;
+    dragheaderid = undefined;
+}
+function headerDragReset() {
+    store.resetHeaderOverride();
+}
+let mounted = false;
+onMount(async () => {
+    document.addEventListener('dragend', onDragEnd);
+    await store.refresh();
+    if ($store.focused?.id) {
+        const el = document.getElementById(hashid($store.focused.id));
+        el?.scrollIntoView({ block: 'center' });
+    }
+    headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
+    mounted = true;
+});
+onDestroy(() => {
+    document.removeEventListener('dragend', onDragEnd);
+});
+let hadFocus = false;
+beforeUpdate(() => {
+    hadFocus = !!store.treeElement?.contains(document.activeElement);
+});
+afterUpdate(() => {
+    if ($store.focused?.id) {
+        const el = document.getElementById(hashid($store.focused.id));
+        if (el && hadFocus) {
+            if (el !== document.activeElement)
+                el.focus();
+        }
+    }
+});
+</script>
+
+<svelte:window on:mouseup={headerDragEnd} />
+
+<div class="tree-header" class:mounted class:resizing={!!dragheaderid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined}>
+  <div class="checkbox" bind:this={checkboxelement}>&nbsp;</div>
+  {#each headers as header, i (header.label)}
+    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]}>{header.label}</div>
+    {#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}
+  <ul bind:this={store.treeElement} class:mounted 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
+        {item}
+        {headers}
+        {headerSizes}
+        {nodeClass}
+        posinset={i + 1}
+        setsize={$rootItems.length}
+        level={item.level}
+        prev={$rootItems[i - 1]}
+        next={$rootItems[i + 1]}
+        on:choose
+        on:deselect
+      />
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .tree-header {
+    display: flex;
+    align-items: center;
+    background-color: var(--tree-head-bg, #555555);
+    color: var(--tree-head-text, white);
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    font-size: 0.9em;
+    opacity: 0;
+  }
+  .tree-header.mounted {
+    opacity: 1;
+  }
+  .tree-header.resizing {
+    cursor: col-resize;
+  }
+  .tree-header > .tree-header-cell {
+    padding: 0.4em 0.3em;
+  }
+  .tree-header > .tree-separator {
+    position: relative;
+    width: 4px;
+    margin-left: -4px;
+    padding: 0.4em 0;
+    cursor: col-resize;
+  }
+  .tree-header > .tree-separator:before {
+    content: ' ';
+    position: absolute;
+    left: 1px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--tree-head-text, white);
+  }
+  :global([data-eq~="650px"]) .tree-header {
+    font-size: 0.8em;
+  }
+  .checkbox {
+    min-width: 1.5em;
+    max-width: 1.5em;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: 0.9em;
+    opacity: 0;
+  }
+  ul.mounted {
+    opacity: 1;
+  }
+  :global([data-eq~="650px"]) ul {
+    font-size: 0.8em;
+  }
+</style>