@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/TaskQueueDrawer.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { definedReactiveOptions, definedOptions } from '@svadmin/core/options';
+
   import { ListTodo, Loader2, Plus, Search, RefreshCw } from '@lucide/svelte';
-  import { getTaskProvider, useSubmitTask, useTaskList } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useSubmitTask, useTaskList } from '@svadmin/core';
+  import { decodeTaskSubmitOptions } from '@svadmin/core/schema';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
@@ -22,13 +26,14 @@
   } from './task-utils.js';
 
   const i18n = useTranslation();
+  const context = captureAdminContext();
 
   type AutoRefreshValue = '0' | '5000' | '15000' | '30000';
   type TaskTab = 'tasks' | 'dlq';
 
   let {
     open = $bindable(false),
-    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    taskProvider,
     title,
     initialTab = 'tasks',
   }: {
@@ -38,8 +43,7 @@
     initialTab?: TaskTab;
   } = $props();
 
-    // eslint-disable-next-line svelte/prefer-writable-derived
-  let activeTab = $state<TaskTab>('tasks');
+  let activeTab = $derived(initialTab);
   let selectedTaskId = $state<string | null>(null);
   let searchQuery = $state('');
   let statusFilter = $state('all');
@@ -49,40 +53,79 @@
   let submitBodyText = $state(i18n.t('task.bodyPlaceholder'));
   let submitError = $state<string | null>(null);
   let submitOpen = $state(false);
+  let submitAttempt = $state.raw<object | null>(null);
+  let mounted = true;
+  onDestroy(() => { mounted = false; submitAttempt = null; });
+  const activeTaskProvider = $derived(taskProvider ?? context.taskProvider);
+  const taskScope = $derived({
+    provider: activeTaskProvider,
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: context.authProvider,
+    router: context.routerProvider,
+    session: captureAuthSession(context.authProvider),
+  });
+  let previousTaskScope: typeof taskScope | undefined;
+  function taskScopesEqual(left: typeof taskScope, right: typeof taskScope): boolean {
+    return left.provider === right.provider
+      && left.tenant === right.tenant
+      && left.auth === right.auth
+      && left.router === right.router
+      && left.session.cacheKey === right.session.cacheKey
+      && left.session.available === right.session.available;
+  }
+  function taskScopeIsCurrent(origin: typeof taskScope): boolean {
+    return mounted && taskScopesEqual(origin, taskScope) && origin.session.isCurrent();
+  }
+  $effect.pre(() => {
+    const scope = taskScope;
+    if (previousTaskScope && !taskScopesEqual(previousTaskScope, scope)) {
+      selectedTaskId = null;
+      submitAttempt = null;
+      submitOpen = false;
+      resetSubmitForm();
+    }
+    previousTaskScope = scope;
+  });
+  $effect.pre(() => {
+    if (!open) {
+      submitAttempt = null;
+      submitOpen = false;
+    }
+  });
 
   const refreshInterval = $derived.by<number | false>(() =>
     autoRefresh === '0' ? false : Number(autoRefresh),
   );
   const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
 
-  const taskQuery = useTaskList({
+  const taskQuery = useTaskList(definedReactiveOptions({
     get taskProvider() {
-      return taskProvider;
+      return activeTaskProvider;
     },
     get queryOptions() {
       return {
-        enabled: !!taskProvider,
+        enabled: !!activeTaskProvider,
         refetchInterval: refreshInterval,
         refetchIntervalInBackground: true,
       };
     },
-  });
+  }));
 
-  const dlqQuery = useTaskList({
+  const dlqQuery = useTaskList(definedReactiveOptions({
     get dlq() {
       return true;
     },
     get taskProvider() {
-      return taskProvider;
+      return activeTaskProvider;
     },
     get queryOptions() {
       return {
-        enabled: !!taskProvider && !!taskProvider?.listDlq,
+        enabled: !!activeTaskProvider && !!activeTaskProvider?.listDlq,
         refetchInterval: refreshInterval,
         refetchIntervalInBackground: true,
       };
     },
-  });
+  }));
 
   const submitTask = useSubmitTask();
 
