dune-react 0.0.8 → 0.0.10

package/dist/components/puck-base/core/styles.js

@@ -0,0 +1,286 @@
+const paddingLevel = {
+  type: "select",
+  options: [
+    { label: "none", value: "none" },
+    { label: "small", value: "small" },
+    { label: "medium", value: "medium" },
+    { label: "large", value: "large" }
+  ],
+  ai: {
+    instructions: "Never select none as an option"
+  }
+};
+const padding = {
+  type: "object",
+  objectFields: {
+    top: paddingLevel,
+    bottom: paddingLevel
+  },
+  ai: {
+    exclude: true
+  }
+};
+const paddingDefaults = {
+  top: "medium",
+  bottom: "medium"
+};
+const sectionStyle = {
+  type: "select",
+  label: "Section Style",
+  options: [
+    { label: "Default", value: "default" },
+    { label: "Dark", value: "dark" },
+    { label: "Muted", value: "muted" },
+    { label: "Inverted", value: "inverted" },
+    { label: "Custom", value: "custom" }
+  ],
+  ai: {
+    instructions: "Match the section's background tone: use 'dark' for dark/black backgrounds, 'muted' for gray/subtle backgrounds, 'inverted' for full contrast reversal. Default for standard light backgrounds."
+  }
+};
+const sectionOverlay = {
+  type: "select",
+  label: "Overlay",
+  options: [
+    { label: "None", value: "none" },
+    { label: "Gradient Top", value: "gradient-top" },
+    { label: "Gradient Bottom", value: "gradient-bottom" },
+    { label: "Noise", value: "noise" }
+  ],
+  ai: {
+    instructions: "Use gradient overlays when the section has a background image that needs text contrast. Use noise for subtle texture."
+  }
+};
+const backgroundColor = {
+  type: "text",
+  label: "Background Color",
+  ai: {
+    instructions: "Set a custom background color in oklch format (e.g. 'oklch(0.2 0.05 260)'). Only use when sectionStyle is 'custom'."
+  }
+};
+const backgroundImage = {
+  type: "text",
+  label: "Background Image URL",
+  ai: {
+    instructions: "URL for a full-width background image behind the section.",
+    stream: false
+  }
+};
+const sectionBaseStyleFields = {
+  sectionStyle,
+  backgroundColor,
+  padding
+};
+const sectionBaseStyleDefaults = {
+  padding: paddingDefaults
+};
+function createStylesField(extraFields) {
+  return {
+    type: "object",
+    label: "Styles",
+    objectFields: {
+      ...sectionBaseStyleFields,
+      ...extraFields
+    }
+  };
+}
+function createStylesDefaults(extraDefaults) {
+  return {
+    ...sectionBaseStyleDefaults,
+    ...extraDefaults
+  };
+}
+const bannerExtraFields = {
+  textColor: {
+    type: "text",
+    label: "Text Color"
+  },
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  size: {
+    type: "radio",
+    options: [
+      { label: "Small", value: "small" },
+      { label: "Default", value: "default" }
+    ]
+  }
+};
+const bannerStylesField = createStylesField(bannerExtraFields);
+const bannerStylesDefaults = createStylesDefaults();
+const heroExtraFields = {
+  backgroundImage,
+  overlay: sectionOverlay,
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  minHeight: {
+    type: "select",
+    label: "Min Height",
+    options: [
+      { label: "Medium", value: "medium" },
+      { label: "Large", value: "large" },
+      { label: "Full", value: "full" }
+    ]
+  }
+};
+const heroStylesField = createStylesField(heroExtraFields);
+const heroStylesDefaults = createStylesDefaults();
+const ctaExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Contained", value: "contained" },
+      { label: "Full Bleed", value: "full-bleed" }
+    ]
+  }
+};
+createStylesField(ctaExtraFields);
+createStylesDefaults();
+const featureExtraFields = {
+  columns: {
+    type: "select",
+    label: "Columns",
+    options: [
+      { label: "2", value: 2 },
+      { label: "3", value: 3 },
+      { label: "4", value: 4 }
+    ]
+  }
+};
+createStylesField(featureExtraFields);
+createStylesDefaults();
+const faqExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Single Column", value: "single-col" },
+      { label: "Two Columns", value: "two-col" }
+    ]
+  }
+};
+createStylesField(faqExtraFields);
+createStylesDefaults();
+const galleryExtraFields = {
+  gap: {
+    type: "select",
+    label: "Gap",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" }
+    ]
+  }
+};
+createStylesField(galleryExtraFields);
+createStylesDefaults();
+const testimonialExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Cards", value: "cards" },
+      { label: "Quote", value: "quote" }
+    ]
+  }
+};
+createStylesField(
+  testimonialExtraFields
+);
+createStylesDefaults();
+const showcaseExtraFields = {
+  layout: {
+    type: "select",
+    label: "Layout",
+    options: [
+      { label: "Horizontal", value: "horizontal" },
+      { label: "Vertical", value: "vertical" },
+      { label: "Numbered", value: "numbered" }
+    ]
+  }
+};
+createStylesField(showcaseExtraFields);
+createStylesDefaults();
+const textExtraFields = {
+  maxWidth: {
+    type: "select",
+    label: "Max Width",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" },
+      { label: "Full", value: "full" }
+    ]
+  }
+};
+createStylesField(textExtraFields);
+createStylesDefaults();
+const contactExtraFields = {
+  panelStyle: {
+    type: "select",
+    label: "Panel Style",
+    options: [
+      { label: "Default", value: "default" },
+      { label: "Card", value: "card" },
+      { label: "Flat", value: "flat" }
+    ]
+  }
+};
+createStylesField(contactExtraFields);
+createStylesDefaults();
+const locationExtraFields = {
+  mapHeight: {
+    type: "number",
+    label: "Map Height",
+    min: 200,
+    max: 800
+  },
+  mapFilter: {
+    type: "text",
+    label: "Map Filter (CSS)"
+  },
+  mapTintColor: {
+    type: "text",
+    label: "Map Tint Color"
+  }
+};
+createStylesField(locationExtraFields);
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+export {
+  backgroundColor,
+  backgroundImage,
+  bannerStylesDefaults,
+  bannerStylesField,
+  createStylesDefaults,
+  createStylesField,
+  heroStylesDefaults,
+  heroStylesField,
+  padding,
+  paddingDefaults,
+  paddingLevel,
+  sectionBaseStyleDefaults,
+  sectionBaseStyleFields,
+  sectionOverlay,
+  sectionStyle
+};

