@shwfed/config 2.2.1 → 2.2.2

package/dist/module.json

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

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

@@ -0,0 +1,9 @@
+import type { FieldValue, FormUnitValue } from './schema.js';
+type __VLS_Props = {
+    unit: FormUnitValue;
+    evaluateMedia: (expression: string) => boolean;
+    isHidden?: (field: FieldValue) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { DEFAULT_GAP } from "./schema";
+import { findField } from "./utils/resolve";
+defineOptions({ name: "ShwfedFormUnitRenderer" });
+const props = defineProps({
+  unit: { type: Object, required: true },
+  evaluateMedia: { type: Function, required: true },
+  isHidden: { type: Function, required: false }
+});
+function pickLayout(sets) {
+  for (const set of sets) {
+    if (!set.media) return set;
+    try {
+      if (props.evaluateMedia(set.media)) return set;
+    } catch (err) {
+      console.error(`[shwfed-form] failed to evaluate layout media for ${set.name}:`, err);
+    }
+  }
+  return sets[sets.length - 1];
+}
+const activeLayout = ref();
+onMounted(() => {
+  activeLayout.value = pickLayout(props.unit.layouts);
+});
+watch(() => props.unit.layouts, (sets) => {
+  activeLayout.value = pickLayout(sets);
+}, { deep: false });
+const warnedMissing = /* @__PURE__ */ new Set();
+const placedFields = computed(() => {
+  const layout = activeLayout.value?.layout;
+  if (!layout) return [];
+  const out = [];
+  for (const field of props.unit.fields) {
+    const placement = layout.placements[field.id];
+    if (!placement) continue;
+    if (props.isHidden?.(field)) continue;
+    const entry = findField(field.type, field.compatibilityDate);
+    if (!entry) {
+      const key = `${field.type}@${field.compatibilityDate}`;
+      if (!warnedMissing.has(key)) {
+        warnedMissing.add(key);
+        console.warn(`[shwfed-form] no registered field type for ${key}`);
+      }
+      continue;
+    }
+    out.push({ field, placement, entry });
+  }
+  return out;
+});
+function cellStyle(placement) {
+  const [[x1, y1], [x2, y2]] = placement.area;
+  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`, "min-width: 0"];
+  const h = placement.h && placement.h !== "stretch" ? placement.h : null;
+  const v = placement.v && placement.v !== "stretch" ? placement.v : null;
+  if (h || v) {
+    parts.push("display: flex");
+    const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
+    if (h) parts.push(`justify-content: ${toFlex(h)}`);
+    if (v) parts.push(`align-items: ${toFlex(v)}`);
+  }
+  return parts.join("; ");
+}
+const gridStyle = computed(() => {
+  const l = activeLayout.value?.layout;
+  if (!l) return "";
+  const colTemplate = `repeat(${l.columns}, minmax(0, 1fr))`;
+  let rowTemplate = "";
+  if (l.rows) {
+    const grows = Array.from({ length: l.rows }, () => false);
+    for (const p of placedFields.value) {
+      if (!p.entry.metadata.h.grow) continue;
+      const [[, y1], [, y2]] = p.placement.area;
+      const lo = Math.max(1, y1);
+      const hi = Math.min(l.rows, y2 - 1);
+      for (let r = lo; r <= hi; r++) grows[r - 1] = true;
+    }
+    rowTemplate = grows.map((g) => g ? "auto" : "minmax(auto, 1fr)").join(" ");
+  }
+  const gap = `calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`;
+  const colGap = l.columns > 1 ? `min(${gap}, calc(100% / ${l.columns - 1}))` : gap;
+  const parts = [
+    "display: grid",
+    `grid-template-columns: ${colTemplate}`,
+    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
+    `column-gap: ${colGap}`,
+    `row-gap: ${gap}`,
+    l.style ?? ""
+  ].filter(Boolean);
+  return parts.join("; ");
+});
+const rendered = computed(
+  () => placedFields.value.map((p) => ({
+    key: p.field.id,
+    style: cellStyle(p.placement),
+    component: p.entry.runtime,
+    fieldId: p.field.id,
+    config: p.field
+  }))
+);
+</script>
+
+<template>
+  <div :style="gridStyle">
+    <div
+      v-for="r in rendered"
+      :key="r.key"
+      :style="r.style"
+    >
+      <component
+        :is="r.component"
+        :field-id="r.fieldId"
+        :config="r.config"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { FieldValue, FormUnitValue } from './schema.js';
+type __VLS_Props = {
+    unit: FormUnitValue;
+    evaluateMedia: (expression: string) => boolean;
+    isHidden?: (field: FieldValue) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -33,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -42,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -89,7 +89,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -98,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/config.vue

@@ -96,7 +96,7 @@ const reorderable = computed({
     :field-cel-scope="FIELD_CEL_SCOPE"
   >
     <template #extras-pane>
-      <div class="flex flex-col gap-3 p-6">
+      <div class="flex flex-col gap-3">
         <div class="grid grid-cols-2 gap-3">
           <Field orientation="vertical">
             <FieldLabel class="text-xs text-zinc-500">

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

@@ -33,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -42,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -89,7 +89,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -98,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/row.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { cel as _rawCel } from "../../../../../utils/cel";
 import { Effect } from "effect";
-import { computed, onMounted, ref, watch } from "vue";
 import { celBindings, injectCELContext, provideCELContext } from "../../../../../utils/cel-context";
-import { DEFAULT_GAP } from "../../../schema";
+import FormUnitRenderer from "../../../FormUnitRenderer.vue";
 import { useDerived, useDerivedQuiescence } from "../../../utils/derived";
-import { findField } from "../../../utils/resolve";
 import { provideFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedListFieldRow" });
 const state = defineModel({ type: Object, ...{ required: true } });
@@ -37,109 +35,14 @@ useDerived({
   formState,
   quiescence: useDerivedQuiescence()
 });
-function pickLayout(sets) {
-  for (const set of sets) {
-    if (!set.media) return set;
-    try {
-      if (Effect.runSync($cel(set.media))) return set;
-    } catch (err) {
-      console.error(`[shwfed-form] list field: failed to evaluate layout media for ${set.name}:`, err);
-    }
-  }
-  return sets[sets.length - 1];
-}
-const activeLayout = ref();
-onMounted(() => {
-  activeLayout.value = pickLayout(props.unit.layouts);
-});
-watch(() => props.unit.layouts, (sets) => {
-  activeLayout.value = pickLayout(sets);
-}, { deep: false });
-const warnedMissing = /* @__PURE__ */ new Set();
-const placedFields = computed(() => {
-  const layout = activeLayout.value?.layout;
-  if (!layout) return [];
-  const out = [];
-  for (const field of props.unit.fields) {
-    const placement = layout.placements[field.id];
-    if (!placement) continue;
-    const entry = findField(field.type, field.compatibilityDate);
-    if (!entry) {
-      const key = `${field.type}@${field.compatibilityDate}`;
-      if (!warnedMissing.has(key)) {
-        warnedMissing.add(key);
-        console.warn(`[shwfed-form] list field: no registered field type for ${key}`);
-      }
-      continue;
-    }
-    out.push({ field, placement, entry });
-  }
-  return out;
-});
-const gridStyle = computed(() => {
-  const l = activeLayout.value?.layout;
-  if (!l) return "";
-  const colTemplate = `repeat(${l.columns}, minmax(0, 1fr))`;
-  let rowTemplate = "";
-  if (l.rows) {
-    const grows = Array.from({ length: l.rows }, () => false);
-    for (const p of placedFields.value) {
-      if (!p.entry.metadata.h.grow) continue;
-      const [[, y1], [, y2]] = p.placement.area;
-      const lo = Math.max(1, y1);
-      const hi = Math.min(l.rows, y2 - 1);
-      for (let r = lo; r <= hi; r++) grows[r - 1] = true;
-    }
-    rowTemplate = grows.map((g) => g ? "auto" : "minmax(auto, 1fr)").join(" ");
-  }
-  const gap = `calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`;
-  const colGap = l.columns > 1 ? `min(${gap}, calc(100% / ${l.columns - 1}))` : gap;
-  const parts = [
-    "display: grid",
-    `grid-template-columns: ${colTemplate}`,
-    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
-    `column-gap: ${colGap}`,
-    `row-gap: ${gap}`,
-    l.style ?? ""
-  ].filter(Boolean);
-  return parts.join("; ");
-});
-function cellStyle(placement) {
-  const [[x1, y1], [x2, y2]] = placement.area;
-  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`, "min-width: 0"];
-  const h = placement.h && placement.h !== "stretch" ? placement.h : null;
-  const v = placement.v && placement.v !== "stretch" ? placement.v : null;
-  if (h || v) {
-    parts.push("display: flex");
-    const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
-    if (h) parts.push(`justify-content: ${toFlex(h)}`);
-    if (v) parts.push(`align-items: ${toFlex(v)}`);
-  }
-  return parts.join("; ");
+function evaluateMedia(expression) {
+  return Effect.runSync($cel(expression));
 }
-const rendered = computed(
-  () => placedFields.value.map((p) => ({
-    key: p.field.id,
-    style: cellStyle(p.placement),
-    component: p.entry.runtime,
-    fieldId: p.field.id,
-    config: p.field
-  }))
-);
 </script>
 
 <template>
-  <div :style="gridStyle">
-    <div
-      v-for="r in rendered"
-      :key="r.key"
-      :style="r.style"
-    >
-      <component
-        :is="r.component"
-        :field-id="r.fieldId"
-        :config="r.config"
-      />
-    </div>
-  </div>
+  <FormUnitRenderer
+    :unit="unit"
+    :evaluate-media="evaluateMedia"
+  />
 </template>

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/schema.d.ts

@@ -47,11 +47,11 @@ export declare function schema(configure: (env: Environment) => void): Schema.re
     readonly compatibilityDate: "2026-05-13";
     readonly min?: number | undefined;
     readonly max?: number | undefined;
-    readonly binding?: string | undefined;
     readonly unit: Readonly<{
         fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
         layouts: ReadonlyArray<import("../../../schema.js").LayoutSetValue>;
     }>;
+    readonly binding?: string | undefined;
     readonly addLabel?: readonly [{
         readonly locale: "zh";
         readonly message: string;

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

@@ -0,0 +1,53 @@
+import { type Value } from './schema.js';
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly type: "com.shwfed.form.field.collapsible";
+        readonly id: string;
+        readonly header: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-20";
+        readonly unit: Readonly<{
+            fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+            layouts: readonly Readonly<{
+                name: string;
+                media?: string;
+                layout: import("../../../schema.js").LayoutValue;
+            }>[];
+        }>;
+        readonly defaultCollapsed?: boolean | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly type: "com.shwfed.form.field.collapsible";
+        readonly id: string;
+        readonly header: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-20";
+        readonly unit: Readonly<{
+            fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+            layouts: readonly Readonly<{
+                name: string;
+                media?: string;
+                layout: import("../../../schema.js").LayoutValue;
+            }>[];
+        }>;
+        readonly defaultCollapsed?: boolean | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/config.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
+import { Locale as LocaleField } from "../../../../ui/locale";
+import { Markdown } from "../../../../ui/markdown";
+import { Switch } from "../../../../ui/switch";
+import { FORM_FIELD_LAYOUT_KEY } from "../../../field-layout";
+import {
+  getStructFieldDescription,
+  getStructFieldTitle
+} from "../../../schema";
+import ShwfedFormUnitConfig, {
+} from "../../../unit-config.vue";
+import { schema } from "./schema";
+defineOptions({ name: "ShwfedCollapsibleFieldConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
+const layout = inject(FORM_FIELD_LAYOUT_KEY, null);
+onMounted(() => {
+  if (layout) layout.fullPane.value = true;
+});
+onBeforeUnmount(() => {
+  if (layout) layout.fullPane.value = false;
+});
+const unitModel = computed({
+  get: () => value.value.unit,
+  set: (next) => {
+    value.value = { ...value.value, unit: next };
+  }
+});
+const EXTRAS = [
+  { id: "general", label: "\u901A\u7528\u914D\u7F6E", icon: "fluent:settings-20-regular" }
+];
+const selection = ref({ kind: "extras", id: "general" });
+const defaultCollapsed = computed({
+  get: () => value.value.defaultCollapsed ?? false,
+  set: (next) => {
+    if (next === true) {
+      value.value = { ...value.value, defaultCollapsed: true };
+    } else {
+      const { defaultCollapsed: _omit, ...rest } = value.value;
+      value.value = rest;
+    }
+  }
+});
+</script>
+
+<template>
+  <ShwfedFormUnitConfig
+    v-model="unitModel"
+    v-model:selection="selection"
+    :extras="EXTRAS"
+  >
+    <template #extras-pane>
+      <div class="flex flex-col gap-2">
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('displayName')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('displayName')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("displayName") }}
+          </FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              :model-value="value.displayName ?? ''"
+              placeholder="例：基本信息"
+              @update:model-value="(v) => {
+  const s = String(v ?? '');
+  value = { ...value, displayName: s.length > 0 ? s : void 0 };
+}"
+            />
+          </InputGroup>
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('header')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('header')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("header") }}
+          </FieldLabel>
+          <LocaleField
+            markdown
+            translate-hint="折叠区域标题，行内 Markdown 文本，保留表达式插值占位符不要翻译"
+            :model-value="value.header"
+            @update:model-value="(v) => value = { ...value, header: v }"
+          />
+        </Field>
+
+        <Field
+          orientation="horizontal"
+          class="h-9 w-auto gap-2"
+        >
+          <Switch v-model="defaultCollapsed" />
+          <FieldLabel class="text-sm text-zinc-600">
+            <template
+              v-if="fieldDescription('defaultCollapsed')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('defaultCollapsed')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("defaultCollapsed") }}
+          </FieldLabel>
+        </Field>
+      </div>
+    </template>
+  </ShwfedFormUnitConfig>
+</template>

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

