@shwfed/config 3.0.19 → 3.0.21

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shwfed",
   "configKey": "shwfed",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/actions/buttons/2026-04-21/com.shwfed.actions.button.navigation/config.d.vue.ts

@@ -5,14 +5,14 @@ type __VLS_ModelProps = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         readonly type: "com.shwfed.actions.button.navigation";
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
         readonly compatibilityDate: "2026-04-21";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         readonly type: "com.shwfed.actions.button.navigation";
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
         readonly compatibilityDate: "2026-04-21";
     }) => any) | undefined;

package/dist/runtime/components/actions/buttons/2026-04-21/com.shwfed.actions.button.navigation/config.vue.d.ts

@@ -5,14 +5,14 @@ type __VLS_ModelProps = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         readonly type: "com.shwfed.actions.button.navigation";
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
         readonly compatibilityDate: "2026-04-21";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         readonly type: "com.shwfed.actions.button.navigation";
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
         readonly compatibilityDate: "2026-04-21";
     }) => any) | undefined;

package/dist/runtime/components/form/FormUnitRenderer.vue

@@ -137,7 +137,14 @@ const gridStyle = computed(() => {
 const rendered = computed(() => {
   const comp = compaction.value;
   if (!comp) return [];
-  return placedFields.value.map((p) => ({
+  const ordered = placedFields.value.slice().sort((a, b) => {
+    const [[ax1, ay1]] = a.placement.area;
+    const [[bx1, by1]] = b.placement.area;
+    if (ay1 !== by1) return ay1 - by1;
+    if (ax1 !== bx1) return ax1 - bx1;
+    return 0;
+  });
+  return ordered.map((p) => ({
     key: p.field.id,
     style: cellStyle(p.placement, comp),
     component: p.entry.runtime,

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

@@ -3,7 +3,7 @@ import { Icon } from "@iconify/vue";
 import { watchDebounced } from "@vueuse/core";
 import { Effect, Option } from "effect";
 import { Fetch } from "fx-fetch";
-import { computed, nextTick, ref } from "vue";
+import { computed, nextTick, onScopeDispose, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { asRequest, fetchJsonOption } from "../../../../../share/request";
 import { cel as _rawCel } from "../../../../../utils/cel";
@@ -23,6 +23,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton } from "../../../../ui/in
 import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
+import { useDerivedQuiescence } from "../../../utils/derived";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
 import { useFormScope, useFormState } from "../../../utils/state";
@@ -51,7 +52,7 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { getAt, setAt, setAtSilent } = useFormState();
+const { getAt, setAt, setAtSilent, seeded } = useFormState();
 const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
@@ -163,20 +164,34 @@ const model = computed({
     setAt(path, next);
   }
 });
+let seedSettled = false;
 let lastRequestSignature;
-watchDebounced(
-  requestSignature,
-  () => {
-    if (lastRequestSignature != null) {
-      const path = props.config.binding;
-      if (path == null) uncontrolled.value = void 0;
-      else setAtSilent(path, void 0);
-    }
-    lastRequestSignature = requestSignature.value;
+let lastFetchedSignature;
+function reactToRequest() {
+  if (!seedSettled) return;
+  if (lastRequestSignature != null && requestSignature.value !== lastRequestSignature) {
+    const path = props.config.binding;
+    if (path == null) uncontrolled.value = void 0;
+    else setAtSilent(path, void 0);
+  }
+  lastRequestSignature = requestSignature.value;
+  if (requestSignature.value !== lastFetchedSignature) {
+    lastFetchedSignature = requestSignature.value;
     void fetchOptions();
-  },
-  { debounce: 200, immediate: true }
-);
+  }
+}
+watchDebounced(requestSignature, reactToRequest, { debounce: 200, immediate: true });
+const quiescence = useDerivedQuiescence();
+let disposed = false;
+onScopeDispose(() => {
+  disposed = true;
+});
+function establishBaseline() {
+  if (disposed) return;
+  seedSettled = true;
+  reactToRequest();
+}
+seeded.then(() => quiescence.settled(), () => quiescence.settled()).then(establishBaseline);
 function isEqual(a, b) {
   if (a === b) return true;
   if (a == null || b == null) return false;

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

@@ -3,7 +3,7 @@ import { Icon } from "@iconify/vue";
 import { watchDebounced } from "@vueuse/core";
 import { Effect, Option } from "effect";
 import { Fetch } from "fx-fetch";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onScopeDispose, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { asRequest, fetchJsonOption } from "../../../../../share/request";
 import { cel as _rawCel } from "../../../../../utils/cel";
@@ -24,6 +24,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "
 import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
+import { useDerivedQuiescence } from "../../../utils/derived";
 import { useFormReadonly } from "../../../utils/readonly";
 import { useFormScope, useFormState } from "../../../utils/state";
 import { useFieldValidation } from "../../../utils/validation";
@@ -55,7 +56,7 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { getAt, setAt, setAtSilent } = useFormState();
+const { getAt, setAt, setAtSilent, seeded } = useFormState();
 const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
@@ -220,20 +221,34 @@ const model = computed({
     setAt(path, next);
   }
 });
+let seedSettled = false;
 let lastRequestSignature;
-watchDebounced(
-  requestSignature,
-  () => {
-    if (lastRequestSignature != null) {
-      const path = props.config.binding;
-      if (path == null) uncontrolled.value = void 0;
-      else setAtSilent(path, void 0);
-    }
-    lastRequestSignature = requestSignature.value;
+let lastFetchedSignature;
+function reactToRequest() {
+  if (!seedSettled) return;
+  if (lastRequestSignature != null && requestSignature.value !== lastRequestSignature) {
+    const path = props.config.binding;
+    if (path == null) uncontrolled.value = void 0;
+    else setAtSilent(path, void 0);
+  }
+  lastRequestSignature = requestSignature.value;
+  if (requestSignature.value !== lastFetchedSignature) {
+    lastFetchedSignature = requestSignature.value;
     void fetchOptions();
-  },
-  { debounce: 200, immediate: true }
-);
+  }
+}
+watchDebounced(requestSignature, reactToRequest, { debounce: 200, immediate: true });
+const quiescence = useDerivedQuiescence();
+let disposed = false;
+onScopeDispose(() => {
+  disposed = true;
+});
+function establishBaseline() {
+  if (disposed) return;
+  seedSettled = true;
+  reactToRequest();
+}
+seeded.then(() => quiescence.settled(), () => quiescence.settled()).then(establishBaseline);
 function isEqual(a, b) {
   if (a === b) return true;
   if (a == null || b == null) return false;

package/dist/runtime/components/form/fields/2026-06-14/com.shwfed.form.field.combobox.single/runtime.vue

@@ -3,7 +3,7 @@ import { Icon } from "@iconify/vue";
 import { watchDebounced } from "@vueuse/core";
 import { Effect, Option } from "effect";
 import { Fetch } from "fx-fetch";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onScopeDispose, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { asRequest, fetchJsonOption } from "../../../../../share/request";
 import { cel as _rawCel } from "../../../../../utils/cel";
@@ -24,6 +24,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "
 import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
+import { useDerivedQuiescence } from "../../../utils/derived";
 import { useFormReadonly } from "../../../utils/readonly";
 import { useFormScope, useFormState } from "../../../utils/state";
 import { useFieldValidation } from "../../../utils/validation";
@@ -55,7 +56,7 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { getAt, setAt, setAtSilent } = useFormState();
+const { getAt, setAt, setAtSilent, seeded } = useFormState();
 const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
@@ -223,20 +224,34 @@ const model = computed({
     setAt(path, next);
   }
 });
+let seedSettled = false;
 let lastRequestSignature;
-watchDebounced(
-  requestSignature,
-  () => {
-    if (lastRequestSignature != null) {
-      const path = props.config.binding;
-      if (path == null) uncontrolled.value = void 0;
-      else setAtSilent(path, void 0);
-    }
-    lastRequestSignature = requestSignature.value;
+let lastFetchedSignature;
+function reactToRequest() {
+  if (!seedSettled) return;
+  if (lastRequestSignature != null && requestSignature.value !== lastRequestSignature) {
+    const path = props.config.binding;
+    if (path == null) uncontrolled.value = void 0;
+    else setAtSilent(path, void 0);
+  }
+  lastRequestSignature = requestSignature.value;
+  if (requestSignature.value !== lastFetchedSignature) {
+    lastFetchedSignature = requestSignature.value;
     void fetchOptions();
-  },
-  { debounce: 200, immediate: true }
-);
+  }
+}
+watchDebounced(requestSignature, reactToRequest, { debounce: 200, immediate: true });
+const quiescence = useDerivedQuiescence();
+let disposed = false;
+onScopeDispose(() => {
+  disposed = true;
+});
+function establishBaseline() {
+  if (disposed) return;
+  seedSettled = true;
+  reactToRequest();
+}
+seeded.then(() => quiescence.settled(), () => quiescence.settled()).then(establishBaseline);
 function isEqual(a, b) {
   if (a === b) return true;
   if (a == null || b == null) return false;

package/dist/runtime/components/form/index.vue

@@ -53,7 +53,14 @@ if (config.value.id) {
 }
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
-const formState = provideFormState(state);
+const seeded = (() => {
+  const current = state.value ?? {};
+  if (!config.value.initial || Object.keys(current).length > 0) return Promise.resolve();
+  return computeSeed(current).then((seed) => {
+    if (seed) state.value = { ...current, ...seed };
+  });
+})();
+const formState = provideFormState(state, "form", seeded);
 const commitBus = provideCommitBus();
 const quiescence = provideDerivedQuiescence();
 const formReadonly = computed(() => {
@@ -79,13 +86,6 @@ async function computeSeed(base) {
     return null;
   }
 }
-const seeded = (() => {
-  const current = state.value ?? {};
-  if (!config.value.initial || Object.keys(current).length > 0) return Promise.resolve();
-  return computeSeed(current).then((seed) => {
-    if (seed) state.value = { ...current, ...seed };
-  });
-})();
 async function reseed() {
   const seed = await computeSeed({});
   state.value = seed ? { ...seed } : {};

package/dist/runtime/components/form/utils/state.d.ts

@@ -33,6 +33,23 @@ export type FormStateBag = {
      * through the bags themselves.
      */
     parent: FormStateBag | undefined;
+    /**
+     * Resolves once the form's `initial` seed has landed in `state` (or
+     * immediately when there is no seed). The top-level form host passes its
+     * own seed promise; nested bags (list/table rows) inherit the enclosing
+     * form's, and a host-less fallback bag gets an already-resolved one.
+     *
+     * A field runtime awaits this before it establishes any request/watch
+     * baseline: while the seed is in flight `state` is empty, so a request
+     * expression that reads `form.?dep` builds a param-less-but-non-`null`
+     * request. Establishing a baseline against that pre-seed request would make
+     * the post-seed signature look like a "change away" and wrongly clear the
+     * seeded selection. Keying the first baseline off THIS boundary (not off a
+     * `null` signature, which `.query`'s drop-missing-param semantics defeats)
+     * is the correct edge. May reject when the seed itself failed — consumers
+     * must still start on rejection (mirror `useDerived`'s `ready` handling).
+     */
+    seeded: Promise<void>;
     state: Ref<unknown>;
     getAt: (path: string) => unknown;
     /**
@@ -83,7 +100,7 @@ export type FormStateBag = {
     coerce: (path: string, value: unknown) => unknown;
 };
 export declare const FORM_STATE_KEY: InjectionKey<FormStateBag>;
-export declare function provideFormState(state: Ref<unknown>, kind?: FormStateBagKind): FormStateBag;
+export declare function provideFormState(state: Ref<unknown>, kind?: FormStateBagKind, seeded?: Promise<void>): FormStateBag;
 export declare function useFormState(): FormStateBag;
 /**
  * The nearest `'form'`-kind bag enclosing the current field — what the CEL

package/dist/runtime/components/form/utils/state.js

@@ -2,7 +2,7 @@ import { getProperty, setProperty } from "dot-prop";
 import { inject, provide, ref } from "vue";
 export const SELF_BINDING = ".";
 export const FORM_STATE_KEY = Symbol("shwfed-form-state");
-export function provideFormState(state, kind = "form") {
+export function provideFormState(state, kind = "form", seeded) {
   const parent = inject(FORM_STATE_KEY, void 0);
   const dirty = ref(/* @__PURE__ */ new Set());
   const coercions = /* @__PURE__ */ new Map();
@@ -27,6 +27,10 @@ export function provideFormState(state, kind = "form") {
   const bag = {
     kind,
     parent,
+    // Explicit seed promise when given (the top-level form host), else inherit
+    // the enclosing form's (list/table rows), else an already-resolved one (a
+    // host-less fallback bag — the standalone table, a test harness).
+    seeded: seeded ?? parent?.seeded ?? Promise.resolve(),
     state,
     getAt: (path) => path === SELF_BINDING ? state.value : getProperty(state.value, path),
     setAt: (path, value) => {

package/dist/runtime/components/operations/2026-06-15/com.shwfed.operation.navigation/config.d.vue.ts

@@ -4,12 +4,12 @@ type __VLS_ModelProps = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/operations/2026-06-15/com.shwfed.operation.navigation/config.vue.d.ts

@@ -4,12 +4,12 @@ type __VLS_ModelProps = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
-        readonly mode: "_blank" | "_self";
+        readonly mode: "_self" | "_blank";
         readonly url: string;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/icon-picker/IconPicker.d.vue.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     modelValue?: string;
     placeholder?: string;
-    browseUrl?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/runtime/components/ui/icon-picker/IconPicker.vue

@@ -1,48 +1,332 @@
 <script setup>
 import { Icon } from "@iconify/vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { useElementSize } from "@vueuse/core";
+import { ScrollArea } from "reka-ui/namespaced";
+import { computed, ref, shallowRef, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { Button } from "../button";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput
 } from "../input-group";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover";
+import { ScrollBar } from "../scroll-area";
+import { Tabs, TabsList, TabsTrigger } from "../tabs";
 const props = defineProps({
   modelValue: { type: String, required: false },
-  placeholder: { type: String, required: false },
-  browseUrl: { type: String, required: false }
+  placeholder: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
-const DEFAULT_BROWSE_URL = "https://icones.js.org/collection/fluent?variant=Regular+20";
+const { t } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "icon-picker-placeholder": "Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u5982 fluent:add-20-regular",
+      "icon-picker-browse": "\u6D4F\u89C8\u56FE\u6807",
+      "icon-picker-clear": "\u6E05\u7A7A",
+      "icon-picker-regular": "\u5E38\u89C4",
+      "icon-picker-filled": "\u586B\u5145",
+      "icon-picker-loading": "\u6B63\u5728\u52A0\u8F7D\u56FE\u6807\u2026",
+      "icon-picker-error": "\u56FE\u6807\u52A0\u8F7D\u5931\u8D25",
+      "icon-picker-retry": "\u91CD\u8BD5",
+      "icon-picker-empty": "\u65E0\u5339\u914D\u56FE\u6807"
+    },
+    ja: {
+      "icon-picker-placeholder": "Iconify \u30A2\u30A4\u30B3\u30F3 ID\uFF08\u4F8B\uFF1Afluent:add-20-regular\uFF09",
+      "icon-picker-browse": "\u30A2\u30A4\u30B3\u30F3\u3092\u53C2\u7167",
+      "icon-picker-clear": "\u30AF\u30EA\u30A2",
+      "icon-picker-regular": "\u30EC\u30AE\u30E5\u30E9\u30FC",
+      "icon-picker-filled": "\u30D5\u30A3\u30EB\u30C9",
+      "icon-picker-loading": "\u30A2\u30A4\u30B3\u30F3\u3092\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026",
+      "icon-picker-error": "\u30A2\u30A4\u30B3\u30F3\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+      "icon-picker-retry": "\u518D\u8A66\u884C",
+      "icon-picker-empty": "\u4E00\u81F4\u3059\u308B\u30A2\u30A4\u30B3\u30F3\u304C\u3042\u308A\u307E\u305B\u3093"
+    },
+    en: {
+      "icon-picker-placeholder": "Iconify icon id, e.g. fluent:add-20-regular",
+      "icon-picker-browse": "Browse icons",
+      "icon-picker-clear": "Clear",
+      "icon-picker-regular": "Regular",
+      "icon-picker-filled": "Filled",
+      "icon-picker-loading": "Loading icons\u2026",
+      "icon-picker-error": "Failed to load icons",
+      "icon-picker-retry": "Retry",
+      "icon-picker-empty": "No matching icon"
+    }
+  }
+});
+const ICONIFY_API = "https://api.iconify.design";
+const SUFFIX = {
+  regular: "-20-regular",
+  filled: "-20-filled"
+};
+let stemsCache = null;
+function loadStems() {
+  if (!stemsCache) {
+    stemsCache = fetch(`${ICONIFY_API}/collection?prefix=fluent`).then(async (response) => {
+      if (!response.ok) throw new Error(`iconify collection: HTTP ${response.status}`);
+      const body = await response.json();
+      const hidden = new Set(body.hidden ?? []);
+      const names = [
+        ...body.uncategorized ?? [],
+        ...Object.values(body.categories ?? {}).flat()
+      ].filter((name) => !hidden.has(name));
+      const collect = (variant2) => names.filter((name) => name.endsWith(SUFFIX[variant2])).map((name) => name.slice(0, -SUFFIX[variant2].length));
+      return { regular: collect("regular"), filled: collect("filled") };
+    }).catch((error) => {
+      stemsCache = null;
+      throw error;
+    });
+  }
+  return stemsCache;
+}
+const stems = shallowRef(null);
+const status = ref("idle");
+async function ensureStems() {
+  if (stems.value) return;
+  status.value = "loading";
+  try {
+    stems.value = await loadStems();
+    status.value = "ready";
+  } catch {
+    status.value = "error";
+  }
+}
+const tokens = computed(() => {
+  const raw = (props.modelValue ?? "").toLowerCase();
+  const body = raw.slice(raw.indexOf(":") + 1);
+  return body.replace(/-\d+(?:-(?:regular|filled|light))?$/, "").split(/[^a-z0-9]+/).filter(Boolean);
+});
+function match(variant2) {
+  const all = stems.value?.[variant2] ?? [];
+  if (!tokens.value.length) return all;
+  return all.filter((stem) => tokens.value.every((token) => stem.includes(token)));
+}
+const matches = computed(() => ({
+  regular: match("regular"),
+  filled: match("filled")
+}));
+const variant = ref("regular");
+const results = computed(() => matches.value[variant.value]);
+const tabs = computed(() => [
+  { value: "regular", label: t("icon-picker-regular") },
+  { value: "filled", label: t("icon-picker-filled") }
+]);
+const open = ref(false);
+const anchor = useTemplateRef("anchor");
+const viewport = useTemplateRef("viewport");
+const scroller = computed(() => viewport.value?.viewportElement ?? null);
+function openPanel() {
+  if (open.value) return;
+  variant.value = (props.modelValue ?? "").endsWith(SUFFIX.filled) ? "filled" : "regular";
+  open.value = true;
+  void ensureStems();
+}
 function onInput(value) {
   emit("update:modelValue", value == null ? "" : String(value));
+  openPanel();
+}
+function select(stem) {
+  emit("update:modelValue", `fluent:${stem}${SUFFIX[variant.value]}`);
+  open.value = false;
+}
+function clear() {
+  emit("update:modelValue", "");
+  openPanel();
+}
+function onInteractOutside(event) {
+  const target = event.detail?.originalEvent?.target;
+  if (target instanceof Node && anchor.value?.contains(target)) event.preventDefault();
 }
+const CELL = 36;
+const { width: scrollerWidth } = useElementSize(scroller);
+const columns = computed(() => Math.max(1, Math.floor(scrollerWidth.value / CELL)));
+const rowVirtualizer = useVirtualizer(
+  computed(() => {
+    const element = scroller.value;
+    return {
+      count: Math.ceil(results.value.length / columns.value),
+      estimateSize: () => CELL,
+      getScrollElement: () => element,
+      overscan: 4
+    };
+  })
+);
+const rowTotalSize = computed(() => rowVirtualizer.value.getTotalSize());
+const rowWindow = computed(() => rowVirtualizer.value.getVirtualItems());
+function rowStems(index) {
+  return results.value.slice(index * columns.value, (index + 1) * columns.value);
+}
+function isSelected(stem) {
+  return props.modelValue === `fluent:${stem}${SUFFIX[variant.value]}`;
+}
+watch([results, variant], () => {
+  if (scroller.value) scroller.value.scrollTop = 0;
+});
 </script>
 
 <template>
-  <InputGroup>
-    <InputGroupAddon align="inline-start">
-      <Icon
-        :icon="props.modelValue || 'fluent:image-20-regular'"
-        :class="props.modelValue ? 'text-zinc-600' : 'text-zinc-300'"
-      />
-    </InputGroupAddon>
-    <InputGroupInput
-      :model-value="props.modelValue ?? ''"
-      :placeholder="props.placeholder ?? 'Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u5982 fluent:add-20-regular'"
-      class="font-mono text-xs"
-      @update:model-value="onInput"
-    />
-    <InputGroupAddon align="inline-end">
-      <InputGroupButton
-        as="a"
-        :href="props.browseUrl ?? DEFAULT_BROWSE_URL"
-        target="_blank"
-        rel="noopener noreferrer"
-        size="icon-xs"
-        aria-label="浏览图标"
+  <Popover v-model:open="open">
+    <div ref="anchor">
+      <PopoverAnchor as-child>
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <Icon
+              :icon="props.modelValue || 'fluent:image-20-regular'"
+              :class="props.modelValue ? 'text-zinc-600' : 'text-zinc-300'"
+            />
+          </InputGroupAddon>
+          <InputGroupInput
+            :model-value="props.modelValue ?? ''"
+            :placeholder="props.placeholder ?? t('icon-picker-placeholder')"
+            class="font-mono text-xs"
+            @focus="openPanel"
+            @click="openPanel"
+            @update:model-value="onInput"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              v-if="props.modelValue"
+              size="icon-xs"
+              data-slot="icon-picker-clear"
+              :aria-label="t('icon-picker-clear')"
+              tabindex="-1"
+              class="text-zinc-500 transition-opacity hover:text-zinc-700 [@media(hover:hover)]:opacity-0 group-focus-within/input-group:opacity-100 group-hover/input-group:opacity-100"
+              @mousedown.prevent
+              @click.stop="clear"
+            >
+              <Icon icon="fluent:dismiss-20-regular" />
+            </InputGroupButton>
+            <InputGroupButton
+              size="icon-xs"
+              data-slot="icon-picker-toggle"
+              :aria-label="t('icon-picker-browse')"
+              :aria-expanded="open"
+              @click="open ? open = false : openPanel()"
+            >
+              <Icon
+                icon="fluent:chevron-down-20-regular"
+                class="transition-transform duration-150"
+                :class="open && 'rotate-180'"
+              />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </PopoverAnchor>
+    </div>
+
+    <PopoverContent
+      align="start"
+      class="w-(--reka-popover-trigger-width) min-w-72 p-0"
+      @open-auto-focus="(event) => event.preventDefault()"
+      @interact-outside="onInteractOutside"
+    >
+      <Tabs
+        v-model="variant"
+        class="gap-0"
       >
-        <Icon icon="fluent:search-20-regular" />
-      </InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
+        <TabsList class="px-3">
+          <TabsTrigger
+            v-for="tab in tabs"
+            :key="tab.value"
+            :value="tab.value"
+            class="h-9 px-4 text-xs"
+          >
+            {{ tab.label }}
+            <span class="text-[0.625rem] text-zinc-400 tabular-nums">
+              {{ matches[tab.value].length }}
+            </span>
+          </TabsTrigger>
+        </TabsList>
+
+        <!-- Only the grid scrolls: the placeholder states have nothing to
+             scroll, and `h-full` wouldn't resolve for them inside the viewport's
+             `display: table` content wrapper anyway. -->
+        <section
+          v-if="status === 'loading' || status === 'idle'"
+          class="h-64 flex items-center justify-center gap-2 text-sm text-zinc-500 select-none"
+        >
+          <Icon
+            icon="fluent:spinner-ios-20-regular"
+            class="animate-spin"
+          />
+          {{ t("icon-picker-loading") }}
+        </section>
+
+        <section
+          v-else-if="status === 'error'"
+          class="h-64 flex flex-col items-center justify-center gap-2 text-sm text-zinc-500 select-none"
+        >
+          <Icon
+            icon="fluent:plug-disconnected-20-regular"
+            class="text-2xl! text-zinc-400"
+          />
+          {{ t("icon-picker-error") }}
+          <Button
+            size="sm"
+            @click="ensureStems"
+          >
+            {{ t("icon-picker-retry") }}
+          </Button>
+        </section>
+
+        <section
+          v-else-if="!results.length"
+          class="h-64 flex flex-col items-center justify-center gap-2 text-sm text-zinc-500 select-none"
+        >
+          <Icon
+            icon="fluent:search-20-regular"
+            class="text-2xl! text-zinc-400"
+          />
+          {{ t("icon-picker-empty") }}
+        </section>
+
+        <ScrollArea.Root
+          v-else
+          class="relative h-64"
+        >
+          <ScrollArea.Viewport
+            ref="viewport"
+            class="size-full overscroll-contain p-2 outline-none"
+          >
+            <div
+              class="relative w-full"
+              :style="{ height: `${rowTotalSize}px` }"
+            >
+              <div
+                v-for="row in rowWindow"
+                :key="String(row.key)"
+                class="absolute top-0 left-0 grid w-full"
+                :style="{
+  height: `${row.size}px`,
+  transform: `translateY(${row.start}px)`,
+  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+}"
+              >
+                <button
+                  v-for="stem in rowStems(row.index)"
+                  :key="stem"
+                  type="button"
+                  :title="`fluent:${stem}${SUFFIX[variant]}`"
+                  class="flex items-center justify-center rounded text-zinc-600 transition-colors duration-150 hover:bg-zinc-100 hover:text-zinc-900"
+                  :class="isSelected(stem) && 'bg-zinc-100 text-(--primary)'"
+                  @click="select(stem)"
+                >
+                  <Icon
+                    :icon="`fluent:${stem}${SUFFIX[variant]}`"
+                    class="text-xl!"
+                  />
+                </button>
+              </div>
+            </div>
+          </ScrollArea.Viewport>
+          <ScrollBar orientation="vertical" />
+          <ScrollArea.Corner />
+        </ScrollArea.Root>
+      </Tabs>
+    </PopoverContent>
+  </Popover>
 </template>

package/dist/runtime/components/ui/icon-picker/IconPicker.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     modelValue?: string;
     placeholder?: string;
-    browseUrl?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/runtime/components/ui/tabs/TabsList.vue

@@ -13,6 +13,7 @@ const delegatedProps = reactiveOmit(props, "class");
 const barEl = ref(null);
 const barStyle = shallowRef({});
 const ready = ref(false);
+const animated = ref(false);
 let mo = null;
 let ro = null;
 function measure() {
@@ -29,7 +30,15 @@ function measure() {
     width: `${rect.width}px`,
     transform: `translateX(${rect.left - rootRect.left}px)`
   };
+  if (ready.value) return;
   ready.value = true;
+  if (typeof requestAnimationFrame === "undefined") {
+    animated.value = true;
+    return;
+  }
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    animated.value = true;
+  }));
 }
 function schedule() {
   nextTick(measure);
@@ -79,7 +88,8 @@ onBeforeUnmount(() => {
       ref="barEl"
       data-slot="tabs-active-bar"
       aria-hidden="true"
-      class="pointer-events-none absolute -bottom-px left-0 z-1 h-0.5 bg-(--primary) transition-[width,transform] duration-300 ease-[cubic-bezier(0.645,0.045,0.355,1)]"
+      class="pointer-events-none absolute -bottom-px left-0 z-1 h-0.5 bg-(--primary)"
+      :class="animated && 'transition-[width,transform] duration-300 ease-[cubic-bezier(0.645,0.045,0.355,1)]'"
       :style="{ ...barStyle, visibility: ready ? 'visible' : 'hidden' }"
     />
   </TabsList>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/config",
-  "version": "3.0.19",
+  "version": "3.0.21",
   "description": "Configurable UI for SHWFED",
   "type": "module",
   "publishConfig": {