@webiny/app-admin 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/features/formModel/FormModelFactory.d.ts

@@ -0,0 +1,11 @@
+import { type IFormModelFactory, type IFormModelConfig, type IFormModel, type IFieldBuilderRegistry, type IRuleEvaluator } from "./abstractions.js";
+declare class FormModelFactoryImpl implements IFormModelFactory {
+    private evaluators;
+    private registry;
+    constructor(evaluators: IRuleEvaluator[], registry: IFieldBuilderRegistry);
+    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T>;
+}
+export declare const FormModelFactory: typeof FormModelFactoryImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IFormModelFactory>;
+};
+export {};

package/features/formModel/FormModelFactory.js

@@ -0,0 +1,23 @@
+import { FormModel } from "./FormModel.js";
+import { FormModelFactory as Abstraction, FieldBuilderRegistry, RuleEvaluator } from "./abstractions.js";
+class FormModelFactoryImpl {
+  constructor(evaluators, registry) {
+    this.evaluators = evaluators;
+    this.registry = registry;
+  }
+  create(config) {
+    const provided = config.ruleEvaluators ?? [];
+    return new FormModel({
+      ...config,
+      ruleEvaluators: [...this.evaluators, ...provided]
+    }, this.registry);
+  }
+}
+export const FormModelFactory = Abstraction.createImplementation({
+  implementation: FormModelFactoryImpl,
+  dependencies: [[RuleEvaluator, {
+    multiple: true
+  }], FieldBuilderRegistry]
+});
+
+//# sourceMappingURL=FormModelFactory.js.map

package/features/formModel/FormModelFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormModel","FormModelFactory","Abstraction","FieldBuilderRegistry","RuleEvaluator","FormModelFactoryImpl","constructor","evaluators","registry","create","config","provided","ruleEvaluators","createImplementation","implementation","dependencies","multiple"],"sources":["FormModelFactory.ts"],"sourcesContent":["import { FormModel } from \"./FormModel.js\";\nimport {\n    FormModelFactory as Abstraction,\n    FieldBuilderRegistry,\n    RuleEvaluator,\n    type IFormModelFactory,\n    type IFormModelConfig,\n    type IFormModel,\n    type IFieldBuilderRegistry,\n    type IRuleEvaluator\n} from \"./abstractions.js\";\n\nclass FormModelFactoryImpl implements IFormModelFactory {\n    constructor(\n        private evaluators: IRuleEvaluator[],\n        private registry: IFieldBuilderRegistry\n    ) {}\n\n    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T> {\n        const provided = config.ruleEvaluators ?? [];\n        return new FormModel(\n            {\n                ...config,\n                ruleEvaluators: [...this.evaluators, ...provided]\n            },\n            this.registry\n        ) as IFormModel<T>;\n    }\n}\n\nexport const FormModelFactory = Abstraction.createImplementation({\n    implementation: FormModelFactoryImpl,\n    dependencies: [[RuleEvaluator, { multiple: true }], FieldBuilderRegistry]\n});\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SACIC,gBAAgB,IAAIC,WAAW,EAC/BC,oBAAoB,EACpBC,aAAa;AAQjB,MAAMC,oBAAoB,CAA8B;EACpDC,WAAWA,CACCC,UAA4B,EAC5BC,QAA+B,EACzC;IAAA,KAFUD,UAA4B,GAA5BA,UAA4B;IAAA,KAC5BC,QAA+B,GAA/BA,QAA+B;EACxC;EAEHC,MAAMA,CAA0BC,MAAwB,EAAiB;IACrE,MAAMC,QAAQ,GAAGD,MAAM,CAACE,cAAc,IAAI,EAAE;IAC5C,OAAO,IAAIZ,SAAS,CAChB;MACI,GAAGU,MAAM;MACTE,cAAc,EAAE,CAAC,GAAG,IAAI,CAACL,UAAU,EAAE,GAAGI,QAAQ;IACpD,CAAC,EACD,IAAI,CAACH,QACT,CAAC;EACL;AACJ;AAEA,OAAO,MAAMP,gBAAgB,GAAGC,WAAW,CAACW,oBAAoB,CAAC;EAC7DC,cAAc,EAAET,oBAAoB;EACpCU,YAAY,EAAE,CAAC,CAACX,aAAa,EAAE;IAAEY,QAAQ,EAAE;EAAK,CAAC,CAAC,EAAEb,oBAAoB;AAC5E,CAAC,CAAC","ignoreList":[]}

