feat(plugins): add @emdash-cms/plugin-field-kit

.changeset/field-kit-plugin-initial.md

@@ -0,0 +1,9 @@
+---
+"@emdash-cms/plugin-field-kit": minor
+"emdash": patch
+"@emdash-cms/admin": patch
+---
+
+Adds `@emdash-cms/plugin-field-kit` — composable field widgets for `json` fields. Four widgets (`object-form`, `list`, `grid`, `tags`) are configured entirely through seed `options` so site builders don't need to write React to get a usable editing UI. Widgets store clean JSON (no nesting, no mutation of shape), so removing the plugin leaves valid data in the database. See discussion #571 for background.
+
+Widens `FieldDescriptor.options` to `Array<{ value: string; label: string }> | Record<string, unknown>` so plugin widgets can accept arbitrary widget config (not only enum choices). The array shape for `select` / `multiSelect` continues to work unchanged.

packages/admin/src/components/ContentEditor.tsx

@@ -82,7 +82,11 @@ export interface FieldDescriptor {
 	kind: string;
 	label?: string;
 	required?: boolean;
-	options?: Array<{ value: string; label: string }>;
+	/**
+	 * For `select` / `multiSelect`: the list of enum choices.
+	 * For `json` fields driven by a plugin `widget`: arbitrary widget config.
+	 */
+	options?: Array<{ value: string; label: string }> | Record<string, unknown>;
 	widget?: string;
 	validation?: Record<string, unknown>;
 }
