@tduniec/plugin-template-designer 0.1.7

package/dist/components/Nodes/parameters/useParameterSections.esm.js

@@ -0,0 +1,162 @@
+import { useCallback } from 'react';
+
+const buildUniqueId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+const createSectionTemplate = () => {
+  const unique = buildUniqueId();
+  return {
+    id: `section-${unique}`,
+    title: "New Section",
+    description: "",
+    fields: [],
+    properties: {},
+    required: []
+  };
+};
+const createFieldTemplate = (section) => {
+  const unique = buildUniqueId();
+  const nextIndex = (section.fields?.length ?? 0) + 1;
+  const fallbackName = `field_${nextIndex}`;
+  return {
+    id: `${section.id}-field-${unique}`,
+    fieldName: fallbackName,
+    sectionId: section.id,
+    sectionTitle: section.title,
+    required: false,
+    schema: {
+      title: `Field ${nextIndex}`,
+      type: "string"
+    }
+  };
+};
+const useParameterSectionsController = (data) => {
+  const applySectionsUpdate = useCallback(
+    (updater) => {
+      if (!data.onUpdateSections) {
+        return;
+      }
+      data.onUpdateSections(data.rfId, (prev) => updater(prev ?? []));
+    },
+    [data]
+  );
+  const handleSectionUpdate = useCallback(
+    (sectionId, updater) => {
+      applySectionsUpdate(
+        (prev) => (prev ?? []).map(
+          (section) => section.id === sectionId ? updater(section) : section
+        )
+      );
+    },
+    [applySectionsUpdate]
+  );
+  const handleFieldUpdate = useCallback(
+    (sectionId, fieldId, updater) => {
+      handleSectionUpdate(sectionId, (section) => ({
+        ...section,
+        fields: section.fields?.map(
+          (field) => field.id === fieldId ? updater(field) : field
+        ) ?? []
+      }));
+    },
+    [handleSectionUpdate]
+  );
+  const handleAddSection = useCallback(
+    (afterSectionId) => {
+      applySectionsUpdate((prev) => {
+        const list = [...prev ?? []];
+        const insertIndex = afterSectionId ? Math.max(
+          list.findIndex((section) => section.id === afterSectionId) + 1,
+          0
+        ) : list.length;
+        const nextSection = createSectionTemplate();
+        list.splice(insertIndex, 0, nextSection);
+        return list;
+      });
+    },
+    [applySectionsUpdate]
+  );
+  const handleMoveSection = useCallback(
+    (sectionId, direction) => {
+      applySectionsUpdate((prev) => {
+        const list = [...prev ?? []];
+        const currentIndex = list.findIndex(
+          (section) => section.id === sectionId
+        );
+        if (currentIndex < 0) {
+          return list;
+        }
+        const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+        if (targetIndex < 0 || targetIndex >= list.length) {
+          return list;
+        }
+        const [item] = list.splice(currentIndex, 1);
+        list.splice(targetIndex, 0, item);
+        return list;
+      });
+    },
+    [applySectionsUpdate]
+  );
+  const handleAddField = useCallback(
+    (sectionId, afterFieldId) => {
+      applySectionsUpdate(
+        (prev) => (prev ?? []).map((section) => {
+          if (section.id !== sectionId) {
+            return section;
+          }
+          const fields = [...section.fields ?? []];
+          const insertIndex = afterFieldId && fields.length ? Math.max(
+            fields.findIndex((field) => field.id === afterFieldId) + 1,
+            0
+          ) : fields.length;
+          const newField = createFieldTemplate(section);
+          fields.splice(insertIndex, 0, newField);
+          return {
+            ...section,
+            fields
+          };
+        })
+      );
+    },
+    [applySectionsUpdate]
+  );
+  const handleMoveField = useCallback(
+    (sectionId, fieldId, direction) => {
+      applySectionsUpdate(
+        (prev) => (prev ?? []).map((section) => {
+          if (section.id !== sectionId) {
+            return section;
+          }
+          const fields = [...section.fields ?? []];
+          const currentIndex = fields.findIndex(
+            (field) => field.id === fieldId
+          );
+          if (currentIndex < 0) {
+            return section;
+          }
+          const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+          if (targetIndex < 0 || targetIndex >= fields.length) {
+            return section;
+          }
+          const [item] = fields.splice(currentIndex, 1);
+          fields.splice(targetIndex, 0, item);
+          return {
+            ...section,
+            fields
+          };
+        })
+      );
+    },
+    [applySectionsUpdate]
+  );
+  return {
+    sections: data.sections ?? [],
+    handleSectionUpdate,
+    handleFieldUpdate,
+    handleAddSection,
+    handleMoveSection,
+    handleAddField,
+    handleMoveField
+  };
+};
+
+export { useParameterSectionsController };
+//# sourceMappingURL=useParameterSections.esm.js.map