@@ -0,0 +1,53 @@
+import { type Value } from './schema.js';
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly type: "com.shwfed.form.field.collapsible";
+        readonly id: string;
+        readonly header: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-20";
+        readonly unit: Readonly<{
+            fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+            layouts: readonly Readonly<{
+                name: string;
+                media?: string;
+                layout: import("../../../schema.js").LayoutValue;
+            }>[];
+        }>;
+        readonly defaultCollapsed?: boolean | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly type: "com.shwfed.form.field.collapsible";
+        readonly id: string;
+        readonly header: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-20";
+        readonly unit: Readonly<{
+            fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+            layouts: readonly Readonly<{
+                name: string;
+                media?: string;
+                layout: import("../../../schema.js").LayoutValue;
+            }>[];
+        }>;
+        readonly defaultCollapsed?: boolean | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/runtime.d.vue.ts

@@ -0,0 +1,8 @@
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    fieldId: string;
+    config: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/runtime.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { cel as _rawCel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+import { getLocalizedText } from "../../../../../share/locale";
+import { interpolate } from "../../../../../utils/interpolate";
+import { InputGroupButton } from "../../../../ui/input-group";
+import { Markdown } from "../../../../ui/markdown";
+import FormUnitRenderer from "../../../FormUnitRenderer.vue";
+defineOptions({ name: "ShwfedCollapsibleFieldRuntime" });
+const props = defineProps({
+  fieldId: { type: String, required: true },
+  config: { type: null, required: true }
+});
+const { locale } = useI18n();
+const collapsed = ref(props.config.defaultCollapsed ?? false);
+function toggle() {
+  collapsed.value = !collapsed.value;
+}
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+const headerSource = computed(() => {
+  const template = getLocalizedText(props.config.header, locale.value) ?? "";
+  if (!template) return "";
+  return interpolate(template, (expression) => {
+    try {
+      const out = Effect.runSync($cel(expression));
+      return out == null ? "" : String(out);
+    } catch (err) {
+      console.error(
+        `[shwfed-form] collapsible: failed to evaluate header expression \`${expression}\` for ${props.fieldId}:`,
+        err
+      );
+      return "";
+    }
+  });
+});
+function evaluateMedia(expression) {
+  return Effect.runSync($cel(expression));
+}
+function isHidden(field) {
+  const hidden = field.hidden;
+  if (!hidden) return false;
+  try {
+    return Effect.runSync($cel(hidden));
+  } catch (err) {
+    console.error(`[shwfed-form] collapsible: failed to evaluate hidden for ${field.id}:`, err);
+    return false;
+  }
+}
+</script>
+
+<template>
+  <!-- Mirrors the list-row card frame (`rounded border bg-zinc-50/40 p-3`)
+       so collapsibles and list rows share a visual language for nested
+       containers. The toggle chevron is its own `InputGroupButton`, matching
+       the list row's collapse affordance — header text is clickable
+       *targets* of focus, but only the chevron toggles. -->
+  <div
+    data-slot="collapsible-section"
+    class="relative rounded border border-zinc-200 bg-zinc-50/40 p-3"
+  >
+    <div class="flex items-center gap-2">
+      <InputGroupButton
+        size="icon-xs"
+        class="shrink-0"
+        data-slot="collapsible-toggle"
+        :aria-expanded="!collapsed"
+        :aria-label="collapsed ? '\u5C55\u5F00' : '\u6298\u53E0'"
+        @click="toggle"
+      >
+        <Icon
+          :icon="collapsed ? 'fluent:chevron-right-20-regular' : 'fluent:chevron-down-20-regular'"
+        />
+      </InputGroupButton>
+      <div
+        class="min-w-0 flex-1"
+        data-slot="collapsible-header"
+      >
+        <Markdown
+          :source="headerSource"
+          class="prose prose-sm prose-zinc max-w-none"
+        />
+      </div>
+    </div>
+
+    <!-- `v-show` (not `v-if`) so children stay mounted while collapsed:
+         derived expressions keep running, commit-bus drafts stay live, and
+         readonly inheritance keeps flowing. The parent grid's row track
+         relies on this field's `metadata.h.grow = true` to shrink the
+         collapsed section to its header height. -->
+    <div
+      v-show="!collapsed"
+      data-slot="collapsible-body"
+      class="mt-3 min-w-0"
+    >
+      <FormUnitRenderer
+        :unit="config.unit"
+        :evaluate-media="evaluateMedia"
+        :is-hidden="isHidden"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/runtime.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    fieldId: string;
+    config: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/schema.d.ts

@@ -0,0 +1,54 @@
+import { Schema } from 'effect';
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+export declare const type: "com.shwfed.form.field.collapsible";
+export declare const compatibilityDate: "2026-05-20";
+export declare const metadata: {
+    readonly name: "可折叠区域";
+    readonly icon: "fluent:chevron-down-20-regular";
+    readonly w: {
+        readonly initial: 12;
+        readonly min: 4;
+        readonly max: number;
+    };
+    readonly h: {
+        readonly initial: 4;
+        readonly min: 2;
+        readonly max: number;
+        readonly grow: true;
+    };
+};
+/**
+ * A collapsible section. Pure view — children are flat in the form state
+ * (no subtree introduced by the section), and the collapsed state lives only
+ * in the runtime component's local ref (not persisted, not authored as CEL).
+ *
+ * Deliberately does **not** include `commonFieldFields` — `displayName` /
+ * `hidden` / etc. are field-flavored concepts that don't fit a structural
+ * grouping. We carry only the minimum: an `id` for the parent layout to
+ * reference, a markdown `header` (CEL-interpolated), the `defaultCollapsed`
+ * authoring default, and the nested `unit` whose children are rendered
+ * inline.
+ */
+export declare function schema(configure: (env: Environment) => void): Schema.Struct<{
+    type: Schema.Literal<["com.shwfed.form.field.collapsible"]>;
+    compatibilityDate: Schema.Literal<["2026-05-20"]>;
+    id: Schema.refine<string, typeof Schema.String>;
+    displayName: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    header: Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>;
+    defaultCollapsed: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    unit: Schema.suspend<Readonly<{
+        fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+        layouts: ReadonlyArray<import("../../../schema.js").LayoutSetValue>;
+    }>, Readonly<{
+        fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
+        layouts: ReadonlyArray<import("../../../schema.js").LayoutSetValue>;
+    }>, never>;
+}>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;
+export declare function defaults(): Partial<Value>;

package/dist/runtime/components/form/fields/2026-05-20/com.shwfed.form.field.collapsible/schema.js

@@ -0,0 +1,47 @@
+import { Schema } from "effect";
+import { Locale } from "../../../../../share/locale.js";
+import { FormUnit } from "../../../schema.js";
+export const type = "com.shwfed.form.field.collapsible";
+export const compatibilityDate = "2026-05-20";
+export const metadata = {
+  name: "\u53EF\u6298\u53E0\u533A\u57DF",
+  icon: "fluent:chevron-down-20-regular",
+  w: { initial: 12, min: 4, max: Infinity },
+  h: { initial: 4, min: 2, max: Infinity, grow: true }
+};
+export function schema(configure) {
+  const Unit = Schema.suspend(() => FormUnit(configure));
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    id: Schema.UUID.annotations({ description: "\u5B57\u6BB5\u552F\u4E00\u6807\u8BC6\uFF1B\u5E03\u5C40\u901A\u8FC7\u8BE5 id \u5F15\u7528\u5B57\u6BB5" }),
+    displayName: Schema.optional(Schema.String.annotations({
+      title: "\u5185\u90E8\u540D\u79F0",
+      description: "\u4EC5\u5728\u7F16\u8F91\u5668\u5185\u53EF\u89C1\u7684\u533A\u57DF\u540D\uFF0C\u7528\u4E8E\u5728\u4FA7\u8FB9\u680F\u548C\u5E03\u5C40\u7F16\u8F91\u5668\u4E2D\u8BC6\u522B\u8BE5\u6298\u53E0\u533A\u57DF\uFF1B\u8FD0\u884C\u65F6\u4E0D\u5C55\u793A"
+    })),
+    header: Locale.annotations({
+      title: "\u6807\u9898",
+      description: "\u6298\u53E0\u533A\u57DF\u7684\u6807\u9898\uFF0C\u6E32\u67D3\u4E3A\u884C\u5185 Markdown\u3002\u652F\u6301 `{{ \u8868\u8FBE\u5F0F }}` \u63D2\u503C\uFF0C\u8868\u8FBE\u5F0F\u4E3A CEL\uFF0C\u53EF\u8BBF\u95EE `form`\uFF08\u5F53\u524D\u8868\u5355\u72B6\u6001\uFF09\u4EE5\u53CA\u5F53\u524D\u4F5C\u7528\u57DF\u5185\u7684\u5176\u4ED6\u53D8\u91CF"
+    }),
+    defaultCollapsed: Schema.optional(Schema.Boolean.annotations({
+      title: "\u9ED8\u8BA4\u6298\u53E0",
+      description: "\u6302\u8F7D\u65F6\u662F\u5426\u9ED8\u8BA4\u6298\u53E0\uFF1B\u7528\u6237\u70B9\u51FB\u5C55\u5F00/\u6536\u8D77\u540E\u5373\u65F6\u751F\u6548\uFF0C**\u4E0D**\u6301\u4E45\u5316\uFF08\u5378\u8F7D\u5373\u4E22\u5F03\uFF09"
+    })),
+    unit: Unit.annotations({
+      title: "\u533A\u57DF\u5185\u5BB9",
+      description: "\u6298\u53E0\u533A\u57DF\u5185\u7684\u5B57\u6BB5\u4E0E\u5E03\u5C40\uFF1B\u8FD9\u4E9B\u5B57\u6BB5\u5728\u8868\u5355\u72B6\u6001\u4E2D\u4FDD\u6301\u6241\u5E73\uFF0C\u4E0D\u4F1A\u56E0\u4E3A\u5206\u7EC4\u800C\u5F15\u5165\u65B0\u7684\u72B6\u6001\u5C42\u7EA7"
+    })
+  }).annotations({
+    title: "CollapsibleField",
+    description: "\u5E26 Markdown \u6807\u9898\u7684\u53EF\u6298\u53E0\u533A\u57DF\uFF0C\u4EC5\u7528\u4E8E\u89C6\u89C9\u5206\u7EC4\uFF0C\u4E0D\u5F71\u54CD\u5B57\u6BB5\u5728\u8868\u5355\u72B6\u6001\u4E2D\u7684\u5C42\u7EA7"
+  });
+}
+export function defaults() {
+  return {
+    header: [{ locale: "zh", message: "" }],
+    unit: {
+      fields: [],
+      layouts: [{ name: "\u9ED8\u8BA4", layout: { columns: 1, placements: {} } }]
+    }
+  };
+}

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

