@type32/yaml-editor-form 1.0.0

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@type32/yaml-editor-form",
+  "configKey": "yamlEditorForm",
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,21 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@type32/yaml-editor-form",
+    configKey: "yamlEditorForm"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({ path: resolver.resolve("runtime/components") });
+    addImportsDir(resolver.resolve("runtime/composables"));
+    _nuxt.options.build.transpile.push("yaml");
+    _nuxt.options.alias["@type32/yaml-editor-form"] = resolver.resolve(
+      "./runtime/types/types"
+    );
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/YamlCollapsible.d.vue.ts

@@ -0,0 +1,41 @@
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlCollapsible.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+const open = defineModel("open", { type: Boolean, default: void 0 });
+</script>
+
+<template>
+    <UCollapsible
+        v-model:open="open"
+        :default-open="defaultOpen"
+        class="group/collapsible"
+    >
+        <div class="flex items-center justify-between gap-2 w-full">
+            <div class="flex items-center gap-2">
+                <div
+                    class="flex items-center justify-center size-3.5 rounded bg-elevated transition-colors duration-200 group-hover/collapsible:bg-accented">
+                    <UIcon
+                        name="i-lucide-chevron-right"
+                        class="size-2.5 text-muted transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                    />
+                </div>
+                <span class="text-xs font-medium text-highlighted tracking-tight">{{ label }}</span>
+                <slot name="badge"/>
+            </div>
+
+            <slot name="actions"/>
+        </div>
+
+        <template #content>
+            <div class="mt-1 ml-2 pl-3 border-l border-gray-200 dark:border-gray-700/50">
+                <slot/>
+            </div>
+        </template>
+    </UCollapsible>
+</template>

package/dist/runtime/components/YamlCollapsible.vue.d.ts

@@ -0,0 +1,41 @@
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlFieldInput.d.vue.ts

@@ -0,0 +1,37 @@
+import type { YamlFieldType } from "../types/types.js";
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    /** Type of the field (string, number, boolean, etc.) */
+    valueType: string;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Optional field type definition for custom component detection */
+    fieldType?: YamlFieldType;
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: any, __VLS_3: {
+    modelValue: YamlValue;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: YamlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlFieldInput.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { CalendarDate, CalendarDateTime, parseDate, parseDateTime } from "@internationalized/date";
+const modelValue = defineModel({ type: [String, Number, Boolean, null, Date, Array, Object], ...{ required: true } });
+const props = defineProps({
+  valueType: { type: String, required: true },
+  readonly: { type: Boolean, required: false, default: false },
+  fieldType: { type: Object, required: false }
+});
+function isDateObject(val) {
+  return val instanceof Date && !isNaN(val.getTime());
+}
+function jsDateToCalendarDate(date) {
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function jsDateToCalendarDateTime(date) {
+  return new CalendarDateTime(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds()
+  );
+}
+function stringToCalendarDate(str) {
+  try {
+    return parseDate(str);
+  } catch {
+    return jsDateToCalendarDate(/* @__PURE__ */ new Date());
+  }
+}
+function stringToCalendarDateTime(str) {
+  try {
+    return parseDateTime(str);
+  } catch {
+    return jsDateToCalendarDateTime(/* @__PURE__ */ new Date());
+  }
+}
+const hasCustomComponent = computed(() => {
+  return props.fieldType?.component !== void 0;
+});
+const customSlotName = computed(() => {
+  return props.fieldType?.component ? `field-${props.fieldType.component}` : void 0;
+});
+</script>
+
+<template>
+    <!-- Custom Component via Slot -->
+    <slot
+        v-if="hasCustomComponent && customSlotName"
+        :name="customSlotName"
+        :model-value="modelValue"
+        :readonly="readonly"
+        :value-type="valueType"
+    />
+
+    <!-- Built-in Input Components -->
+    <template v-else>
+        <!-- String -->
+        <UInput
+            v-if="valueType === 'string'"
+            :model-value="String(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter text..."
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Textarea (Long Text) -->
+        <UTextarea
+            v-else-if="valueType === 'textarea'"
+            :model-value="String(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter long text..."
+            :rows="4"
+            autoresize
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Number -->
+        <UInputNumber
+            v-else-if="valueType === 'number'"
+            :model-value="Number(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="0"
+            @update:model-value="(val) => modelValue = val ?? 0"
+        />
+
+        <!-- Boolean -->
+        <USwitch
+            v-else-if="valueType === 'boolean'"
+            :model-value="Boolean(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Date (Date only, no time) -->
+        <UInputDate
+            v-else-if="valueType === 'date'"
+            :model-value="typeof modelValue === 'string' ? stringToCalendarDate(modelValue) : jsDateToCalendarDate(/* @__PURE__ */ new Date())"
+            size="xs"
+            :disabled="readonly"
+            @update:model-value="(val) => {
+  if (val && 'year' in val) {
+    modelValue = `${val.year}-${String(val.month).padStart(2, '0')}-${String(val.day).padStart(2, '0')}`;
+  }
+}"
+        />
+
+        <!-- DateTime (Date + Time) - UInputDate handles both with granularity -->
+        <UInputDate
+            v-else-if="valueType === 'datetime'"
+            :model-value="typeof modelValue === 'string' ? stringToCalendarDateTime(modelValue) : jsDateToCalendarDateTime(/* @__PURE__ */ new Date())"
+            size="xs"
+            :disabled="readonly"
+            granularity="second"
+            @update:model-value="(val) => {
+  if (val && 'year' in val && 'month' in val && 'day' in val) {
+    const hour = 'hour' in val ? val.hour : 0;
+    const minute = 'minute' in val ? val.minute : 0;
+    const second = 'second' in val ? val.second : 0;
+    const newDateTime = new CalendarDateTime(val.year, val.month, val.day, hour, minute, second);
+    const isoString = `${newDateTime.year}-${String(newDateTime.month).padStart(2, '0')}-${String(newDateTime.day).padStart(2, '0')}T${String(newDateTime.hour).padStart(2, '0')}:${String(newDateTime.minute).padStart(2, '0')}:${String(newDateTime.second).padStart(2, '0')}`;
+    modelValue = isoString;
+  }
+}"
+        />
+
+        <!-- String Array (Tags) -->
+        <UInputTags
+            v-else-if="valueType === 'string-array'"
+            :model-value="Array.isArray(modelValue) ? modelValue : []"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Add tags..."
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Null -->
+        <div v-else-if="valueType === 'null'" class="text-xs text-muted italic">
+            null
+        </div>
+
+        <!-- Fallback for unknown types -->
+        <UInput
+            v-else
+            :model-value="String(modelValue || '')"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter value..."
+            @update:model-value="(val) => modelValue = val"
+        />
+    </template>
+</template>