package/dist/components/Nodes/parameters/useParameterSections.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParameterSections.esm.js","sources":["../../../../src/components/Nodes/parameters/useParameterSections.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport type {\n  ParameterFieldDisplay,\n  ParameterSectionDisplay,\n  ParametersNodeData,\n} from \"../types\";\n\nconst buildUniqueId = () =>\n  `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;\n\nconst createSectionTemplate = (): ParameterSectionDisplay => {\n  const unique = buildUniqueId();\n  return {\n    id: `section-${unique}`,\n    title: \"New Section\",\n    description: \"\",\n    fields: [],\n    properties: {},\n    required: [],\n  };\n};\n\nconst createFieldTemplate = (\n  section: ParameterSectionDisplay\n): ParameterFieldDisplay => {\n  const unique = buildUniqueId();\n  const nextIndex = (section.fields?.length ?? 0) + 1;\n  const fallbackName = `field_${nextIndex}`;\n  return {\n    id: `${section.id}-field-${unique}`,\n    fieldName: fallbackName,\n    sectionId: section.id,\n    sectionTitle: section.title,\n    required: false,\n    schema: {\n      title: `Field ${nextIndex}`,\n      type: \"string\",\n    },\n  };\n};\n\nexport const useParameterSectionsController = (data: ParametersNodeData) => {\n  const applySectionsUpdate = useCallback(\n    (\n      updater: (\n        prevSections: ParameterSectionDisplay[]\n      ) => ParameterSectionDisplay[]\n    ) => {\n      if (!data.onUpdateSections) {\n        return;\n      }\n      data.onUpdateSections(data.rfId, (prev) => updater(prev ?? []));\n    },\n    [data]\n  );\n\n  const handleSectionUpdate = useCallback(\n    (\n      sectionId: string,\n      updater: (section: ParameterSectionDisplay) => ParameterSectionDisplay\n    ) => {\n      applySectionsUpdate((prev) =>\n        (prev ?? []).map((section) =>\n          section.id === sectionId ? updater(section) : section\n        )\n      );\n    },\n    [applySectionsUpdate]\n  );\n\n  const handleFieldUpdate = useCallback(\n    (\n      sectionId: string,\n      fieldId: string,\n      updater: (field: ParameterFieldDisplay) => ParameterFieldDisplay\n    ) => {\n      handleSectionUpdate(sectionId, (section) => ({\n        ...section,\n        fields:\n          section.fields?.map((field) =>\n            field.id === fieldId ? updater(field) : field\n          ) ?? [],\n      }));\n    },\n    [handleSectionUpdate]\n  );\n\n  const handleAddSection = useCallback(\n    (afterSectionId?: string) => {\n      applySectionsUpdate((prev) => {\n        const list = [...(prev ?? [])];\n        const insertIndex = afterSectionId\n          ? Math.max(\n              list.findIndex((section) => section.id === afterSectionId) + 1,\n              0\n            )\n          : list.length;\n        const nextSection = createSectionTemplate();\n        list.splice(insertIndex, 0, nextSection);\n        return list;\n      });\n    },\n    [applySectionsUpdate]\n  );\n\n  const handleMoveSection = useCallback(\n    (sectionId: string, direction: \"up\" | \"down\") => {\n      applySectionsUpdate((prev) => {\n        const list = [...(prev ?? [])];\n        const currentIndex = list.findIndex(\n          (section) => section.id === sectionId\n        );\n        if (currentIndex < 0) {\n          return list;\n        }\n        const targetIndex =\n          direction === \"up\" ? currentIndex - 1 : currentIndex + 1;\n        if (targetIndex < 0 || targetIndex >= list.length) {\n          return list;\n        }\n        const [item] = list.splice(currentIndex, 1);\n        list.splice(targetIndex, 0, item);\n        return list;\n      });\n    },\n    [applySectionsUpdate]\n  );\n\n  const handleAddField = useCallback(\n    (sectionId: string, afterFieldId?: string) => {\n      applySectionsUpdate((prev) =>\n        (prev ?? []).map((section) => {\n          if (section.id !== sectionId) {\n            return section;\n          }\n          const fields = [...(section.fields ?? [])];\n          const insertIndex =\n            afterFieldId && fields.length\n              ? Math.max(\n                  fields.findIndex((field) => field.id === afterFieldId) + 1,\n                  0\n                )\n              : fields.length;\n          const newField = createFieldTemplate(section);\n          fields.splice(insertIndex, 0, newField);\n          return {\n            ...section,\n            fields,\n          };\n        })\n      );\n    },\n    [applySectionsUpdate]\n  );\n\n  const handleMoveField = useCallback(\n    (sectionId: string, fieldId: string, direction: \"up\" | \"down\") => {\n      applySectionsUpdate((prev) =>\n        (prev ?? []).map((section) => {\n          if (section.id !== sectionId) {\n            return section;\n          }\n          const fields = [...(section.fields ?? [])];\n          const currentIndex = fields.findIndex(\n            (field) => field.id === fieldId\n          );\n          if (currentIndex < 0) {\n            return section;\n          }\n          const targetIndex =\n            direction === \"up\" ? currentIndex - 1 : currentIndex + 1;\n          if (targetIndex < 0 || targetIndex >= fields.length) {\n            return section;\n          }\n          const [item] = fields.splice(currentIndex, 1);\n          fields.splice(targetIndex, 0, item);\n          return {\n            ...section,\n            fields,\n          };\n        })\n      );\n    },\n    [applySectionsUpdate]\n  );\n\n  return {\n    sections: data.sections ?? [],\n    handleSectionUpdate,\n    handleFieldUpdate,\n    handleAddSection,\n    handleMoveSection,\n    handleAddField,\n    handleMoveField,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Nodes/types.esm.js

