@shwfed/config 2.1.0 → 2.1.1

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

@@ -167,15 +167,16 @@ const gridStyle = computed(() => {
       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(0, 1fr)").join(" ");
+    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}` : "",
-    // A missing `gap` resolves to `DEFAULT_GAP`, not 0 — same fallback the
-    // layout editor shows, so editor and render agree. `gap: 0` stays 0.
-    `gap: calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`,
+    `column-gap: ${colGap}`,
+    `row-gap: ${gap}`,
     l.style ?? ""
   ].filter(Boolean);
   return parts.join("; ");

package/dist/runtime/components/form/unit-config.d.vue.ts

@@ -1,4 +1,6 @@
+import { type CELContext } from '../../utils/cel-context.js';
 import type { FieldValue, FormUnitValue } from './schema.js';
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
 export type UnitExtra = {
     id: string;
     label: string;
@@ -17,6 +19,20 @@ type __VLS_Props = {
      * v-model — hosts read which extra is active via `selection.value`.
      */
     extras?: ReadonlyArray<UnitExtra>;
+    /**
+     * Host-registered CEL variables. Forwarded to the drilled field-list's
+     * "AI 生成字段" button so the model can advertise host variables in
+     * generated expressions. Absent → only `form` / `now` are in scope.
+     */
+    configure?: (env: Environment) => void;
+    /**
+     * Extra CEL variables in scope for the unit's *field* editors — the list
+     * field passes `item` (the current row). Advertised to every drilled field
+     * config's ExpressionEditor via `provideCELContext` below; the host's own
+     * `extras-pane` slot is excluded, since slotted content injects through the
+     * host component, above this provide.
+     */
+    fieldCelScope?: CELContext;
 };
 type __VLS_Slots = {
     /** Pane content for the currently-selected extra. Receives `{ id }`. */

package/dist/runtime/components/form/unit-config.vue

@@ -6,7 +6,8 @@ import { computed, inject, onBeforeUnmount, provide, ref, useTemplateRef, watch
 import { toast } from "vue-sonner";
 import {
   celBindings,
-  injectCELContext
+  injectCELContext,
+  provideCELContext
 } from "../../utils/cel-context";
 import { findFreePlacement, normalizeLayoutSet } from "../../share/layout";
 import { getLocalizedText } from "../../share/locale";
@@ -20,13 +21,16 @@ import { Button } from "../ui/button";
 import { ScrollArea } from "../ui/scroll-area";
 import { Separator } from "../ui/separator";
 import { FIELDS, findField } from "./utils/resolve";
+import ShwfedFormAiFieldsButton from "./ai/fields-button.vue";
 defineOptions({ name: "ShwfedFormUnitConfig" });
 const unit = defineModel({ type: Object, ...{ required: true } });
 const selection = defineModel("selection", { type: Object, ...{
   default: () => ({ kind: "layout" })
 } });
-defineProps({
-  extras: { type: Array, required: false }
+const props = defineProps({
+  extras: { type: Array, required: false },
+  configure: { type: Function, required: false },
+  fieldCelScope: { type: Object, required: false }
 });
 defineSlots();
 const activeLayoutIndex = ref(0);
@@ -40,6 +44,7 @@ function popOne() {
 const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
 const fullPane = ref(false);
 provide(FORM_FIELD_LAYOUT_KEY, { fullPane });
+provideCELContext(props.fieldCelScope ?? {});
 const takeover = inject(SIDEBAR_TAKEOVER_KEY, null);
 const takeoverTarget = computed(() => takeover?.target.value ?? null);
 const activeFieldId = computed(() => {
@@ -171,6 +176,16 @@ function removeFields(ids) {
     stack.value = stack.value.slice(0, -1);
   }
 }
+function applyAiFields(generated) {
+  const valid = generated.filter(
+    (f) => !!findField(f.type, f.compatibilityDate)
+  );
+  if (valid.length === 0) return;
+  unit.value = {
+    ...unit.value,
+    fields: [...unit.value.fields, ...valid]
+  };
+}
 function updateActiveField(next) {
   const id = activeFieldId.value;
   if (!id) return;
@@ -311,6 +326,12 @@ function isExtraActive(id) {
           </button>
         </div>
       </ScrollArea>
+
+      <ShwfedFormAiFieldsButton
+        :configure="configure"
+        :fields="unit.fields"
+        @apply="applyAiFields"
+      />
     </template>
   </Teleport>
 
@@ -388,6 +409,12 @@ function isExtraActive(id) {
             </button>
           </div>
         </ScrollArea>
+
+        <ShwfedFormAiFieldsButton
+          :configure="configure"
+          :fields="unit.fields"
+          @apply="applyAiFields"
+        />
       </template>
     </div>
 

package/dist/runtime/components/form/unit-config.vue.d.ts

@@ -1,4 +1,6 @@
+import { type CELContext } from '../../utils/cel-context.js';
 import type { FieldValue, FormUnitValue } from './schema.js';
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
 export type UnitExtra = {
     id: string;
     label: string;
@@ -17,6 +19,20 @@ type __VLS_Props = {
      * v-model — hosts read which extra is active via `selection.value`.
      */
     extras?: ReadonlyArray<UnitExtra>;
+    /**
+     * Host-registered CEL variables. Forwarded to the drilled field-list's
+     * "AI 生成字段" button so the model can advertise host variables in
+     * generated expressions. Absent → only `form` / `now` are in scope.
+     */
+    configure?: (env: Environment) => void;
+    /**
+     * Extra CEL variables in scope for the unit's *field* editors — the list
+     * field passes `item` (the current row). Advertised to every drilled field
+     * config's ExpressionEditor via `provideCELContext` below; the host's own
+     * `extras-pane` slot is excluded, since slotted content injects through the
+     * host component, above this provide.
+     */
+    fieldCelScope?: CELContext;
 };
 type __VLS_Slots = {
     /** Pane content for the currently-selected extra. Receives `{ id }`. */

package/dist/runtime/components/form/utils/cel-scope.d.ts

@@ -0,0 +1,13 @@
+import { Environment } from '../../../vendor/cel-js/lib/index.js';
+import type { CELContext } from '../../../utils/cel-context.js';
+/**
+ * Builds the CEL variable scope advertised to a form's expression editors and
+ * AI assists. Seeds the form-wide `form` / `now` live variables, then probes a
+ * throwaway `Environment` with the host's `configure` to surface any
+ * host-registered variables (their type / label / description).
+ *
+ * Values are left `undefined` — this scope is for designer-time advertising
+ * and prompt rendering, never evaluation. Extracted from `form/config.vue` so
+ * the field-list AI button can reuse the exact same scope.
+ */
+export declare function buildFormCelScope(configure: (env: Environment) => void): CELContext;

package/dist/runtime/components/form/utils/cel-scope.js

@@ -0,0 +1,32 @@
+import { Environment } from "../../../vendor/cel-js/lib/index.js";
+export function buildFormCelScope(configure) {
+  const probe = new Environment({ unlistedVariablesAreDyn: false });
+  const baseline = new Set(probe.getDefinitions().variables.map((v) => v.name));
+  configure(probe);
+  const out = {
+    form: {
+      type: "dyn",
+      label: "\u8868\u5355\u503C",
+      description: "\u5F53\u524D\u8868\u5355\u72B6\u6001",
+      value: void 0
+    },
+    // Mirrors the runtime `now` binding in `form/index.vue`. Editors and
+    // prompts never evaluate, so we leave `value` undefined.
+    now: {
+      type: "Date",
+      label: "now",
+      description: "\u5F53\u524D\u65E5\u671F/\u65F6\u95F4",
+      value: void 0
+    }
+  };
+  for (const v of probe.getDefinitions().variables) {
+    if (baseline.has(v.name)) continue;
+    out[v.name] = {
+      type: v.type,
+      label: v.label ?? v.name,
+      description: v.description ?? void 0,
+      value: void 0
+    };
+  }
+  return out;
+}

package/dist/runtime/components/form/utils/schema-meta.d.ts

@@ -2,4 +2,17 @@ import { type Schema } from 'effect';
 type AnySchema = Schema.Schema<any, any, any>;
 export declare function getStructFieldTitle(schema: AnySchema, fieldName: string): string | undefined;
 export declare function getStructFieldDescription(schema: AnySchema, fieldName: string): string | undefined;
+export type StructFieldInfo = {
+    name: string;
+    title?: string;
+    description?: string;
+    optional: boolean;
+};
+/**
+ * Lists a struct schema's property signatures, pairing each with its `@title` /
+ * `@description` annotation and optionality. Used to auto-derive the per-field
+ * documentation surfaced to the AI field generator — a new field folder becomes
+ * discoverable with zero edits there. Returns `[]` for non-struct schemas.
+ */
+export declare function listStructFields(schema: AnySchema): StructFieldInfo[];
 export {};

package/dist/runtime/components/form/utils/schema-meta.js

@@ -46,3 +46,18 @@ export function getStructFieldTitle(schema, fieldName) {
 export function getStructFieldDescription(schema, fieldName) {
   return getFieldAnnotation(schema, fieldName, SchemaAST.getDescriptionAnnotation);
 }
+export function listStructFields(schema) {
+  const tl = getTypeLiteral(schema.ast);
+  if (!tl) return [];
+  return tl.propertySignatures.map((ps) => {
+    const name = String(ps.name);
+    const title = getStructFieldTitle(schema, name);
+    const description = getStructFieldDescription(schema, name);
+    return {
+      name,
+      ...title !== void 0 ? { title } : {},
+      ...description !== void 0 ? { description } : {},
+      optional: ps.isOptional
+    };
+  });
+}

package/dist/runtime/components/table/ai/columns-task.md

@@ -4,7 +4,7 @@ The `columns` array is a **full replacement**: whatever you emit becomes the ent
 
 # Hard rules
 
-1. **NEVER** emit a column with `type === "com.shwfed.table.column.actions"`. Action columns are wired by a separate registry; emitting one will be rejected and you will be retried.
+1. **NEVER add** a new column with `type === "com.shwfed.table.column.actions"`. Action columns are wired by a separate registry — you cannot synthesize one, and a fabricated actions column will be rejected and you will be retried. The **one exception**: if the current configuration already contains an actions column, echo it back verbatim (same `id`, `type`, `compatibilityDate`, and all fields) in its render position. Never invent an actions column the user merely describes when none already exists.
 2. **ONLY** emit a column with `type === "com.shwfed.table.column.markdown"` when the user **explicitly** asks for markdown / rich content / formatted body / 富文本 / Markdown. Otherwise prefer `com.shwfed.table.column.text`.
 3. **NEVER** set `enableSorting: true`. Client-side sorting is rarely the right call in practice (paginated/server-driven data, mixed types, etc.) and the user should opt in manually. Omit the field or set it to `false`.
 4. **NEVER** wrap the `accessor` in type coercions (`string(...)`, `int(...)`, `double(...)`) and **NEVER** supply a default via `.orValue(...)`. Emit the bare optional access — e.g. `row.?name`, `row.?age`. Coercion and defaults make it impossible for the user to distinguish real data from filler, which is actively harmful.
@@ -41,4 +41,13 @@ Always use optional access (`row.?field`) rather than `row.field` to avoid runti
 
 If the user gives a sample response, derive accessors directly from its shape. Otherwise, infer field names from the user's prose (e.g. "show name and email" → `row.?name`, `row.?email`).
 
+# Rendering recipes
+
+**Boolean / `0`-`1` values.** When a field is a boolean or a `0`/`1` flag (e.g. `enabled`, `isActive`, a `0/1` status), render it with `com.shwfed.table.column.icon` rather than `text` — a green check / red cross reads far faster than the literal `true` or `1`. Build both the `accessor` and the `color` as CEL ternaries on the condition:
+
+- `accessor`: `<condition> ? 'fluent:checkmark-20-filled' : 'fluent:dismiss-20-filled'`
+- `color`: `<condition> ? '#00c950' : '#fb2c36'`
+
+where `<condition>` is a bare optional-access test — `row.?enabled == true` for a boolean field, `row.?status == 1` for a `0/1` field. This is a comparison, not a coercion, so hard rule 4 still holds: do not wrap in `string(...)`/`int(...)` or add `.orValue(...)`.
+
 The current configuration (existing data source + columns) is appended to the user prompt under `Current configuration`. Use it only to (a) reuse existing column `id`s where the user's described column clearly corresponds to an existing one, and (b) inform field shapes (e.g. response keys). Do **not** copy columns forward that the user did not describe — the user's prompt is the source of truth for which columns should exist.

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

@@ -154,8 +154,8 @@ const copyExpressionModel = computed({
         </FieldLabel>
         <ExpressionEditor
           v-model="copyExpressionModel"
-          placeholder="如 row.name"
-          result-type="string"
+          placeholder="如 row.name 或 row.?name"
+          :result-type="['string', 'optional']"
           class="min-h-10"
         />
       </Field>

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

@@ -24,12 +24,22 @@ const rendered = computed(() => {
 const isEmpty = computed(() => rendered.value.trim().length === 0);
 const align = computed(() => isEmpty.value ? "center" : props.column.align ?? "left");
 const justifyClass = computed(() => JUSTIFY_CLASS[align.value] ?? JUSTIFY_CLASS.left);
-const showCopy = computed(() => !!props.column.copyExpression && !isEmpty.value);
+const copyText = computed(() => {
+  const { copyExpression } = props.column;
+  if (!copyExpression) return void 0;
+  try {
+    const value = Effect.runSync($cel(copyExpression, celBindings(celContext)));
+    return value === void 0 || value === null ? void 0 : String(value);
+  } catch (e) {
+    console.error("[shwfed-table] markdown copy expression failed", e);
+    return void 0;
+  }
+});
+const showCopy = computed(() => copyText.value !== void 0 && !isEmpty.value);
 const onCopy = async () => {
-  const { column } = props;
-  if (!column.copyExpression) return;
+  const text = copyText.value;
+  if (text === void 0) return;
   try {
-    const text = String(Effect.runSync($cel(column.copyExpression, celBindings(celContext))));
     await navigator.clipboard.writeText(text);
   } catch (e) {
     console.error("[shwfed-table] markdown copy failed", e);

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.markdown/schema.js

@@ -7,8 +7,9 @@ export const metadata = {
   name: "MD",
   icon: "fluent:markdown-20-regular"
 };
+const isCopyExpressionType = (t) => t === "string" || t === "dyn" || t.startsWith("optional");
 export function schema(configure) {
-  const cel = CelRowAccess(configure, { resultType: "string" });
+  const cel = CelRowAccess(configure, { resultType: isCopyExpressionType });
   const localeMarkdown = LocaleMarkdownWithRow(configure);
   return Schema.Struct({
     type: Schema.Literal(type),
@@ -34,7 +35,7 @@ export function schema(configure) {
     }),
     copyExpression: Schema.optional(cel.annotations({
       title: "\u590D\u5236\u8868\u8FBE\u5F0F",
-      description: "\u590D\u5236\u503C\u7684 CEL \u8868\u8FBE\u5F0F"
+      description: "\u590D\u5236\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF1B\u53EF\u8FD4\u56DE optional\uFF08\u5982 `row.?field`\uFF09\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u663E\u793A\u590D\u5236\u6309\u94AE"
     }))
   }).annotations({ title: "MarkdownRenderer", description: "MD" });
 }

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

@@ -188,8 +188,8 @@ const copyExpressionModel = computed({
         </FieldLabel>
         <ExpressionEditor
           v-model="copyExpressionModel"
-          placeholder="如 row.name"
-          result-type="string"
+          placeholder="如 row.name 或 row.?name"
+          :result-type="['string', 'optional']"
           class="min-h-10"
         />
       </Field>

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

@@ -16,12 +16,22 @@ const rawValue = computed(() => props.ctx.cell.getValue());
 const isMissing = computed(() => rawValue.value === void 0 || rawValue.value === null);
 const align = computed(() => isMissing.value ? "center" : props.column.align ?? "left");
 const justifyClass = computed(() => JUSTIFY_CLASS[align.value] ?? JUSTIFY_CLASS.left);
-const showCopy = computed(() => !!props.column.copyExpression && !isMissing.value && rawValue.value !== "");
+const copyText = computed(() => {
+  const { copyExpression } = props.column;
+  if (!copyExpression) return void 0;
+  try {
+    const value = Effect.runSync($cel(copyExpression, celBindings(celContext)));
+    return value === void 0 || value === null ? void 0 : String(value);
+  } catch (e) {
+    console.error("[shwfed-table] text copy expression failed", e);
+    return void 0;
+  }
+});
+const showCopy = computed(() => copyText.value !== void 0 && !isMissing.value && rawValue.value !== "");
 const onCopy = async () => {
-  const { column } = props;
-  if (!column.copyExpression) return;
+  const text = copyText.value;
+  if (text === void 0) return;
   try {
-    const text = String(Effect.runSync($cel(column.copyExpression, celBindings(celContext))));
     await navigator.clipboard.writeText(text);
   } catch (e) {
     console.error("[shwfed-table] text copy failed", e);

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.text/schema.js

@@ -6,8 +6,9 @@ export const metadata = {
   name: "\u6587\u672C",
   icon: "fluent:text-field-20-regular"
 };
+const isCopyExpressionType = (t) => t === "string" || t === "dyn" || t.startsWith("optional");
 export function schema(configure) {
-  const cel = CelRowAccess(configure, { resultType: "string" });
+  const cel = CelRowAccess(configure, { resultType: isCopyExpressionType });
   return Schema.Struct({
     type: Schema.Literal(type),
     compatibilityDate: Schema.Literal(compatibilityDate),
@@ -22,7 +23,7 @@ export function schema(configure) {
     ),
     copyExpression: Schema.optional(cel.annotations({
       title: "\u590D\u5236\u8868\u8FBE\u5F0F",
-      description: "\u590D\u5236\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u5B58\u5728\u65F6\u542F\u7528\u590D\u5236\u529F\u80FD"
+      description: "\u590D\u5236\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u5B58\u5728\u65F6\u542F\u7528\u590D\u5236\u529F\u80FD\uFF1B\u53EF\u8FD4\u56DE optional\uFF08\u5982 `row.?field`\uFF09\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u663E\u793A\u590D\u5236\u6309\u94AE"
     }))
   }).annotations({ title: "TextRenderer", description: "\u6587\u672C\u6E32\u67D3\u5668" });
 }

package/dist/runtime/components/table/utils/shared.d.ts

@@ -1,5 +1,6 @@
 import { Schema } from 'effect';
 import type { Environment } from '../../../vendor/cel-js/lib/index.js';
+import { type ResultType } from '../../../share/expression.js';
 export declare const Align: Schema.Literal<["left", "center", "right"]>;
 export declare function columnIdentityFields(): {
     id: Schema.refine<string, typeof Schema.String>;
@@ -29,7 +30,7 @@ export declare function columnFields(configure: (env: Environment) => void): {
 };
 export declare function registerRowVariablesIfAbsent(env: Environment): void;
 export declare function CelRowAccess(configure: (env: Environment) => void, options?: {
-    resultType?: string | string[];
+    resultType?: ResultType;
 }): Schema.Schema<string, string, never>;
 export declare function LocaleMarkdownWithRow(configure: (env: Environment) => void): Schema.filter<Schema.TupleType<readonly [Schema.Struct<{
     locale: Schema.Literal<["zh"]>;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerDateTimePanel.d.vue.ts

@@ -14,10 +14,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: DateRange | undefined) => any) | undefined;
 }>, {
+    rangeSeparatorIcon: string;
     numberOfMonths: number;
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
-    rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerDateTimePanel.vue.d.ts

@@ -14,10 +14,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: DateRange | undefined) => any) | undefined;
 }>, {
+    rangeSeparatorIcon: string;
     numberOfMonths: number;
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
-    rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.d.vue.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:endValue"?: ((args_0: Time | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
+    rangeSeparatorIcon: string;
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
     clearable: boolean;
     clearIcon: string;
-    rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:endValue"?: ((args_0: Time | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
+    rangeSeparatorIcon: string;
     granularity: "hour" | "minute" | "second";
     hourCycle: 12 | 24;
     clearable: boolean;
     clearIcon: string;
-    rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/share/expression.d.ts

@@ -1,7 +1,7 @@
 import { Schema } from 'effect';
 import { Environment } from '../vendor/cel-js/lib/index.js';
 import { Locale } from './locale.js';
-type ResultType = string | string[] | ((type: string) => boolean);
+export type ResultType = string | string[] | ((type: string) => boolean);
 export declare function Expression(options: {
     configure: (env: Environment) => void;
     resultType?: ResultType;
@@ -19,4 +19,3 @@ export declare function Markdown(options: {
 export declare function LocaleMarkdown(options: {
     configure: (env: Environment) => void;
 }): Schema.filter<typeof Locale>;
-export {};

package/dist/runtime/share/slot-renderer.vue

@@ -35,14 +35,15 @@ watch(() => props.slotValue.layouts, (sets) => {
 const gridStyle = computed(() => {
   const l = activeLayout.value?.layout;
   if (!l) return "";
-  const tracks = (n) => `repeat(${n}, minmax(0, 1fr))`;
+  const tracks = (n, min) => `repeat(${n}, minmax(${min}, 1fr))`;
+  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: ${tracks(l.columns)}`,
-    l.rows ? `grid-template-rows: ${tracks(l.rows)}` : "",
-    // Missing `gap` resolves to `DEFAULT_GAP` — the layout editor's fallback —
-    // so the editor and the rendered slot agree. `gap: 0` stays 0.
-    `gap: calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`,
+    `grid-template-columns: ${tracks(l.columns, "0")}`,
+    l.rows ? `grid-template-rows: ${tracks(l.rows, "auto")}` : "",
+    `column-gap: ${colGap}`,
+    `row-gap: ${gap}`,
     l.style ?? ""
   ].filter(Boolean);
   return parts.join("; ");

