@shwfed/config 1.0.0

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

@@ -0,0 +1,218 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { celBindings, injectCELContext } from "../../../../../plugins/cel/context";
+import { getLocalizedText } from "../../../../../share/locale";
+import {
+  useTreeDnd
+} from "../../../../../composables/useTreeDnd";
+import { Button } from "../../../../ui/button";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { InputGroupButton } from "../../../../ui/input-group";
+import { useFormState } from "../../../utils/state";
+import Row from "./row.vue";
+defineOptions({ name: "ShwfedListFieldRuntime" });
+const props = defineProps({
+  fieldId: { type: String, required: true },
+  config: { type: null, required: true }
+});
+const { locale } = useI18n();
+const { state, getAt, setAt } = useFormState();
+const { $cel: _rawCel } = useNuxtApp();
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
+const tooltipText = computed(
+  () => props.config.tooltip ? getLocalizedText(props.config.tooltip, locale.value) : void 0
+);
+const addLabelText = computed(
+  () => getLocalizedText(props.config.addLabel, locale.value) || "\u65B0\u589E"
+);
+function evalBool(expression, label) {
+  if (!expression) return false;
+  try {
+    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+  } catch (err) {
+    console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
+    return false;
+  }
+}
+const isDisabled = computed(() => evalBool(props.config.disabled, "disabled"));
+const reorderable = computed(() => props.config.reorderable ?? true);
+const localItems = ref([]);
+const items = computed(() => {
+  const path = props.config.binding;
+  if (path == null) return localItems.value;
+  const raw = getAt(path);
+  if (!Array.isArray(raw)) return [];
+  return raw;
+});
+function writeItems(next) {
+  const path = props.config.binding;
+  if (path == null) {
+    localItems.value = next;
+    return;
+  }
+  setAt(path, next);
+}
+function makeId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+const rowKeys = ref([]);
+watch(
+  () => items.value.length,
+  (len) => {
+    if (len === rowKeys.value.length) return;
+    rowKeys.value = Array.from({ length: len }, () => makeId());
+  },
+  { immediate: true }
+);
+const atMax = computed(
+  () => props.config.max != null && items.value.length >= props.config.max
+);
+const atMin = computed(
+  () => (props.config.min ?? 0) > 0 && items.value.length <= (props.config.min ?? 0)
+);
+const canAdd = computed(() => !isDisabled.value && !atMax.value);
+const canRemove = computed(() => !isDisabled.value && !atMin.value);
+const canReorder = computed(() => !isDisabled.value && reorderable.value);
+function append() {
+  if (!canAdd.value) return;
+  writeItems([...items.value, {}]);
+  rowKeys.value = [...rowKeys.value, makeId()];
+}
+function removeAt(i) {
+  if (!canRemove.value) return;
+  if (i < 0 || i >= items.value.length) return;
+  writeItems(items.value.filter((_, j) => j !== i));
+  rowKeys.value = rowKeys.value.filter((_, j) => j !== i);
+}
+function moveRow(from, to) {
+  if (!canReorder.value) return;
+  if (from === to) return;
+  if (from < 0 || to < 0 || from >= items.value.length || to >= items.value.length) return;
+  const next = [...items.value];
+  const [item] = next.splice(from, 1);
+  if (!item) return;
+  next.splice(to, 0, item);
+  writeItems(next);
+  const keys = [...rowKeys.value];
+  const [key] = keys.splice(from, 1);
+  if (!key) return;
+  keys.splice(to, 0, key);
+  rowKeys.value = keys;
+}
+function updateRow(i, next) {
+  if (i < 0 || i >= items.value.length) return;
+  const arr = [...items.value];
+  arr[i] = next;
+  writeItems(arr);
+}
+const ROW_KIND = "shwfed-list-row";
+const rowId = (i) => rowKeys.value[i] ?? `idx-${i}`;
+function onRowDrop(e) {
+  if (!canReorder.value) return;
+  if (e.source.kind !== ROW_KIND || e.target.kind !== ROW_KIND) return;
+  const from = rowKeys.value.findIndex((k) => k === e.source.id);
+  const to = rowKeys.value.findIndex((k) => k === e.target.id);
+  if (from < 0 || to < 0) return;
+  if (e.instruction === "reorder-above") moveRow(from, from < to ? to - 1 : to);
+  else if (e.instruction === "reorder-below") moveRow(from, from <= to ? to : to + 1);
+}
+const dnd = useTreeDnd({ onRowDrop });
+const pickDragHandle = (el) => el.querySelector(".drag-handle");
+function rowConfig(i) {
+  return {
+    kind: ROW_KIND,
+    canDrop: (src) => src.kind === ROW_KIND,
+    blockInstructions: (src) => {
+      const block = ["make-child", "reparent"];
+      if (src.id === rowId(i)) block.push("reorder-above", "reorder-below");
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+</script>
+
+<template>
+  <Field
+    orientation="vertical"
+    :data-disabled="isDisabled || void 0"
+  >
+    <FieldLabel
+      v-if="labelText"
+      :for="fieldId"
+      class="text-xs text-zinc-500"
+    >
+      <template
+        v-if="tooltipText"
+        #tooltip
+      >
+        {{ tooltipText }}
+      </template>
+      {{ labelText }}
+    </FieldLabel>
+
+    <div class="flex flex-col gap-3">
+      <div
+        v-for="(item, i) in items"
+        :key="rowKeys[i]"
+        :ref="dnd.rowRef(rowId(i), rowConfig(i))"
+        class="relative flex items-center gap-2 rounded border border-zinc-200 bg-zinc-50/40 p-3"
+        data-slot="list-row"
+        :data-instruction="dnd.instructionFor(rowId(i)) ?? void 0"
+      >
+        <Icon
+          v-if="reorderable"
+          icon="fluent:re-order-dots-vertical-20-regular"
+          class="drag-handle size-4 shrink-0 text-zinc-400"
+          :class="canReorder ? 'cursor-grab' : 'cursor-not-allowed opacity-50'"
+          data-slot="list-row-drag-handle"
+        />
+
+        <div class="min-w-0 flex-1">
+          <Row
+            :model-value="item"
+            :unit="config.unit"
+            @update:model-value="(next) => updateRow(i, next)"
+          />
+        </div>
+
+        <InputGroupButton
+          variant="destructive"
+          size="icon-xs"
+          class="shrink-0"
+          :disabled="!canRemove"
+          data-slot="list-row-remove"
+          aria-label="删除"
+          @click="removeAt(i)"
+        >
+          <Icon icon="fluent:delete-20-regular" />
+        </InputGroupButton>
+      </div>
+
+      <Button
+        type="button"
+        :disabled="!canAdd"
+        data-slot="list-add"
+        class="w-full justify-center"
+        @click="append"
+      >
+        <Icon icon="fluent:add-20-regular" />
+        <span>{{ addLabelText }}</span>
+      </Button>
+    </div>
+  </Field>
+</template>
+
+<style scoped>
+[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:0;pointer-events:none;position:absolute;right:0;z-index:1}[data-instruction=reorder-above]:before{top:-7px}[data-instruction=reorder-below]:after{bottom:-7px}
+</style>

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/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-13/com.shwfed.form.field.list/schema.d.ts

@@ -0,0 +1,111 @@
+import { Schema } from 'effect';
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+export declare const type: "com.shwfed.form.field.list";
+export declare const compatibilityDate: "2026-05-13";
+export declare const metadata: {
+    readonly name: "列表";
+    readonly icon: "fluent:list-20-regular";
+    readonly w: {
+        readonly initial: 12;
+        readonly min: 4;
+        readonly max: number;
+    };
+    readonly h: {
+        readonly initial: 6;
+        readonly min: 4;
+        readonly max: number;
+        readonly grow: true;
+    };
+};
+export declare function schema(configure: (env: Environment) => void): Schema.refine<{
+    readonly label?: readonly [{
+        readonly locale: "zh";
+        readonly message: string;
+    }, ...{
+        readonly locale: "en" | "ja" | "ko";
+        readonly message: string;
+    }[]] | undefined;
+    readonly disabled?: string | undefined;
+    readonly type: "com.shwfed.form.field.list";
+    readonly id: string;
+    readonly hidden?: string | undefined;
+    readonly tooltip?: readonly [{
+        readonly locale: "zh";
+        readonly message: string;
+    }, ...{
+        readonly locale: "en" | "ja" | "ko";
+        readonly message: string;
+    }[]] | undefined;
+    readonly displayName?: string | undefined;
+    readonly compatibilityDate: "2026-05-13";
+    readonly min?: number | undefined;
+    readonly max?: number | 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;
+    }, ...{
+        readonly locale: "en" | "ja" | "ko";
+        readonly message: string;
+    }[]] | undefined;
+    readonly removeLabel?: readonly [{
+        readonly locale: "zh";
+        readonly message: string;
+    }, ...{
+        readonly locale: "en" | "ja" | "ko";
+        readonly message: string;
+    }[]] | undefined;
+    readonly reorderable?: boolean | undefined;
+}, Schema.Struct<{
+    label: Schema.optional<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>;
+    }>]>>;
+    tooltip: Schema.optional<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>;
+    }>]>>;
+    binding: Schema.optional<Schema.refine<string, typeof Schema.String>>;
+    addLabel: Schema.optional<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>;
+    }>]>>;
+    removeLabel: Schema.optional<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>;
+    }>]>>;
+    reorderable: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    min: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    max: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    disabled: Schema.optional<Schema.Schema<string, string, 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>;
+    id: Schema.refine<string, typeof Schema.String>;
+    displayName: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    hidden: Schema.optional<Schema.Schema<string, string, never>>;
+    type: Schema.Literal<["com.shwfed.form.field.list"]>;
+    compatibilityDate: Schema.Literal<["2026-05-13"]>;
+}>>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;
+export declare function defaults(): Partial<Value>;

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