@@ -0,0 +1,8 @@
+const NODE_VERTICAL_SPACING = {
+  parametersNode: 120,
+  actionNode: 120,
+  outputNode: 120
+};
+
+export { NODE_VERTICAL_SPACING };
+//# sourceMappingURL=types.esm.js.map

package/dist/components/Nodes/types.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.esm.js","sources":["../../../src/components/Nodes/types.ts"],"sourcesContent":["import type {\n  ScaffolderTaskOutput,\n  TaskStep,\n  TemplateParametersV1beta3,\n  TemplateParameterSchema,\n} from \"@backstage/plugin-scaffolder-common\";\n\nexport type DesignerNodeType = \"parametersNode\" | \"actionNode\" | \"outputNode\";\n\nexport type TemplateParametersValue =\n  | TemplateParametersV1beta3\n  | TemplateParametersV1beta3[]\n  | TemplateParameterSchema\n  | TemplateParameterSchema[]\n  | undefined;\n\nexport type AddNodeConfig = {\n  afterRfId: string;\n  type?: DesignerNodeType;\n  stepTemplate?: Partial<TaskStep>;\n  outputTemplate?: ScaffolderTaskOutput;\n  parametersTemplate?: TemplateParametersValue;\n};\n\ntype BaseNodeData = {\n  /** Stable ReactFlow node id */\n  rfId: string;\n  /** Cached scaffolder action ids for dropdown options */\n  scaffolderActionIds?: string[];\n  /** Cached action input schemas keyed by action id */\n  scaffolderActionInputsById?: Record<string, Record<string, unknown>>;\n  /** Cached action output schemas keyed by action id */\n  scaffolderActionOutputsById?: Record<string, Record<string, unknown>>;\n  /** Suggestions for referencing previous step outputs */\n  stepOutputReferences?: string[];\n  onAddNode?: (config: AddNodeConfig) => void;\n};\n\nexport type ActionNodeData = BaseNodeData & {\n  /** User payload; id is editable string (reserved by your template) */\n  step: TaskStep & { input?: Record<string, unknown> };\n  onUpdateField?: (rfId: string, field: keyof TaskStep, value: string) => void;\n  onUpdateInput?: (rfId: string, key: string, value: unknown) => void;\n  onRemoveInputKey?: (rfId: string, key: string) => void;\n};\n\nexport type OutputNodeData = BaseNodeData & {\n  output: ScaffolderTaskOutput;\n  onUpdateOutput?: (\n    rfId: string,\n    updater: (prev: ScaffolderTaskOutput) => ScaffolderTaskOutput\n  ) => void;\n};\n\nexport type ParameterFieldDisplay = {\n  id: string;\n  fieldName: string;\n  sectionId: string;\n  sectionTitle?: string;\n  required: boolean;\n  schema?: Record<string, unknown>;\n};\n\nexport type ParameterSectionDisplay = {\n  id: string;\n  title?: string;\n  description?: string;\n  required?: string[];\n  properties?: Record<string, Record<string, unknown>>;\n  fields: ParameterFieldDisplay[];\n};\n\nexport type ParametersNodeData = BaseNodeData & {\n  parameters: TemplateParametersValue;\n  sections?: ParameterSectionDisplay[];\n  onUpdateSections?: (\n    rfId: string,\n    updater: (prev: ParameterSectionDisplay[]) => ParameterSectionDisplay[]\n  ) => void;\n};\n\nexport const NODE_VERTICAL_SPACING: Record<DesignerNodeType, number> = {\n  parametersNode: 120,\n  actionNode: 120,\n  outputNode: 120,\n};\n"],"names":[],"mappings":"AAiFO,MAAM,qBAAA,GAA0D;AAAA,EACrE,cAAA,EAAgB,GAAA;AAAA,EAChB,UAAA,EAAY,GAAA;AAAA,EACZ,UAAA,EAAY;AACd;;;;"}