@@ -1087,7 +1091,7 @@ function FieldRenderer({
 						label: string;
 						id: string;
 						required?: boolean;
-						options?: Array<{ value: string; label: string }>;
+						options?: Array<{ value: string; label: string }> | Record<string, unknown>;
 						minimal?: boolean;
 				  }>
 				| undefined;
@@ -1204,8 +1208,9 @@ function FieldRenderer({
 			);
 
 		case "select": {
+			const selectOptions = Array.isArray(field.options) ? field.options : [];
 			const selectItems: Record<string, string> = {};
-			for (const opt of field.options ?? []) {
+			for (const opt of selectOptions) {
 				selectItems[opt.value] = opt.label;
 			}
 			return (
@@ -1216,7 +1221,7 @@ function FieldRenderer({
 					onValueChange={(v) => handleChange(v ?? "")}
 					items={selectItems}
 				>
-					{field.options?.map((opt) => (
+					{selectOptions.map((opt) => (
 						<Select.Option key={opt.value} value={opt.value}>
 							{opt.label}
 						</Select.Option>
@@ -1226,12 +1231,13 @@ function FieldRenderer({
 		}
 
 		case "multiSelect": {
+			const multiSelectOptions = Array.isArray(field.options) ? field.options : [];
 			const selected: string[] = Array.isArray(value) ? (value as string[]) : [];
 			return (
 				<fieldset>
 					<Label className={labelClass}>{label}</Label>
 					<div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
-						{field.options?.map((opt) => {
+						{multiSelectOptions.map((opt) => {
 							const isChecked = selected.includes(opt.value);
 							return (
 								<Checkbox

packages/admin/src/lib/api/client.ts

@@ -63,7 +63,11 @@ export interface AdminManifest {
 					label?: string;
 					required?: boolean;
 					widget?: string;
-					options?: Array<{ value: string; label: string }>;
+					/**
+					 * For `select` / `multiSelect`: the list of enum choices.
+					 * For `json` fields driven by a plugin `widget`: arbitrary widget config.
+					 */
+					options?: Array<{ value: string; label: string }> | Record<string, unknown>;
 					validation?: Record<string, unknown>;
 				}
 			>;

packages/core/src/api/types.ts

@@ -51,7 +51,11 @@ export interface FieldDescriptor {
 	kind: string;
 	label?: string;
 	required?: boolean;
-	options?: Array<{ value: string; label: string }>;
+	/**
+	 * For `select` / `multiSelect`: the list of enum choices.
+	 * For `json` fields driven by a plugin `widget`: arbitrary widget config.
+	 */
+	options?: Array<{ value: string; label: string }> | Record<string, unknown>;
 }
 
 /**

packages/plugins/field-kit/CHANGELOG.md

@@ -0,0 +1 @@
+# @emdash-cms/plugin-field-kit

packages/plugins/field-kit/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@emdash-cms/plugin-field-kit",
+	"version": "0.0.0",
+	"description": "Composable field widgets for EmDash CMS — object forms, lists, grids, and tag inputs for json fields",
+	"type": "module",
+	"main": "src/index.ts",
+	"exports": {
+		".": "./src/index.ts",
+		"./admin": "./src/admin.tsx"
+	},
+	"files": [
+		"src"
+	],
+	"keywords": [
+		"emdash",
+		"cms",
+		"plugin",
+		"field-widget",
+		"json"
+	],
+	"author": "Filip Ilic",
+	"license": "MIT",
+	"peerDependencies": {
+		"@cloudflare/kumo": "^1.0.0",
+		"@phosphor-icons/react": "^2.1.10",
+		"emdash": "workspace:>=0.1.0",
+		"react": "^18.0.0 || ^19.0.0"
+	},
+	"devDependencies": {
+		"@testing-library/react": "^16.3.0",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"@vitejs/plugin-react": "^4.6.0",
+		"jsdom": "^26.1.0",
+		"react": "catalog:",
+		"react-dom": "catalog:",
+		"vitest": "catalog:"
+	},
+	"scripts": {
+		"test": "vitest run",
+		"typecheck": "tsgo --noEmit"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/field-kit"
+	}
+}

packages/plugins/field-kit/src/admin.tsx

@@ -0,0 +1,11 @@
+import { Grid } from "./widgets/grid";
+import { List } from "./widgets/list";
+import { ObjectForm } from "./widgets/object-form";
+import { Tags } from "./widgets/tags";
+
+export const fields = {
+	"object-form": ObjectForm,
+	list: List,
+	grid: Grid,
+	tags: Tags,
+};

packages/plugins/field-kit/src/index.ts

@@ -0,0 +1,65 @@
+/**
+ * Field Kit Plugin for EmDash CMS
+ *
+ * Provides composable field widgets for `json` fields configured entirely
+ * through seed options — no React code required from site builders.
+ *
+ * Ships four widgets:
+ *   - object-form — inline form for flat JSON objects
+ *   - list        — ordered array editor with add/remove/reorder
+ *   - grid        — rows × columns matrix with configurable cell type
+ *   - tags        — free-form tag/chip input for string arrays
+ *
+ * Usage in astro.config.mjs:
+ *   import { fieldKitPlugin } from "@emdash-cms/plugin-field-kit";
+ *   emdash({ plugins: [fieldKitPlugin()] });
+ *
+ * Usage in a seed field:
+ *   {
+ *     "slug": "ingredients",
+ *     "type": "json",
+ *     "widget": "field-kit:list",
+ *     "options": { "fields": [...], "summary": "{{name}}" }
+ *   }
+ */
+
+import type { PluginDescriptor } from "emdash";
+import { definePlugin } from "emdash";
+
+const PLUGIN_ID = "field-kit";
+const PLUGIN_VERSION = "0.0.0";
+
+/**
+ * Create the field-kit plugin instance.
+ * Called by the virtual module system at runtime.
+ */
+export function createPlugin() {
+	return definePlugin({
+		id: PLUGIN_ID,
+		version: PLUGIN_VERSION,
+		admin: {
+			entry: "@emdash-cms/plugin-field-kit/admin",
+			fieldWidgets: [
+				{ name: "object-form", label: "Object form", fieldTypes: ["json"] },
+				{ name: "list", label: "List", fieldTypes: ["json"] },
+				{ name: "grid", label: "Grid", fieldTypes: ["json"] },
+				{ name: "tags", label: "Tags input", fieldTypes: ["json"] },
+			],
+		},
+	});
+}
+
+export default createPlugin;
+
+/**
+ * Create a plugin descriptor for use in emdash config.
+ */
+export function fieldKitPlugin(): PluginDescriptor {
+	return {
+		id: PLUGIN_ID,
+		version: PLUGIN_VERSION,
+		entrypoint: "@emdash-cms/plugin-field-kit",
+		options: {},
+		adminEntry: "@emdash-cms/plugin-field-kit/admin",
+	};
+}