@tduniec/plugin-template-designer-foundation 0.1.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateLanding.esm.js","sources":["../../../src/components/TemplateDesigner/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 Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport type { TemplateEntityV1beta3 } from \"@backstage/plugin-scaffolder-common\";\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":";;;;;AAoBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAS,IAAA;AAAA,MACT,cAAA,EAAe,QAAA;AAAA,MACf,UAAA,EAAW,QAAA;AAAA,MACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,EAAO;AAAA,MAE3B,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,CAAA,EAC7B,+BAAC,IAAA,EAAA,EAAK,SAAA,EAAS,MAAC,OAAA,EAAS,CAAA,EAAG,YAAW,SAAA,EACrC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,EAAA,EAAI,IAAI,CAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA;AAAA,YACX,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,EAAA;AAAA,cACT,MAAA,EAAQ,MAAA;AAAA,cACR,SAAA,EAAW,GAAA;AAAA,cACX,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACP;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,QAAA,EAAA,qBAAA,EAAmB,CAAA;AAAA,oCAC3C,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,iBAAgB,QAAA,EAAA,qGAAA,EAGlD;AAAA,eAAA,EACF,CAAA;AAAA,kCACC,GAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,gBAAe,YAAA,EAC3C,QAAA,kBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,SAAA;AAAA,kBACN,OAAA,EAAQ,WAAA;AAAA,kBACR,OAAA,EAAS,qBAAA;AAAA,kBACV,QAAA,EAAA;AAAA;AAAA,eAED,EACF;AAAA;AAAA;AAAA,SACF,EACF,CAAA;AAAA,4BACC,IAAA,EAAA,EAAK,IAAA,EAAI,MAAC,EAAA,EAAI,EAAA,EAAI,IAAI,CAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA;AAAA,YACX,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,EAAA;AAAA,cACT,MAAA,EAAQ,MAAA;AAAA,cACR,SAAA,EAAW,GAAA;AAAA,cACX,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACP;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,QAAA,EAAA,gBAAA,EAAc,CAAA;AAAA,oCACtC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,iBAAgB,QAAA,EAAA,wFAAA,EAGlD;AAAA,eAAA,EACF,CAAA;AAAA,8BACA,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,MAAA;AAAA,kBACH,OAAA,EAAQ,MAAA;AAAA,kBACR,aAAA,EAAc,QAAA;AAAA,kBACd,KAAA,EAAO,EAAE,GAAA,EAAK,CAAA,EAAE;AAAA,kBAEhB,QAAA,EAAA;AAAA,oCAAA,GAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAM,SAAA;AAAA,wBACN,OAAA,EAAQ,UAAA;AAAA,wBACR,OAAA,EAAS,oBAAA;AAAA,wBACV,QAAA,EAAA;AAAA;AAAA,qBAED;AAAA,oBACC,SAAA,oBACC,GAAA;AAAA,sBAAC,UAAA;AAAA,sBAAA;AAAA,wBACC,OAAA,EAAQ,OAAA;AAAA,wBACR,OAAO,EAAE,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,MAAM,IAAA,EAAK;AAAA,wBAExC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA;AAAA,SACF,EACF,CAAA;AAAA,4BACC,IAAA,EAAA,EAAK,IAAA,EAAI,MAAC,EAAA,EAAI,EAAA,EAAI,IAAI,CAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA;AAAA,YACX,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,EAAA;AAAA,cACT,MAAA,EAAQ,MAAA;AAAA,cACR,SAAA,EAAW,GAAA;AAAA,cACX,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACP;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,QAAA,EAAA,qBAAA,EAAmB,CAAA;AAAA,oCAC3C,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,iBAAgB,QAAA,EAAA,wCAAA,EAElD;AAAA,eAAA,EACF,CAAA;AAAA,8BACA,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,MAAA;AAAA,kBACH,OAAA,EAAQ,MAAA;AAAA,kBACR,aAAA,EAAc,QAAA;AAAA,kBACd,KAAA,EAAO,EAAE,GAAA,EAAK,CAAA,EAAE;AAAA,kBAEhB,QAAA,kBAAA,GAAA;AAAA,oBAAC,YAAA;AAAA,oBAAA;AAAA,sBACC,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAO;AAAA,sBACvB,IAAA,EAAK,OAAA;AAAA,sBACL,OAAA,EAAS,sBAAsB,EAAC;AAAA,sBAChC,gBAAgB,CAAC,MAAA,KACf,OAAO,QAAA,CAAS,KAAA,IAAS,OAAO,QAAA,CAAS,IAAA;AAAA,sBAE3C,QAAA,EAAU,CAAC,EAAA,EAAI,KAAA,KAAU;AACvB,wBAAA,IAAI,KAAA,EAAO;AACT,0BAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA,wBAC7B;AAAA,sBACF,CAAA;AAAA,sBACA,WAAA,EAAa,CAAC,MAAA,qBACZ,GAAA;AAAA,wBAAC,SAAA;AAAA,wBAAA;AAAA,0BACE,GAAG,MAAA;AAAA,0BACJ,YAAA,EAAa,KAAA;AAAA,0BACb,KAAA,EAAM,iBAAA;AAAA,0BACN,OAAA,EAAQ;AAAA;AAAA;AACV;AAAA;AAEJ;AAAA;AACF;AAAA;AAAA,SACF,EACF;AAAA,OAAA,EACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,416 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+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 DesignerFlow from '../../designerFlow/DesignerFlow.esm.js';
+import { ActionNode } from '../Nodes/ActionNode.esm.js';
+import { OutputNode } from '../Nodes/OutputNode.esm.js';
+
+const TemplateWorkspace = ({
+  templateSteps,
+  templateParameters,
+  templateOutput,
+  templateYaml,
+  yamlError,
+  loadError,
+  showYaml,
+  onToggleYaml,
+  onYamlChange,
+  onStepsChange,
+  onParametersChange,
+  onOutputChange,
+  onReload,
+  onSave,
+  onOpenTemplatePicker,
+  activeTemplateLabel,
+  reloadButtonLabel,
+  saveButtonLabel,
+  isReloading,
+  isSaving,
+  isSyncing = false,
+  parametersNodeComponent,
+  actionNodeComponent = ActionNode,
+  outputNodeComponent = OutputNode,
+  headerActionsSlot,
+  flowTopSlot,
+  rightPanelSlot
+}) => {
+  const workspaceRef = useRef(null);
+  const [workspaceHeight, setWorkspaceHeight] = useState(null);
+  const theme = useTheme();
+  const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
+  const yamlDraftRef = useRef(templateYaml);
+  const templateYamlRef = useRef(templateYaml);
+  const debounceRef = useRef(null);
+  const flowDebounceRef = useRef(null);
+  const lastGoodFlowModelRef = useRef({
+    steps: templateSteps,
+    parameters: templateParameters,
+    output: templateOutput
+  });
+  const [debouncedFlowModel, setDebouncedFlowModel] = useState({
+    steps: templateSteps,
+    parameters: templateParameters,
+    output: templateOutput
+  });
+  const yamlExtensions = useMemo(() => [yaml()], []);
+  const codeMirrorTheme = useMemo(
+    () => createCodeMirrorTheme(theme, paletteMode),
+    [paletteMode, theme]
+  );
+  const flushYamlDraft = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    if (yamlDraftRef.current !== templateYamlRef.current) {
+      onYamlChange(yamlDraftRef.current);
+    }
+  }, [onYamlChange]);
+  const handleYamlChange = useCallback(
+    (value) => {
+      yamlDraftRef.current = value;
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        if (yamlDraftRef.current !== templateYamlRef.current) {
+          onYamlChange(yamlDraftRef.current);
+        }
+        debounceRef.current = null;
+      }, 600);
+    },
+    [onYamlChange]
+  );
+  const flushFlowDebounce = useCallback(() => {
+    if (flowDebounceRef.current) {
+      clearTimeout(flowDebounceRef.current);
+      flowDebounceRef.current = null;
+    }
+    if (!yamlError) {
+      lastGoodFlowModelRef.current = {
+        steps: templateSteps,
+        parameters: templateParameters,
+        output: templateOutput
+      };
+    }
+    setDebouncedFlowModel(lastGoodFlowModelRef.current);
+  }, [templateParameters, templateSteps, templateOutput, yamlError]);
+  const handleYamlBlur = useCallback(() => {
+    flushYamlDraft();
+    flushFlowDebounce();
+  }, [flushFlowDebounce, flushYamlDraft]);
+  useEffect(() => {
+    if (!yamlError) {
+      lastGoodFlowModelRef.current = {
+        steps: templateSteps,
+        parameters: templateParameters,
+        output: templateOutput
+      };
+    }
+    if (flowDebounceRef.current) {
+      clearTimeout(flowDebounceRef.current);
+    }
+    flowDebounceRef.current = setTimeout(() => {
+      setDebouncedFlowModel(lastGoodFlowModelRef.current);
+      flowDebounceRef.current = null;
+    }, 400);
+  }, [templateParameters, templateSteps, templateOutput, yamlError]);
+  useEffect(() => {
+    yamlDraftRef.current = templateYaml;
+    templateYamlRef.current = templateYaml;
+  }, [templateYaml]);
+  useEffect(() => {
+    if (!showYaml) {
+      flushYamlDraft();
+    }
+  }, [showYaml, flushYamlDraft]);
+  useEffect(
+    () => () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (flowDebounceRef.current) {
+        clearTimeout(flowDebounceRef.current);
+      }
+      flushYamlDraft();
+    },
+    [flushYamlDraft]
+  );
+  const recalcWorkspaceHeight = useCallback(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const node = workspaceRef.current;
+    if (!node) {
+      return;
+    }
+    const rect = node.getBoundingClientRect();
+    const available = window.innerHeight - rect.top - 16;
+    setWorkspaceHeight(Math.max(available, 320));
+  }, []);
+  useEffect(() => {
+    recalcWorkspaceHeight();
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    const handleResize = () => recalcWorkspaceHeight();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [recalcWorkspaceHeight]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: workspaceRef,
+      style: {
+        position: "relative",
+        height: workspaceHeight ? `${workspaceHeight}px` : "100vh",
+        minHeight: 0
+      },
+      children: [
+        isSyncing && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left: "calc(72px + 160px)",
+              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
+                }
+              ),
+              headerActionsSlot && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 12 }, children: headerActionsSlot }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    display: "flex",
+                    gap: 16,
+                    minHeight: 0,
+                    height: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: showYaml ? 1.6 : 1,
+                          minWidth: 0,
+                          display: "flex",
+                          flexDirection: "column"
+                        },
+                        children: /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0 }, children: [
+                          flowTopSlot,
+                          /* @__PURE__ */ jsx(
+                            DesignerFlow,
+                            {
+                              steps: debouncedFlowModel.steps,
+                              parameters: debouncedFlowModel.parameters,
+                              output: debouncedFlowModel.output,
+                              onStepsChange,
+                              onParametersChange,
+                              onOutputChange,
+                              actionNodeComponent,
+                              parametersNodeComponent,
+                              outputNodeComponent
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    (showYaml || rightPanelSlot) && /* @__PURE__ */ jsxs(
+                      Paper,
+                      {
+                        elevation: 2,
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          flexDirection: "column",
+                          minWidth: 0,
+                          overflow: "hidden"
+                        },
+                        children: [
+                          showYaml && /* @__PURE__ */ jsxs(Fragment, { 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
+                              }
+                            ) })
+                          ] }),
+                          rightPanelSlot && !showYaml && /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: rightPanelSlot })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+export { TemplateWorkspace };
+//# sourceMappingURL=TemplateWorkspace.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateWorkspace.esm.js","sources":["../../../src/components/TemplateDesigner/TemplateWorkspace.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } 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 \"../../types/flowNodes\";\nimport DesignerFlow, {\n  type DesignerFlowProps,\n} from \"../../designerFlow/DesignerFlow\";\nimport { ActionNode } from \"../Nodes/ActionNode\";\nimport { OutputNode } from \"../Nodes/OutputNode\";\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  parametersNodeComponent: DesignerFlowProps[\"parametersNodeComponent\"];\n  actionNodeComponent?: DesignerFlowProps[\"actionNodeComponent\"];\n  outputNodeComponent?: DesignerFlowProps[\"outputNodeComponent\"];\n  headerActionsSlot?: ReactNode;\n  flowTopSlot?: ReactNode;\n  rightPanelSlot?: ReactNode;\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  parametersNodeComponent,\n  actionNodeComponent = ActionNode as DesignerFlowProps[\"actionNodeComponent\"],\n  outputNodeComponent = OutputNode as DesignerFlowProps[\"outputNodeComponent\"],\n  headerActionsSlot,\n  flowTopSlot,\n  rightPanelSlot,\n}: TemplateWorkspaceProps) => {\n  const workspaceRef = useRef<HTMLDivElement | null>(null);\n  const [workspaceHeight, setWorkspaceHeight] = useState<number | null>(null);\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 flowDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastGoodFlowModelRef = useRef<{\n    steps: TaskStep[];\n    parameters: TemplateParametersValue;\n    output?: ScaffolderTaskOutput;\n  }>({\n    steps: templateSteps,\n    parameters: templateParameters,\n    output: templateOutput,\n  });\n  const [debouncedFlowModel, setDebouncedFlowModel] = useState<{\n    steps: TaskStep[];\n    parameters: TemplateParametersValue;\n    output?: ScaffolderTaskOutput;\n  }>({\n    steps: templateSteps,\n    parameters: templateParameters,\n    output: templateOutput,\n  });\n  const yamlExtensions = useMemo(() => [yaml()], []);\n  const codeMirrorTheme = useMemo(\n    () => createCodeMirrorTheme(theme, paletteMode),\n    [paletteMode, theme]\n  );\n\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\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); // Send YAML updates after user pauses; avoids live sync on every keystroke.\n    },\n    [onYamlChange]\n  );\n\n  const flushFlowDebounce = useCallback(() => {\n    if (flowDebounceRef.current) {\n      clearTimeout(flowDebounceRef.current);\n      flowDebounceRef.current = null;\n    }\n    // Push latest parsable props immediately; used when user clicks out.\n    if (!yamlError) {\n      lastGoodFlowModelRef.current = {\n        steps: templateSteps,\n        parameters: templateParameters,\n        output: templateOutput,\n      };\n    }\n    setDebouncedFlowModel(lastGoodFlowModelRef.current);\n  }, [templateParameters, templateSteps, templateOutput, yamlError]);\n\n  const handleYamlBlur = useCallback(() => {\n    flushYamlDraft();\n    // Ensure pending graph updates flush when user leaves the editor.\n    flushFlowDebounce();\n  }, [flushFlowDebounce, flushYamlDraft]);\n\n  useEffect(() => {\n    // Keep the last good (parsable) model so YAML drafts with errors don't blank the canvas.\n    if (!yamlError) {\n      lastGoodFlowModelRef.current = {\n        steps: templateSteps,\n        parameters: templateParameters,\n        output: templateOutput,\n      };\n    }\n    if (flowDebounceRef.current) {\n      clearTimeout(flowDebounceRef.current);\n    }\n    // Debounce to avoid re-rendering the graph on every keystroke in YAML/editor.\n    flowDebounceRef.current = setTimeout(() => {\n      // If YAML is broken, keep showing the last good model instead of empty graph.\n      setDebouncedFlowModel(lastGoodFlowModelRef.current);\n      flowDebounceRef.current = null;\n    }, 400);\n  }, [templateParameters, templateSteps, templateOutput, yamlError]);\n\n  useEffect(() => {\n    yamlDraftRef.current = templateYaml;\n    templateYamlRef.current = templateYaml;\n  }, [templateYaml]);\n\n  useEffect(() => {\n    if (!showYaml) {\n      flushYamlDraft();\n    }\n  }, [showYaml, flushYamlDraft]);\n\n  useEffect(\n    () => () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n      if (flowDebounceRef.current) {\n        clearTimeout(flowDebounceRef.current);\n      }\n      flushYamlDraft();\n    },\n    [flushYamlDraft]\n  );\n\n  const recalcWorkspaceHeight = useCallback(() => {\n    if (typeof window === \"undefined\") {\n      return;\n    }\n    const node = workspaceRef.current;\n    if (!node) {\n      return;\n    }\n    const rect = node.getBoundingClientRect();\n    const available = window.innerHeight - rect.top - 16;\n    setWorkspaceHeight(Math.max(available, 320));\n  }, []);\n\n  useEffect(() => {\n    recalcWorkspaceHeight();\n    if (typeof window === \"undefined\") {\n      return undefined;\n    }\n    const handleResize = () => recalcWorkspaceHeight();\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, [recalcWorkspaceHeight]);\n\n  return (\n    <div\n      ref={workspaceRef}\n      style={{\n        position: \"relative\",\n        height: workspaceHeight ? `${workspaceHeight}px` : \"100vh\",\n        minHeight: 0,\n      }}\n    >\n      {isSyncing && (\n        <div\n          style={{\n            position: \"fixed\",\n            left: \"calc(72px + 160px)\",\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            {headerActionsSlot && (\n              <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 12 }}>\n                {headerActionsSlot}\n              </div>\n            )}\n            <div\n              style={{\n                flex: 1,\n                display: \"flex\",\n                gap: 16,\n                minHeight: 0,\n                height: \"100%\",\n              }}\n            >\n              <div\n                style={{\n                  flex: showYaml ? 1.6 : 1,\n                  minWidth: 0,\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                }}\n              >\n                <div style={{ flex: 1, minHeight: 0 }}>\n                  {flowTopSlot}\n                  <DesignerFlow\n                    steps={debouncedFlowModel.steps}\n                    parameters={debouncedFlowModel.parameters}\n                    output={debouncedFlowModel.output}\n                    onStepsChange={onStepsChange}\n                    onParametersChange={onParametersChange}\n                    onOutputChange={onOutputChange}\n                    actionNodeComponent={actionNodeComponent}\n                    parametersNodeComponent={parametersNodeComponent}\n                    outputNodeComponent={outputNodeComponent}\n                  />\n                </div>\n              </div>\n              {(showYaml || rightPanelSlot) && (\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                  {showYaml && (\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                    </>\n                  )}\n                  {rightPanelSlot && !showYaml && (\n                    <div style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n                      {rightPanelSlot}\n                    </div>\n                  )}\n                </Paper>\n              )}\n            </div>\n          </div>\n        </Grid>\n      </Grid>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}