package/dist/components/TemplateDesigner/TemplateDesigner.esm.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { Page, Content, ContentHeader, SupportButton } from '@backstage/core-components';
+import { FieldEditorDialog } from './components/FieldEditorDialog.esm.js';
+import { TemplateLanding } from './components/TemplateLanding.esm.js';
+import { TemplateWorkspace } from './components/TemplateWorkspace.esm.js';
+import { useFieldEditor } from './useFieldEditor.esm.js';
+import { useTemplateState } from './useTemplateState.esm.js';
+
+const TemplateDesigner = () => {
+  const [showYaml, setShowYaml] = useState(true);
+  const {
+    templateObject,
+    templateYaml,
+    yamlError,
+    loadError,
+    templateSteps,
+    templateParameters,
+    templateOutput,
+    templateSource,
+    isReloading,
+    isSaving,
+    fileInputRef,
+    handleStartSampleTemplate,
+    handleTemplateFileSelected,
+    handleOpenTemplatePicker,
+    handleYamlChange,
+    handleStepsChange,
+    handleParametersChange,
+    handleOutputChange,
+    handleReloadFromFile,
+    handleSaveTemplate
+  } = useTemplateState();
+  const {
+    editorState,
+    editorValue,
+    setEditorValue,
+    interactionRootRef,
+    closeEditor,
+    applyEditorValue
+  } = useFieldEditor();
+  const handleToggleYaml = useCallback(() => {
+    setShowYaml((prev) => !prev);
+  }, []);
+  const activeTemplateLabel = templateSource?.label;
+  let reloadButtonLabel = "Reset sample";
+  if (templateSource?.type === "file") {
+    reloadButtonLabel = isReloading ? "Reloading..." : "Reload file";
+  }
+  let saveButtonLabel = templateSource?.type === "file" ? "Save" : "Save as file";
+  if (isSaving) {
+    saveButtonLabel = "Saving...";
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: interactionRootRef, style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Page, { themeId: "tool", children: /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(ContentHeader, { title: "Template Designer", children: /* @__PURE__ */ jsx(SupportButton, { children: "A description of your plugin goes here." }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: ".yaml,.yml,.json",
+          style: { display: "none" },
+          onChange: handleTemplateFileSelected
+        }
+      ),
+      !templateObject ? /* @__PURE__ */ jsx(
+        TemplateLanding,
+        {
+          loadError,
+          onStartSampleTemplate: handleStartSampleTemplate,
+          onOpenTemplatePicker: handleOpenTemplatePicker
+        }
+      ) : /* @__PURE__ */ jsx(
+        TemplateWorkspace,
+        {
+          templateSteps,
+          templateParameters,
+          templateOutput,
+          templateYaml,
+          yamlError,
+          loadError,
+          showYaml,
+          onToggleYaml: handleToggleYaml,
+          onYamlChange: handleYamlChange,
+          onStepsChange: handleStepsChange,
+          onParametersChange: handleParametersChange,
+          onOutputChange: handleOutputChange,
+          onReload: handleReloadFromFile,
+          onSave: handleSaveTemplate,
+          onOpenTemplatePicker: handleOpenTemplatePicker,
+          activeTemplateLabel,
+          reloadButtonLabel,
+          saveButtonLabel,
+          isReloading,
+          isSaving
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      FieldEditorDialog,
+      {
+        open: Boolean(editorState),
+        label: editorState?.label,
+        value: editorValue,
+        onChange: setEditorValue,
+        onClose: closeEditor,
+        onApply: applyEditorValue
+      }
+    )
+  ] });
+};
+
+export { TemplateDesigner };
+//# sourceMappingURL=TemplateDesigner.esm.js.map

package/dist/components/TemplateDesigner/TemplateDesigner.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateDesigner.esm.js","sources":["../../../src/components/TemplateDesigner/TemplateDesigner.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport {\n  Page,\n  Content,\n  ContentHeader,\n  SupportButton,\n} from \"@backstage/core-components\";\nimport { FieldEditorDialog } from \"./components/FieldEditorDialog\";\nimport { TemplateLanding } from \"./components/TemplateLanding\";\nimport { TemplateWorkspace } from \"./components/TemplateWorkspace\";\nimport { useFieldEditor } from \"./useFieldEditor\";\nimport { useTemplateState } from \"./useTemplateState\";\n\nexport const TemplateDesigner = () => {\n  const [showYaml, setShowYaml] = useState(true);\n  const {\n    templateObject,\n    templateYaml,\n    yamlError,\n    loadError,\n    templateSteps,\n    templateParameters,\n    templateOutput,\n    templateSource,\n    isReloading,\n    isSaving,\n    fileInputRef,\n    handleStartSampleTemplate,\n    handleTemplateFileSelected,\n    handleOpenTemplatePicker,\n    handleYamlChange,\n    handleStepsChange,\n    handleParametersChange,\n    handleOutputChange,\n    handleReloadFromFile,\n    handleSaveTemplate,\n  } = useTemplateState();\n  const {\n    editorState,\n    editorValue,\n    setEditorValue,\n    interactionRootRef,\n    closeEditor,\n    applyEditorValue,\n  } = useFieldEditor();\n\n  const handleToggleYaml = useCallback(() => {\n    setShowYaml((prev) => !prev);\n  }, []);\n\n  const activeTemplateLabel = templateSource?.label;\n\n  let reloadButtonLabel = \"Reset sample\";\n  if (templateSource?.type === \"file\") {\n    reloadButtonLabel = isReloading ? \"Reloading...\" : \"Reload file\";\n  }\n\n  let saveButtonLabel =\n    templateSource?.type === \"file\" ? \"Save\" : \"Save as file\";\n  if (isSaving) {\n    saveButtonLabel = \"Saving...\";\n  }\n\n  return (\n    <div ref={interactionRootRef} style={{ height: \"100%\" }}>\n      <Page themeId=\"tool\">\n        <Content>\n          <ContentHeader title=\"Template Designer\">\n            <SupportButton>\n              A description of your plugin goes here.\n            </SupportButton>\n          </ContentHeader>\n\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\".yaml,.yml,.json\"\n            style={{ display: \"none\" }}\n            onChange={handleTemplateFileSelected}\n          />\n\n          {!templateObject ? (\n            <TemplateLanding\n              loadError={loadError}\n              onStartSampleTemplate={handleStartSampleTemplate}\n              onOpenTemplatePicker={handleOpenTemplatePicker}\n            />\n          ) : (\n            <TemplateWorkspace\n              templateSteps={templateSteps}\n              templateParameters={templateParameters}\n              templateOutput={templateOutput}\n              templateYaml={templateYaml}\n              yamlError={yamlError}\n              loadError={loadError}\n              showYaml={showYaml}\n              onToggleYaml={handleToggleYaml}\n              onYamlChange={handleYamlChange}\n              onStepsChange={handleStepsChange}\n              onParametersChange={handleParametersChange}\n              onOutputChange={handleOutputChange}\n              onReload={handleReloadFromFile}\n              onSave={handleSaveTemplate}\n              onOpenTemplatePicker={handleOpenTemplatePicker}\n              activeTemplateLabel={activeTemplateLabel}\n              reloadButtonLabel={reloadButtonLabel}\n              saveButtonLabel={saveButtonLabel}\n              isReloading={isReloading}\n              isSaving={isSaving}\n            />\n          )}\n        </Content>\n      </Page>\n      <FieldEditorDialog\n        open={Boolean(editorState)}\n        label={editorState?.label}\n        value={editorValue}\n        onChange={setEditorValue}\n        onClose={closeEditor}\n        onApply={applyEditorValue}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TemplateDesigner/components/FieldEditorDialog.esm.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from '@material-ui/core';
+
+const FieldEditorDialog = ({
+  open,
+  label,
+  value,
+  onChange,
+  onClose,
+  onApply
+}) => /* @__PURE__ */ jsxs(Dialog, { open, onClose, fullWidth: true, maxWidth: "md", children: [
+  /* @__PURE__ */ jsx(DialogTitle, { children: label ? `Edit ${label}` : "Edit field" }),
+  /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      multiline: true,
+      minRows: 8,
+      variant: "outlined",
+      value,
+      onChange: (event) => onChange(event.target.value),
+      fullWidth: true,
+      autoFocus: true
+    }
+  ) }),
+  /* @__PURE__ */ jsxs(DialogActions, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Cancel" }),
+    /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", onClick: onApply, children: "Apply" })
+  ] })
+] });
+
+export { FieldEditorDialog };
+//# sourceMappingURL=FieldEditorDialog.esm.js.map