package/dist/runtime/vendor/cel-js/CLAUDE.md

@@ -20,7 +20,7 @@ The `homogeneousAggregateLiterals` and `enableOptionalTypes` environment options
 
 The custom `Optional` class has been replaced with Effect's `Option` type (`import { Option } from 'effect'`). Internal helpers `optionalOf(value)` and `optionalValue(opt)` in `optional.js` handle the CEL-specific semantics (treating `undefined` as `None`, throwing `EvaluationError` on missing value access).
 
-An `http` built-in has been added (`http-builtins.ts`, `http-builder.ts`) — not from upstream. It registers the `http` constant and the `http` / `HttpRequest` types on `globalRegistry`, so `http.get(url).header(...).body(...)` expressions type-check and evaluate in every `Environment`. A CEL expression only *describes* a request; it evaluates to an `HttpRequestBuilder`, and the host dispatches it via `.json()` / `.file()`. Endpoints must be absolute URLs — there is no base-URL resolution. Depends on `fx-fetch`.
+An `http` built-in has been added (`http-builtins.ts`, `http-builder.ts`) — not from upstream. It registers the `http` constant and the `http` / `HttpRequest` types on `globalRegistry`, so `http.get(url).header(...).body(...)` expressions type-check and evaluate in every `Environment`. A CEL expression builds an `HttpRequestBuilder`; the terminal `HttpRequest.file(): File` method issues the request and evaluates to the downloaded `File`, while `.json()` is dispatched by the host on the builder value (it is not a CEL method). Endpoints must be absolute URLs — there is no base-URL resolution. Depends on `fx-fetch`.
 
 ## Architecture
 