@@ -123,10 +166,6 @@
     allTasks.filter(isTaskActive).length,
   );
 
-  $effect(() => {
-    activeTab = initialTab;
-  });
-
   $effect(() => {
     if (statusFilter !== 'all' && !availableStatuses.includes(statusFilter)) {
       statusFilter = 'all';
@@ -141,19 +180,19 @@
     }
 
     if (!selectedTaskId) {
-      selectedTaskId = current[0].id;
+      selectedTaskId = current[0]?.id ?? null;
       return;
     }
 
     if (!current.some((task) => task.id === selectedTaskId)) {
-      selectedTaskId = current[0].id;
+      selectedTaskId = current[0]?.id ?? null;
     }
   });
 
   function formatTime(value: unknown) {
-    if (!value) return '—';
-    const date = new Date(value as string | Date);
-    if (Number.isNaN(date.getTime())) return String(value);
+    if (typeof value !== 'string' || !value) return '—';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
     return date.toLocaleString();
   }
 
@@ -164,7 +203,14 @@
     submitError = null;
   }
 
+  function toggleSubmitForm(): void {
+    submitAttempt = null;
+    submitError = null;
+    submitOpen = !submitOpen;
+  }
+
   async function handleSubmitTask() {
+    if (!open || !submitOpen || submitAttempt || !activeTaskProvider || !taskScope.session.available) return;
     submitError = null;
     if (!submitTaskName.trim()) {
       submitError = i18n.t('validation.required');
@@ -174,32 +220,41 @@
     let body: Record<string, unknown> | undefined;
     if (submitBodyText.trim()) {
       try {
-        body = JSON.parse(submitBodyText) as Record<string, unknown>;
+        const parsed: unknown = JSON.parse(submitBodyText);
+        body = decodeTaskSubmitOptions({ body: parsed }).body;
       } catch {
         submitError = i18n.t('task.invalidJson');
         return;
       }
     }
 
+    const origin = taskScope;
+    const attempt = {};
+    submitAttempt = attempt;
+    const current = () => submitAttempt === attempt && taskScopeIsCurrent(origin);
     try {
-      const handle = await submitTask.mutation.mutateAsync({
+      const handle = await submitTask.mutation.mutateAsync(definedOptions({
         taskName: submitTaskName.trim(),
-        taskProvider,
-        options: {
+        taskProvider: activeTaskProvider,
+        options: definedOptions({
           body,
           idempotencyKey: submitIdempotencyKey.trim() || undefined,
-        },
-      });
+        }),
+      }));
+      if (!current()) return;
       activeTab = 'tasks';
-      selectedTaskId = handle.id ?? null;
+      selectedTaskId = handle.id;
       submitOpen = false;
       resetSubmitForm();
-      await Promise.all([
+      await Promise.allSettled([
         taskQuery.refetch?.(),
         dlqQuery.refetch?.(),
       ]);
     } catch (error) {
+      if (!current()) return;
       submitError = error instanceof Error ? error.message : i18n.t('task.submitFailed');
+    } finally {
+      if (submitAttempt === attempt) submitAttempt = null;
     }
   }
 
@@ -250,7 +305,7 @@
         </div>
       </div>
 
-      {#if !taskProvider}
+      {#if !activeTaskProvider}
         <div class="svadmin-u-60fbb7713999 svadmin-u-36e579c0b41c svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-0478c89a150f svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">
           {i18n.t('common.configRequired')}
         </div>
@@ -277,7 +332,7 @@
                       <RefreshCw class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
                       {i18n.t('common.refresh')}
                     </Button>
-                    <Button size="sm" onclick={() => submitOpen = !submitOpen}>
+                    <Button size="sm" disabled={!taskScope.session.available} onclick={toggleSubmitForm}>
                       <Plus class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
                       {i18n.t('task.submitAction')}
                     </Button>
@@ -328,14 +383,14 @@
                       <Textarea id="task-body" bind:value={submitBodyText} class="svadmin-u-ee15a477cd9c svadmin-u-0e65706bcccd svadmin-u-359090c2d529" />
                     </div>
                     {#if submitError}
-                      <p class="svadmin-u-fc7473ca09eb svadmin-u-811148b13d1e">{submitError}</p>
+                      <p role="alert" class="svadmin-u-fc7473ca09eb svadmin-u-811148b13d1e">{submitError}</p>
                     {/if}
                     <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4">
-                      <Button variant="ghost" onclick={() => { submitOpen = false; submitError = null; }}>
+                      <Button variant="ghost" onclick={toggleSubmitForm}>
                         {i18n.t('common.cancel')}
                       </Button>
-                      <Button onclick={() => void handleSubmitTask()} disabled={submitTask.mutation.isPending}>
-                        {#if submitTask.mutation.isPending}
+                      <Button onclick={() => void handleSubmitTask()} disabled={submitAttempt !== null || !taskScope.session.available}>
+                        {#if submitAttempt !== null}
                           <Loader2 class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
                         {/if}
                         {i18n.t('task.submitAction')}
@@ -347,7 +402,7 @@
 
               <TaskList
                 tasks={filteredTasks}
-                {taskProvider}
+                taskProvider={activeTaskProvider}
                 dlq={activeTab === 'dlq'}
                 title={activeTab === 'dlq' ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')}
                 emptyText={activeTab === 'dlq' ? i18n.t('task.noDlq') : i18n.t('task.noTasks')}
@@ -363,7 +418,7 @@
               {#if selectedTaskId}
                 <TaskDetails
                   taskId={selectedTaskId}
-                  {taskProvider}
+                  taskProvider={activeTaskProvider}
                   useProviderData
                   queryOptions={{
                     refetchInterval: refreshInterval,

package/dist/components/Toast.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { onMount } from 'svelte';
   import { Toaster, toast as sonner, type ToasterProps } from 'svelte-sonner';
   import {
@@ -29,7 +31,7 @@
     const queue = getToastQueue();
     if (queue.length > 0) {
       for (const t of queue) {
-        const options = { duration: t.duration, id: t.key ?? t.id };
+        const options = definedOptions({ duration: t.duration, id: t.key ?? t.id });
         switch (t.type) {
           case 'success': sonner.success(t.message, options); break;
           case 'error': sonner.error(t.message, options); break;
@@ -86,7 +88,7 @@
     {#each getToasts().slice(-3) as item (item.id)}
       <UndoableNotification
         message={item.message}
-        duration={item.duration}
+        {...definedOptions({ "duration": item.duration })}
         embedded
         managedExternally
         onUndo={() => undo(item.id, item.onUndo)}

package/dist/components/TooltipButton.svelte

@@ -60,7 +60,7 @@
 <Tooltip.Root bind:open>
   <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
-      {@const primitiveOnclick = props.onclick as ((event: MouseEvent) => void) | undefined}
+      {@const primitiveOnclick = props['onclick'] as ((event: MouseEvent) => void) | undefined}
       {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
       <Button {...buttonProps}>
         {@render children()}

package/dist/components/TreeSelect.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { SvelteSet } from 'svelte/reactivity';
-  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown } from '@lucide/svelte';
+  import { onDestroy } from 'svelte';
+  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown, Loader2, Minus, RotateCw } from '@lucide/svelte';
   import { cn } from '../utils.js';
   import * as Popover from './ui/popover/index.js';
   import { Input } from './ui/input/index.js';
@@ -11,6 +14,7 @@
     value: string | number;
     label: string;
     children?: TreeSelectOption[];
+    hasChildren?: boolean;
     disabled?: boolean;
     expanded?: boolean;
   }
@@ -26,12 +30,13 @@
     onlyLeafSelectable?: boolean;
     disabled?: boolean;
     allowClear?: boolean;
+    loadChildren?: (node: TreeSelectOption) => Promise<TreeSelectOption[]>;
     class?: string;
     onchange?: (value: string | number | (string | number)[] | undefined) => void;
   }
 
   let {
-    options = [],
+    options = $bindable([]),
     value = $bindable(undefined),
     multiple = false,
     placeholder,
@@ -39,13 +44,22 @@
     onlyLeafSelectable = false,
     disabled = false,
     allowClear = true,
+    loadChildren,
     class: className,
     onchange,
   }: Props = $props();
 
   let open = $state(false);
   let searchQuery = $state('');
+  let loadingValues = new SvelteSet<string | number>();
+  let loadErrors = new SvelteSet<string | number>();
   let expandedNodes = new SvelteSet<string | number>();
+  let mounted = true;
+  const loads = new Map<string | number, {
+    node: TreeSelectOption;
+    loader: NonNullable<Props['loadChildren']>;
+  }>();
+  onDestroy(() => { mounted = false; loads.clear(); });
 
   // Map to quickly look up option info by value
   const optionMap = $derived.by(() => {
@@ -70,6 +84,19 @@
     return selectedValues.map((v) => optionMap.get(v)?.label ?? String(v));
   });
 
+  $effect.pre(() => {
+    const nodes = optionMap;
+    const loader = loadChildren;
+    const unavailable = disabled;
+    for (const [key, request] of loads) {
+      if (unavailable || nodes.get(key) !== request.node || loader !== request.loader) {
+        loads.delete(key);
+        loadingValues.delete(key);
+        loadErrors.delete(key);
+      }
+    }
+  });
+
   function toggleExpand(nodeValue: string | number, event?: MouseEvent) {
     event?.stopPropagation();
     if (expandedNodes.has(nodeValue)) {
@@ -79,32 +106,121 @@
     }
   }
 
+  function hasChildren(node: TreeSelectOption): boolean {
+    return Boolean(node.hasChildren ?? (node.children && node.children.length > 0));
+  }
+
   function isNodeExpanded(node: TreeSelectOption): boolean {
     if (searchQuery.trim()) return true; // Auto expand all on search
     return expandedNodes.has(node.value) || !!node.expanded;
   }
 
+  function selectableLeaves(node: TreeSelectOption): TreeSelectOption[] {
+    if (!hasChildren(node)) return node.disabled ? [] : [node];
+    if (!node.children) return [];
+    return (node.children ?? []).flatMap(selectableLeaves);
+  }
+
   function isSelected(val: string | number): boolean {
     return selectedValues.includes(val);
   }
 
-  function handleSelect(node: TreeSelectOption) {
+  function isNodeSelected(node: TreeSelectOption): boolean {
+    if (!multiple || !hasChildren(node)) return isSelected(node.value);
+    const leaves = selectableLeaves(node);
+    return leaves.length > 0 && leaves.every((leaf) => isSelected(leaf.value));
+  }
+
+  function isPartiallySelected(node: TreeSelectOption): boolean {
+    if (!multiple || !hasChildren(node)) return false;
+    const leaves = selectableLeaves(node);
+    const count = leaves.filter((leaf) => isSelected(leaf.value)).length;
+    return count > 0 && count < leaves.length;
+  }
+
+  function updateOptionsChildren(nodes: TreeSelectOption[], target: string | number, children: TreeSelectOption[]): TreeSelectOption[] {
+    let changed = false;
+    const next = nodes.map((node) => {
+      if (node.value === target) {
+        changed = true;
+        return { ...node, children, hasChildren: children.length > 0 };
+      }
+      if (!node.children) return node;
+      const updated = updateOptionsChildren(node.children, target, children);
+      if (updated === node.children) return node;
+      changed = true;
+      return { ...node, children: updated };
+    });
+    return changed ? next : nodes;
+  }
+
+  async function ensureChildren(node: TreeSelectOption): Promise<boolean> {
+    if (!mounted || disabled || loadingValues.has(node.value)) return false;
+    if (!node.hasChildren || node.children) return true;
+    const currentNode = optionMap.get(node.value);
+    if (!loadChildren || !currentNode) return false;
+    const request = { node: currentNode, loader: loadChildren };
+    loads.set(node.value, request);
+    const current = () => mounted && !disabled && loads.get(node.value) === request
+      && optionMap.get(node.value) === request.node && loadChildren === request.loader;
+    loadingValues.add(node.value);
+    loadErrors.delete(node.value);
+    try {
+      const children = await request.loader(request.node);
+      if (!current()) return false;
+      options = updateOptionsChildren(options, node.value, children);
+      return true;
+    } catch {
+      if (current()) loadErrors.add(node.value);
+      return false;
+    } finally {
+      if (mounted && loads.get(node.value) === request) {
+        loads.delete(node.value);
+        loadingValues.delete(node.value);
+      }
+    }
+  }
+
+  async function toggleExpandAsync(node: TreeSelectOption, event?: MouseEvent): Promise<void> {
+    event?.stopPropagation();
+    if (!await ensureChildren(node)) return;
+    if (!mounted || disabled) return;
+    toggleExpand(node.value);
+  }
+
+  function retryChildren(node: TreeSelectOption, event: MouseEvent): void {
+    event.stopPropagation();
+    void toggleExpandAsync(node);
+  }
+
+  function setMultipleSelection(node: TreeSelectOption): void {
+    const leaves = selectableLeaves(node);
+    const leafValues = new Set(leaves.map((leaf) => leaf.value));
+    const shouldRemove = leaves.length > 0 && leaves.every((leaf) => isSelected(leaf.value));
+    const next = shouldRemove
+      ? selectedValues.filter((value) => !leafValues.has(value))
+      : [...selectedValues, ...leaves.map((leaf) => leaf.value).filter((value) => !isSelected(value))];
+    value = next;
+    onchange?.(next);
+  }
+
+  async function handleSelect(node: TreeSelectOption): Promise<void> {
     if (node.disabled) return;
-    const hasChildren = node.children && node.children.length > 0;
-    if (onlyLeafSelectable && hasChildren) {
-      toggleExpand(node.value);
+    const nodeHasChildren = hasChildren(node);
+    if (onlyLeafSelectable && nodeHasChildren) {
+      await toggleExpandAsync(node);
       return;
     }
 
     if (multiple) {
-      let next: (string | number)[];
-      if (isSelected(node.value)) {
-        next = selectedValues.filter((v) => v !== node.value);
-      } else {
-        next = [...selectedValues, node.value];
+      if (nodeHasChildren) setMultipleSelection(node);
+      else {
+        const next = isSelected(node.value)
+          ? selectedValues.filter((selected) => selected !== node.value)
+          : [...selectedValues, node.value];
+        value = next;
+        onchange?.(next);
       }
-      value = next;
-      onchange?.(next);
     } else {
       const next = node.value;
       value = next;
@@ -113,6 +229,59 @@
     }
   }
 
+  function findParent(nodes: TreeSelectOption[], target: string | number, parent?: TreeSelectOption): TreeSelectOption | undefined {
+    for (const node of nodes) {
+      if (node.value === target) return parent;
+      const match = node.children ? findParent(node.children, target, node) : undefined;
+      if (match) return match;
+    }
+    return undefined;
+  }
+
+  function focusTreeNode(valueToFocus: string | number): void {
+    const element = document.querySelector<HTMLElement>(`[data-tree-value="${CSS.escape(String(valueToFocus))}"]`);
+    element?.focus();
+  }
+
+  function focusSibling(nodeValue: string | number, offset: number): void {
+    const nodes = Array.from(document.querySelectorAll<HTMLElement>('[data-tree-value]'));
+    const index = nodes.findIndex((node) => node.dataset['treeValue'] === String(nodeValue));
+    const target = nodes[index + offset];
+    target?.focus();
+  }
+
+  function handleTreeKeydown(event: KeyboardEvent, node: TreeSelectOption, expanded: boolean): void {
+    const nodeHasChildren = hasChildren(node);
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleSelect(node);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusSibling(node.value, 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusSibling(node.value, -1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      document.querySelector<HTMLElement>('[data-tree-value]')?.focus();
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      const nodes = document.querySelectorAll<HTMLElement>('[data-tree-value]');
+      nodes[nodes.length - 1]?.focus();
+    } else if (event.key === 'ArrowRight' && nodeHasChildren) {
+      event.preventDefault();
+      if (!expanded) void toggleExpandAsync(node);
+      else focusTreeNode(node.children?.[0]?.value ?? node.value);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      if (nodeHasChildren && expanded) toggleExpand(node.value);
+      else {
+        const parent = findParent(options, node.value);
+        if (parent) focusTreeNode(parent.value);
+      }
+    }
+  }
+
   function clearAll(event?: MouseEvent) {
     event?.stopPropagation();
     const next = multiple ? [] : undefined;
@@ -140,10 +309,10 @@
       const matchChildren = filteredChildren && filteredChildren.length > 0;
 
       if (matchSelf || matchChildren) {
-        filtered.push({
+        filtered.push(definedOptions({
           ...node,
           children: filteredChildren ?? node.children,
-        });
+        }));
       }
     }
     return filtered;
@@ -153,17 +322,21 @@
 </script>
 
 {#snippet treeNode(node: TreeSelectOption, level: number)}
-  {@const hasChildren = Boolean(node.children && node.children.length > 0)}
+  {@const nodeHasChildren = hasChildren(node)}
   {@const expanded = isNodeExpanded(node)}
-  {@const selected = isSelected(node.value)}
-  {@const selectable = !node.disabled && (!onlyLeafSelectable || !hasChildren)}
+  {@const selected = isNodeSelected(node)}
+  {@const partial = isPartiallySelected(node)}
+  {@const selectable = !node.disabled && (!onlyLeafSelectable || !nodeHasChildren)}
 
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
     <div
       role="treeitem"
       tabindex="0"
       aria-selected={selected}
-      aria-expanded={hasChildren ? expanded : undefined}
+      aria-checked={multiple ? (partial ? 'mixed' : selected) : undefined}
+      aria-level={level + 1}
+      aria-expanded={nodeHasChildren ? expanded : undefined}
+      data-tree-value={String(node.value)}
       class={cn(
         'group svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-58284b4ea568 svadmin-u-421ac2be5045 svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-7f6912283f11',
         selected ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1 svadmin-u-2689f3958069' : 'svadmin-u-68646cdcc246 svadmin-u-d4108abe6359',
@@ -173,21 +346,20 @@
       onclick={() => {
         if (selectable) handleSelect(node);
       }}
-      onkeydown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          if (selectable) handleSelect(node);
-        }
-      }}
+      onkeydown={(e) => handleTreeKeydown(e, node, expanded)}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
-        {#if hasChildren}
+        {#if nodeHasChildren}
           <button
             type="button"
+            aria-label={`${node.label}: ${i18n.t('tree.toggleChildren')}`}
+            aria-busy={loadingValues.has(node.value)}
             class="svadmin-u-60fbb7713999 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-07389a777c1f svadmin-u-bfa603190748 svadmin-u-8e551981c8d7"
-            onclick={(e) => toggleExpand(node.value, e)}
+            onclick={(e) => void toggleExpandAsync(node, e)}
           >
-            {#if expanded}
+            {#if loadingValues.has(node.value)}
+              <Loader2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
+            {:else if expanded}
               <ChevronDown class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
             {:else}
               <ChevronRight class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
@@ -200,12 +372,22 @@
         <span class="svadmin-u-f283ea9bea0e">{node.label}</span>
       </div>
 
-      {#if selected}
+      {#if loadErrors.has(node.value)}
+        <span role="alert" class="svadmin-u-bfa603190748">{i18n.t('tree.loadFailed')}</span>
+        <button type="button" aria-label={`${node.label}: ${i18n.t('common.retry')}`}
+          title={i18n.t('common.retry')} onclick={(e) => retryChildren(node, e)}>
+          <RotateCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
+        </button>
+      {/if}
+
+      {#if partial}
+        <Minus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" />
+      {:else if selected}
         <Check class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" />
       {/if}
     </div>
 
-    {#if hasChildren && expanded && node.children}
+    {#if nodeHasChildren && expanded && node.children}
       <div role="group" class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
         {#each node.children as child (child.value)}
           {@render treeNode(child, level + 1)}