@@ -3,20 +3,19 @@ import { cel as _rawCel } from "../../utils/cel";
 import { TZDate } from "@date-fns/tz";
 import { Effect } from "effect";
 import { Fetch } from "fx-fetch";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed } from "vue";
 import {
   celBindings,
   injectCELContext,
   provideCELContext
 } from "../../utils/cel-context";
+import FormUnitRenderer from "./FormUnitRenderer.vue";
 import { provideCommitBus } from "./utils/commit-bus";
 import { provideDerivedQuiescence, useDerived } from "./utils/derived";
 import { useFormHistory } from "./utils/history";
 import { evaluateInitial } from "./utils/initial";
 import { provideFormReadonly } from "./utils/readonly";
-import { findField } from "./utils/resolve";
 import { provideFormState } from "./utils/state";
-import { DEFAULT_GAP } from "./schema";
 defineOptions({ name: "ShwfedForm" });
 const state = defineModel({ type: Object, ...{ default: () => ({}) } });
 const config = defineModel("config", { type: Object, ...{ required: true } });
@@ -93,122 +92,31 @@ defineExpose({
   canUndo: formHistory.canUndo,
   canRedo: formHistory.canRedo
 });
-function pickLayout(sets) {
-  for (const set of sets) {
-    if (!set.media) return set;
-    try {
-      if (Effect.runSync($cel(set.media))) return set;
-    } catch (err) {
-      console.error(`[shwfed-form] failed to evaluate layout media for ${set.name}:`, err);
-    }
-  }
-  return sets[sets.length - 1];
+const unit = computed(() => ({
+  fields: config.value.fields,
+  layouts: config.value.layouts
+}));
+function evaluateMedia(expression) {
+  return Effect.runSync($cel(expression));
 }
-const activeLayout = ref();
-onMounted(() => {
-  activeLayout.value = pickLayout(config.value.layouts);
-});
-watch(() => config.value.layouts, (sets) => {
-  activeLayout.value = pickLayout(sets);
-}, { deep: false });
-const warnedMissing = /* @__PURE__ */ new Set();
-function isHidden(f) {
-  const hidden = f.hidden;
+function isHidden(field) {
+  const hidden = field.hidden;
   if (!hidden) return false;
   try {
     return Effect.runSync($cel(hidden, { form: state.value ?? {} }));
   } catch (err) {
-    console.error(`[shwfed-form] failed to evaluate hidden for ${f.id}:`, err);
+    console.error(`[shwfed-form] failed to evaluate hidden for ${field.id}:`, err);
     return false;
   }
 }
-function cellStyle(placement) {
-  const [[x1, y1], [x2, y2]] = placement.area;
-  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`, "min-width: 0"];
-  const h = placement.h && placement.h !== "stretch" ? placement.h : null;
-  const v = placement.v && placement.v !== "stretch" ? placement.v : null;
-  if (h || v) {
-    parts.push("display: flex");
-    const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
-    if (h) parts.push(`justify-content: ${toFlex(h)}`);
-    if (v) parts.push(`align-items: ${toFlex(v)}`);
-  }
-  return parts.join("; ");
-}
-const placedFields = computed(() => {
-  const layout = activeLayout.value?.layout;
-  if (!layout) return [];
-  const out = [];
-  for (const field of config.value.fields) {
-    const placement = layout.placements[field.id];
-    if (!placement) continue;
-    if (isHidden(field)) continue;
-    const entry = findField(field.type, field.compatibilityDate);
-    if (!entry) {
-      const key = `${field.type}@${field.compatibilityDate}`;
-      if (!warnedMissing.has(key)) {
-        warnedMissing.add(key);
-        console.warn(`[shwfed-form] no registered field type for ${key}`);
-      }
-      continue;
-    }
-    out.push({ field, placement, entry });
-  }
-  return out;
-});
-const gridStyle = computed(() => {
-  const l = activeLayout.value?.layout;
-  if (!l) return "";
-  const colTemplate = `repeat(${l.columns}, minmax(0, 1fr))`;
-  let rowTemplate = "";
-  if (l.rows) {
-    const grows = Array.from({ length: l.rows }, () => false);
-    for (const p of placedFields.value) {
-      if (!p.entry.metadata.h.grow) continue;
-      const [[, y1], [, y2]] = p.placement.area;
-      const lo = Math.max(1, y1);
-      const hi = Math.min(l.rows, y2 - 1);
-      for (let r = lo; r <= hi; r++) grows[r - 1] = true;
-    }
-    rowTemplate = grows.map((g) => g ? "auto" : "minmax(auto, 1fr)").join(" ");
-  }
-  const gap = `calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`;
-  const colGap = l.columns > 1 ? `min(${gap}, calc(100% / ${l.columns - 1}))` : gap;
-  const parts = [
-    "display: grid",
-    `grid-template-columns: ${colTemplate}`,
-    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
-    `column-gap: ${colGap}`,
-    `row-gap: ${gap}`,
-    l.style ?? ""
-  ].filter(Boolean);
-  return parts.join("; ");
-});
-const rendered = computed(
-  () => placedFields.value.map((p) => ({
-    key: p.field.id,
-    style: cellStyle(p.placement),
-    component: p.entry.runtime,
-    fieldId: p.field.id,
-    config: p.field
-  }))
-);
 </script>
 
 <template>
   <ClientOnly>
-    <div :style="gridStyle">
-      <div
-        v-for="r in rendered"
-        :key="r.key"
-        :style="r.style"
-      >
-        <component
-          :is="r.component"
-          :field-id="r.fieldId"
-          :config="r.config"
-        />
-      </div>
-    </div>
+    <FormUnitRenderer
+      :unit="unit"
+      :evaluate-media="evaluateMedia"
+      :is-hidden="isHidden"
+    />
   </ClientOnly>
 </template>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/runtime.vue

@@ -44,6 +44,7 @@ function toChineseUppercase(n) {
   return isNegative ? `\u8D1F${result}` : result;
 }
 function formatNumber(value, column) {
+  if (value === void 0 || value === null) return "-";
   const n = Number(value);
   if (Number.isNaN(n)) return "-";
   const displayMode = column.displayMode ?? "plain";

package/package.json

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