@tduniec/plugin-template-designer-foundation 0.1.4 → 0.1.5

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

@@ -1 +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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"}
+{"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 {\n  TEMPLATE_DESIGNER_CM_CLASS,\n  createCodeMirrorTheme,\n} 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  primaryActionsSlot?: 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  primaryActionsSlot,\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                {primaryActionsSlot ? (\n                  <div\n                    style={{\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: 8,\n                      flexWrap: \"wrap\",\n                    }}\n                  >\n                    {primaryActionsSlot}\n                  </div>\n                ) : null}\n              </div>\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 8,\n                }}\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 : 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                          className={TEMPLATE_DESIGNER_CM_CLASS}\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":";;;;;;;;;;;AA0DO,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,oBAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,uBAAA;AAAA,EACA,mBAAA,GAAsB,UAAA;AAAA,EACtB,mBAAA,GAAsB,UAAA;AAAA,EACtB,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,YAAA,GAAe,OAA8B,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAC1E,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,cACH,KAAA,CAAM,OAAA,CAAwC,IAAA,IAC/C,KAAA,CAAM,QAAQ,IAAA,IACd,OAAA;AACF,EAAA,MAAM,YAAA,GAAe,OAAO,YAAY,CAAA;AACxC,EAAA,MAAM,eAAA,GAAkB,OAAO,YAAY,CAAA;AAC3C,EAAA,MAAM,WAAA,GAAc,OAA6C,IAAI,CAAA;AACrE,EAAA,MAAM,eAAA,GAAkB,OAA6C,IAAI,CAAA;AACzE,EAAA,MAAM,uBAAuB,MAAA,CAI1B;AAAA,IACD,KAAA,EAAO,aAAA;AAAA,IACP,UAAA,EAAY,kBAAA;AAAA,IACZ,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,QAAA,CAIjD;AAAA,IACD,KAAA,EAAO,aAAA;AAAA,IACP,UAAA,EAAY,kBAAA;AAAA,IACZ,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM,CAAC,MAAM,CAAA,EAAG,EAAE,CAAA;AACjD,EAAA,MAAM,eAAA,GAAkB,OAAA;AAAA,IACtB,MAAM,qBAAA,CAAsB,KAAA,EAAO,WAAW,CAAA;AAAA,IAC9C,CAAC,aAAa,KAAK;AAAA,GACrB;AAEA,EAAA,MAAM,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,IAAI,YAAY,OAAA,EAAS;AACvB,MAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAChC,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,IACxB;AACA,IAAA,IAAI,YAAA,CAAa,OAAA,KAAY,eAAA,CAAgB,OAAA,EAAS;AACpD,MAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,KAAA,KAAkB;AACjB,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA,IAAI,YAAY,OAAA,EAAS;AACvB,QAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAAA,MAClC;AACA,MAAA,WAAA,CAAY,OAAA,GAAU,WAAW,MAAM;AACrC,QAAA,IAAI,YAAA,CAAa,OAAA,KAAY,eAAA,CAAgB,OAAA,EAAS;AACpD,UAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,QACnC;AACA,QAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,MACxB,GAAG,GAAG,CAAA;AAAA,IACR,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,IAAI,gBAAgB,OAAA,EAAS;AAC3B,MAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AACpC,MAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAAA,IAC5B;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,oBAAA,CAAqB,OAAA,GAAU;AAAA,QAC7B,KAAA,EAAO,aAAA;AAAA,QACP,UAAA,EAAY,kBAAA;AAAA,QACZ,MAAA,EAAQ;AAAA,OACV;AAAA,IACF;AACA,IAAA,qBAAA,CAAsB,qBAAqB,OAAO,CAAA;AAAA,EACpD,GAAG,CAAC,kBAAA,EAAoB,aAAA,EAAe,cAAA,EAAgB,SAAS,CAAC,CAAA;AAEjE,EAAA,MAAM,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,cAAA,EAAe;AAEf,IAAA,iBAAA,EAAkB;AAAA,EACpB,CAAA,EAAG,CAAC,iBAAA,EAAmB,cAAc,CAAC,CAAA;AAEtC,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,oBAAA,CAAqB,OAAA,GAAU;AAAA,QAC7B,KAAA,EAAO,aAAA;AAAA,QACP,UAAA,EAAY,kBAAA;AAAA,QACZ,MAAA,EAAQ;AAAA,OACV;AAAA,IACF;AACA,IAAA,IAAI,gBAAgB,OAAA,EAAS;AAC3B,MAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AAAA,IACtC;AAEA,IAAA,eAAA,CAAgB,OAAA,GAAU,WAAW,MAAM;AAEzC,MAAA,qBAAA,CAAsB,qBAAqB,OAAO,CAAA;AAClD,MAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAAA,IAC5B,GAAG,GAAG,CAAA;AAAA,EACR,GAAG,CAAC,kBAAA,EAAoB,aAAA,EAAe,cAAA,EAAgB,SAAS,CAAC,CAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,OAAA,GAAU,YAAA;AACvB,IAAA,eAAA,CAAgB,OAAA,GAAU,YAAA;AAAA,EAC5B,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,cAAA,EAAe;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,cAAc,CAAC,CAAA;AAE7B,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,IAAI,YAAY,OAAA,EAAS;AACvB,QAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAAA,MAClC;AACA,MAAA,IAAI,gBAAgB,OAAA,EAAS;AAC3B,QAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AAAA,MACtC;AACA,MAAA,cAAA,EAAe;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAO,YAAA,CAAa,OAAA;AAC1B,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AACA,IAAA,MAAM,IAAA,GAAO,KAAK,qBAAA,EAAsB;AACxC,IAAA,MAAM,SAAA,GAAY,MAAA,CAAO,WAAA,GAAc,IAAA,CAAK,GAAA,GAAM,EAAA;AAClD,IAAA,kBAAA,CAAmB,IAAA,CAAK,GAAA,CAAI,SAAA,EAAW,GAAG,CAAC,CAAA;AAAA,EAC7C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,qBAAA,EAAsB;AACtB,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,MAAM,YAAA,GAAe,MAAM,qBAAA,EAAsB;AACjD,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAC9C,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,YAAY,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,qBAAqB,CAAC,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,UAAA;AAAA,QACV,MAAA,EAAQ,eAAA,GAAkB,CAAA,EAAG,eAAe,CAAA,EAAA,CAAA,GAAO,OAAA;AAAA,QACnD,SAAA,EAAW;AAAA,OACb;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,QAAA,EAAU,OAAA;AAAA,cACV,IAAA,EAAM,oBAAA;AAAA,cACN,MAAA,EAAQ,EAAA;AAAA,cACR,OAAA,EAAS,MAAA;AAAA,cACT,UAAA,EAAY,QAAA;AAAA,cACZ,GAAA,EAAK,CAAA;AAAA,cACL,OAAA,EAAS,UAAA;AAAA,cACT,YAAA,EAAc,CAAA;AAAA,cACd,UAAA,EACE,WAAA,KAAgB,MAAA,GACZ,oBAAA,GACA,wBAAA;AAAA,cACN,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,cAC1B,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,cAC1C,MAAA,EAAA,CAAS,KAAA,CAAM,MAAA,EAAQ,OAAA,IAAW,IAAA,IAAQ,CAAA;AAAA,cAC1C,aAAA,EAAe;AAAA,aACjB;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,oBAAiB,IAAA,EAAM,EAAA,EAAI,SAAA,EAAW,CAAA,EAAG,OAAM,SAAA,EAAU,CAAA;AAAA,kCACzD,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,KAAA,EAAM,iBAAgB,QAAA,EAAA,YAAA,EAEpD;AAAA;AAAA;AAAA,SACF;AAAA,wBAEF,GAAA,CAAC,QAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EAAG,SAAA,EAAU,UAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAO,EACrE,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAI,MAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,EAAO,EACjC,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,MAAA;AAAA,cACR,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACP;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO;AAAA,oBACL,OAAA,EAAS,MAAA;AAAA,oBACT,cAAA,EAAgB,eAAA;AAAA,oBAChB,UAAA,EAAY,QAAA;AAAA,oBACZ,QAAA,EAAU,MAAA;AAAA,oBACV,GAAA,EAAK;AAAA,mBACP;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAA,IAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAO;AAAA,0BACL,OAAA,EAAS,MAAA;AAAA,0BACT,UAAA,EAAY,QAAA;AAAA,0BACZ,GAAA,EAAK,EAAA;AAAA,0BACL,QAAA,EAAU;AAAA,yBACZ;AAAA,wBAEC,QAAA,EAAA;AAAA,0BAAA,mBAAA,oBACC,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,OAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,4BAAA,mBAAA;AAAA,4BAC9B;AAAA,2BAAA,EACpB,CAAA;AAAA,0CAEF,GAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA;AAAA,8BACC,KAAA,EAAM,SAAA;AAAA,8BACN,OAAA,EAAQ,WAAA;AAAA,8BACR,IAAA,EAAK,OAAA;AAAA,8BACL,OAAA,EAAS,QAAA;AAAA,8BACT,QAAA,EAAU,WAAA;AAAA,8BAET,QAAA,EAAA;AAAA;AAAA,2BACH;AAAA,0CACA,GAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA;AAAA,8BACC,KAAA,EAAM,SAAA;AAAA,8BACN,OAAA,EAAQ,UAAA;AAAA,8BACR,IAAA,EAAK,OAAA;AAAA,8BACL,OAAA,EAAS,MAAA;AAAA,8BACT,QAAA,EAAU,QAAA;AAAA,8BAET,QAAA,EAAA;AAAA;AAAA,2BACH;AAAA,0CACA,GAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA;AAAA,8BACC,KAAA,EAAM,SAAA;AAAA,8BACN,OAAA,EAAQ,UAAA;AAAA,8BACR,IAAA,EAAK,OAAA;AAAA,8BACL,OAAA,EAAS,oBAAA;AAAA,8BACV,QAAA,EAAA;AAAA;AAAA,2BAED;AAAA,0BACC,kBAAA,mBACC,GAAA;AAAA,4BAAC,KAAA;AAAA,4BAAA;AAAA,8BACC,KAAA,EAAO;AAAA,gCACL,OAAA,EAAS,MAAA;AAAA,gCACT,UAAA,EAAY,QAAA;AAAA,gCACZ,GAAA,EAAK,CAAA;AAAA,gCACL,QAAA,EAAU;AAAA,+BACZ;AAAA,8BAEC,QAAA,EAAA;AAAA;AAAA,2BACH,GACE;AAAA;AAAA;AAAA,qBACN;AAAA,oCACA,GAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAO;AAAA,0BACL,OAAA,EAAS,MAAA;AAAA,0BACT,UAAA,EAAY,QAAA;AAAA,0BACZ,GAAA,EAAK;AAAA,yBACP;AAAA,wBAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,UAAA,EAAW,IAAA,EAAK,SAAQ,OAAA,EAAS,YAAA,EAC9C,QAAA,EAAA,QAAA,GAAW,WAAA,GAAc,WAAA,EAC5B;AAAA;AAAA;AACF;AAAA;AAAA,eACF;AAAA,cACC,SAAA,oBACC,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAQ,OAAA;AAAA,kBACR,OAAO,EAAE,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,MAAM,IAAA,EAAK;AAAA,kBAExC,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cAED,iBAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAQ,GAAA,EAAK,EAAA,EAAG,EACtD,QAAA,EAAA,iBAAA,EACH,CAAA;AAAA,8BAEF,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO;AAAA,oBACL,IAAA,EAAM,CAAA;AAAA,oBACN,OAAA,EAAS,MAAA;AAAA,oBACT,GAAA,EAAK,EAAA;AAAA,oBACL,SAAA,EAAW,CAAA;AAAA,oBACX,MAAA,EAAQ;AAAA,mBACV;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAA,GAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAO;AAAA,0BACL,IAAA,EAAM,WAAW,CAAA,GAAI,CAAA;AAAA,0BACrB,QAAA,EAAU,CAAA;AAAA,0BACV,OAAA,EAAS,MAAA;AAAA,0BACT,aAAA,EAAe;AAAA,yBACjB;AAAA,wBAEA,QAAA,kBAAA,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,MAAM,CAAA,EAAG,SAAA,EAAW,GAAE,EACjC,QAAA,EAAA;AAAA,0BAAA,WAAA;AAAA,0CACD,GAAA;AAAA,4BAAC,YAAA;AAAA,4BAAA;AAAA,8BACC,OAAO,kBAAA,CAAmB,KAAA;AAAA,8BAC1B,YAAY,kBAAA,CAAmB,UAAA;AAAA,8BAC/B,QAAQ,kBAAA,CAAmB,MAAA;AAAA,8BAC3B,aAAA;AAAA,8BACA,kBAAA;AAAA,8BACA,cAAA;AAAA,8BACA,mBAAA;AAAA,8BACA,uBAAA;AAAA,8BACA;AAAA;AAAA;AACF,yBAAA,EACF;AAAA;AAAA,qBACF;AAAA,oBAAA,CACE,YAAY,cAAA,qBACZ,IAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAW,CAAA;AAAA,wBACX,KAAA,EAAO;AAAA,0BACL,IAAA,EAAM,CAAA;AAAA,0BACN,OAAA,EAAS,MAAA;AAAA,0BACT,aAAA,EAAe,QAAA;AAAA,0BACf,QAAA,EAAU,CAAA;AAAA,0BACV,QAAA,EAAU;AAAA,yBACZ;AAAA,wBAEC,QAAA,EAAA;AAAA,0BAAA,QAAA,oBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,4CAAA,GAAA;AAAA,8BAAC,KAAA;AAAA,8BAAA;AAAA,gCACC,KAAA,EAAO;AAAA,kCACL,OAAA,EAAS,WAAA;AAAA,kCACT,YAAA,EAAc,4BAAA;AAAA,kCACd,UAAA,EAAY,GAAA;AAAA,kCACZ,QAAA,EAAU;AAAA,iCACZ;AAAA,gCACD,QAAA,EAAA;AAAA;AAAA,6BAED;AAAA,4BACC,SAAA,oBACC,GAAA;AAAA,8BAAC,KAAA;AAAA,8BAAA;AAAA,gCACC,KAAA,EAAO;AAAA,kCACL,OAAA,EAAS,UAAA;AAAA,kCACT,YAAA,EAAc,4BAAA;AAAA,kCACd,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,IAAA;AAAA,kCAC3B,QAAA,EAAU,SAAA;AAAA,kCACV,UAAA,EACE,WAAA,KAAgB,MAAA,GACZ,wBAAA,GACA;AAAA,iCACR;AAAA,gCAEC,QAAA,EAAA;AAAA;AAAA,6BACH;AAAA,4CAEF,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,IAAA,EAAM,GAAG,SAAA,EAAW,CAAA,EAAG,QAAA,EAAU,MAAA,EAAO,EACpD,QAAA,kBAAA,GAAA;AAAA,8BAAC,UAAA;AAAA,8BAAA;AAAA,gCACC,KAAA,EAAO,YAAA;AAAA,gCACP,UAAA,EAAY,cAAA;AAAA,gCACZ,KAAA,EAAO,eAAA;AAAA,gCACP,SAAA,EAAW,0BAAA;AAAA,gCACX,MAAA,EAAO,MAAA;AAAA,gCACP,QAAA,EAAU,gBAAA;AAAA,gCACV,MAAA,EAAQ;AAAA;AAAA,6BACV,EACF;AAAA,2BAAA,EACF,CAAA;AAAA,0BAED,cAAA,IAAkB,CAAC,QAAA,oBAClB,GAAA,CAAC,SAAI,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,SAAA,EAAW,CAAA,EAAG,QAAA,EAAU,MAAA,IAC5C,QAAA,EAAA,cAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AAEJ;AAAA;AAAA,WAEJ,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"codemirrorTheme.esm.js","sources":["../../../src/components/TemplateDesigner/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;;;;"}
+{"version":3,"file":"codemirrorTheme.esm.js","sources":["../../../src/components/TemplateDesigner/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 TEMPLATE_DESIGNER_CM_CLASS = \"td-template-cm\";\n\n/**\n * Creates an isolated CodeMirror theme that only applies to editors with the\n * TEMPLATE_DESIGNER_CM_CLASS class to avoid leaking styles to other editors in\n * the host Backstage app.\n */\nexport const createCodeMirrorTheme = (\n  materialTheme: Theme,\n  paletteMode: \"light\" | \"dark\"\n): Extension =>\n  EditorView.theme(\n    {\n      [`&.${TEMPLATE_DESIGNER_CM_CLASS}`]: {\n        backgroundColor: materialTheme.palette.background.paper,\n        color: materialTheme.palette.text.primary,\n      },\n      [`.${TEMPLATE_DESIGNER_CM_CLASS} .cm-content`]: {\n        fontFamily: '\"Roboto Mono\", \"SFMono-Regular\", Consolas, monospace',\n      },\n      [`.${TEMPLATE_DESIGNER_CM_CLASS} .cm-scroller`]: {\n        fontSize: 13,\n        lineHeight: 1.5,\n      },\n      [`.${TEMPLATE_DESIGNER_CM_CLASS} .cm-gutters`]: {\n        backgroundColor: materialTheme.palette.background.paper,\n        color: materialTheme.palette.text.secondary,\n        borderRight: `1px solid ${materialTheme.palette.divider}`,\n      },\n      [`&.${TEMPLATE_DESIGNER_CM_CLASS}.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,0BAAA,GAA6B;AAOnC,MAAM,qBAAA,GAAwB,CACnC,aAAA,EACA,WAAA,KAEA,UAAA,CAAW,KAAA;AAAA,EACT;AAAA,IACE,CAAC,CAAA,EAAA,EAAK,0BAA0B,CAAA,CAAE,GAAG;AAAA,MACnC,eAAA,EAAiB,aAAA,CAAc,OAAA,CAAQ,UAAA,CAAW,KAAA;AAAA,MAClD,KAAA,EAAO,aAAA,CAAc,OAAA,CAAQ,IAAA,CAAK;AAAA,KACpC;AAAA,IACA,CAAC,CAAA,CAAA,EAAI,0BAA0B,CAAA,YAAA,CAAc,GAAG;AAAA,MAC9C,UAAA,EAAY;AAAA,KACd;AAAA,IACA,CAAC,CAAA,CAAA,EAAI,0BAA0B,CAAA,aAAA,CAAe,GAAG;AAAA,MAC/C,QAAA,EAAU,EAAA;AAAA,MACV,UAAA,EAAY;AAAA,KACd;AAAA,IACA,CAAC,CAAA,CAAA,EAAI,0BAA0B,CAAA,YAAA,CAAc,GAAG;AAAA,MAC9C,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,CAAC,CAAA,EAAA,EAAK,0BAA0B,CAAA,qBAAA,CAAuB,GAAG;AAAA,MACxD,OAAA,EAAS,CAAA,UAAA,EAAa,aAAA,CAAc,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAAA,MACxD,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,EAAE,IAAA,EAAM,WAAA,KAAgB,MAAA;AAC1B;;;;"}

package/dist/designerFlow/DesignerFlow.esm.js

@@ -1,6 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useMemo, useState, useCallback, useEffect, createElement } from 'react';
-import { useNodesState, applyNodeChanges, applyEdgeChanges, addEdge, ReactFlow } from '@xyflow/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, createElement } from 'react';
+import { useNodesState, applyNodeChanges, applyEdgeChanges, addEdge, ReactFlowProvider, ReactFlow, MiniMap } from '@xyflow/react';
+import { Box, Button } from '@material-ui/core';
 import '@xyflow/react/dist/style.css';
 import { buildNodesFromModel, stableStringify, collectParameterReferences, collectStepOutputReferences, extractStepsFromNodes, extractParametersFromNodes, extractOutputFromNodes } from './model.esm.js';
 import { createSequentialEdges } from '../utils/createSequentialEdges.esm.js';
@@ -15,7 +16,7 @@ const EMIT_DEBOUNCE_MS = 1200;
 const VIEWPORT_TUNING = {
   alignDebounceMs: 120,
   // Debounce view/align updates so typing isn't interrupted by layout thrash.
-  centerDurationMs: 280,
+  centerDurationMs: 420,
   fitFallbackDelayMs: 50
 };
 if (typeof window !== "undefined" && !window.__rfResizeObserverPatched) {
@@ -105,6 +106,7 @@ const shallowArrayEqual = (a, b) => {
 };
 const FIXED_X_POSITION = FLOW_LAYOUT.fixedXPosition;
 const VERTICAL_SPACING = FLOW_LAYOUT.verticalSpacing;
+const HORIZONTAL_PAN_RANGE = 5e3;
 function DesignerFlow({
   steps = [],
   parameters,
@@ -115,6 +117,7 @@ function DesignerFlow({
   actionNodeComponent,
   parametersNodeComponent,
   outputNodeComponent,
+  showMiniMap = false,
   decorateNodes,
   decorateEdges,
   nodeDefaults: nodeDefaults$1 = nodeDefaults
@@ -209,6 +212,7 @@ function DesignerFlow({
     lastViewportRef.current = fallback;
     return fallback;
   });
+  const [miniMapVisible, setMiniMapVisible] = useState(showMiniMap);
   const fitViewRafRef = useRef(null);
   const fitViewTimeoutRef = useRef(null);
   const alignDebounceRef = useRef(null);
@@ -283,7 +287,7 @@ function DesignerFlow({
     setEdges
   ]);
   const lastParameterResizeRef = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!nodes.length) {
       return;
     }
@@ -323,56 +327,47 @@ function DesignerFlow({
     if (!hasMeasuredChange) {
       return;
     }
-    if (!layoutInitializedRef.current) {
-      layoutInitializedRef.current = true;
-      return;
-    }
     lastParameterResizeRef.current = parameterResize;
-    if (alignDebounceRef.current) {
-      clearTimeout(alignDebounceRef.current);
-    }
-    alignDebounceRef.current = setTimeout(() => {
-      alignDebounceRef.current = null;
-      setNodes((currentNodes) => {
-        const resize = lastParameterResizeRef.current;
-        const updated = currentNodes.map((node) => {
-          if (node.type !== "parametersNode") {
-            return node;
-          }
-          if (!resize || resize.id !== node.id) {
-            return {
-              ...node,
-              position: { ...node.position, x: FIXED_X_POSITION }
-            };
-          }
-          const prevBottom = node.position.y + resize.prevHeight;
-          const nextY = Math.max(0, prevBottom - resize.nextHeight);
-          if (node.position.y === nextY) {
-            return {
-              ...node,
-              position: { ...node.position, x: FIXED_X_POSITION }
-            };
-          }
+    setNodes((currentNodes) => {
+      const resize = lastParameterResizeRef.current;
+      const updated = currentNodes.map((node) => {
+        if (node.type !== "parametersNode") {
+          return node;
+        }
+        if (!resize || resize.id !== node.id) {
           return {
             ...node,
-            position: { x: FIXED_X_POSITION, y: nextY }
+            position: { ...node.position, x: FIXED_X_POSITION }
           };
-        });
-        const alignedNodes = alignNodes(
-          updated,
-          FIXED_X_POSITION,
-          VERTICAL_SPACING
-        );
-        const positionsChanged = alignedNodes.some((node, index) => {
-          const previousNode = currentNodes[index];
-          if (!previousNode) {
-            return true;
-          }
-          return node.position.x !== previousNode.position.x || node.position.y !== previousNode.position.y;
-        });
-        return positionsChanged ? alignedNodes : currentNodes;
+        }
+        const prevBottom = node.position.y + resize.prevHeight;
+        const nextY = Math.max(0, prevBottom - resize.nextHeight);
+        if (node.position.y === nextY) {
+          return {
+            ...node,
+            position: { ...node.position, x: FIXED_X_POSITION }
+          };
+        }
+        return {
+          ...node,
+          position: { x: FIXED_X_POSITION, y: nextY }
+        };
       });
-    }, VIEWPORT_TUNING.alignDebounceMs);
+      const alignedNodes = alignNodes(
+        updated,
+        FIXED_X_POSITION,
+        VERTICAL_SPACING
+      );
+      const positionsChanged = alignedNodes.some((node, index) => {
+        const previousNode = currentNodes[index];
+        if (!previousNode) {
+          return true;
+        }
+        return node.position.x !== previousNode.position.x || node.position.y !== previousNode.position.y;
+      });
+      return positionsChanged ? alignedNodes : currentNodes;
+    });
+    layoutInitializedRef.current = true;
   }, [nodes, setNodes]);
   const parameterReferences = useMemo(
     () => collectParameterReferences(normalizedParametersProp),
@@ -652,6 +647,7 @@ function DesignerFlow({
     emitChangesDeferred();
   }, [emitChangesDeferred, modelHash, nodes]);
   useEffect(() => {
+    const alignTimeout = alignDebounceRef.current;
     return () => {
       if (emitDebounceRef.current) {
         clearTimeout(emitDebounceRef.current);
@@ -664,8 +660,8 @@ function DesignerFlow({
         clearTimeout(fitViewTimeoutRef.current);
         fitViewTimeoutRef.current = null;
       }
-      if (alignDebounceRef.current) {
-        clearTimeout(alignDebounceRef.current);
+      if (alignTimeout) {
+        clearTimeout(alignTimeout);
       }
       flushPendingEmit();
     };
@@ -683,7 +679,7 @@ function DesignerFlow({
     }
     const nodeWithWidth = nodes.find((node) => node.width);
     const nodeWidth = nodeWithWidth?.width ?? 760;
-    const padding = Math.max((window.innerWidth - nodeWidth) / 2 - 24, 60);
+    const padding = Math.max((window.innerWidth - nodeWidth) / 2 - 24, 24);
     const viewOptions = {
       padding,
       minZoom: 0.2
@@ -835,26 +831,86 @@ function DesignerFlow({
     } catch {
     }
   }, [nodes, reactFlowInstance, viewport, setViewportIfChanged]);
-  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", minHeight: "100%" }, children: /* @__PURE__ */ jsx(
-    ReactFlow,
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+    "div",
     {
-      nodes,
-      edges: renderedEdges,
-      nodeTypes: resolvedNodeTypes,
-      defaultViewport: viewport ?? {
-        x: 0,
-        y: 0,
-        zoom: 1
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: "100%",
+        position: "relative"
       },
-      viewport: viewport ?? void 0,
-      onNodesChange,
-      onEdgesChange,
-      onNodeDragStop,
-      onConnect,
-      onMove: handleMove,
-      onlyRenderVisibleElements: true,
-      onInit: setReactFlowInstance,
-      onMoveEnd: handleMoveEnd
+      children: [
+        /* @__PURE__ */ jsx(
+          ReactFlow,
+          {
+            nodes,
+            edges: renderedEdges,
+            nodeTypes: resolvedNodeTypes,
+            defaultViewport: viewport ?? {
+              x: 0,
+              y: 0,
+              zoom: 0.5
+            },
+            viewport: viewport ?? void 0,
+            onNodesChange,
+            onEdgesChange,
+            onNodeDragStop,
+            onConnect,
+            onMove: handleMove,
+            translateExtent: [
+              [FIXED_X_POSITION - HORIZONTAL_PAN_RANGE, -1e4],
+              [FIXED_X_POSITION + HORIZONTAL_PAN_RANGE, 1e7]
+            ],
+            onlyRenderVisibleElements: true,
+            onInit: setReactFlowInstance,
+            onMoveEnd: handleMoveEnd,
+            minZoom: 0.1
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "contained",
+                  color: "primary",
+                  onClick: () => setMiniMapVisible((prev) => !prev),
+                  style: { padding: "2px 8px", minWidth: 0, width: "60px" },
+                  children: miniMapVisible ? "Hide" : "Map"
+                }
+              ),
+              miniMapVisible ? /* @__PURE__ */ jsx(
+                MiniMap,
+                {
+                  pannable: true,
+                  zoomable: true,
+                  style: {
+                    background: "rgba(255,255,255,0.9)",
+                    width: 140,
+                    height: 96,
+                    border: "1px solid rgba(0,0,0,0.12)",
+                    boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
+                    marginTop: 4,
+                    right: "-15px",
+                    bottom: "20px"
+                  },
+                  maskColor: "rgba(0,0,0,0.06)"
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
     }
   ) });
 }