@pixpilot/formily-shadcn 1.14.2 → 1.15.0

package/dist/components/array-base/mcp.js

@@ -0,0 +1,53 @@
+import { defineProps } from "../../mcp/src/utils.js";
+
+//#region src/components/array-base/mcp.ts
+const meta = {
+	name: "ArrayBase",
+	category: "Formily Arrays",
+	description: "Low-level Formily array context provider and mixin base used by the higher-level array components.",
+	htmlElement: "div",
+	props: defineProps({
+		disabled: "Disables array operations for children using the array context.",
+		sortable: "Enables sortable behavior for array components that use ArrayBase context.",
+		onAdd: "Called when an array item is added.",
+		onRemove: "Called when an array item is removed.",
+		onMoveUp: "Called when an array item is moved up.",
+		onMoveDown: "Called when an array item is moved down.",
+		onEdit: "Called when an array item edit action is triggered.",
+		actions: "Item operation actions available to child array renderers.",
+		transformActions: "Callback that transforms the resolved action list before rendering.",
+		description: "Description content made available to array renderers."
+	}),
+	examples: [{
+		title: "Prefer high-level array components",
+		code: `<SchemaField.Array name="items" x-component="ArrayCards" />`
+	}, {
+		title: "JSON schema for form renderer",
+		code: `{
+  type: 'object',
+  properties: {
+    items: {
+      type: 'array',
+      'x-component': 'ArrayCards',
+      items: { type: 'object', properties: {} },
+    },
+  },
+}`
+	}],
+	keywords: [
+		"formily",
+		"array",
+		"base",
+		"context"
+	],
+	related: [
+		"ArrayCards",
+		"ArrayCollapse",
+		"ArrayDialog",
+		"ArrayInline",
+		"ArrayPopover"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/array-cards/Item.cjs

@@ -1,12 +1,11 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_get_x_component_props = require('../../utils/get-x-component-props.cjs');
-require('../../utils/index.cjs');
 const require_array_base = require('../array-base/array-base.cjs');
 const require_is_array_component = require('../array-base/utils/is-array-component.cjs');
 require('../array-base/index.cjs');
 const require_SortableItem = require('../array-sortable/SortableItem.cjs');
 require('../array-sortable/index.cjs');
 const require_ArrayItemHeaderRow = require('../array-common/ArrayItemHeaderRow.cjs');
+const require_use_array_item_wrapper_props = require('../array-common/use-array-item-wrapper-props.cjs');
 require('../array-common/index.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
@@ -21,7 +20,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 const ArrayItem = react.default.memo(({ index, record, itemKey, cardProps }) => {
 	const schema = (0, __formily_react.useFieldSchema)();
 	const items = schema?.items;
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = require_get_x_component_props.getXComponentProps(items);
+	const { className: itemWrapperClassName,...itemWrapperRestProps } = require_use_array_item_wrapper_props.useArrayItemWrapperProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Item, {
 		index,
 		record: record ?? {},

package/dist/components/array-cards/Item.js

@@ -1,11 +1,10 @@
-import { getXComponentProps } from "../../utils/get-x-component-props.js";
-import "../../utils/index.js";
 import { ArrayBase } from "../array-base/array-base.js";
 import { isOperationComponent } from "../array-base/utils/is-array-component.js";
 import "../array-base/index.js";
 import { SortableItem } from "../array-sortable/SortableItem.js";
 import "../array-sortable/index.js";
 import { ArrayItemHeaderRow } from "../array-common/ArrayItemHeaderRow.js";
+import { useArrayItemWrapperProps } from "../array-common/use-array-item-wrapper-props.js";
 import "../array-common/index.js";
 import { RecursionField, useFieldSchema } from "@formily/react";
 import React from "react";
@@ -16,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ArrayItem = React.memo(({ index, record, itemKey, cardProps }) => {
 	const schema = useFieldSchema();
 	const items = schema?.items;
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = getXComponentProps(items);
+	const { className: itemWrapperClassName,...itemWrapperRestProps } = useArrayItemWrapperProps();
 	return /* @__PURE__ */ jsx(ArrayBase.Item, {
 		index,
 		record: record ?? {},

package/dist/components/array-cards/mcp.js

@@ -0,0 +1,54 @@
+import { defineProps } from "../../mcp/src/utils.js";
+import { commonArrayPropDocs, perItemStylingNote } from "../array-common/array-mcp-props.js";
+
+//#region src/components/array-cards/mcp.ts
+const meta = {
+	name: "ArrayCards",
+	category: "Formily Arrays",
+	description: "A Formily array field that renders each item as a card with an editable form inside, plus per-item operations (move, copy, remove).",
+	htmlElement: "div",
+	props: defineProps({
+		...commonArrayPropDocs,
+		cardProps: "HTML attributes applied to every item card wrapper (className, style, etc.)."
+	}),
+	examples: [{
+		title: "Array of cards",
+		code: `{
+  type: 'array',
+  'x-component': 'ArrayCards',
+  items: {
+    type: 'object',
+    properties: {
+      name: { type: 'string', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+    },
+  },
+  properties: {
+    addition: { type: 'void', title: 'Add', 'x-component': 'ArrayCards.Addition' },
+  },
+}`
+	}, {
+		title: "Style each item",
+		code: `items: {
+  type: 'object',
+  'x-component-props': { className: 'border-primary' },
+  properties: { /* ... */ },
+}`
+	}],
+	notes: [perItemStylingNote],
+	keywords: [
+		"formily",
+		"array",
+		"cards",
+		"list",
+		"repeater"
+	],
+	related: [
+		"ArrayCollapse",
+		"ArrayInline",
+		"ArrayDialog",
+		"ArrayPopover"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/array-collapse/Item.cjs

@@ -1,7 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_validate_array_item_fields = require('../../utils/validate-array-item-fields.cjs');
-const require_get_x_component_props = require('../../utils/get-x-component-props.cjs');
-require('../../utils/index.cjs');
 const require_array_base = require('../array-base/array-base.cjs');
 require('../array-base/index.cjs');
 const require_SortableItem = require('../array-sortable/SortableItem.cjs');
@@ -9,6 +7,7 @@ require('../array-sortable/index.cjs');
 const require_ArrayItemHeaderRow = require('../array-common/ArrayItemHeaderRow.cjs');
 const require_get_hidden_item_schema = require('../array-common/get-hidden-item-schema.cjs');
 const require_ItemWrapper = require('../array-common/ItemWrapper.cjs');
+const require_use_array_item_wrapper_props = require('../array-common/use-array-item-wrapper-props.cjs');
 const require_use_array_item_schema = require('../array-common/use-array-item-schema.cjs');
 require('../array-common/index.cjs');
 let __formily_react = require("@formily/react");
@@ -31,7 +30,7 @@ const ArrayCollapseItem = react.default.memo((props) => {
 	const hiddenItemSchema = react.default.useMemo(() => {
 		return require_get_hidden_item_schema.getHiddenItemSchema(items);
 	}, [items]);
-	const itemWrapperProps = require_get_x_component_props.getXComponentProps(items);
+	const itemWrapperProps = require_use_array_item_wrapper_props.useArrayItemWrapperProps();
 	react.default.useEffect(() => {
 		if (isNewItem(index)) formCollapse.addActiveKey(itemId);
 	}, [

package/dist/components/array-collapse/Item.js

@@ -1,6 +1,4 @@
 import { validateArrayItemFields } from "../../utils/validate-array-item-fields.js";
-import { getXComponentProps } from "../../utils/get-x-component-props.js";
-import "../../utils/index.js";
 import { ArrayBase } from "../array-base/array-base.js";
 import "../array-base/index.js";
 import { SortableItem } from "../array-sortable/SortableItem.js";
@@ -8,6 +6,7 @@ import "../array-sortable/index.js";
 import { ArrayItemHeaderRow } from "../array-common/ArrayItemHeaderRow.js";
 import { getHiddenItemSchema } from "../array-common/get-hidden-item-schema.js";
 import { ItemWrapper } from "../array-common/ItemWrapper.js";
+import { useArrayItemWrapperProps } from "../array-common/use-array-item-wrapper-props.js";
 import { useArrayItemSchema } from "../array-common/use-array-item-schema.js";
 import "../array-common/index.js";
 import { RecursionField, useField, useFieldSchema } from "@formily/react";
@@ -25,7 +24,7 @@ const ArrayCollapseItem = React.memo((props) => {
 	const hiddenItemSchema = React.useMemo(() => {
 		return getHiddenItemSchema(items);
 	}, [items]);
-	const itemWrapperProps = getXComponentProps(items);
+	const itemWrapperProps = useArrayItemWrapperProps();
 	React.useEffect(() => {
 		if (isNewItem(index)) formCollapse.addActiveKey(itemId);
 	}, [

package/dist/components/array-collapse/mcp.js

@@ -0,0 +1,55 @@
+import { defineProps } from "../../mcp/src/utils.js";
+import { commonArrayPropDocs, perItemStylingNote } from "../array-common/array-mcp-props.js";
+
+//#region src/components/array-collapse/mcp.ts
+const meta = {
+	name: "ArrayCollapse",
+	category: "Formily Arrays",
+	description: "A Formily array field that renders each item as a collapsible panel with an editable form inside, plus per-item operations.",
+	htmlElement: "div",
+	props: defineProps({
+		...commonArrayPropDocs,
+		mode: {
+			description: "Panel behavior: \"multiple\" allows several open panels, \"accordion\" keeps only one open at a time.",
+			type: `'accordion' | 'multiple'`,
+			defaultValue: `'multiple'`
+		},
+		defaultActiveKey: "Indices of the panels that are expanded by default.",
+		collapseProps: "HTML attributes applied to every item panel wrapper (className, style, etc.)."
+	}),
+	examples: [{
+		title: "Accordion of items",
+		code: `{
+  type: 'array',
+  'x-component': 'ArrayCollapse',
+  'x-component-props': { mode: 'accordion' },
+  items: {
+    type: 'object',
+    properties: {
+      name: { type: 'string', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+    },
+  },
+  properties: {
+    addition: { type: 'void', title: 'Add', 'x-component': 'ArrayCollapse.Addition' },
+  },
+}`
+	}],
+	notes: [perItemStylingNote],
+	keywords: [
+		"formily",
+		"array",
+		"collapse",
+		"accordion",
+		"list",
+		"repeater"
+	],
+	related: [
+		"ArrayCards",
+		"ArrayInline",
+		"ArrayDialog",
+		"ArrayPopover"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/array-common/ArrayItemDraftFields.cjs

@@ -1,6 +1,4 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_get_x_component_props = require('../../utils/get-x-component-props.cjs');
-require('../../utils/index.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 let react = require("react");
@@ -9,16 +7,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/array-common/ArrayItemDraftFields.tsx
-function mergeClassName(a, b) {
-	const aa = a?.trim();
-	const bb = b?.trim();
-	const hasA = aa != null && aa.length > 0;
-	const hasB = bb != null && bb.length > 0;
-	if (!hasA && !hasB) return void 0;
-	if (hasA && !hasB) return aa;
-	if (!hasA && hasB) return bb;
-	return `${aa} ${bb}`;
-}
 /**
 * Renders item fields inside their own FormProvider.
 * SchemaField contexts (component registry, options, …) are captured from
@@ -51,10 +39,8 @@ function IsolatedDraftFields({ schema, form, basePath }) {
 	});
 }
 function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className, isolated = true }) {
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = require_get_x_component_props.getXComponentProps(schema);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		...itemWrapperRestProps,
-		className: mergeClassName(className, itemWrapperClassName),
+		className,
 		children: isolated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IsolatedDraftFields, {
 			schema,
 			form,

package/dist/components/array-common/ArrayItemDraftFields.js

@@ -1,20 +1,8 @@
-import { getXComponentProps } from "../../utils/get-x-component-props.js";
-import "../../utils/index.js";
 import { FormProvider, RecursionField, SchemaComponentsContext, SchemaContext, SchemaExpressionScopeContext, SchemaMarkupContext, SchemaOptionsContext } from "@formily/react";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/array-common/ArrayItemDraftFields.tsx
-function mergeClassName(a, b) {
-	const aa = a?.trim();
-	const bb = b?.trim();
-	const hasA = aa != null && aa.length > 0;
-	const hasB = bb != null && bb.length > 0;
-	if (!hasA && !hasB) return void 0;
-	if (hasA && !hasB) return aa;
-	if (!hasA && hasB) return bb;
-	return `${aa} ${bb}`;
-}
 /**
 * Renders item fields inside their own FormProvider.
 * SchemaField contexts (component registry, options, …) are captured from
@@ -47,10 +35,8 @@ function IsolatedDraftFields({ schema, form, basePath }) {
 	});
 }
 function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className, isolated = true }) {
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = getXComponentProps(schema);
 	return /* @__PURE__ */ jsx(Component, {
-		...itemWrapperRestProps,
-		className: mergeClassName(className, itemWrapperClassName),
+		className,
 		children: isolated ? /* @__PURE__ */ jsx(IsolatedDraftFields, {
 			schema,
 			form,

package/dist/components/array-common/ListItem.cjs

@@ -6,6 +6,7 @@ require('../array-sortable/index.cjs');
 const require_ArrayItemHeaderRow = require('./ArrayItemHeaderRow.cjs');
 const require_get_hidden_item_schema = require('./get-hidden-item-schema.cjs');
 const require_ItemWrapper = require('./ItemWrapper.cjs');
+const require_use_array_item_wrapper_props = require('./use-array-item-wrapper-props.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
 let react = require("react");
@@ -25,7 +26,24 @@ const ListItem = react.default.memo(({ itemKey, index, record, isNew, isAnchor }
 	const hiddenItemSchema = react.default.useMemo(() => {
 		return require_get_hidden_item_schema.getHiddenItemSchema(schema.items);
 	}, [schema.items]);
+	const { className: itemWrapperClassName,...itemWrapperRest } = require_use_array_item_wrapper_props.useArrayItemWrapperProps();
 	const isNewItem = isNew;
+	const itemContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: { display: "none" },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+			schema: hiddenItemSchema,
+			name: index
+		})
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ItemWrapper.ItemWrapper, {
+		...itemWrapperRest,
+		className: (0, __pixpilot_shadcn.cn)("px-3 pl-4 py-2", itemWrapperClassName, isNewItem && "hidden"),
+		index,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemHeaderRow.ArrayItemHeaderRow, {
+			schema,
+			index,
+			slots: { content: { content: "text-foreground font-medium" } }
+		})
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Item, {
 		index,
 		record,
@@ -33,36 +51,8 @@ const ListItem = react.default.memo(({ itemKey, index, record, isNew, isAnchor }
 			id: itemKey,
 			children: isAnchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverAnchor, {
 				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: { display: "none" },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
-						schema: hiddenItemSchema,
-						name: index
-					})
-				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ItemWrapper.ItemWrapper, {
-					className: (0, __pixpilot_shadcn.cn)("px-3 pl-4 py-2", isNewItem && "hidden"),
-					index,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemHeaderRow.ArrayItemHeaderRow, {
-						schema,
-						index,
-						slots: { content: { content: "text-foreground font-medium" } }
-					})
-				})] })
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: { display: "none" },
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
-					schema: hiddenItemSchema,
-					name: index
-				})
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ItemWrapper.ItemWrapper, {
-				className: (0, __pixpilot_shadcn.cn)("px-3 pl-4 py-2", isNewItem && "hidden"),
-				index,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemHeaderRow.ArrayItemHeaderRow, {
-					schema,
-					index,
-					slots: { content: { content: "text-foreground font-medium" } }
-				})
-			})] })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: itemContent })
+			}) : itemContent
 		})
 	}, itemKey);
 });

package/dist/components/array-common/ListItem.js

@@ -5,6 +5,7 @@ import "../array-sortable/index.js";
 import { ArrayItemHeaderRow } from "./ArrayItemHeaderRow.js";
 import { getHiddenItemSchema } from "./get-hidden-item-schema.js";
 import { ItemWrapper } from "./ItemWrapper.js";
+import { useArrayItemWrapperProps } from "./use-array-item-wrapper-props.js";
 import { RecursionField, useFieldSchema } from "@formily/react";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +21,24 @@ const ListItem = React.memo(({ itemKey, index, record, isNew, isAnchor }) => {
 	const hiddenItemSchema = React.useMemo(() => {
 		return getHiddenItemSchema(schema.items);
 	}, [schema.items]);
+	const { className: itemWrapperClassName,...itemWrapperRest } = useArrayItemWrapperProps();
 	const isNewItem = isNew;
+	const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
+		style: { display: "none" },
+		children: /* @__PURE__ */ jsx(RecursionField, {
+			schema: hiddenItemSchema,
+			name: index
+		})
+	}) : null, /* @__PURE__ */ jsx(ItemWrapper, {
+		...itemWrapperRest,
+		className: cn("px-3 pl-4 py-2", itemWrapperClassName, isNewItem && "hidden"),
+		index,
+		children: /* @__PURE__ */ jsx(ArrayItemHeaderRow, {
+			schema,
+			index,
+			slots: { content: { content: "text-foreground font-medium" } }
+		})
+	})] });
 	return /* @__PURE__ */ jsx(ArrayBase.Item, {
 		index,
 		record,
@@ -28,36 +46,8 @@ const ListItem = React.memo(({ itemKey, index, record, isNew, isAnchor }) => {
 			id: itemKey,
 			children: isAnchor ? /* @__PURE__ */ jsx(PopoverAnchor, {
 				asChild: true,
-				children: /* @__PURE__ */ jsxs("div", { children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
-					style: { display: "none" },
-					children: /* @__PURE__ */ jsx(RecursionField, {
-						schema: hiddenItemSchema,
-						name: index
-					})
-				}) : null, /* @__PURE__ */ jsx(ItemWrapper, {
-					className: cn("px-3 pl-4 py-2", isNewItem && "hidden"),
-					index,
-					children: /* @__PURE__ */ jsx(ArrayItemHeaderRow, {
-						schema,
-						index,
-						slots: { content: { content: "text-foreground font-medium" } }
-					})
-				})] })
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
-				style: { display: "none" },
-				children: /* @__PURE__ */ jsx(RecursionField, {
-					schema: hiddenItemSchema,
-					name: index
-				})
-			}) : null, /* @__PURE__ */ jsx(ItemWrapper, {
-				className: cn("px-3 pl-4 py-2", isNewItem && "hidden"),
-				index,
-				children: /* @__PURE__ */ jsx(ArrayItemHeaderRow, {
-					schema,
-					index,
-					slots: { content: { content: "text-foreground font-medium" } }
-				})
-			})] })
+				children: /* @__PURE__ */ jsx("div", { children: itemContent })
+			}) : itemContent
 		})
 	}, itemKey);
 });