package/dist/components/puck-base/core/types.d.ts

@@ -5,12 +5,12 @@ export type Feature = {
     name: string;
     description?: string;
 };
-export type ActionType = "page" | "external" | "email" | "phone" | "section" | "download" | "none";
+export type ActionType = "page" | "external" | "scroll" | "email" | "phone" | "section" | "download" | "none";
 export type Action = {
     type: ActionType;
     pageUrl?: string;
     externalUrl?: string;
-    openInNewTab?: "true" | "false";
+    openInNewTab?: string;
     email?: string;
     subject?: string;
     phone?: string;

package/dist/components/puck-base/core/with-editable.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import { type ComponentType } from "react";
 interface EditableConfig {
     type: string;
     fields: Record<string, any>;
@@ -11,6 +11,9 @@ interface EditableConfig {
  * 2. 编辑模式下渲染原组件 + hover overlay
  * 3. 点击打开 Dialog，传递 onSave 回调
  * 4. 保存时用 dispatch 更新 Puck data
+ *
+ * Puck hooks (usePuckDispatch / usePuckAppState) 仅在 EditableInner 中调用，
+ * 确保非编辑模式（如 Storybook / 前台渲染）不会触发 "usePuck must be used inside <Puck>" 错误。
  */
 export declare function withEditable<P extends Record<string, any>>(Component: ComponentType<P>, config: EditableConfig): (props: P & {
     onEdit?: (props: P, onSave: (updated: Partial<P>) => void) => void;

package/dist/components/puck-base/core/with-editable.js

@@ -8,20 +8,19 @@ import { useEditorContext } from "../editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function withEditable(Component, config) {
-  return function EditableComponent(props) {
-    const { isEditor: isEditorMode } = useEditorContext();
+  function EditableInner(props) {
     const dispatch = usePuckDispatch();
     const appState = usePuckAppState();
     const wrapperRef = useRef(null);
     const isBlock = BLOCK_LEVEL_TYPES.has(config.type);
     useEffect(() => {
-      if (!isEditorMode || !wrapperRef.current) return;
+      if (!wrapperRef.current) return;
       return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
-    }, [isEditorMode]);
+    }, []);
     const location = useMemo(() => {
-      if (!isEditorMode || !(appState == null ? void 0 : appState.data)) return null;
+      if (!(appState == null ? void 0 : appState.data)) return null;
       return findPropsLocation(appState.data, props, config.fields);
-    }, [isEditorMode, appState == null ? void 0 : appState.data, props]);
+    }, [appState == null ? void 0 : appState.data, props]);
     const handleSave = useCallback(
       (updated) => {
         if (!location) return;
@@ -52,34 +51,55 @@ function withEditable(Component, config) {
       },
       [props, handleSave]
     );
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref: wrapperRef,
+        className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex",
+        children: [
+          /* @__PURE__ */ jsx(Component, { ...props }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: handleEdit,
+              className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+              children: /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 shadow-md backdrop-blur-sm", children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-white" }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return function EditableComponent(props) {
+    const { isEditor: isEditorMode } = useEditorContext();
     if (!isEditorMode) {
       return /* @__PURE__ */ jsx(Component, { ...props });
     }
-    return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex", children: [
-      /* @__PURE__ */ jsx(Component, { ...props }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          onClick: handleEdit,
-          className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
-          children: /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 shadow-md backdrop-blur-sm", children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-white" }) })
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx(EditableInner, { ...props });
   };
 }
 function findPropsLocation(data, targetProps, fields) {
   if (!data) return null;
   const content = Array.isArray(data.content) ? data.content : [];
   for (const component of content) {
-    const result = searchInObject(component.props, targetProps, fields, component.props.id);
+    const result = searchInObject(
+      component.props,
+      targetProps,
+      fields,
+      component.props.id
+    );
     if (result) return result;
   }
   const zones = data.zones && typeof data.zones === "object" ? data.zones : {};
   for (const zoneKey of Object.keys(zones)) {
     const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
     for (const component of zoneComponents) {
-      const result = searchInObject(component.props, targetProps, fields, component.props.id);
+      const result = searchInObject(
+        component.props,
+        targetProps,
+        fields,
+        component.props.id
+      );
       if (result) return result;
     }
   }
@@ -117,18 +137,22 @@ function searchInObject(obj, targetProps, fields, componentId, currentPath = "")
 }
 function findComponentById(data, componentId) {
   const content = Array.isArray(data == null ? void 0 : data.content) ? data.content : [];
-  const contentMatch = content.find((component) => {
-    var _a;
-    return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
-  });
+  const contentMatch = content.find(
+    (component) => {
+      var _a;
+      return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+    }
+  );
   if (contentMatch) return contentMatch;
   const zones = (data == null ? void 0 : data.zones) && typeof data.zones === "object" ? data.zones : {};
   for (const zoneKey of Object.keys(zones)) {
     const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
-    const zoneMatch = zoneComponents.find((component) => {
-      var _a;
-      return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
-    });
+    const zoneMatch = zoneComponents.find(
+      (component) => {
+        var _a;
+        return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+      }
+    );
     if (zoneMatch) return zoneMatch;
   }
   return null;

package/dist/components/puck-base/editor-context.d.ts

@@ -1,4 +1,10 @@
 import { type RefObject } from "react";
+export type SitePage = {
+    /** 页面 slug，如 "about"、"pricing"，用作路由值 */
+    slug: string;
+    /** 页面显示名，如 "关于我们"、"定价" */
+    label: string;
+};
 type EditorContextValue = {
     openFieldsPanel: (componentId: string, componentType: string) => void;
     openAddSection: (index: number, zone: string) => void;
@@ -9,6 +15,8 @@ type EditorContextValue = {
     siteId?: string;
     /** 后台 API 域名，如 https://api.example.com */
     domain?: string;
+    /** 站内可选页面列表，用于 url 字段快捷选择 */
+    sitePages?: SitePage[];
 };
 export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
 export declare const useEditorContext: () => EditorContextValue;

package/dist/components/puck-base/fields/auto-field.d.ts

@@ -1,2 +1,3 @@
 import type { AutoFieldProps } from "./types";
+/** 按 field.type 分发控件；名为 url 且类型为 text 时固定使用 UrlField（链接 + 站内路由） */
 export declare const AutoField: import("react").NamedExoticComponent<AutoFieldProps>;

package/dist/components/puck-base/fields/auto-field.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { memo, useCallback, useState, useRef, useMemo, useEffect } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Textarea } from "../../shadcn/textarea.js";
 import { Label } from "../../shadcn/label.js";
@@ -8,7 +8,8 @@ import { Button } from "../../shadcn/button.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../shadcn/select.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../../shadcn/popover.js";
 import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group.js";
-import { ChevronDownIcon, CheckIcon } from "lucide-react";
+import { LinkIcon, XIcon, ClipboardIcon, GlobeIcon, ChevronDownIcon, CheckIcon } from "lucide-react";
+import { useEditorContext } from "../editor-context.js";
 const LARGE_SELECT_THRESHOLD = 200;
 const VIRTUAL_ITEM_HEIGHT = 32;
 const VIRTUAL_VIEWPORT_HEIGHT = 256;
@@ -159,62 +160,131 @@ const VirtualizedSelectField = memo(function VirtualizedSelectField2({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          className: "w-(--radix-popover-trigger-width) p-2",
-          children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                placeholder: "Search options...",
-                className: "mb-2"
-              }
-            ),
-            /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search options...",
+            className: "mb-2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: viewportRef,
+            className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
+            style: {
+              height: VIRTUAL_VIEWPORT_HEIGHT,
+              WebkitOverflowScrolling: "touch"
+            },
+            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
               "div",
               {
-                ref: viewportRef,
-                className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
                 style: {
-                  height: VIRTUAL_VIEWPORT_HEIGHT,
-                  WebkitOverflowScrolling: "touch"
+                  position: "absolute",
+                  top: startIndex * VIRTUAL_ITEM_HEIGHT,
+                  left: 0,
+                  right: 0
                 },
-                onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: startIndex * VIRTUAL_ITEM_HEIGHT,
-                      left: 0,
-                      right: 0
+                children: visibleOptions.map((opt) => {
+                  const isSelected = opt.stringValue === selectedString;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
+                      onClick: () => handleSelect(opt.stringValue),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+                        isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
+                      ]
                     },
-                    children: visibleOptions.map((opt) => {
-                      const isSelected = opt.stringValue === selectedString;
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
-                          onClick: () => handleSelect(opt.stringValue),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
-                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
-                          ]
-                        },
-                        opt.stringValue
-                      );
-                    })
-                  }
-                ) })
+                    opt.stringValue
+                  );
+                })
               }