package/dist/runtime/vendor/cel-js/PROMPT.md

@@ -197,7 +197,7 @@ location.param("id")                 // first value when a param repeats
 
 ## HTTP
 
-Build HTTP requests using the `http` builder. CEL expressions only *describe* a request — the host dispatches it. There is no way to send a request or read a response from CEL.
+Build HTTP requests using the `http` builder. A CEL expression *describes* a request; calling `.file()` on it issues the request and evaluates to the downloaded `File`. Any other request is handed to the host to dispatch — there is no way to read a JSON or text response from CEL.
 
 **URLs must be absolute** — pass a full `https://…` URL. There is no base URL, so relative paths like `/api/users` will not resolve.
 
@@ -236,6 +236,11 @@ http.post("https://api.example.com/users")
   .header("Content-Type", "application/json")
   .body({"name": "Alice", "channel": query.?channel})
 
+// Download the response as a File. Unlike the chainable methods above,
+// .file() is terminal — it issues the request and the expression evaluates
+// to a File (filename from the Content-Disposition header, else the URL path):
+http.get("https://api.example.com/files/report.pdf").file()
+
 // Full example — the expression returns an HttpRequest; the host sends it:
 http.post("https://api.example.com/users")
   .header("Content-Type", "application/json")

package/dist/runtime/vendor/cel-js/lib/http-builder.d.ts

