@shwfed/config 3.0.1 → 3.0.3

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.table/schema.d.ts

@@ -47,6 +47,40 @@ export declare function schema(configure: (env: Environment) => void, _blockRef:
                 readonly message: string;
             }[]] | undefined;
         }[];
+        readonly query?: {
+            readonly style?: string | undefined;
+            readonly id?: string | undefined;
+            readonly initial?: {
+                readonly data: string;
+                readonly request?: string | undefined;
+            } | undefined;
+            readonly displayName?: string | undefined;
+            readonly kind: "shwfed.component.form";
+            readonly fields: readonly any[];
+            readonly layouts: readonly {
+                readonly name: string;
+                readonly layout: {
+                    readonly style?: string | undefined;
+                    readonly columns: number;
+                    readonly gap?: number | undefined;
+                    readonly rows?: number | undefined;
+                    readonly placements: {
+                        readonly [x: string]: {
+                            readonly area: readonly [readonly [number, number], readonly [number, number]];
+                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                        };
+                    };
+                };
+                readonly media?: string | undefined;
+            }[];
+            readonly readonly?: string | undefined;
+        } | undefined;
+        readonly dataSource?: {
+            readonly data: string;
+            readonly total?: string | undefined;
+            readonly request?: string | undefined;
+        } | undefined;
         readonly actions?: {
             readonly size: "default" | "sm" | "xs";
             readonly style?: string | undefined;
@@ -114,40 +148,6 @@ export declare function schema(configure: (env: Environment) => void, _blockRef:
                 readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
             }[];
         } | undefined;
-        readonly query?: {
-            readonly style?: string | undefined;
-            readonly id?: string | undefined;
-            readonly initial?: {
-                readonly data: string;
-                readonly request?: string | undefined;
-            } | undefined;
-            readonly displayName?: string | undefined;
-            readonly kind: "shwfed.component.form";
-            readonly fields: readonly any[];
-            readonly layouts: readonly {
-                readonly name: string;
-                readonly layout: {
-                    readonly style?: string | undefined;
-                    readonly columns: number;
-                    readonly gap?: number | undefined;
-                    readonly rows?: number | undefined;
-                    readonly placements: {
-                        readonly [x: string]: {
-                            readonly area: readonly [readonly [number, number], readonly [number, number]];
-                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
-                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
-                        };
-                    };
-                };
-                readonly media?: string | undefined;
-            }[];
-            readonly readonly?: string | undefined;
-        } | undefined;
-        readonly dataSource?: {
-            readonly data: string;
-            readonly total?: string | undefined;
-            readonly request?: string | undefined;
-        } | undefined;
         readonly bottomActions?: {
             readonly size: "default" | "sm" | "xs";
             readonly style?: string | undefined;

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.d.vue.ts

@@ -33,8 +33,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly numberOfMonths?: number | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -49,8 +51,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -106,8 +106,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly numberOfMonths?: number | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -122,8 +124,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.vue.d.ts

@@ -33,8 +33,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly numberOfMonths?: number | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -49,8 +51,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -106,8 +106,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly numberOfMonths?: number | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -122,8 +124,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.d.vue.ts

@@ -34,8 +34,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly numberOfMonths?: number | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -50,9 +53,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
-        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -109,8 +109,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly numberOfMonths?: number | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -125,9 +128,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
-        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.vue.d.ts

@@ -34,8 +34,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly numberOfMonths?: number | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -50,9 +53,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
-        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -109,8 +109,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly numberOfMonths?: number | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -125,9 +128,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
-        readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.d.vue.ts

@@ -33,9 +33,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly valueFormat?: string | undefined;
         readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -79,9 +79,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly valueFormat?: string | undefined;
         readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.vue.d.ts

@@ -33,9 +33,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly valueFormat?: string | undefined;
         readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -79,9 +79,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly hourCycle?: 12 | 24 | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly valueFormat?: string | undefined;
         readonly timeGranularity?: "second" | "minute" | "hour" | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.d.vue.ts

@@ -32,8 +32,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -48,8 +50,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -104,8 +104,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -120,8 +122,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.vue.d.ts

@@ -32,8 +32,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -48,8 +50,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";
@@ -104,8 +104,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
-        readonly rangeSeparatorIcon?: string | undefined;
         readonly format?: string | undefined;
+        readonly valueFormat?: string | undefined;
+        readonly disabledDate?: string | undefined;
+        readonly rangeSeparatorIcon?: string | undefined;
         readonly startPlaceholder?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -120,8 +122,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly locale: "en" | "ja" | "ko";
             readonly message: string;
         }[]] | undefined;