package/dist/components/TemplateDesigner/components/FieldEditorDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldEditorDialog.esm.js","sources":["../../../../src/components/TemplateDesigner/components/FieldEditorDialog.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  TextField,\n} from \"@material-ui/core\";\n\ntype FieldEditorDialogProps = {\n  open: boolean;\n  label?: string;\n  value: string;\n  onChange: (value: string) => void;\n  onClose: () => void;\n  onApply: () => void;\n};\n\nexport const FieldEditorDialog = ({\n  open,\n  label,\n  value,\n  onChange,\n  onClose,\n  onApply,\n}: FieldEditorDialogProps) => (\n  <Dialog open={open} onClose={onClose} fullWidth maxWidth=\"md\">\n    <DialogTitle>{label ? `Edit ${label}` : \"Edit field\"}</DialogTitle>\n    <DialogContent>\n      <TextField\n        multiline\n        minRows={8}\n        variant=\"outlined\"\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        fullWidth\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus\n      />\n    </DialogContent>\n    <DialogActions>\n      <Button onClick={onClose}>Cancel</Button>\n      <Button color=\"primary\" variant=\"contained\" onClick={onApply}>\n        Apply\n      </Button>\n    </DialogActions>\n  </Dialog>\n);\n"],"names":[],"mappings":";;;AAkBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,0BACG,MAAA,EAAA,EAAO,IAAA,EAAY,SAAkB,SAAA,EAAS,IAAA,EAAC,UAAS,IAAA,EACvD,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,KAAA,GAAQ,CAAA,KAAA,EAAQ,KAAK,KAAK,YAAA,EAAa,CAAA;AAAA,sBACpD,aAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAS,IAAA;AAAA,MACT,OAAA,EAAS,CAAA;AAAA,MACT,OAAA,EAAQ,UAAA;AAAA,MACR,KAAA;AAAA,MACA,UAAU,CAAC,KAAA,KAAU,QAAA,CAAS,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAChD,SAAA,EAAS,IAAA;AAAA,MAET,SAAA,EAAS;AAAA;AAAA,GACX,EACF,CAAA;AAAA,uBACC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,OAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,oBAChC,GAAA,CAAC,UAAO,KAAA,EAAM,SAAA,EAAU,SAAQ,WAAA,EAAY,OAAA,EAAS,SAAS,QAAA,EAAA,OAAA,EAE9D;AAAA,GAAA,EACF;AAAA,CAAA,EACF;;;;"}