@@ -1,8 +1,9 @@
 /**
  * `HttpRequestBuilder` — the value an `http.*` CEL expression evaluates to.
  *
- * A local (non-upstream) extension. CEL only *describes* a request; the host
- * dispatches it by calling `.json()` / `.file()` on the returned builder.
+ * A local (non-upstream) extension. A CEL expression builds and *describes* a
+ * request; `.file()` is exposed as a CEL method and evaluates to the downloaded
+ * `File`, while `.json()` is dispatched by the host on the returned builder.
  *
  * Endpoints are used verbatim — there is no base-URL resolution, so callers
  * must pass absolute URLs.

package/dist/runtime/vendor/cel-js/lib/http-builtins.d.ts

@@ -2,9 +2,10 @@
  * HTTP built-ins for CEL — a local (non-upstream) extension.
  *
  * Registers the `http` / `HttpRequest` types, the `http` constant, and the
- * request-builder functions on the registry. A CEL expression only *describes*
- * a request — `http.get(url).header(...).body(...)` evaluates to an
- * `HttpRequestBuilder`; the host dispatches it via `.json()` / `.file()`.
+ * request-builder functions on the registry. `http.get(url).header(...).body(...)`
+ * builds an `HttpRequestBuilder`; the terminal `.file()` method issues the
+ * request and evaluates to the downloaded `File`. `.json()` is *not* a CEL
+ * method — the host dispatches that on the returned builder value.
  *
  * Wired into `globalRegistry` at module load (see `evaluator.ts`), so every
  * `Environment` gets HTTP for free — both type-checking and evaluation.

package/dist/runtime/vendor/cel-js/lib/http-builtins.js

@@ -52,4 +52,8 @@ export function registerHttpBuiltins(registry) {
     "HttpRequest.body(dyn): HttpRequest",
     (b, data) => b.body(data)
   );
+  registry.registerFunctionOverload(
+    "HttpRequest.file(): File",
+    (b) => b.file()
+  );
 }

package/package.json

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