-        readonly valueFormat?: string | undefined;
-        readonly disabledDate?: string | undefined;
         readonly validations?: readonly {
             readonly message: readonly [{
                 readonly locale: "zh";

package/dist/runtime/components/form/fields/2026-05-28/com.shwfed.form.field.tree.combobox.multi/runtime.vue

@@ -13,6 +13,7 @@ import { Field, FieldLabel, FieldMessages } from "../../../../ui/field";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../../../ui/input-group";
 import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
+import { ScrollArea } from "../../../../ui/scroll-area";
 import { Skeleton } from "../../../../ui/skeleton";
 import { Tree as UiTree } from "../../../../ui/tree";
 import { interpolateMarkdown } from "../../../../table/utils/runtime";
@@ -474,61 +475,64 @@ const hoveredTooltip = computed(() => {
             <Skeleton class="h-5 w-3/5" />
           </div>
 
-          <UiTree
+          <ScrollArea
             v-else
-            :roots="roots"
-            :get-key="(w) => w.key"
-            :get-children="getWrappedChildren"
-            selection-mode="multi"
-            :cascade="config.cascade ?? 'independent'"
-            :model-value="model"
-            :selectable="wrappedSelectable"
-            :filter-predicate="filterPredicate"
-            :filter-query="filterQuery"
-            :initial-expanded="initialExpanded"
-            :show-focused-row="false"
-            :class="isDisabled ? 'pointer-events-none opacity-60' : void 0"
-            class="max-h-72 overflow-y-auto"
-            @update:model-value="handleUpdate"
+            class="max-h-72"
           >
-            <template #node="{ node, selected }">
-              <span
-                class="flex flex-1 min-w-0 items-center justify-between gap-2"
-                @mouseenter="hoveredKey = node.key"
-                @focusin="hoveredKey = node.key"
-              >
-                <Markdown
-                  :source="wrappedLabelText(node)"
-                  class="prose prose-sm prose-zinc text-zinc-700 min-w-0"
-                />
-                <Icon
-                  v-if="selected"
-                  icon="fluent:checkmark-20-regular"
-                  class="size-3 shrink-0 text-zinc-700"
-                />
-              </span>
-            </template>
+            <UiTree
+              :roots="roots"
+              :get-key="(w) => w.key"
+              :get-children="getWrappedChildren"
+              selection-mode="multi"
+              :cascade="config.cascade ?? 'independent'"
+              :model-value="model"
+              :selectable="wrappedSelectable"
+              :filter-predicate="filterPredicate"
+              :filter-query="filterQuery"
+              :initial-expanded="initialExpanded"
+              :show-focused-row="false"
+              :class="isDisabled ? 'pointer-events-none opacity-60' : void 0"
+              @update:model-value="handleUpdate"
+            >
+              <template #node="{ node, selected }">
+                <span
+                  class="flex flex-1 min-w-0 items-center justify-between gap-2"
+                  @mouseenter="hoveredKey = node.key"
+                  @focusin="hoveredKey = node.key"
+                >
+                  <Markdown
+                    :source="wrappedLabelText(node)"
+                    class="prose prose-sm prose-zinc text-zinc-700 min-w-0"
+                  />
+                  <Icon
+                    v-if="selected"
+                    icon="fluent:checkmark-20-regular"
+                    class="size-3 shrink-0 text-zinc-700"
+                  />
+                </span>
+              </template>
 
-            <template #empty>
-              <div class="py-6 text-center text-sm text-zinc-500">
-                {{ t("tree-combobox-multi-empty") }}
-              </div>
-            </template>
+              <template #empty>
+                <div class="py-6 text-center text-sm text-zinc-500">
+                  {{ t("tree-combobox-multi-empty") }}
+                </div>
+              </template>
 
-            <template #error="{ error, retry }">
-              <span class="inline-flex items-center gap-1 text-xs text-red-500">
-                {{ t("tree-combobox-multi-load-error") }}
-                <button
-                  type="button"
-                  class="underline hover:text-red-600"
-                  @click.stop="retry"
-                >
-                  {{ t("tree-combobox-multi-retry") }}
-                </button>
-                <span class="sr-only">{{ String(error) }}</span>
-              </span>
-            </template>
-          </UiTree>
+              <template #error="{ error, retry }">
+                <span class="inline-flex items-center gap-1 text-xs text-red-500">
+                  {{ t("tree-combobox-multi-load-error") }}
+                  <button
+                    type="button"
+                    class="underline hover:text-red-600"
+                    @click.stop="retry"
+                  >
+                    {{ t("tree-combobox-multi-retry") }}
+                  </button>
+                  <span class="sr-only">{{ String(error) }}</span>
+                </span>
+              </template>
+            </UiTree>
+          </ScrollArea>
         </div>
         <div
           v-if="anyHasTooltip && hoveredTooltip"

package/dist/runtime/components/form/fields/2026-05-28/com.shwfed.form.field.tree.combobox.single/runtime.vue

@@ -13,6 +13,7 @@ import { Field, FieldLabel, FieldMessages } from "../../../../ui/field";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../../../ui/input-group";
 import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
+import { ScrollArea } from "../../../../ui/scroll-area";
 import { Skeleton } from "../../../../ui/skeleton";
 import { Tree as UiTree } from "../../../../ui/tree";
 import { interpolateMarkdown } from "../../../../table/utils/runtime";
@@ -462,60 +463,63 @@ const hoveredTooltip = computed(() => {
             <Skeleton class="h-5 w-3/5" />
           </div>
 
-          <UiTree
+          <ScrollArea
             v-else
-            :roots="roots"
-            :get-key="(w) => w.key"
-            :get-children="getWrappedChildren"
-            selection-mode="single"
-            :model-value="model"
-            :selectable="wrappedSelectable"
-            :filter-predicate="filterPredicate"
-            :filter-query="filterQuery"
-            :initial-expanded="initialExpanded"
-            :show-focused-row="false"
-            :class="isDisabled ? 'pointer-events-none opacity-60' : void 0"
-            class="max-h-72 overflow-y-auto"
-            @update:model-value="handleUpdate"
+            class="max-h-72"
           >
-            <template #node="{ node, selected }">
-              <span
-                class="flex flex-1 min-w-0 items-center justify-between gap-2"
-                @mouseenter="hoveredKey = node.key"
-                @focusin="hoveredKey = node.key"
-              >
-                <Markdown
-                  :source="wrappedLabelText(node)"
-                  class="prose prose-sm prose-zinc text-zinc-700 min-w-0"
-                />
-                <Icon
-                  v-if="selected"
-                  icon="fluent:checkmark-20-regular"
-                  class="size-3 shrink-0 text-zinc-700"
-                />
-              </span>
-            </template>
+            <UiTree
+              :roots="roots"
+              :get-key="(w) => w.key"
+              :get-children="getWrappedChildren"
+              selection-mode="single"
+              :model-value="model"
+              :selectable="wrappedSelectable"
+              :filter-predicate="filterPredicate"
+              :filter-query="filterQuery"
+              :initial-expanded="initialExpanded"
+              :show-focused-row="false"
+              :class="isDisabled ? 'pointer-events-none opacity-60' : void 0"
+              @update:model-value="handleUpdate"
+            >
+              <template #node="{ node, selected }">
+                <span
+                  class="flex flex-1 min-w-0 items-center justify-between gap-2"
+                  @mouseenter="hoveredKey = node.key"
+                  @focusin="hoveredKey = node.key"
+                >
+                  <Markdown
+                    :source="wrappedLabelText(node)"
+                    class="prose prose-sm prose-zinc text-zinc-700 min-w-0"
+                  />
+                  <Icon
+                    v-if="selected"
+                    icon="fluent:checkmark-20-regular"
+                    class="size-3 shrink-0 text-zinc-700"
+                  />
+                </span>
+              </template>
 
-            <template #empty>
-              <div class="py-6 text-center text-sm text-zinc-500">
-                {{ t("tree-combobox-single-empty") }}
-              </div>
-            </template>
+              <template #empty>
+                <div class="py-6 text-center text-sm text-zinc-500">
+                  {{ t("tree-combobox-single-empty") }}
+                </div>
+              </template>
 
-            <template #error="{ error, retry }">
-              <span class="inline-flex items-center gap-1 text-xs text-red-500">
-                {{ t("tree-combobox-single-load-error") }}
-                <button
-                  type="button"
-                  class="underline hover:text-red-600"
-                  @click.stop="retry"
-                >
-                  {{ t("tree-combobox-single-retry") }}
-                </button>
-                <span class="sr-only">{{ String(error) }}</span>
-              </span>
-            </template>
-          </UiTree>
+              <template #error="{ error, retry }">
+                <span class="inline-flex items-center gap-1 text-xs text-red-500">
+                  {{ t("tree-combobox-single-load-error") }}
+                  <button
+                    type="button"
+                    class="underline hover:text-red-600"
+                    @click.stop="retry"
+                  >
+                    {{ t("tree-combobox-single-retry") }}
+                  </button>
+                  <span class="sr-only">{{ String(error) }}</span>
+                </span>
+              </template>
+            </UiTree>
+          </ScrollArea>
         </div>
         <div
           v-if="anyHasTooltip && hoveredTooltip"