@shwfed/config 2.9.12 → 2.10.0

package/dist/runtime/components/config/utils/validation-error.js

@@ -3,9 +3,43 @@ function isDiscriminatorMiss(issue) {
   const last = issue.path[issue.path.length - 1];
   return (last === "type" || last === "compatibilityDate") && issue.message.startsWith('Expected "');
 }
-function blockIndexOf(path) {
-  if (path[0] === "slot" && path[1] === "blocks" && typeof path[2] === "number") return path[2];
-  return null;
+function isObject(v) {
+  return typeof v === "object" && v !== null;
+}
+function localeText(v) {
+  if (!Array.isArray(v)) return void 0;
+  for (const item of v) {
+    if (isObject(item) && typeof item.message === "string" && item.message.trim()) {
+      return item.message.trim();
+    }
+  }
+  return void 0;
+}
+function nodeLabel(node) {
+  if (!isObject(node)) return void 0;
+  return localeText(node.label) ?? localeText(node.title) ?? (typeof node.displayName === "string" && node.displayName.trim() ? node.displayName.trim() : void 0) ?? (typeof node.type === "string" ? node.type : void 0);
+}
+function describePath(path, rootData, blockLabelAt) {
+  const segs = [];
+  let node = rootData;
+  let labeledTopBlock = false;
+  for (let i = 0; i < path.length; i++) {
+    const seg = path[i];
+    node = isObject(node) ? node[seg] : void 0;
+    const isLeaf = i === path.length - 1;
+    if (typeof seg === "number") {
+      const isTopBlock = !labeledTopBlock && path[i - 1] === "blocks" && path[i - 2] === "slot";
+      if (isTopBlock) {
+        labeledTopBlock = true;
+        segs.push(blockLabelAt(seg) ?? nodeLabel(node) ?? `#${seg}`);
+      } else {
+        segs.push(nodeLabel(node) ?? `#${seg}`);
+      }
+    } else if (isLeaf) {
+      segs.push(String(seg));
+    }
+  }
+  return segs;
 }
 function fallback(err) {
   if (err instanceof Error) return err.message;
@@ -15,7 +49,7 @@ function fallback(err) {
     return String(err);
   }
 }
-export function formatValidationError(err, blockLabelAt) {
+export function formatValidationError(err, blockLabelAt, rootData) {
   if (!ParseResult.isParseError(err)) return fallback(err);
   try {
     const issues = ParseResult.ArrayFormatter.formatErrorSync(err);
@@ -23,9 +57,8 @@ export function formatValidationError(err, blockLabelAt) {
     const picked = real.length > 0 ? real : issues;
     const first = picked[0];
     if (!first) return fallback(err);
-    const index = blockIndexOf(first.path);
-    const label = index === null ? void 0 : blockLabelAt(index);
-    const prefix = label ? `\u300C${label}\u300D\uFF1A` : "";
+    const segs = describePath(first.path, rootData, blockLabelAt);
+    const prefix = segs.length > 0 ? `\u300C${segs.join(" \u203A ")}\u300D\uFF1A` : "";
     const suffix = picked.length > 1 ? `\uFF08\u8FD8\u6709 ${picked.length - 1} \u4E2A\u95EE\u9898\uFF09` : "";
     return `${prefix}${first.message}${suffix}`;
   } catch {

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.markdown/runtime.vue

@@ -6,20 +6,20 @@ import { celBindings, injectCELContext } from "../../../../../utils/cel-context"
 import { getLocalizedText } from "../../../../../share/locale";
 import { Markdown } from "../../../../ui/markdown";
 import { interpolateMarkdown } from "../../../../table/utils/runtime";
-import { useFormState } from "../../../utils/state";
+import { useFormScope } from "../../../utils/state";
 defineOptions({ name: "ShwfedMarkdownFieldRuntime" });
 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 source = computed(() => {
   const template = getLocalizedText(props.config.content, locale.value) ?? "";
   if (!template) return "";
-  return interpolateMarkdown(template, $cel, { form: state.value ?? {} });
+  return interpolateMarkdown(template, $cel, { form: formScope.state.value ?? {} });
 });
 </script>
 

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.text/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: "ShwfedTextFieldRuntime" });
 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;
@@ -90,9 +90,10 @@ 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="draft ? '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-22/com.shwfed.form.field.textarea/runtime.vue

@@ -12,14 +12,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: "ShwfedTextareaFieldRuntime" });
 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 maxLength = computed(() => props.config.maxLength);
 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;
@@ -85,9 +85,10 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
     </FieldLabel>
     <div
       v-if="effectiveReadonly"
-      class="min-h-9 py-1.5 text-sm whitespace-pre-wrap text-zinc-700"
+      class="min-h-9 py-1.5 text-sm whitespace-pre-wrap"
+      :class="draft ? 'text-zinc-700' : 'font-mono text-zinc-300 select-none'"
     >
-      {{ draft || "\u2014" }}
+      {{ draft || "-" }}
     </div>
     <InputGroup v-else>
       <InputGroupTextarea

package/dist/runtime/components/form/fields/2026-04-24/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;
@@ -74,7 +75,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;
@@ -83,12 +84,12 @@ 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 entries = computed(() => {
   let raw;
   try {
-    raw = Effect.runSync($cel(props.config.options, { form: state.value ?? {} }));
+    raw = Effect.runSync($cel(props.config.options, { form: formScope.state.value ?? {} }));
   } catch (err) {
     console.error(`[shwfed-form] failed to evaluate options for ${props.fieldId}:`, err);
     return [];
@@ -175,9 +176,10 @@ 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'"
     >
-      {{ selectedLabel || "\u2014" }}
+      {{ selectedLabel || "-" }}
     </div>
     <Popover
       v-else

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/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: "ShwfedDateFieldRuntime" });
 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.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