package/dist/components/array-common/array-mcp-props.js

@@ -0,0 +1,26 @@
+//#region src/components/array-common/array-mcp-props.ts
+/** Shared documentation for the common array-field props. */
+const commonArrayPropDocs = {
+	sortable: "Enables drag-and-drop reordering of items via a drag handle.",
+	disabled: "Disables the array field and all of its item operations.",
+	actions: {
+		description: "Item action buttons. Accepts built-in operation strings and/or custom/toggle action objects. Set to false to disable all actions, including global defaults.",
+		type: `('up' | 'down' | 'copy' | 'edit' | 'remove' | CustomAction | ToggleAction | OperationOverride)[] | false`
+	},
+	transformActions: "Callback to transform the merged (global + local) action list per item render; receives the current actions and item context (index, record, array).",
+	description: "Description content rendered for the array field.",
+	onAdd: "Called with the new item index when an item is added.",
+	onRemove: "Called with the item index when an item is removed.",
+	onMoveUp: "Called with the item index when an item is moved up.",
+	onMoveDown: "Called with the item index when an item is moved down.",
+	onEdit: "Called with the item index when an item edit is triggered.",
+	onCopy: "Called with the item index when an item is copied."
+};
+/**
+* Shared note describing per-item styling. Every object-array component renders one
+* wrapper element per item and forwards that item's `x-component-props` onto it.
+*/
+const perItemStylingNote = "Per-item styling: set `items['x-component-props']` (e.g. `className`) to style/attribute each rendered item. The array node's own `x-component-props` targets the array component itself (list container / dialog / popover), not the individual items.";
+
+//#endregion
+export { commonArrayPropDocs, perItemStylingNote };