package/features/formModel/FormView.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import type { IFormVM, LayoutNodeVM, IFieldVM, ITabsNodeVM } from "./abstractions.js";
+import type { Icon } from "../../components/IconPicker/types.js";
+export declare function renderTabIcon(icon: Icon | undefined): React.ReactElement | undefined;
+/**
+ * A field renderer component receives a FieldVM and renders the appropriate UI.
+ */
+export type FieldRendererComponent = React.ComponentType<{
+    field: IFieldVM;
+}>;
+/**
+ * Map of renderer keys to React components for fields.
+ * Lookup order: `{type}:{renderer}` → `{type}`.
+ */
+export type FieldRenderers = Record<string, FieldRendererComponent>;
+/**
+ * Map of renderer keys to React components for layout nodes.
+ */
+export type LayoutRenderers = Record<string, React.ComponentType<any>>;
+interface FormViewRenderers {
+    fieldRenderers: FieldRenderers;
+    layoutRenderers: LayoutRenderers;
+}
+declare const useFormViewRenderers: () => FormViewRenderers;
+export { useFormViewRenderers };
+interface FormViewProps {
+    name: string;
+    form: IFormVM;
+    renderers?: FieldRenderers;
+    layoutRenderers?: LayoutRenderers;
+}
+/**
+ * Generic form view that walks layout nodes and renders fields.
+ * This component is stateless — it reads from the FormVM and delegates to renderers.
+ */
+export declare const FormView: (({ name, form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const LayoutNodeRenderer: (({ node }: {
+    node: LayoutNodeVM;
+}) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export interface TabsNodeRendererProps {
+    node: ITabsNodeVM;
+}

package/features/formModel/FormView.js

@@ -0,0 +1,234 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { Grid, IconButton, Tabs, Tooltip, useToast } from "@webiny/admin-ui";
+import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as PasteIcon } from "@webiny/icons/content_paste.svg";
+import { DevToolsSection } from "@webiny/react-properties";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DeveloperMode } from "../../components/DeveloperMode/DeveloperMode.js";
+import { useFieldRenderers } from "./useFieldRenderers.js";
+import { useLayoutRenderers } from "./useLayoutRenderers.js";
+export function renderTabIcon(icon) {
+  if (!icon) {
+    return undefined;
+  }
+  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: icon.name.split("/")
+  });
+}
+
+/**
+ * A field renderer component receives a FieldVM and renders the appropriate UI.
+ */
+
+/**
+ * Map of renderer keys to React components for fields.
+ * Lookup order: `{type}:{renderer}` → `{type}`.
+ */
+
+/**
+ * Map of renderer keys to React components for layout nodes.
+ */
+
+const FormViewRenderersContext = /*#__PURE__*/createContext(null);
+const useFormViewRenderers = () => {
+  const ctx = useContext(FormViewRenderersContext);
+  if (!ctx) {
+    throw new Error("useFormViewRenderers must be used within a FormView.");
+  }
+  return ctx;
+};
+export { useFormViewRenderers };
+/**
+ * Generic form view that walks layout nodes and renders fields.
+ * This component is stateless — it reads from the FormVM and delegates to renderers.
+ */
+export const FormView = observer(({
+  name,
+  form,
+  renderers,
+  layoutRenderers
+}) => {
+  const defaultFieldRenderers = useFieldRenderers();
+  const defaultLayoutRenderers = useLayoutRenderers();
+  const value = useMemo(() => ({
+    fieldRenderers: renderers ?? defaultFieldRenderers,
+    layoutRenderers: layoutRenderers ?? defaultLayoutRenderers
+  }), [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]);
+  return /*#__PURE__*/React.createElement(FormViewRenderersContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(DevToolsSection, {
+    name: name,
+    group: "Forms",
+    data: form.getData(),
+    views: "raw"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-full relative flex flex-col gap-4"
+  }, /*#__PURE__*/React.createElement(DevModeTools, {
+    form: form
+  }), form.layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+    key: index,
+    node: node
+  }))));
+});
+export const LayoutNodeRenderer = observer(({
+  node
+}) => {
+  switch (node.type) {
+    case "row":
+      return /*#__PURE__*/React.createElement(RowNodeRenderer, {
+        node: node
+      });
+    case "separator":
+      return /*#__PURE__*/React.createElement(SeparatorNodeRenderer, null);
+    case "tabs":
+      return /*#__PURE__*/React.createElement(TabsNodeRenderer, {
+        node: node
+      });
+    case "element":
+      return /*#__PURE__*/React.createElement(ElementNodeRenderer, {
+        node: node
+      });
+    default:
+      return null;
+  }
+});
+const RowNodeRenderer = observer(({
+  node
+}) => {
+  const {
+    fieldRenderers
+  } = useFormViewRenderers();
+  return /*#__PURE__*/React.createElement(Grid, null, node.fields.map(field => {
+    const span = Math.floor(12 / node.fields.length);
+    return /*#__PURE__*/React.createElement(Grid.Column, {
+      key: field.name,
+      span: span
+    }, /*#__PURE__*/React.createElement(FieldRenderer, {
+      field: field,
+      renderers: fieldRenderers
+    }));
+  }));
+});
+const FieldRenderer = observer(({
+  field,
+  renderers
+}) => {
+  const Renderer = field.renderer ? renderers[field.renderer] : undefined;
+  if (!Renderer) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[FormView] No renderer found for field "${field.name}" (renderer: "${field.renderer || "none"}").`);
+    }
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Renderer, {
+    field: field
+  });
+});
+const SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {
+  return /*#__PURE__*/React.createElement("hr", {
+    className: "border-neutral-dimmed my-2"
+  });
+});
+const TabsNodeRenderer = observer(({
+  node
+}) => {
+  const {
+    layoutRenderers
+  } = useFormViewRenderers();
+  if (node.renderer) {
+    const CustomRenderer = layoutRenderers[node.renderer];
+    if (CustomRenderer) {
+      return /*#__PURE__*/React.createElement(CustomRenderer, {
+        node: node
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Tabs, {
+    value: node.activeTabId,
+    onValueChange: id => node.setActiveTab(id),
+    tabs: node.tabs.map(tab => /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: tab.id,
+      value: tab.id,
+      icon: renderTabIcon(tab.icon),
+      trigger: /*#__PURE__*/React.createElement(React.Fragment, null, tab.label, tab.hasErrors && /*#__PURE__*/React.createElement("span", {
+        className: "ml-1 text-destructive-default text-xs"
+      }, "*")),
+      disabled: tab.disabled,
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col gap-4 mt-md"
+      }, tab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+        key: index,
+        node: childNode
+      })))
+    }))
+  });
+});
+const ElementNodeRenderer = observer(({
+  node
+}) => {
+  const {
+    fieldRenderers
+  } = useFormViewRenderers();
+  const Renderer = fieldRenderers[`element:${node.renderer}`];
+  if (!Renderer) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[FormView] No renderer found for element "${node.renderer}".`);
+    }
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Renderer, {
+    field: {
+      ...node.props
+    }
+  });
+});
+const DevModeTools = ({
+  form
+}) => {
+  const toast = useToast();
+  const handleCopy = () => {
+    const data = form.getData();
+    navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+    toast.showSuccessToast({
+      title: "Form data copied to clipboard."
+    });
+  };
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const data = JSON.parse(text);
+      form.setData(data);
+      toast.showSuccessToast({
+        title: "Form data imported from clipboard."
+      });
+    } catch {
+      toast.showWarningToast({
+        title: "Failed to import. Make sure clipboard contains valid JSON."
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(DeveloperMode, null, /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 right-0 w-[200px] h-[80px] z-10 group/devtools"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 right-0 flex gap-xs opacity-0 group-hover/devtools:opacity-100 transition-opacity"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Copy form data to clipboard",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      icon: /*#__PURE__*/React.createElement(CopyIcon, null),
+      onClick: handleCopy,
+      size: "sm"
+    })
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Paste form data from clipboard",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      icon: /*#__PURE__*/React.createElement(PasteIcon, null),
+      onClick: handlePaste,
+      size: "sm"
+    })
+  }))));
+};
+
+//# sourceMappingURL=FormView.js.map