@@ -0,0 +1,78 @@
+import { Schema } from "effect";
+import { Expression } from "../../../../../share/expression.js";
+import { Locale } from "../../../../../share/locale.js";
+import { FormUnit } from "../../../schema.js";
+import { commonFieldFields } from "../../../utils/common.js";
+export const type = "com.shwfed.form.field.list";
+export const compatibilityDate = "2026-05-13";
+export const metadata = {
+  name: "\u5217\u8868",
+  icon: "fluent:list-20-regular",
+  w: { initial: 12, min: 4, max: Infinity },
+  h: { initial: 6, min: 4, max: Infinity, grow: true }
+};
+export function schema(configure) {
+  const CelBool = Expression({ configure, resultType: "bool" });
+  const Unit = Schema.suspend(() => FormUnit(configure));
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    ...commonFieldFields(configure),
+    label: Schema.optional(Locale.annotations({
+      title: "\u6807\u7B7E",
+      description: "\u5217\u8868\u524D\u5C55\u793A\u7684\u6587\u672C\uFF1B\u7559\u7A7A\u5219\u4E0D\u6E32\u67D3\u6807\u7B7E"
+    })),
+    tooltip: Schema.optional(Locale.annotations({
+      title: "\u63D0\u793A",
+      description: "\u9F20\u6807\u60AC\u505C\u5728\u6807\u7B7E\u4E0A\u65F6\u5C55\u793A\u7684\u8BF4\u660E"
+    })),
+    binding: Schema.optional(Schema.String.pipe(Schema.minLength(1)).annotations({
+      title: "\u7ED1\u5B9A\u8DEF\u5F84",
+      description: "\u5199\u5165\u8868\u5355\u72B6\u6001\u7684 `dot-prop` \u8DEF\u5F84\uFF0C\u4F8B\u5982 `members`\uFF1B\u7559\u7A7A\u5219\u4E3A\u975E\u53D7\u63A7\u5B57\u6BB5\uFF0C\u4E0D\u5199\u5165\u8868\u5355\u72B6\u6001"
+    })),
+    addLabel: Schema.optional(Locale.annotations({
+      title: "\u65B0\u589E\u6309\u94AE\u6587\u6848",
+      description: "\u7559\u7A7A\u4F7F\u7528\u9ED8\u8BA4 `\u65B0\u589E`"
+    })),
+    removeLabel: Schema.optional(Locale.annotations({
+      title: "\u5220\u9664\u6309\u94AE\u6587\u6848",
+      description: "\u7559\u7A7A\u4F7F\u7528\u9ED8\u8BA4 `\u5220\u9664`\uFF08\u4EC5\u4F5C\u4E3A\u8F85\u52A9\u6587\u5B57\uFF0C\u6309\u94AE\u4EE5\u56FE\u6807\u5C55\u793A\uFF09"
+    })),
+    reorderable: Schema.optional(Schema.Boolean.annotations({
+      title: "\u5141\u8BB8\u91CD\u6392",
+      description: "\u5173\u95ED\u540E\u7528\u6237\u65E0\u6CD5\u4E0A\u4E0B\u79FB\u52A8\u5217\u8868\u9879\uFF1B\u9ED8\u8BA4\u5F00\u542F"
+    })),
+    min: Schema.optional(Schema.Number.pipe(Schema.int(), Schema.nonNegative()).annotations({
+      title: "\u6700\u5C11\u6570\u91CF",
+      description: "\u5217\u8868\u9879\u6570\u91CF\u7684\u4E0B\u9650\uFF1B\u4F4E\u4E8E\u8BE5\u503C\u65F6\u65E0\u6CD5\u5220\u9664"
+    })),
+    max: Schema.optional(Schema.Number.pipe(Schema.int(), Schema.positive()).annotations({
+      title: "\u6700\u591A\u6570\u91CF",
+      description: "\u5217\u8868\u9879\u6570\u91CF\u7684\u4E0A\u9650\uFF1B\u8FBE\u5230\u8BE5\u503C\u540E\u65E0\u6CD5\u65B0\u589E"
+    })),
+    disabled: Schema.optional(CelBool.annotations({
+      title: "\u7981\u7528\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u6574\u4E2A\u5217\u8868\u53EA\u8BFB\uFF0C\u4E0D\u80FD\u65B0\u589E/\u5220\u9664/\u91CD\u6392"
+    })),
+    unit: Unit.annotations({
+      title: "\u5217\u8868\u9879\u914D\u7F6E",
+      description: "\u5355\u4E2A\u5217\u8868\u9879\u7684\u5B57\u6BB5\u4E0E\u5E03\u5C40\uFF1B\u6BCF\u4E2A\u5217\u8868\u9879\u90FD\u6309\u6B64\u7ED3\u6784\u6E32\u67D3\u4E00\u4EFD"
+    })
+  }).pipe(Schema.filter((v) => {
+    if (v.min != null && v.max != null && v.min > v.max) {
+      return "\u6700\u5C11\u6570\u91CF\u4E0D\u80FD\u5927\u4E8E\u6700\u591A\u6570\u91CF";
+    }
+    return true;
+  })).annotations({
+    title: "ListField",
+    description: "\u53EF\u65B0\u589E/\u5220\u9664/\u91CD\u6392\u7684\u540C\u6784\u5B50\u8868\u5355\u5217\u8868"
+  });
+}
+export function defaults() {
+  return {
+    unit: {
+      fields: [],
+      layouts: [{ name: "\u9ED8\u8BA4", layout: { columns: 1, placements: {} } }]
+    }
+  };
+}

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