package/dist/components/array-common/index.cjs

@@ -5,6 +5,7 @@ const require_use_array_item_actions = require('./use-array-item-actions.cjs');
 const require_ArrayItemHeaderRow = require('./ArrayItemHeaderRow.cjs');
 const require_get_hidden_item_schema = require('./get-hidden-item-schema.cjs');
 const require_ItemWrapper = require('./ItemWrapper.cjs');
+const require_use_array_item_wrapper_props = require('./use-array-item-wrapper-props.cjs');
 const require_ListItem = require('./ListItem.cjs');
 const require_use_array_data_source = require('./use-array-data-source.cjs');
 const require_ArrayItemsList = require('./ArrayItemsList.cjs');

package/dist/components/array-common/index.js

@@ -5,6 +5,7 @@ import { useArrayItemActions } from "./use-array-item-actions.js";
 import { ArrayItemHeaderRow } from "./ArrayItemHeaderRow.js";
 import { getHiddenItemSchema } from "./get-hidden-item-schema.js";
 import { ItemWrapper } from "./ItemWrapper.js";
+import { useArrayItemWrapperProps } from "./use-array-item-wrapper-props.js";
 import { ListItem } from "./ListItem.js";
 import { useArrayDataSource } from "./use-array-data-source.js";
 import { ArrayItemsList } from "./ArrayItemsList.js";

