@shwfed/config 2.9.13 → 2.10.0

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

@@ -12,14 +12,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedDateRangeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -35,7 +36,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -57,8 +58,8 @@ const shortcuts = computed(() => {
     name: preset.label,
     value: () => {
       try {
-        const start = Effect.runSync($cel(preset.start, { form: state.value ?? {} }));
-        const end = Effect.runSync($cel(preset.end, { form: state.value ?? {} }));
+        const start = Effect.runSync($cel(preset.start, { form: formScope.state.value ?? {} }));
+        const end = Effect.runSync($cel(preset.end, { form: formScope.state.value ?? {} }));
         return [
           formatDate(start, resolvedValueFormat.value),
           formatDate(end, resolvedValueFormat.value)
@@ -113,7 +114,7 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
 });
 const readonlyText = computed(() => {
   const v = model.value;
-  if (!v) return "\u2014";
+  if (!v) return null;
   return `${v[0]} ~ ${v[1]}`;
 });
 </script>
@@ -145,9 +146,10 @@ const readonlyText = computed(() => {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="readonlyText ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ readonlyText }}
+      {{ readonlyText || "-" }}
     </div>
     <DateRangePicker
       v-else

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/runtime.vue

@@ -12,14 +12,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedDateTimeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -32,7 +33,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -54,7 +55,7 @@ const shortcuts = computed(() => {
     name: preset.label,
     value: () => {
       try {
-        const d = Effect.runSync($cel(preset.value, { form: state.value ?? {} }));
+        const d = Effect.runSync($cel(preset.value, { form: formScope.state.value ?? {} }));
         return formatDate(d, resolvedValueFormat.value);
       } catch (err) {
         console.error(`[shwfed-form] failed to evaluate preset "${preset.value}" for ${props.fieldId}:`, err);
@@ -115,9 +116,10 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="model ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ model || "\u2014" }}
+      {{ model || "-" }}
     </div>
     <DatePicker
       v-else

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

@@ -12,14 +12,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedDateTimeRangeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -35,7 +36,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -57,8 +58,8 @@ const shortcuts = computed(() => {
     name: preset.label,
     value: () => {
       try {
-        const start = Effect.runSync($cel(preset.start, { form: state.value ?? {} }));
-        const end = Effect.runSync($cel(preset.end, { form: state.value ?? {} }));
+        const start = Effect.runSync($cel(preset.start, { form: formScope.state.value ?? {} }));
+        const end = Effect.runSync($cel(preset.end, { form: formScope.state.value ?? {} }));
         return [
           formatDate(start, resolvedValueFormat.value),
           formatDate(end, resolvedValueFormat.value)
@@ -113,7 +114,7 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
 });
 const readonlyText = computed(() => {
   const v = model.value;
-  if (!v) return "\u2014";
+  if (!v) return null;
   return `${v[0]} ~ ${v[1]}`;
 });
 </script>
@@ -145,9 +146,10 @@ const readonlyText = computed(() => {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="readonlyText ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ readonlyText }}
+      {{ readonlyText || "-" }}
     </div>
     <DateRangePicker
       v-else

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/runtime.vue

@@ -11,14 +11,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedTimeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -28,7 +29,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -92,9 +93,10 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="model ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ model || "\u2014" }}
+      {{ model || "-" }}
     </div>
     <DatePicker
       v-else

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

@@ -11,14 +11,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedTimeRangeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -28,7 +29,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -83,7 +84,7 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
 });
 const readonlyText = computed(() => {
   const v = model.value;
-  if (!v) return "\u2014";
+  if (!v) return null;
   return `${v[0]} ~ ${v[1]}`;
 });
 </script>
@@ -115,9 +116,10 @@ const readonlyText = computed(() => {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="readonlyText ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ readonlyText }}
+      {{ readonlyText || "-" }}
     </div>
     <DateRangePicker
       v-else

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/runtime.vue

@@ -13,14 +13,14 @@ import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValue } from "../../../utils/field-value";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope } from "../../../utils/state";
 defineOptions({ name: "ShwfedNumberFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -33,7 +33,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -42,7 +42,7 @@ function evalBool(expression, label) {
 function evalNumber(expression, label) {
   if (!expression) return void 0;
   try {
-    const result = Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    const result = Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
     return typeof result === "number" && Number.isFinite(result) ? result : void 0;
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
@@ -139,9 +139,10 @@ async function onBlur() {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="draft != null ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ draft ?? "\u2014" }}
+      {{ draft ?? "-" }}
     </div>
     <InputGroup
       v-else

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/runtime.vue

@@ -13,14 +13,15 @@ import { useCommitBus } from "../../../utils/commit-bus";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedNumberRangeFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -36,7 +37,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -45,7 +46,7 @@ function evalBool(expression, label) {
 function evalNumber(expression, label) {
   if (!expression) return void 0;
   try {
-    const result = Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    const result = Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
     return typeof result === "number" && Number.isFinite(result) ? result : void 0;
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
@@ -189,7 +190,7 @@ function handleClear() {
 }
 const readonlyText = computed(() => {
   const v = model.value;
-  if (!v) return "\u2014";
+  if (!v) return null;
   return `${v[0]} ~ ${v[1]}`;
 });
 </script>
@@ -221,9 +222,10 @@ const readonlyText = computed(() => {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="readonlyText ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ readonlyText }}
+      {{ readonlyText || "-" }}
     </div>
     <InputGroup
       v-else

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.switch/runtime.vue

@@ -10,14 +10,15 @@ import { Markdown } from "../../../../ui/markdown";
 import { Switch } from "../../../../ui/switch";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedSwitchFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -33,7 +34,7 @@ const falseText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;

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

@@ -21,7 +21,7 @@ import { Markdown } from "../../../../ui/markdown";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../../../ui/popover";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedComboboxSingleFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
@@ -47,7 +47,8 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -60,7 +61,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -84,7 +85,7 @@ const entries = computed(
   () => (props.config.items ?? []).map((item) => {
     const labelTpl = getLocalizedText(item.label, locale.value) ?? "";
     const tooltipTpl = item.tooltip ? getLocalizedText(item.tooltip, locale.value) : void 0;
-    const ctx = { form: state.value ?? {} };
+    const ctx = { form: formScope.state.value ?? {} };
     return {
       key: item.id,
       value: item.value.value,
@@ -179,9 +180,10 @@ const anyHasTooltip = computed(
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="selectedLabel ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ selectedLabel || "\u2014" }}
+      {{ selectedLabel || "-" }}
     </div>
     <Popover
       v-else

package/dist/runtime/components/form/fields/2026-05-12/com.shwfed.form.field.upload/runtime.vue

@@ -14,7 +14,7 @@ import { Markdown } from "../../../../ui/markdown";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 const ICONS = {
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "vscode-icons:file-type-excel",
   "application/vnd.ms-excel": "vscode-icons:file-type-excel",
@@ -85,7 +85,8 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(
@@ -103,7 +104,7 @@ const templateLabelText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -225,7 +226,7 @@ const templateIcon = computed(() => props.config.templateIcon ?? "fluent:arrow-d
 async function onDownloadTemplate() {
   const template = props.config.template;
   if (!template) return;
-  const ctx = { form: state.value ?? {} };
+  const ctx = { form: formScope.state.value ?? {} };
   const program = Effect.gen(function* () {
     const requestBuilder = yield* $cel(template.request, ctx);
     if (!template.download) {

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

@@ -25,7 +25,7 @@ import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../..
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedComboboxSingleRemoteFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
@@ -51,7 +51,8 @@ const { locale, t } = useI18n({
     }
   }
 });
-const { state, getAt, setAt, setAtSilent } = useFormState();
+const { getAt, setAt, setAtSilent } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -64,7 +65,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -84,7 +85,7 @@ const isReadonly = computed(
 const effectiveReadonly = computed(() => isReadonly.value || props.config.derived?.mode === "formula");
 function valueOf(option) {
   try {
-    return Effect.runSync($cel(props.config.optionValue, { form: state.value ?? {}, option }));
+    return Effect.runSync($cel(props.config.optionValue, { form: formScope.state.value ?? {}, option }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate optionValue for ${props.fieldId}:`, err);
     return void 0;
@@ -93,7 +94,7 @@ function valueOf(option) {
 function labelOf(option) {
   const tpl = getLocalizedText(props.config.optionLabel, locale.value) ?? "";
   if (!tpl) return "";
-  return interpolateMarkdown(tpl, $cel, { form: state.value ?? {}, option });
+  return interpolateMarkdown(tpl, $cel, { form: formScope.state.value ?? {}, option });
 }
 const json = ref(null);
 const isLoading = ref(false);
@@ -101,7 +102,7 @@ const requestSignature = computed(() => {
   const expr = props.config.request;
   if (!expr) return null;
   try {
-    const req = asRequest(Effect.runSync($cel(expr, { form: state.value ?? {} })));
+    const req = asRequest(Effect.runSync($cel(expr, { form: formScope.state.value ?? {} })));
     return Option.isSome(req) ? JSON.stringify(req.value.describe()) : null;
   } catch {
     return null;
@@ -118,7 +119,7 @@ async function fetchOptions() {
   const expr = props.config.request;
   isLoading.value = true;
   const program = Effect.gen(function* () {
-    const body = yield* fetchJsonOption(yield* $cel(expr, { form: state.value ?? {} }));
+    const body = yield* fetchJsonOption(yield* $cel(expr, { form: formScope.state.value ?? {} }));
     return Option.getOrNull(body);
   });
   try {
@@ -133,7 +134,7 @@ async function fetchOptions() {
 const entries = computed(() => {
   let raw;
   try {
-    raw = Effect.runSync($cel(props.config.options, { form: state.value ?? {}, json: json.value }));
+    raw = Effect.runSync($cel(props.config.options, { form: formScope.state.value ?? {}, json: json.value }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate options for ${props.fieldId}:`, err);
     return [];
@@ -238,14 +239,15 @@ function handleClear() {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="selectedLabel ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
       <Markdown
         v-if="selectedLabel"
         :source="selectedLabel"
       />
       <template v-else>
-        —
+        -
       </template>
     </div>
     <Popover

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

@@ -15,7 +15,7 @@ import { Field, FieldLabel, FieldMessages } from "../../../../ui/field";
 import { InputGroupButton } from "../../../../ui/input-group";
 import { Markdown } from "../../../../ui/markdown";
 import { useFieldValidation } from "../../../utils/validation";
-import { SELF_BINDING, useFormState } from "../../../utils/state";
+import { SELF_BINDING, useFormScope, useFormState } from "../../../utils/state";
 import Row from "./row.vue";
 defineOptions({ name: "ShwfedListFieldRuntime" });
 const props = defineProps({
@@ -23,7 +23,8 @@ const props = defineProps({
   config: { type: null, required: true }
 });
 const { locale } = useI18n();
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -38,7 +39,7 @@ const collapsible = computed(() => !!summaryTemplate.value);
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -73,7 +74,7 @@ const rowSummaries = computed(() => {
     (item, i) => interpolate(template, (expression) => {
       try {
         const out = Effect.runSync($cel(expression, {
-          form: state.value ?? {},
+          form: formScope.state.value ?? {},
           item: item ?? {},
           index: i
         }));

package/dist/runtime/components/form/fields/2026-05-17/com.shwfed.form.field.checkbox.group/runtime.vue

@@ -11,7 +11,7 @@ import { Field, FieldLabel, FieldMessages } from "../../../../ui/field";
 import { Markdown } from "../../../../ui/markdown";
 import { useFieldValidation } from "../../../utils/validation";
 import { useFormReadonly } from "../../../utils/readonly";
-import { useFormState } from "../../../utils/state";
+import { useFormScope, useFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedCheckboxGroupFieldRuntime" });
 const props = defineProps({
   fieldId: { type: String, required: true },
@@ -25,7 +25,8 @@ const { locale, t } = useI18n({
     ja: { "checkbox-group-empty": "\u9078\u629E\u80A2\u306A\u3057" }
   }
 });
-const { state, getAt, setAt } = useFormState();
+const { getAt, setAt } = useFormState();
+const formScope = useFormScope();
 const inherited = injectCELContext();
 const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
 const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
@@ -35,7 +36,7 @@ const tooltipText = computed(
 function evalBool(expression, label) {
   if (!expression) return false;
   try {
-    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return Effect.runSync($cel(expression, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
     return false;
@@ -65,7 +66,7 @@ const entries = computed(
   () => (props.config.items ?? []).map((item) => {
     const labelTpl = getLocalizedText(item.label, locale.value) ?? "";
     const tooltipTpl = item.tooltip ? getLocalizedText(item.tooltip, locale.value) : void 0;
-    const ctx = { form: state.value ?? {} };
+    const ctx = { form: formScope.state.value ?? {} };
     return {
       key: item.id,
       value: item.value.value,
@@ -115,7 +116,7 @@ function toggle(entry) {
 }
 const readonlyText = computed(() => {
   const labels = entries.value.filter(isChecked).map((e) => e.label).filter((l) => l.length > 0);
-  return labels.join("\u3001") || "\u2014";
+  return labels.join("\u3001") || null;
 });
 </script>
 
@@ -145,9 +146,10 @@ const readonlyText = computed(() => {
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm text-zinc-700"
+      class="min-h-9 py-1.5 text-sm"
+      :class="readonlyText ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ readonlyText }}
+      {{ readonlyText || "-" }}
     </div>
     <div
       v-else-if="entries.length === 0"