package/dist/runtime/components/YamlFieldInput.vue.d.ts

@@ -0,0 +1,37 @@
+import type { YamlFieldType } from "../types/types.js";
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    /** Type of the field (string, number, boolean, etc.) */
+    valueType: string;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Optional field type definition for custom component detection */
+    fieldType?: YamlFieldType;
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: any, __VLS_3: {
+    modelValue: YamlValue;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: YamlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlFormEditor.d.vue.ts

@@ -0,0 +1,92 @@
+/**
+ * YAML Form Data Editor
+ *
+ * Schema-driven form editor for YAML/frontmatter data.
+ * Supports custom field types through the fieldTypes prop.
+ *
+ * Features:
+ * - Primitive types (string, number, boolean, null)
+ * - Complex types (date, datetime, string-array)
+ * - Objects (nested structures)
+ * - Arrays (primitives and objects)
+ * - Recursive structures
+ * - Custom field types with custom components
+ *
+ * Can be used standalone or embedded in the rich text editor for frontmatter editing.
+ */
+import type { YamlFieldType, YamlFormData } from "../types/types.js";
+type __VLS_Props = {
+    filePath?: string;
+    readonly?: boolean;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    modelValue: YamlFormData;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_12: string, __VLS_13: {
+    modelValue: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | {
+        [key: string]: string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlFormEditor.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { useYamlFieldTypes } from "../composables/useYamlFieldTypes";
+import YamlFormField from "../components/YamlFormField.vue";
+const data = defineModel({ type: null, ...{ required: true } });
+const props = defineProps({
+  filePath: { type: String, required: false },
+  readonly: { type: Boolean, required: false, default: false },
+  fieldTypes: { type: Array, required: false }
+});
+const { getDefaultValue, getTypeMenuItems } = useYamlFieldTypes(props.fieldTypes);
+const isDirty = ref(false);
+watch(data, () => {
+  isDirty.value = true;
+}, { deep: true });
+function addField(fieldType = "string") {
+  if (!data.value) data.value = {};
+  const newKey = `field_${Object.keys(data.value).length + 1}`;
+  data.value[newKey] = getDefaultValue(fieldType);
+}
+function removeField(key) {
+  if (data.value) {
+    delete data.value[key];
+  }
+}
+const addFieldOptions = computed(() => {
+  return getTypeMenuItems((type) => addField(type));
+});
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div class="space-y-3">
+            <YamlFormField
+                v-for="(value, key) in data"
+                :key="String(key)"
+                v-model="data[key]"
+                :field-key="String(key)"
+                :readonly="readonly"
+                :field-types="fieldTypes"
+                @remove="removeField(String(key))"
+                @update:field-key="(newKey) => {
+  if (newKey !== key) {
+    data[newKey] = data[key];
+    delete data[key];
+  }
+}"
+            >
+                <!-- Forward all slots to YamlFormField for custom field components -->
+                <template v-for="(_, name) in $slots" #[name]="slotProps">
+                    <slot :name="name" v-bind="slotProps" />
+                </template>
+            </YamlFormField>
+        </div>
+
+        <UDropdownMenu
+            v-if="!readonly"
+            :items="[addFieldOptions]"
+            size="sm"
+        >
+            <UButton
+                icon="i-lucide-plus"
+                label="Add Field"
+                variant="ghost"
+                size="sm"
+            />
+        </UDropdownMenu>
+    </div>
+</template>

package/dist/runtime/components/YamlFormEditor.vue.d.ts

@@ -0,0 +1,92 @@
+/**
+ * YAML Form Data Editor
+ *
+ * Schema-driven form editor for YAML/frontmatter data.
+ * Supports custom field types through the fieldTypes prop.
+ *
+ * Features:
+ * - Primitive types (string, number, boolean, null)
+ * - Complex types (date, datetime, string-array)
+ * - Objects (nested structures)
+ * - Arrays (primitives and objects)
+ * - Recursive structures
+ * - Custom field types with custom components
+ *
+ * Can be used standalone or embedded in the rich text editor for frontmatter editing.
+ */
+import type { YamlFieldType, YamlFormData } from "../types/types.js";
+type __VLS_Props = {
+    filePath?: string;
+    readonly?: boolean;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    modelValue: YamlFormData;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_12: string, __VLS_13: {
+    modelValue: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | {
+        [key: string]: string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null)[] | {
+        [key: string]: string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | (string | number | boolean | Date | /*elided*/ any | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null)[] | /*elided*/ any | null;
+    } | null;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};