package/dist/components/array-common/use-array-item-wrapper-props.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_get_x_component_props = require('../../utils/get-x-component-props.cjs');
+require('../../utils/index.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/array-common/use-array-item-wrapper-props.ts
+/**
+* Reads the array field's `items['x-component-props']` and returns them as HTML
+* attributes to spread onto every rendered item's wrapper element.
+*
+* This is the single source of truth for per-item styling/attributes across all
+* array components. It lets consumers style each array item from the item schema:
+*
+* ```ts
+* items: {
+*   type: 'object',
+*   'x-component-props': { className: 'border-primary' },
+* }
+* ```
+*
+* Note: the array node's own `x-component-props` still targets the array component
+* itself (list container / dialog / popover). Per-item props live on `items`.
+*/
+function useArrayItemWrapperProps() {
+	const schema = (0, __formily_react.useFieldSchema)();
+	return (0, react.useMemo)(() => {
+		return require_get_x_component_props.getXComponentProps(Array.isArray(schema?.items) ? schema?.items[0] ?? schema?.items : schema?.items);
+	}, [schema]);
+}
+
+//#endregion
+exports.useArrayItemWrapperProps = useArrayItemWrapperProps;

package/dist/components/array-common/use-array-item-wrapper-props.js

@@ -0,0 +1,32 @@
+import { getXComponentProps } from "../../utils/get-x-component-props.js";
+import "../../utils/index.js";
+import { useFieldSchema } from "@formily/react";
+import { useMemo } from "react";
+
+//#region src/components/array-common/use-array-item-wrapper-props.ts
+/**
+* Reads the array field's `items['x-component-props']` and returns them as HTML
+* attributes to spread onto every rendered item's wrapper element.
+*
+* This is the single source of truth for per-item styling/attributes across all
+* array components. It lets consumers style each array item from the item schema:
+*
+* ```ts
+* items: {
+*   type: 'object',
+*   'x-component-props': { className: 'border-primary' },
+* }
+* ```
+*
+* Note: the array node's own `x-component-props` still targets the array component
+* itself (list container / dialog / popover). Per-item props live on `items`.
+*/
+function useArrayItemWrapperProps() {
+	const schema = useFieldSchema();
+	return useMemo(() => {
+		return getXComponentProps(Array.isArray(schema?.items) ? schema?.items[0] ?? schema?.items : schema?.items);
+	}, [schema]);
+}
+
+//#endregion
+export { useArrayItemWrapperProps };

package/dist/components/array-dialog/mcp.js

@@ -0,0 +1,58 @@
+import { defineProps } from "../../mcp/src/utils.js";
+import { commonArrayPropDocs, perItemStylingNote } from "../array-common/array-mcp-props.js";
+
+//#region src/components/array-dialog/mcp.ts
+const meta = {
+	name: "ArrayDialog",
+	category: "Formily Arrays",
+	description: "A Formily array field that renders items as a compact list; each item is edited inside a modal dialog opened from its row.",
+	htmlElement: "div",
+	props: defineProps({
+		...commonArrayPropDocs,
+		autoSave: {
+			description: "When true, edits commit to the array live and the Save/Cancel buttons are hidden. When false (default), edits only commit on Save. Falls back to the form-level `settings.dialog.autoSave`.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		dialogProps: "HTML attributes forwarded to the edit dialog content (Radix DialogContent) — e.g. `className` to size/scroll the dialog, `onInteractOutside`, `onEscapeKeyDown`."
+	}),
+	examples: [{
+		title: "Edit items in a dialog",
+		code: `{
+  type: 'array',
+  'x-component': 'ArrayDialog',
+  items: {
+    type: 'object',
+    properties: {
+      name: { type: 'string', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+    },
+  },
+  properties: {
+    addition: { type: 'void', title: 'Add', 'x-component': 'ArrayDialog.Addition' },
+  },
+}`
+	}, {
+		title: "Scrollable dialog",
+		code: `'x-component-props': {
+  dialogProps: { className: 'max-h-[80vh] overflow-y-auto' },
+}`
+	}],
+	notes: [perItemStylingNote, "The list container is styled via the array node `x-component-props.className`; the dialog is styled via `x-component-props.dialogProps.className`."],
+	keywords: [
+		"formily",
+		"array",
+		"dialog",
+		"modal",
+		"list",
+		"repeater"
+	],
+	related: [
+		"ArrayPopover",
+		"ArrayCards",
+		"ArrayCollapse",
+		"ArrayInline"
+	]
+};
+
+//#endregion
+export { meta };