package/features/formModel/FormView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","observer","Grid","IconButton","Tabs","Tooltip","useToast","ReactComponent","CopyIcon","PasteIcon","DevToolsSection","FontAwesomeIcon","DeveloperMode","useFieldRenderers","useLayoutRenderers","renderTabIcon","icon","undefined","createElement","name","split","FormViewRenderersContext","useFormViewRenderers","ctx","Error","FormView","form","renderers","layoutRenderers","defaultFieldRenderers","defaultLayoutRenderers","value","fieldRenderers","Provider","group","data","getData","views","className","DevModeTools","layout","map","node","index","LayoutNodeRenderer","key","type","RowNodeRenderer","SeparatorNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fields","field","span","Math","floor","length","Column","FieldRenderer","Renderer","renderer","process","env","NODE_ENV","console","warn","CustomRenderer","activeTabId","onValueChange","id","setActiveTab","tabs","tab","Tab","trigger","Fragment","label","hasErrors","disabled","content","childNode","props","toast","handleCopy","navigator","clipboard","writeText","JSON","stringify","showSuccessToast","title","handlePaste","text","readText","parse","setData","showWarningToast","variant","onClick","size"],"sources":["FormView.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Grid, IconButton, Tabs, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { DevToolsSection } from \"@webiny/react-properties\";\nimport type {\n    IFormVM,\n    LayoutNodeVM,\n    IRowNodeVM,\n    IFieldVM,\n    ITabsNodeVM,\n    IElementNodeVM\n} from \"./abstractions.js\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { DeveloperMode } from \"~/components/DeveloperMode/DeveloperMode.js\";\nimport { useFieldRenderers } from \"~/features/formModel/useFieldRenderers.js\";\nimport { useLayoutRenderers } from \"~/features/formModel/useLayoutRenderers.js\";\n\nexport function renderTabIcon(icon: Icon | undefined): React.ReactElement | undefined {\n    if (!icon) {\n        return undefined;\n    }\n    return <FontAwesomeIcon icon={icon.name.split(\"/\") as IconProp} />;\n}\n\n/**\n * A field renderer component receives a FieldVM and renders the appropriate UI.\n */\nexport type FieldRendererComponent = React.ComponentType<{ field: IFieldVM }>;\n\n/**\n * Map of renderer keys to React components for fields.\n * Lookup order: `{type}:{renderer}` → `{type}`.\n */\nexport type FieldRenderers = Record<string, FieldRendererComponent>;\n\n/**\n * Map of renderer keys to React components for layout nodes.\n */\nexport type LayoutRenderers = Record<string, React.ComponentType<any>>;\n\ninterface FormViewRenderers {\n    fieldRenderers: FieldRenderers;\n    layoutRenderers: LayoutRenderers;\n}\n\nconst FormViewRenderersContext = createContext<FormViewRenderers | null>(null);\n\nconst useFormViewRenderers = (): FormViewRenderers => {\n    const ctx = useContext(FormViewRenderersContext);\n    if (!ctx) {\n        throw new Error(\"useFormViewRenderers must be used within a FormView.\");\n    }\n    return ctx;\n};\n\nexport { useFormViewRenderers };\n\ninterface FormViewProps {\n    name: string;\n    form: IFormVM;\n    renderers?: FieldRenderers;\n    layoutRenderers?: LayoutRenderers;\n}\n\n/**\n * Generic form view that walks layout nodes and renders fields.\n * This component is stateless — it reads from the FormVM and delegates to renderers.\n */\nexport const FormView = observer(({ name, form, renderers, layoutRenderers }: FormViewProps) => {\n    const defaultFieldRenderers = useFieldRenderers();\n    const defaultLayoutRenderers = useLayoutRenderers();\n\n    const value = useMemo(\n        () => ({\n            fieldRenderers: renderers ?? defaultFieldRenderers,\n            layoutRenderers: layoutRenderers ?? defaultLayoutRenderers\n        }),\n        [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]\n    );\n\n    return (\n        <FormViewRenderersContext.Provider value={value}>\n            <DevToolsSection name={name} group=\"Forms\" data={form.getData()} views={\"raw\"} />\n            <div className=\"w-full relative flex flex-col gap-4\">\n                <DevModeTools form={form} />\n                {form.layout.map((node, index) => (\n                    <LayoutNodeRenderer key={index} node={node} />\n                ))}\n            </div>\n        </FormViewRenderersContext.Provider>\n    );\n});\n\nexport const LayoutNodeRenderer = observer(({ node }: { node: LayoutNodeVM }) => {\n    switch (node.type) {\n        case \"row\":\n            return <RowNodeRenderer node={node} />;\n        case \"separator\":\n            return <SeparatorNodeRenderer />;\n        case \"tabs\":\n            return <TabsNodeRenderer node={node} />;\n        case \"element\":\n            return <ElementNodeRenderer node={node} />;\n        default:\n            return null;\n    }\n});\n\nconst RowNodeRenderer = observer(({ node }: { node: IRowNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    return (\n        <Grid>\n            {node.fields.map(field => {\n                const span = Math.floor(12 / node.fields.length) as React.ComponentProps<\n                    typeof Grid.Column\n                >[\"span\"];\n\n                return (\n                    <Grid.Column key={field.name} span={span}>\n                        <FieldRenderer field={field} renderers={fieldRenderers} />\n                    </Grid.Column>\n                );\n            })}\n        </Grid>\n    );\n});\n\ninterface FieldRendererProps {\n    field: IFieldVM;\n    renderers: FieldRenderers;\n}\n\nconst FieldRenderer = observer(({ field, renderers }: FieldRendererProps) => {\n    const Renderer = field.renderer ? renderers[field.renderer] : undefined;\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(\n                `[FormView] No renderer found for field \"${field.name}\" (renderer: \"${field.renderer || \"none\"}\").`\n            );\n        }\n        return null;\n    }\n\n    return <Renderer field={field} />;\n});\n\nconst SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {\n    return <hr className=\"border-neutral-dimmed my-2\" />;\n});\n\nexport interface TabsNodeRendererProps {\n    node: ITabsNodeVM;\n}\n\nconst TabsNodeRenderer = observer(({ node }: TabsNodeRendererProps) => {\n    const { layoutRenderers } = useFormViewRenderers();\n\n    if (node.renderer) {\n        const CustomRenderer = layoutRenderers[node.renderer];\n        if (CustomRenderer) {\n            return <CustomRenderer node={node} />;\n        }\n    }\n\n    return (\n        <Tabs\n            value={node.activeTabId}\n            onValueChange={id => node.setActiveTab(id)}\n            tabs={node.tabs.map(tab => (\n                <Tabs.Tab\n                    key={tab.id}\n                    value={tab.id}\n                    icon={renderTabIcon(tab.icon)}\n                    trigger={\n                        <>\n                            {tab.label}\n                            {tab.hasErrors && (\n                                <span className=\"ml-1 text-destructive-default text-xs\">*</span>\n                            )}\n                        </>\n                    }\n                    disabled={tab.disabled}\n                    content={\n                        <div className={\"flex flex-col gap-4 mt-md\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n\nconst ElementNodeRenderer = observer(({ node }: { node: IElementNodeVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n    const Renderer = fieldRenderers[`element:${node.renderer}`];\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(`[FormView] No renderer found for element \"${node.renderer}\".`);\n        }\n        return null;\n    }\n\n    return <Renderer field={{ ...node.props } as any} />;\n});\n\ninterface DevModelToolsProps {\n    form: IFormVM;\n}\n\nconst DevModeTools = ({ form }: DevModelToolsProps) => {\n    const toast = useToast();\n\n    const handleCopy = () => {\n        const data = form.getData();\n        navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n        toast.showSuccessToast({ title: \"Form data copied to clipboard.\" });\n    };\n\n    const handlePaste = async () => {\n        try {\n            const text = await navigator.clipboard.readText();\n            const data = JSON.parse(text);\n            form.setData(data);\n            toast.showSuccessToast({ title: \"Form data imported from clipboard.\" });\n        } catch {\n            toast.showWarningToast({\n                title: \"Failed to import. Make sure clipboard contains valid JSON.\"\n            });\n        }\n    };\n    return (\n        <DeveloperMode>\n            <div className=\"absolute top-0 right-0 w-[200px] h-[80px] z-10 group/devtools\">\n                <div className=\"absolute top-0 right-0 flex gap-xs opacity-0 group-hover/devtools:opacity-100 transition-opacity\">\n                    <Tooltip\n                        content=\"Copy form data to clipboard\"\n                        trigger={\n                            <IconButton\n                                variant={\"secondary\"}\n                                icon={<CopyIcon />}\n                                onClick={handleCopy}\n                                size=\"sm\"\n                            />\n                        }\n                    />\n                    <Tooltip\n                        content=\"Paste form data from clipboard\"\n                        trigger={\n                            <IconButton\n                                variant={\"secondary\"}\n                                icon={<PasteIcon />}\n                                onClick={handlePaste}\n                                size=\"sm\"\n                            />\n                        }\n                    />\n                </div>\n            </div>\n        </DeveloperMode>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/features/formModel/LayoutBuilderFactory.d.ts