@@ -0,0 +1,22 @@
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
+import { type FormState } from './utils/state.js';
+import type { FormConfigValue } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    modelValue?: FormState;
+    'config': FormConfigValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    seeded: Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormState) => any;
+    "update:config": (value: FormConfigValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormState) => any) | undefined;
+    "onUpdate:config"?: ((value: FormConfigValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,175 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { TZDate } from "@date-fns/tz";
+import { Effect } from "effect";
+import { computed, onMounted, ref, watch } from "vue";
+import {
+  celBindings,
+  injectCELContext,
+  provideCELContext
+} from "../../plugins/cel/context";
+import { findField } from "./utils/resolve";
+import { provideFormState } from "./utils/state";
+defineOptions({ name: "ShwfedForm" });
+const state = defineModel({ type: Object, ...{ default: () => ({}) } });
+const config = defineModel("config", { type: Object, ...{ required: true } });
+const props = defineProps({
+  configure: { type: Function, required: false }
+});
+const configure = props.configure ?? (() => {
+});
+void configure;
+const { $cel: _rawCel } = useNuxtApp();
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+provideCELContext({
+  form: {
+    type: "dyn",
+    label: "form",
+    description: "\u5F53\u524D\u8868\u5355\u72B6\u6001",
+    value: () => state.value ?? {}
+  },
+  // Same thunk pattern: `now` stays live (fresh Date at click time, not at
+  // provide time). Must be a `TZDate`: CEL's type registry maps the `Date`
+  // type to the `TZDate` constructor exactly, so a plain `new Date()` fails
+  // the constructor lookup.
+  now: {
+    type: "Date",
+    label: "now",
+    description: "\u5F53\u524D\u65E5\u671F/\u65F6\u95F4",
+    value: () => new TZDate()
+  }
+});
+provideFormState(state);
+const seeded = (() => {
+  const current = state.value ?? {};
+  const initial = config.value.initial;
+  if (!initial || Object.keys(current).length > 0) return Promise.resolve();
+  return Effect.runPromise($cel(initial, { form: current })).then(
+    (result) => {
+      if (result && typeof result === "object" && !Array.isArray(result)) {
+        state.value = { ...current, ...result };
+      }
+    },
+    (err) => {
+      console.error("[shwfed-form] failed to evaluate initial:", err);
+    }
+  );
+})();
+defineExpose({ seeded });
+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 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;
+  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);
+    return false;
+  }
+}
+function cellStyle(placement) {
+  const [[x1, y1], [x2, y2]] = placement.area;
+  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`];
+  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(auto, 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 parts = [
+    "display: grid",
+    `grid-template-columns: ${colTemplate}`,
+    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
+    l.gap ? `gap: calc(${l.gap} * 0.25rem)` : "",
+    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>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,22 @@
+import type { Environment } from '../../vendor/cel-js/lib/index.js';
+import { type FormState } from './utils/state.js';
+import type { FormConfigValue } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    modelValue?: FormState;
+    'config': FormConfigValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    seeded: Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormState) => any;
+    "update:config": (value: FormConfigValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormState) => any) | undefined;
+    "onUpdate:config"?: ((value: FormConfigValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;