@tduniec/plugin-template-designer 0.3.1 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateLanding.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateLanding.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Grid,\n  Paper,\n  TextField,\n  Typography,\n} from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport { TemplateEntityV1beta3 } from \"@backstage/plugin-scaffolder-common\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\n\ntype TemplateLandingProps = {\n  loadError?: string;\n  onStartSampleTemplate: () => void;\n  onOpenTemplatePicker: () => void;\n  availableTemplates: TemplateEntityV1beta3[];\n  selectCatalogTemplate: (selected: TemplateEntityV1beta3) => void;\n};\n\nexport const TemplateLanding = ({\n  loadError,\n  onStartSampleTemplate,\n  onOpenTemplatePicker,\n  availableTemplates,\n  selectCatalogTemplate,\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={4}>\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={4}>\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 item xs={12} md={4}>\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\">Select from catalog</Typography>\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Select existing template from catalog.\n                </Typography>\n              </Box>\n              <Box\n                mt=\"auto\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                style={{ gap: 8 }}\n              >\n                <Autocomplete\n                  style={{ width: \"100%\" }}\n                  options={availableTemplates ?? []}\n                  getOptionLabel={(option) =>\n                    option.metadata.title ?? option.metadata.name\n                  }\n                  onChange={(_e, value) => {\n                    if (value) {\n                      selectCatalogTemplate(value);\n                    }\n                  }}\n                  renderInput={(params) => (\n                    <TextField\n                      {...params}\n                      autoComplete=\"off\"\n                      label=\"Select template\"\n                      variant=\"outlined\"\n                    />\n                  )}\n                />\n              </Box>\n            </Paper>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateLanding.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateLanding.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Grid,\n  Paper,\n  TextField,\n  Typography,\n} from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport { TemplateEntityV1beta3 } from \"@backstage/plugin-scaffolder-common\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\n\ntype TemplateLandingProps = {\n  loadError?: string;\n  onStartSampleTemplate: () => void;\n  onOpenTemplatePicker: () => void;\n  availableTemplates: TemplateEntityV1beta3[];\n  selectCatalogTemplate: (selected: TemplateEntityV1beta3) => void;\n};\n\nexport const TemplateLanding = ({\n  loadError,\n  onStartSampleTemplate,\n  onOpenTemplatePicker,\n  availableTemplates,\n  selectCatalogTemplate,\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={4}>\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={4}>\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 item xs={12} md={4}>\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\">Select from catalog</Typography>\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  Select existing template from catalog.\n                </Typography>\n              </Box>\n              <Box\n                mt=\"auto\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                style={{ gap: 8 }}\n              >\n                <Autocomplete\n                  style={{ width: \"100%\" }}\n                  size=\"small\"\n                  options={availableTemplates ?? []}\n                  getOptionLabel={(option) =>\n                    option.metadata.title ?? option.metadata.name\n                  }\n                  onChange={(_e, value) => {\n                    if (value) {\n                      selectCatalogTemplate(value);\n                    }\n                  }}\n                  renderInput={(params) => (\n                    <TextField\n                      {...params}\n                      autoComplete=\"off\"\n                      label=\"Select template\"\n                      variant=\"outlined\"\n                    />\n                  )}\n                />\n              </Box>\n            </Paper>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -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, CircularProgress, 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 = ({
@@ -36,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) {
@@ -78,201 +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__ */ 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" })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            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

@@ -1 +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 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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"}
+{"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

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

@@ -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;;;;"}