package/dist/components/TemplateDesigner/components/TemplateLanding.esm.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Grid, Paper, Box, Typography, Button } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+
+const TemplateLanding = ({
+  loadError,
+  onStartSampleTemplate,
+  onOpenTemplatePicker
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      container: true,
+      justifyContent: "center",
+      alignItems: "center",
+      style: { minHeight: "60vh" },
+      children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 10, lg: 8, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 4, alignItems: "stretch", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            elevation: 3,
+            style: {
+              padding: 32,
+              height: "100%",
+              minHeight: 320,
+              display: "flex",
+              flexDirection: "column",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Create new template" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Start with a tidy sample blueprint that includes a single action step and helpful starter metadata." })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { mt: "auto", display: "flex", justifyContent: "flex-start", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  color: "primary",
+                  variant: "contained",
+                  onClick: onStartSampleTemplate,
+                  children: "Start new template"
+                }
+              ) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(
+          Paper,
+          {
+            elevation: 3,
+            style: {
+              padding: 32,
+              height: "100%",
+              minHeight: 320,
+              display: "flex",
+              flexDirection: "column",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Load from file" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Import an existing template in YAML or JSON format and iterate in the visual designer." })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  mt: "auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  style: { gap: 8 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        color: "primary",
+                        variant: "outlined",
+                        onClick: onOpenTemplatePicker,
+                        children: "Choose file"
+                      }
+                    ),
+                    loadError && /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        style: { color: theme.palette.error.main },
+                        children: loadError
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      ] }) })
+    }
+  );
+};
+
+export { TemplateLanding };
+//# sourceMappingURL=TemplateLanding.esm.js.map