-            )
+            ) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+const UrlField = memo(function UrlField2({
+  label,
+  value,
+  onChange,
+  sitePages
+}) {
+  const currentValue = value ?? "";
+  const selectedSlug = currentValue.startsWith("/") ? currentValue.slice(1) : null;
+  const handlePaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) onChange(text.trim());
+    } catch {
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-3", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border px-3 py-2", children: [
+        /* @__PURE__ */ jsx(LinkIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+            placeholder: "https:// or /page-slug",
+            value: currentValue,
+            onChange: (e) => onChange(e.target.value)
+          }
+        ),
+        currentValue && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: () => onChange(""),
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "shrink-0 gap-1.5",
+          onClick: handlePaste,
+          children: [
+            /* @__PURE__ */ jsx(ClipboardIcon, { className: "size-3.5" }),
+            "Paste"
           ]
         }
       )
+    ] }),
+    sitePages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Site pages" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: sitePages.map((page) => {
+        const isSelected = selectedSlug === page.slug;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-accent"}`,
+            onClick: () => onChange(isSelected ? "" : `${page.slug}`),
+            children: [
+              /* @__PURE__ */ jsx(GlobeIcon, { className: "size-3" }),
+              page.label
+            ]
+          },
+          page.slug
+        );
+      }) })
     ] })
   ] });
 });
@@ -226,6 +296,18 @@ const AutoField = memo(function AutoField2({
 }) {
   var _a, _b;
   const label = field.label || name;
+  const { sitePages } = useEditorContext();
+  if (name === "url" && field.type === "text") {
+    return /* @__PURE__ */ jsx(
+      UrlField,
+      {
+        label,
+        value,
+        onChange,
+        sitePages: sitePages ?? []
+      }
+    );
+  }
   switch (field.type) {
     case "text":
       return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [