npm - @tduniec/plugin-template-designer - Versions diffs - 0.3.0 → 0.3.2 - Mend

@tduniec/plugin-template-designer 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
-import { Grid, Typography, Button, Paper } from '@material-ui/core';
+import { CircularProgress, Typography, Grid, Button, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import CodeMirror from '@uiw/react-codemirror';
 import { yaml } from '@codemirror/lang-yaml';
+import { createCodeMirrorTheme } from './codemirrorTheme.esm.js';
 import App from '../../DesignerFlow/DesignerFlow.esm.js';
 const TemplateWorkspace = ({
@@ -26,7 +27,8 @@ const TemplateWorkspace = ({
   reloadButtonLabel,
   saveButtonLabel,
   isReloading,
-  isSaving
+  isSaving,
+  isSyncing = false
 }) => {
   const theme = useTheme();
   const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
@@ -35,8 +37,8 @@ const TemplateWorkspace = ({
   const debounceRef = useRef(null);
   const yamlExtensions = useMemo(() => [yaml()], []);
   const codeMirrorTheme = useMemo(
-    () => paletteMode === "dark" ? "dark" : "light",
-    [paletteMode]
+    () => createCodeMirrorTheme(theme, paletteMode),
+    [paletteMode, theme]
   );
   const flushYamlDraft = useCallback(() => {
     if (debounceRef.current) {
@@ -77,175 +79,223 @@ const TemplateWorkspace = ({
     },
     []
   );
-  return /* @__PURE__ */ jsx(
-    Grid,
-    {
-      container: true,
-      spacing: 3,
-      direction: "column",
-      style: { height: "calc(100% - 15px)" },
-      children: /* @__PURE__ */ jsx(Grid, { item: true, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            gap: 16
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  flexWrap: "wrap",
-                  gap: 12
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 12,
-                        flexWrap: "wrap"
-                      },
-                      children: [
-                        activeTemplateLabel && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
-                          "Active template: ",
-                          activeTemplateLabel
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            color: "primary",
-                            variant: "contained",
-                            size: "small",
-                            onClick: onReload,
-                            disabled: isReloading,
-                            children: reloadButtonLabel
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            color: "primary",
-                            variant: "outlined",
-                            size: "small",
-                            onClick: onSave,
-                            disabled: isSaving,
-                            children: saveButtonLabel
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            color: "primary",
-                            variant: "outlined",
-                            size: "small",
-                            onClick: onOpenTemplatePicker,
-                            children: "Load different file"
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: onToggleYaml, children: showYaml ? "Hide YAML" : "Show YAML" })
-                ]
-              }
-            ),
-            loadError && /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "body2",
-                style: { color: theme.palette.error.main },
-                children: loadError
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  flex: 1,
-                  display: "flex",
-                  gap: 16,
-                  minHeight: 0
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { style: { flex: showYaml ? 1.6 : 1, minWidth: 0 }, children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx(
-                    App,
-                    {
-                      steps: templateSteps,
-                      parameters: templateParameters,
-                      output: templateOutput,
-                      onStepsChange,
-                      onParametersChange,
-                      onOutputChange
-                    }
-                  ) }) }),
-                  showYaml && /* @__PURE__ */ jsxs(
-                    Paper,
-                    {
-                      elevation: 2,
-                      style: {
-                        flex: 1,
-                        display: "flex",
-                        flexDirection: "column",
-                        minWidth: 0,
-                        overflow: "hidden"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            style: {
-                              padding: "12px 16px",
-                              borderBottom: "1px solid rgba(0,0,0,0.12)",
-                              fontWeight: 600,
-                              fontSize: "0.875rem"
-                            },
-                            children: "YAML Preview"
-                          }
-                        ),
-                        yamlError && /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            style: {
-                              padding: "8px 16px",
-                              borderBottom: "1px solid rgba(0,0,0,0.08)",
-                              color: theme.palette.error.main,
-                              fontSize: "0.75rem",
-                              background: paletteMode === "dark" ? "rgba(255, 82, 82, 0.1)" : "rgba(244, 67, 54, 0.08)"
-                            },
-                            children: yamlError
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx(
-                          CodeMirror,
-                          {
-                            value: templateYaml,
-                            extensions: yamlExtensions,
-                            theme: codeMirrorTheme,
-                            height: "100%",
-                            onChange: handleYamlChange,
-                            onBlur: handleYamlBlur
-                          }
-                        ) })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ) })
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: "calc(100% - 15px)" }, children: [
+    isSyncing && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: "calc(72px + 160px)",
+          // offset from Backstage left nav into page
+          bottom: 24,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "6px 10px",
+          borderRadius: 8,
+          background: paletteMode === "dark" ? "rgba(33,33,33,0.9)" : "rgba(255,255,255,0.95)",
+          boxShadow: theme.shadows[3],
+          border: `1px solid ${theme.palette.divider}`,
+          zIndex: (theme.zIndex?.tooltip ?? 1500) + 1,
+          pointerEvents: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx(CircularProgress, { size: 16, thickness: 5, color: "primary" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Syncing..." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, direction: "column", style: { height: "100%" }, children: /* @__PURE__ */ jsx(Grid, { item: true, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexWrap: "wrap",
+                gap: 12
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      flexWrap: "wrap"
+                    },
+                    children: [
+                      activeTemplateLabel && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+                        "Active template: ",
+                        activeTemplateLabel
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          color: "primary",
+                          variant: "contained",
+                          size: "small",
+                          onClick: onReload,
+                          disabled: isReloading,
+                          children: reloadButtonLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          color: "primary",
+                          variant: "outlined",
+                          size: "small",
+                          onClick: onSave,
+                          disabled: isSaving,
+                          children: saveButtonLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          color: "primary",
+                          variant: "outlined",
+                          size: "small",
+                          onClick: onOpenTemplatePicker,
+                          children: "Load different file"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8
+                    },
+                    children: [
+                      isSyncing && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            padding: "2px 6px",
+                            borderRadius: 6,
+                            background: paletteMode === "dark" ? "rgba(33,33,33,0.8)" : "rgba(255,255,255,0.9)",
+                            border: `1px solid ${theme.palette.divider}`
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(CircularProgress, { size: 14, thickness: 5, color: "primary" }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Syncing..." })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: onToggleYaml, children: showYaml ? "Hide YAML" : "Show YAML" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          loadError && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              style: { color: theme.palette.error.main },
+              children: loadError
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                gap: 16,
+                minHeight: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { flex: showYaml ? 1.6 : 1, minWidth: 0 }, children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+                  App,
+                  {
+                    steps: templateSteps,
+                    parameters: templateParameters,
+                    output: templateOutput,
+                    onStepsChange,
+                    onParametersChange,
+                    onOutputChange
+                  }
+                ) }) }),
+                showYaml && /* @__PURE__ */ jsxs(
+                  Paper,
+                  {
+                    elevation: 2,
+                    style: {
+                      flex: 1,
+                      display: "flex",
+                      flexDirection: "column",
+                      minWidth: 0,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: "12px 16px",
+                            borderBottom: "1px solid rgba(0,0,0,0.12)",
+                            fontWeight: 600,
+                            fontSize: "0.875rem"
+                          },
+                          children: "YAML Preview"
+                        }
+                      ),
+                      yamlError && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: "8px 16px",
+                            borderBottom: "1px solid rgba(0,0,0,0.08)",
+                            color: theme.palette.error.main,
+                            fontSize: "0.75rem",
+                            background: paletteMode === "dark" ? "rgba(255, 82, 82, 0.1)" : "rgba(244, 67, 54, 0.08)"
+                          },
+                          children: yamlError
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx(
+                        CodeMirror,
+                        {
+                          value: templateYaml,
+                          extensions: yamlExtensions,
+                          theme: codeMirrorTheme,
+                          height: "100%",
+                          onChange: handleYamlChange,
+                          onBlur: handleYamlBlur
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
 };
 export { TemplateWorkspace };

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

	@@ -1 +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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"}
1	+ {"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 { createCodeMirrorTheme } from \"./codemirrorTheme\";\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 () => createCodeMirrorTheme(theme, paletteMode),\n [paletteMode, theme]\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 <div style={{ position: \"relative\", height: \"calc(100% - 15px)\" }}>\n {isSyncing && (\n <div\n style={{\n position: \"fixed\",\n left: \"calc(72px + 160px)\", // offset from Backstage left nav into page\n bottom: 24,\n display: \"flex\",\n alignItems: \"center\",\n gap: 8,\n padding: \"6px 10px\",\n borderRadius: 8,\n background:\n paletteMode === \"dark\"\n ? \"rgba(33,33,33,0.9)\"\n : \"rgba(255,255,255,0.95)\",\n boxShadow: theme.shadows[3],\n border: `1px solid ${theme.palette.divider}`,\n zIndex: (theme.zIndex?.tooltip ?? 1500) + 1,\n pointerEvents: \"none\",\n }}\n >\n <CircularProgress size={16} thickness={5} color=\"primary\" />\n <Typography variant=\"caption\" color=\"textSecondary\">\n Syncing...\n </Typography>\n </div>\n )}\n <Grid container spacing={3} direction=\"column\" style={{ height: \"100%\" }}>\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 padding: \"2px 6px\",\n borderRadius: 6,\n background:\n paletteMode === \"dark\"\n ? \"rgba(33,33,33,0.8)\"\n : \"rgba(255,255,255,0.9)\",\n border: `1px solid ${theme.palette.divider}`,\n }}\n >\n <CircularProgress size={14} thickness={5} color=\"primary\" />\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 </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TemplateDesigner/components/codemirrorTheme.esm.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { EditorView } from '@codemirror/view';
+const createCodeMirrorTheme = (materialTheme, paletteMode) => EditorView.theme(
+  {
+    "&": {
+      backgroundColor: materialTheme.palette.background.paper,
+      color: materialTheme.palette.text.primary
+    },
+    ".cm-content": {
+      fontFamily: '"Roboto Mono", "SFMono-Regular", Consolas, monospace'
+    },
+    ".cm-scroller": {
+      fontSize: 13,
+      lineHeight: 1.5
+    },
+    ".cm-gutters": {
+      backgroundColor: materialTheme.palette.background.paper,
+      color: materialTheme.palette.text.secondary,
+      borderRight: `1px solid ${materialTheme.palette.divider}`
+    },
+    "&.cm-editor.cm-focused": {
+      outline: `1px solid ${materialTheme.palette.primary.main}`,
+      outlineOffset: 0
+    }
+  },
+  { dark: paletteMode === "dark" }
+);
+export { createCodeMirrorTheme };
+//# sourceMappingURL=codemirrorTheme.esm.js.map

package/dist/components/TemplateDesigner/components/codemirrorTheme.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"codemirrorTheme.esm.js","sources":["../../../../src/components/TemplateDesigner/components/codemirrorTheme.ts"],"sourcesContent":["import { EditorView } from \"@codemirror/view\";\nimport type { Extension } from \"@codemirror/state\";\nimport type { Theme } from \"@material-ui/core/styles\";\n\nexport const createCodeMirrorTheme = (\n materialTheme: Theme,\n paletteMode: \"light\" | \"dark\"\n): Extension =>\n EditorView.theme(\n {\n \"&\": {\n backgroundColor: materialTheme.palette.background.paper,\n color: materialTheme.palette.text.primary,\n },\n \".cm-content\": {\n fontFamily: '\"Roboto Mono\", \"SFMono-Regular\", Consolas, monospace',\n },\n \".cm-scroller\": {\n fontSize: 13,\n lineHeight: 1.5,\n },\n \".cm-gutters\": {\n backgroundColor: materialTheme.palette.background.paper,\n color: materialTheme.palette.text.secondary,\n borderRight: `1px solid ${materialTheme.palette.divider}`,\n },\n \"&.cm-editor.cm-focused\": {\n outline: `1px solid ${materialTheme.palette.primary.main}`,\n outlineOffset: 0,\n },\n },\n { dark: paletteMode === \"dark\" }\n );\n"],"names":[],"mappings":";;AAIO,MAAM,qBAAA,GAAwB,CACnC,aAAA,EACA,WAAA,KAEA,UAAA,CAAW,KAAA;AAAA,EACT;AAAA,IACE,GAAA,EAAK;AAAA,MACH,eAAA,EAAiB,aAAA,CAAc,OAAA,CAAQ,UAAA,CAAW,KAAA;AAAA,MAClD,KAAA,EAAO,aAAA,CAAc,OAAA,CAAQ,IAAA,CAAK;AAAA,KACpC;AAAA,IACA,aAAA,EAAe;AAAA,MACb,UAAA,EAAY;AAAA,KACd;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,EAAA;AAAA,MACV,UAAA,EAAY;AAAA,KACd;AAAA,IACA,aAAA,EAAe;AAAA,MACb,eAAA,EAAiB,aAAA,CAAc,OAAA,CAAQ,UAAA,CAAW,KAAA;AAAA,MAClD,KAAA,EAAO,aAAA,CAAc,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,MAClC,WAAA,EAAa,CAAA,UAAA,EAAa,aAAA,CAAc,OAAA,CAAQ,OAAO,CAAA;AAAA,KACzD;AAAA,IACA,wBAAA,EAA0B;AAAA,MACxB,OAAA,EAAS,CAAA,UAAA,EAAa,aAAA,CAAc,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAAA,MACxD,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,EAAE,IAAA,EAAM,WAAA,KAAgB,MAAA;AAC1B;;;;"}

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

@@ -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