package/dist/components/TemplateDesigner/components/TemplateLanding.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateLanding.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateLanding.tsx"],"sourcesContent":["import { Box, Button, Grid, Paper, Typography } from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\n\ntype TemplateLandingProps = {\n  loadError?: string;\n  onStartSampleTemplate: () => void;\n  onOpenTemplatePicker: () => void;\n};\n\nexport const TemplateLanding = ({\n  loadError,\n  onStartSampleTemplate,\n  onOpenTemplatePicker,\n}: TemplateLandingProps) => {\n  const theme = useTheme();\n\n  return (\n    <Grid\n      container\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      style={{ minHeight: \"60vh\" }}\n    >\n      <Grid item xs={12} md={10} lg={8}>\n        <Grid container spacing={4} alignItems=\"stretch\">\n          <Grid item xs={12} md={6}>\n            <Paper\n              elevation={3}\n              style={{\n                padding: 32,\n                height: \"100%\",\n                minHeight: 320,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 16,\n              }}\n            >\n              <Box>\n                <Typography variant=\"h6\">Create new template</Typography>\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Start with a tidy sample blueprint that includes a single\n                  action step and helpful starter metadata.\n                </Typography>\n              </Box>\n              <Box mt=\"auto\" display=\"flex\" justifyContent=\"flex-start\">\n                <Button\n                  color=\"primary\"\n                  variant=\"contained\"\n                  onClick={onStartSampleTemplate}\n                >\n                  Start new template\n                </Button>\n              </Box>\n            </Paper>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Paper\n              elevation={3}\n              style={{\n                padding: 32,\n                height: \"100%\",\n                minHeight: 320,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 16,\n              }}\n            >\n              <Box>\n                <Typography variant=\"h6\">Load from file</Typography>\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Import an existing template in YAML or JSON format and iterate\n                  in the visual designer.\n                </Typography>\n              </Box>\n              <Box\n                mt=\"auto\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                style={{ gap: 8 }}\n              >\n                <Button\n                  color=\"primary\"\n                  variant=\"outlined\"\n                  onClick={onOpenTemplatePicker}\n                >\n                  Choose file\n                </Button>\n                {loadError && (\n                  <Typography\n                    variant=\"body2\"\n                    style={{ color: theme.palette.error.main }}\n                  >\n                    {loadError}\n                  </Typography>\n                )}\n              </Box>\n            </Paper>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}