@@ -0,0 +1,61 @@
+import type { Icon } from "../../components/IconPicker/types.js";
+import type { IField, IFieldBuilder, ILayoutBuilder, ILayoutNodeBuilder, ILayoutNodeHandle, IRule, ITabBuilder, ITabDefinition, ITabDefinitionInput, ITabsBuilder, ITabsNode, LayoutNode, ILayoutNodeAccessHandle } from "./abstractions.js";
+interface TabBuilderInternal extends ITabBuilder {
+    _build(id: string): ITabDefinition;
+}
+export declare class TabBuilder implements TabBuilderInternal {
+    private _existing;
+    private _label;
+    private _description;
+    private _icon;
+    private _layoutFactory;
+    private _rules;
+    constructor(existing?: ITabDefinition);
+    label(text: string): this;
+    description(text: string): this;
+    icon(icon: Icon): this;
+    layout(factory: (l: ILayoutBuilder) => ILayoutNodeBuilder[]): this;
+    rules(r: IRule[]): this;
+    _build(id: string): ITabDefinition;
+}
+export declare class TabsBuilder implements ITabsBuilder {
+    private _id;
+    private _renderer;
+    private _rules;
+    private _pendingTabs;
+    private _lastAddedIdx;
+    constructor(id?: string);
+    renderer(name: string): this;
+    tab(tabId: string, configure: (tab: ITabBuilder) => void): this;
+    before(_target: string): this;
+    after(_target: string): this;
+    rules(r: IRule[]): this;
+    build(): ITabsNode;
+}
+export declare class TabsAccessBuilder implements ITabsBuilder {
+    private _node;
+    private _lastAddedIdx;
+    constructor(_node: ITabsNode);
+    renderer(name: string): this;
+    tab(tabId: string, configure: (tab: ITabBuilder) => void): this;
+    before(target: string): this;
+    after(target: string): this;
+    rules(r: IRule[]): this;
+    build(): ITabsNode;
+}
+export declare class LayoutBuilderFactory {
+    static create(): ILayoutBuilder;
+    static buildNodes(builders: ILayoutNodeBuilder[]): LayoutNode[];
+    static resolvePositionedRows(nodes: LayoutNode[]): LayoutNode[];
+    static resolveObjectInner(inner: ((layout: ILayoutBuilder) => ILayoutNodeBuilder[]) | Record<string, (layout: ILayoutBuilder) => ILayoutNodeBuilder[]>): LayoutNode[] | Record<string, LayoutNode[]>;
+    static createNodeHandle(node: LayoutNode): ILayoutNodeHandle;
+    static matchesNodeId(node: LayoutNode, nodeId: string): boolean;
+    static findNodeById(layout: LayoutNode[], nodeId: string): LayoutNode | undefined;
+    static resolveTabDefinition(input: ITabDefinitionInput): ITabDefinition;
+    static tabsNodeKey(node: ITabsNode): string;
+    static accessNode(layout: LayoutNode[], nodeId: string): ILayoutNodeAccessHandle;
+    static collectBuilders(fields: Map<string, IField>, builders: Map<string, IFieldBuilder> | Record<string, IFieldBuilder>, predicate: (builder: IFieldBuilder) => boolean, result: IFieldBuilder[]): void;
+    static collectFieldIds(layout: LayoutNode[]): string[];
+    static collectBuildersFlat(builders: Record<string, IFieldBuilder>, predicate: (builder: IFieldBuilder) => boolean, result: IFieldBuilder[]): void;
+}
+export {};