@tduniec/plugin-template-designer 0.3.0 → 0.3.1

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

@@ -1,32 +1,55 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from '@material-ui/core';
+import { useRef, useEffect } from 'react';
 
 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
+}) => {
+  const draftRef = useRef(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      draftRef.current = value;
+      if (inputRef.current) {
+        inputRef.current.value = value;
+      }
     }
-  ) }),
-  /* @__PURE__ */ jsxs(DialogActions, { children: [
-    /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Cancel" }),
-    /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", onClick: onApply, children: "Apply" })
-  ] })
-] });
+  }, [open, value]);
+  return /* @__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",
+        defaultValue: value,
+        inputRef,
+        onChange: (event) => {
+          draftRef.current = 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(draftRef.current ?? value),
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+};
 
 export { FieldEditorDialog };
 //# sourceMappingURL=FieldEditorDialog.esm.js.map

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

@@ -1 +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;;;;"}
+{"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\";\nimport { useEffect, useRef } from \"react\";\n\ntype FieldEditorDialogProps = {\n  open: boolean;\n  label?: string;\n  value: string;\n  onClose: () => void;\n  onApply: (value: string) => void;\n};\n\nexport const FieldEditorDialog = ({\n  open,\n  label,\n  value,\n  onClose,\n  onApply,\n}: FieldEditorDialogProps) => {\n  const draftRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      draftRef.current = value;\n      if (inputRef.current) {\n        inputRef.current.value = value;\n      }\n    }\n  }, [open, value]);\n\n  return (\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          defaultValue={value}\n          inputRef={inputRef}\n          onChange={(event) => {\n            draftRef.current = event.target.value;\n          }}\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\n          color=\"primary\"\n          variant=\"contained\"\n          onClick={() => onApply(draftRef.current ?? value)}\n        >\n          Apply\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":";;;;AAkBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,QAAA,GAAW,OAAO,KAAK,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,OAAsD,IAAI,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AACnB,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,KAAA;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,KAAK,CAAC,CAAA;AAEhB,EAAA,4BACG,MAAA,EAAA,EAAO,IAAA,EAAY,SAAkB,SAAA,EAAS,IAAA,EAAC,UAAS,IAAA,EACvD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,KAAA,GAAQ,CAAA,KAAA,EAAQ,KAAK,KAAK,YAAA,EAAa,CAAA;AAAA,wBACpD,aAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,OAAA,EAAS,CAAA;AAAA,QACT,OAAA,EAAQ,UAAA;AAAA,QACR,YAAA,EAAc,KAAA;AAAA,QACd,QAAA;AAAA,QACA,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,UAAA,QAAA,CAAS,OAAA,GAAU,MAAM,MAAA,CAAO,KAAA;AAAA,QAClC,CAAA;AAAA,QACA,SAAA,EAAS,IAAA;AAAA,QAET,SAAA,EAAS;AAAA;AAAA,KACX,EACF,CAAA;AAAA,yBACC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,OAAA,EAAS,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAChC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,SAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,OAAA,EAAS,MAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA,UACjD,QAAA,EAAA;AAAA;AAAA;AAED,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
-import { Grid, Typography, Button, Paper } from '@material-ui/core';
+import { Grid, Typography, Button, CircularProgress, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import CodeMirror from '@uiw/react-codemirror';
 import { yaml } from '@codemirror/lang-yaml';
@@ -26,7 +26,8 @@ const TemplateWorkspace = ({
   reloadButtonLabel,
   saveButtonLabel,
   isReloading,
-  isSaving
+  isSaving,
+  isSyncing = false
 }) => {
   const theme = useTheme();
   const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
@@ -154,7 +155,33 @@ const TemplateWorkspace = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: onToggleYaml, children: showYaml ? "Hide YAML" : "Show YAML" })
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8
+                      },
+                      children: [
+                        isSyncing && /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 6
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(CircularProgress, { size: 16, thickness: 5 }),
+                              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Syncing..." })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: onToggleYaml, children: showYaml ? "Hide YAML" : "Show YAML" })
+                      ]
+                    }
+                  )
                 ]
               }
             ),

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateWorkspace.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateWorkspace.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Button, Grid, Paper, Typography } from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { yaml } from \"@codemirror/lang-yaml\";\nimport type {\n  ScaffolderTaskOutput,\n  TaskStep,\n} from \"@backstage/plugin-scaffolder-common\";\nimport type { TemplateParametersValue } from \"../../Nodes/types\";\nimport App from \"../../DesignerFlow/DesignerFlow\";\n\ntype TemplateWorkspaceProps = {\n  templateSteps: TaskStep[];\n  templateParameters: TemplateParametersValue;\n  templateOutput?: ScaffolderTaskOutput;\n  templateYaml: string;\n  yamlError?: string;\n  loadError?: string;\n  showYaml: boolean;\n  onToggleYaml: () => void;\n  onYamlChange: (value: string) => void;\n  onStepsChange: (steps: TaskStep[]) => void;\n  onParametersChange: (parameters: TemplateParametersValue) => void;\n  onOutputChange: (output?: ScaffolderTaskOutput) => void;\n  onReload: () => void;\n  onSave: () => void;\n  onOpenTemplatePicker: () => void;\n  activeTemplateLabel?: string;\n  reloadButtonLabel: string;\n  saveButtonLabel: string;\n  isReloading: boolean;\n  isSaving: boolean;\n};\n\nexport const TemplateWorkspace = ({\n  templateSteps,\n  templateParameters,\n  templateOutput,\n  templateYaml,\n  yamlError,\n  loadError,\n  showYaml,\n  onToggleYaml,\n  onYamlChange,\n  onStepsChange,\n  onParametersChange,\n  onOutputChange,\n  onReload,\n  onSave,\n  onOpenTemplatePicker,\n  activeTemplateLabel,\n  reloadButtonLabel,\n  saveButtonLabel,\n  isReloading,\n  isSaving,\n}: TemplateWorkspaceProps) => {\n  const theme = useTheme();\n  const paletteMode =\n    (theme.palette as { mode?: \"light\" | \"dark\" }).mode ??\n    theme.palette.type ??\n    \"light\";\n  const yamlDraftRef = useRef(templateYaml);\n  const templateYamlRef = useRef(templateYaml);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const yamlExtensions = useMemo(() => [yaml()], []);\n  const codeMirrorTheme = useMemo(\n    () => (paletteMode === \"dark\" ? \"dark\" : \"light\"),\n    [paletteMode]\n  );\n\n  // implementation releated to yaml rendering -> onBlue and onDebounce\n  const flushYamlDraft = useCallback(() => {\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n      debounceRef.current = null;\n    }\n    if (yamlDraftRef.current !== templateYamlRef.current) {\n      onYamlChange(yamlDraftRef.current);\n    }\n  }, [onYamlChange]);\n  const handleYamlChange = useCallback(\n    (value: string) => {\n      yamlDraftRef.current = value;\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n      debounceRef.current = setTimeout(() => {\n        if (yamlDraftRef.current !== templateYamlRef.current) {\n          onYamlChange(yamlDraftRef.current);\n        }\n        debounceRef.current = null;\n      }, 600);\n    },\n    [onYamlChange]\n  );\n  const handleYamlBlur = useCallback(() => {\n    flushYamlDraft();\n  }, [flushYamlDraft]);\n\n  useEffect(() => {\n    yamlDraftRef.current = templateYaml;\n    templateYamlRef.current = templateYaml;\n  }, [templateYaml]);\n  useEffect(\n    () => () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    },\n    []\n  );\n\n  return (\n    <Grid\n      container\n      spacing={3}\n      direction=\"column\"\n      style={{ height: \"calc(100% - 15px)\" }}\n    >\n      <Grid item style={{ height: \"100%\" }}>\n        <div\n          style={{\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 16,\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"center\",\n              flexWrap: \"wrap\",\n              gap: 12,\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 12,\n                flexWrap: \"wrap\",\n              }}\n            >\n              {activeTemplateLabel && (\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Active template: {activeTemplateLabel}\n                </Typography>\n              )}\n              <Button\n                color=\"primary\"\n                variant=\"contained\"\n                size=\"small\"\n                onClick={onReload}\n                disabled={isReloading}\n              >\n                {reloadButtonLabel}\n              </Button>\n              <Button\n                color=\"primary\"\n                variant=\"outlined\"\n                size=\"small\"\n                onClick={onSave}\n                disabled={isSaving}\n              >\n                {saveButtonLabel}\n              </Button>\n              <Button\n                color=\"primary\"\n                variant=\"outlined\"\n                size=\"small\"\n                onClick={onOpenTemplatePicker}\n              >\n                Load different file\n              </Button>\n            </div>\n            <Button variant=\"outlined\" size=\"small\" onClick={onToggleYaml}>\n              {showYaml ? \"Hide YAML\" : \"Show YAML\"}\n            </Button>\n          </div>\n          {loadError && (\n            <Typography\n              variant=\"body2\"\n              style={{ color: theme.palette.error.main }}\n            >\n              {loadError}\n            </Typography>\n          )}\n          <div\n            style={{\n              flex: 1,\n              display: \"flex\",\n              gap: 16,\n              minHeight: 0,\n            }}\n          >\n            <div style={{ flex: showYaml ? 1.6 : 1, minWidth: 0 }}>\n              <div style={{ height: \"100%\" }}>\n                <App\n                  steps={templateSteps}\n                  parameters={templateParameters}\n                  output={templateOutput}\n                  onStepsChange={onStepsChange}\n                  onParametersChange={onParametersChange}\n                  onOutputChange={onOutputChange}\n                />\n              </div>\n            </div>\n            {showYaml && (\n              <Paper\n                elevation={2}\n                style={{\n                  flex: 1,\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  minWidth: 0,\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    padding: \"12px 16px\",\n                    borderBottom: \"1px solid rgba(0,0,0,0.12)\",\n                    fontWeight: 600,\n                    fontSize: \"0.875rem\",\n                  }}\n                >\n                  YAML Preview\n                </div>\n                {yamlError && (\n                  <div\n                    style={{\n                      padding: \"8px 16px\",\n                      borderBottom: \"1px solid rgba(0,0,0,0.08)\",\n                      color: theme.palette.error.main,\n                      fontSize: \"0.75rem\",\n                      background:\n                        paletteMode === \"dark\"\n                          ? \"rgba(255, 82, 82, 0.1)\"\n                          : \"rgba(244, 67, 54, 0.08)\",\n                    }}\n                  >\n                    {yamlError}\n                  </div>\n                )}\n                <div style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n                  <CodeMirror\n                    value={templateYaml}\n                    extensions={yamlExtensions}\n                    theme={codeMirrorTheme}\n                    height=\"100%\"\n                    onChange={handleYamlChange}\n                    onBlur={handleYamlBlur}\n                  />\n                </div>\n              </Paper>\n            )}\n          </div>\n        </div>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateWorkspace.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateWorkspace.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport {\n  Button,\n  Grid,\n  Paper,\n  Typography,\n  CircularProgress,\n} from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { yaml } from \"@codemirror/lang-yaml\";\nimport type {\n  ScaffolderTaskOutput,\n  TaskStep,\n} from \"@backstage/plugin-scaffolder-common\";\nimport type { TemplateParametersValue } from \"../../Nodes/types\";\nimport App from \"../../DesignerFlow/DesignerFlow\";\n\ntype TemplateWorkspaceProps = {\n  templateSteps: TaskStep[];\n  templateParameters: TemplateParametersValue;\n  templateOutput?: ScaffolderTaskOutput;\n  templateYaml: string;\n  yamlError?: string;\n  loadError?: string;\n  showYaml: boolean;\n  onToggleYaml: () => void;\n  onYamlChange: (value: string) => void;\n  onStepsChange: (steps: TaskStep[]) => void;\n  onParametersChange: (parameters: TemplateParametersValue) => void;\n  onOutputChange: (output?: ScaffolderTaskOutput) => void;\n  onReload: () => void;\n  onSave: () => void;\n  onOpenTemplatePicker: () => void;\n  activeTemplateLabel?: string;\n  reloadButtonLabel: string;\n  saveButtonLabel: string;\n  isReloading: boolean;\n  isSaving: boolean;\n  isSyncing?: boolean;\n};\n\nexport const TemplateWorkspace = ({\n  templateSteps,\n  templateParameters,\n  templateOutput,\n  templateYaml,\n  yamlError,\n  loadError,\n  showYaml,\n  onToggleYaml,\n  onYamlChange,\n  onStepsChange,\n  onParametersChange,\n  onOutputChange,\n  onReload,\n  onSave,\n  onOpenTemplatePicker,\n  activeTemplateLabel,\n  reloadButtonLabel,\n  saveButtonLabel,\n  isReloading,\n  isSaving,\n  isSyncing = false,\n}: TemplateWorkspaceProps) => {\n  const theme = useTheme();\n  const paletteMode =\n    (theme.palette as { mode?: \"light\" | \"dark\" }).mode ??\n    theme.palette.type ??\n    \"light\";\n  const yamlDraftRef = useRef(templateYaml);\n  const templateYamlRef = useRef(templateYaml);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const yamlExtensions = useMemo(() => [yaml()], []);\n  const codeMirrorTheme = useMemo(\n    () => (paletteMode === \"dark\" ? \"dark\" : \"light\"),\n    [paletteMode]\n  );\n\n  // implementation releated to yaml rendering -> onBlue and onDebounce\n  const flushYamlDraft = useCallback(() => {\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n      debounceRef.current = null;\n    }\n    if (yamlDraftRef.current !== templateYamlRef.current) {\n      onYamlChange(yamlDraftRef.current);\n    }\n  }, [onYamlChange]);\n  const handleYamlChange = useCallback(\n    (value: string) => {\n      yamlDraftRef.current = value;\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n      debounceRef.current = setTimeout(() => {\n        if (yamlDraftRef.current !== templateYamlRef.current) {\n          onYamlChange(yamlDraftRef.current);\n        }\n        debounceRef.current = null;\n      }, 600);\n    },\n    [onYamlChange]\n  );\n  const handleYamlBlur = useCallback(() => {\n    flushYamlDraft();\n  }, [flushYamlDraft]);\n\n  useEffect(() => {\n    yamlDraftRef.current = templateYaml;\n    templateYamlRef.current = templateYaml;\n  }, [templateYaml]);\n  useEffect(\n    () => () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    },\n    []\n  );\n\n  return (\n    <Grid\n      container\n      spacing={3}\n      direction=\"column\"\n      style={{ height: \"calc(100% - 15px)\" }}\n    >\n      <Grid item style={{ height: \"100%\" }}>\n        <div\n          style={{\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 16,\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"center\",\n              flexWrap: \"wrap\",\n              gap: 12,\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 12,\n                flexWrap: \"wrap\",\n              }}\n            >\n              {activeTemplateLabel && (\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Active template: {activeTemplateLabel}\n                </Typography>\n              )}\n              <Button\n                color=\"primary\"\n                variant=\"contained\"\n                size=\"small\"\n                onClick={onReload}\n                disabled={isReloading}\n              >\n                {reloadButtonLabel}\n              </Button>\n              <Button\n                color=\"primary\"\n                variant=\"outlined\"\n                size=\"small\"\n                onClick={onSave}\n                disabled={isSaving}\n              >\n                {saveButtonLabel}\n              </Button>\n              <Button\n                color=\"primary\"\n                variant=\"outlined\"\n                size=\"small\"\n                onClick={onOpenTemplatePicker}\n              >\n                Load different file\n              </Button>\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 8,\n              }}\n            >\n              {isSyncing && (\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 6,\n                  }}\n                >\n                  <CircularProgress size={16} thickness={5} />\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    Syncing...\n                  </Typography>\n                </div>\n              )}\n              <Button variant=\"outlined\" size=\"small\" onClick={onToggleYaml}>\n                {showYaml ? \"Hide YAML\" : \"Show YAML\"}\n              </Button>\n            </div>\n          </div>\n          {loadError && (\n            <Typography\n              variant=\"body2\"\n              style={{ color: theme.palette.error.main }}\n            >\n              {loadError}\n            </Typography>\n          )}\n          <div\n            style={{\n              flex: 1,\n              display: \"flex\",\n              gap: 16,\n              minHeight: 0,\n            }}\n          >\n            <div style={{ flex: showYaml ? 1.6 : 1, minWidth: 0 }}>\n              <div style={{ height: \"100%\" }}>\n                <App\n                  steps={templateSteps}\n                  parameters={templateParameters}\n                  output={templateOutput}\n                  onStepsChange={onStepsChange}\n                  onParametersChange={onParametersChange}\n                  onOutputChange={onOutputChange}\n                />\n              </div>\n            </div>\n            {showYaml && (\n              <Paper\n                elevation={2}\n                style={{\n                  flex: 1,\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  minWidth: 0,\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    padding: \"12px 16px\",\n                    borderBottom: \"1px solid rgba(0,0,0,0.12)\",\n                    fontWeight: 600,\n                    fontSize: \"0.875rem\",\n                  }}\n                >\n                  YAML Preview\n                </div>\n                {yamlError && (\n                  <div\n                    style={{\n                      padding: \"8px 16px\",\n                      borderBottom: \"1px solid rgba(0,0,0,0.08)\",\n                      color: theme.palette.error.main,\n                      fontSize: \"0.75rem\",\n                      background:\n                        paletteMode === \"dark\"\n                          ? \"rgba(255, 82, 82, 0.1)\"\n                          : \"rgba(244, 67, 54, 0.08)\",\n                    }}\n                  >\n                    {yamlError}\n                  </div>\n                )}\n                <div style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n                  <CodeMirror\n                    value={templateYaml}\n                    extensions={yamlExtensions}\n                    theme={codeMirrorTheme}\n                    height=\"100%\"\n                    onChange={handleYamlChange}\n                    onBlur={handleYamlBlur}\n                  />\n                </div>\n              </Paper>\n            )}\n          </div>\n        </div>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -3,46 +3,47 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 const resolveLabel = (element) => element.getAttribute("aria-label") ?? element.name ?? element.placeholder ?? "Field editor";
 const useFieldEditor = () => {
   const [editorState, setEditorState] = useState(null);
-  const [editorValue, setEditorValue] = useState("");
   const interactionRootRef = useRef(null);
   const closeEditor = useCallback(() => {
     setEditorState(null);
-    setEditorValue("");
   }, []);
-  const applyEditorValue = useCallback(() => {
-    const current = editorState;
-    if (!current) {
-      return;
-    }
-    const setNativeValue = (element, value) => {
-      const valueSetter = Object.getOwnPropertyDescriptor(
-        element,
-        "value"
-      )?.set;
-      const prototype = Object.getPrototypeOf(element);
-      const prototypeValueSetter = Object.getOwnPropertyDescriptor(
-        prototype,
-        "value"
-      )?.set;
-      if (valueSetter && valueSetter !== prototypeValueSetter) {
-        prototypeValueSetter?.call(element, value);
-      } else if (valueSetter) {
-        valueSetter.call(element, value);
-      } else {
-        element.value = value;
+  const applyEditorValue = useCallback(
+    (value) => {
+      const current = editorState;
+      if (!current) {
+        return;
       }
-    };
-    setNativeValue(current.target, editorValue);
-    current.target.dispatchEvent(new Event("input", { bubbles: true }));
-    closeEditor();
-  }, [closeEditor, editorState, editorValue]);
+      const setNativeValue = (element, nextValue) => {
+        const valueSetter = Object.getOwnPropertyDescriptor(
+          element,
+          "value"
+        )?.set;
+        const prototype = Object.getPrototypeOf(element);
+        const prototypeValueSetter = Object.getOwnPropertyDescriptor(
+          prototype,
+          "value"
+        )?.set;
+        if (valueSetter && valueSetter !== prototypeValueSetter) {
+          prototypeValueSetter?.call(element, nextValue);
+        } else if (valueSetter) {
+          valueSetter.call(element, nextValue);
+        } else {
+          element.value = nextValue;
+        }
+      };
+      setNativeValue(current.target, value);
+      current.target.dispatchEvent(new Event("input", { bubbles: true }));
+      closeEditor();
+    },
+    [closeEditor, editorState]
+  );
   const openEditor = useCallback(
     (target) => {
       setEditorState({
         target,
-        label: resolveLabel(target)
+        label: resolveLabel(target),
+        initialValue: target.value
       });
-      setEditorValue(target.value);
     },
     []
   );
@@ -84,8 +85,6 @@ const useFieldEditor = () => {
   }, [openEditor]);
   return {
     editorState,
-    editorValue,
-    setEditorValue,
     interactionRootRef,
     closeEditor,
     applyEditorValue

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

@@ -1 +1 @@
-{"version":3,"file":"useFieldEditor.esm.js","sources":["../../../src/components/TemplateDesigner/useFieldEditor.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\ntype EditorState = null | {\n  target: HTMLInputElement | HTMLTextAreaElement;\n  label: string;\n};\n\nconst resolveLabel = (element: HTMLInputElement | HTMLTextAreaElement) =>\n  element.getAttribute(\"aria-label\") ??\n  element.name ??\n  element.placeholder ??\n  \"Field editor\";\n\n/**\n * Provides a modal-friendly editing experience for readonly-looking inputs\n * by letting users double-click any text field and edit its value centrally.\n */\nexport const useFieldEditor = () => {\n  const [editorState, setEditorState] = useState<EditorState>(null);\n  const [editorValue, setEditorValue] = useState(\"\");\n  const interactionRootRef = useRef<HTMLDivElement | null>(null);\n\n  const closeEditor = useCallback(() => {\n    setEditorState(null);\n    setEditorValue(\"\");\n  }, []);\n\n  const applyEditorValue = useCallback(() => {\n    const current = editorState;\n    if (!current) {\n      return;\n    }\n\n    const setNativeValue = (\n      element: HTMLInputElement | HTMLTextAreaElement,\n      value: string\n    ) => {\n      const valueSetter = Object.getOwnPropertyDescriptor(\n        element,\n        \"value\"\n      )?.set;\n      const prototype = Object.getPrototypeOf(element);\n      const prototypeValueSetter = Object.getOwnPropertyDescriptor(\n        prototype,\n        \"value\"\n      )?.set;\n\n      if (valueSetter && valueSetter !== prototypeValueSetter) {\n        prototypeValueSetter?.call(element, value);\n      } else if (valueSetter) {\n        valueSetter.call(element, value);\n      } else {\n        // eslint-disable-next-line no-param-reassign\n        element.value = value;\n      }\n    };\n\n    setNativeValue(current.target, editorValue);\n    current.target.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    closeEditor();\n  }, [closeEditor, editorState, editorValue]);\n\n  const openEditor = useCallback(\n    (target: HTMLInputElement | HTMLTextAreaElement) => {\n      setEditorState({\n        target,\n        label: resolveLabel(target),\n      });\n      setEditorValue(target.value);\n    },\n    []\n  );\n\n  useEffect(() => {\n    const root = interactionRootRef.current;\n    if (!root) {\n      return undefined;\n    }\n\n    const handleDoubleClick = (event: MouseEvent) => {\n      const target = event.target;\n      if (\n        target instanceof HTMLInputElement &&\n        !target.readOnly &&\n        !target.disabled\n      ) {\n        const type = target.type?.toLowerCase();\n        const editableTypes = [\n          \"text\",\n          \"search\",\n          \"url\",\n          \"tel\",\n          \"email\",\n          \"number\",\n          \"password\",\n        ];\n        const isTextual = !type || editableTypes.includes(type);\n        if (!isTextual || !target.value) {\n          return;\n        }\n        event.stopPropagation();\n        openEditor(target);\n        return;\n      }\n      if (\n        target instanceof HTMLTextAreaElement &&\n        !target.readOnly &&\n        !target.disabled &&\n        target.value\n      ) {\n        event.stopPropagation();\n        openEditor(target);\n      }\n    };\n\n    root.addEventListener(\"dblclick\", handleDoubleClick, true);\n    return () => {\n      root.removeEventListener(\"dblclick\", handleDoubleClick, true);\n    };\n  }, [openEditor]);\n\n  return {\n    editorState,\n    editorValue,\n    setEditorValue,\n    interactionRootRef,\n    closeEditor,\n    applyEditorValue,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFieldEditor.esm.js","sources":["../../../src/components/TemplateDesigner/useFieldEditor.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\ntype EditorState = null | {\n  target: HTMLInputElement | HTMLTextAreaElement;\n  label: string;\n  initialValue: string;\n};\n\nconst resolveLabel = (element: HTMLInputElement | HTMLTextAreaElement) =>\n  element.getAttribute(\"aria-label\") ??\n  element.name ??\n  element.placeholder ??\n  \"Field editor\";\n\n/**\n * Provides a modal-friendly editing experience for readonly-looking inputs\n * by letting users double-click any text field and edit its value centrally.\n */\nexport const useFieldEditor = () => {\n  const [editorState, setEditorState] = useState<EditorState>(null);\n  const interactionRootRef = useRef<HTMLDivElement | null>(null);\n\n  const closeEditor = useCallback(() => {\n    setEditorState(null);\n  }, []);\n\n  const applyEditorValue = useCallback(\n    (value: string) => {\n      const current = editorState;\n      if (!current) {\n        return;\n      }\n\n      const setNativeValue = (\n        element: HTMLInputElement | HTMLTextAreaElement,\n        nextValue: string\n      ) => {\n        const valueSetter = Object.getOwnPropertyDescriptor(\n          element,\n          \"value\"\n        )?.set;\n        const prototype = Object.getPrototypeOf(element);\n        const prototypeValueSetter = Object.getOwnPropertyDescriptor(\n          prototype,\n          \"value\"\n        )?.set;\n\n        if (valueSetter && valueSetter !== prototypeValueSetter) {\n          prototypeValueSetter?.call(element, nextValue);\n        } else if (valueSetter) {\n          valueSetter.call(element, nextValue);\n        } else {\n          // eslint-disable-next-line no-param-reassign\n          element.value = nextValue;\n        }\n      };\n\n      setNativeValue(current.target, value);\n      current.target.dispatchEvent(new Event(\"input\", { bubbles: true }));\n      closeEditor();\n    },\n    [closeEditor, editorState]\n  );\n\n  const openEditor = useCallback(\n    (target: HTMLInputElement | HTMLTextAreaElement) => {\n      setEditorState({\n        target,\n        label: resolveLabel(target),\n        initialValue: target.value,\n      });\n    },\n    []\n  );\n\n  useEffect(() => {\n    const root = interactionRootRef.current;\n    if (!root) {\n      return undefined;\n    }\n\n    const handleDoubleClick = (event: MouseEvent) => {\n      const target = event.target;\n      if (\n        target instanceof HTMLInputElement &&\n        !target.readOnly &&\n        !target.disabled\n      ) {\n        const type = target.type?.toLowerCase();\n        const editableTypes = [\n          \"text\",\n          \"search\",\n          \"url\",\n          \"tel\",\n          \"email\",\n          \"number\",\n          \"password\",\n        ];\n        const isTextual = !type || editableTypes.includes(type);\n        if (!isTextual || !target.value) {\n          return;\n        }\n        event.stopPropagation();\n        openEditor(target);\n        return;\n      }\n      if (\n        target instanceof HTMLTextAreaElement &&\n        !target.readOnly &&\n        !target.disabled &&\n        target.value\n      ) {\n        event.stopPropagation();\n        openEditor(target);\n      }\n    };\n\n    root.addEventListener(\"dblclick\", handleDoubleClick, true);\n    return () => {\n      root.removeEventListener(\"dblclick\", handleDoubleClick, true);\n    };\n  }, [openEditor]);\n\n  return {\n    editorState,\n    interactionRootRef,\n    closeEditor,\n    applyEditorValue,\n  };\n};\n"],"names":[],"mappings":"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"}