new components for name manager dialog and fields

new text added to locale en_us

added name manager to toolbar

added model and worksheets as prop

UPDATE: API for defined names

NamedRange component changes

NameManager dialog component changes

new util formatting functions

UPDATE: API for defined names

new components for name manager dialog and fields

new text added to locale en_us

added name manager to toolbar

added model and worksheets as prop

UPDATE: API for defined names

NamedRange component changes

NameManager dialog component changes

new util formatting functions

UPDATE: API for defined names

last changes

corrected styling

updates to namedRange and nameManagerDialog

webapp/src/components/NameManagerDialog.tsx

@@ -0,0 +1,430 @@
+import type { DefinedName, Model } from "@ironcalc/wasm";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+} from "@mui/material";
+import { t } from "i18next";
+import { BookOpen, Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import NamedRange from "./NamedRange";
+import { getFullRangeToString } from "./util";
+
+type NameManagerDialogProperties = {
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+};
+
+function NameManagerDialog(props: NameManagerDialogProperties) {
+  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+  const [definedName, setDefinedName] = useState<DefinedName>({
+    name: "",
+    scope: undefined,
+    formula: "",
+  });
+
+  // render definedNames from model
+  useEffect(() => {
+    if (props.open) {
+      const definedNamesModel = props.model.getDefinedNameList();
+      setDefinedNamesLocal(definedNamesModel);
+      console.log("definedNamesModel EFFECT", definedNamesModel);
+    }
+  }, [props.open]);
+
+  const handleSave = () => {
+    try {
+      console.log("SAVE", definedName);
+
+      props.model.newDefinedName(
+        definedName.name,
+        definedName.scope,
+        definedName.formula,
+      );
+    } catch (error) {
+      console.log("DefinedName save failed", error);
+    }
+    props.onClose();
+  };
+
+  const handleChange = (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => {
+    setDefinedName((prev: DefinedName) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleDelete = (name: string, scope: number | undefined) => {
+    try {
+      props.model.deleteDefinedName(name, scope);
+    } catch (error) {
+      console.log("DefinedName delete failed", error);
+    }
+    // should re-render modal
+  };
+
+  const handleUpdate = (
+    name: string,
+    scope: number | undefined,
+    newName: string,
+    newScope: number | undefined,
+    newFormula: string,
+  ) => {
+    try {
+      // partially update?
+      props.model.updateDefinedName(name, scope, newName, newScope, newFormula);
+    } catch (error) {
+      console.log("DefinedName update failed", error);
+    }
+  };
+
+  const formatFormula = (): string => {
+    const worksheets = props.model.getWorksheetsProperties();
+    const selectedView = props.model.getSelectedView();
+  const formatFormula = (): string => {
+    const worksheets = props.model.getWorksheetsProperties();
+    const selectedView = props.model.getSelectedView();
+
+    return getFullRangeToString(selectedView, worksheets);
+  };
+    return getFullRangeToString(selectedView, worksheets);
+  };
+
+  return (
+    <StyledDialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth={false}
+      scroll="paper"
+    >
+      <StyledDialogTitle>
+        Named Ranges
+        <IconButton onClick={() => props.onClose()}>
+          <X size={16} />
+        </IconButton>
+      </StyledDialogTitle>
+      <StyledDialogContent dividers>
+        <StyledRangesHeader>
+          <Box width="171px">{t("name_manager_dialog.name")}</Box>
+          <Box width="171px">{t("name_manager_dialog.range")}</Box>
+          <Box width="171px">{t("name_manager_dialog.scope")}</Box>
+        </StyledRangesHeader>
+        {definedNamesLocal?.map((definedName) => (
+          <NamedRange
+            worksheets={props.model.getWorksheetsProperties()}
+            name={definedName.name}
+            scope={definedName.scope}
+            formula={definedName.formula}
+            key={definedName.name}
+            model={props.model}
+            onChange={handleChange}
+            onDelete={handleDelete}
+            canDelete={true}
+          />
+        ))}
+        <NamedRange
+          worksheets={props.model.getWorksheetsProperties()}
+          formula={formatFormula()}
+          onChange={handleChange}
+          canDelete={false}
+          model={props.model}
+        />
+      </StyledDialogContent>
+      <StyledDialogActions>
+        <Box display="flex" alignItems="center" gap={"8px"}>
+          <BookOpen color="grey" size={16} />
+          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
+            {t("name_manager_dialog.help")}
+          </span>
+        </Box>
+        <Box display="flex" gap="8px" width={"155px"}>
+          {/* change hover color? */}
+          <Button
+            onClick={() => props.onClose()}
+            variant="contained"
+            disableElevation
+            color="info"
+            sx={{
+              bgcolor: (theme): string => theme.palette.grey["200"],
+              color: (theme): string => theme.palette.grey["700"],
+              textTransform: "none",
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant="contained"
+            disableElevation
+            sx={{ textTransform: "none" }}
+            startIcon={<Check size={16} />}
+            // disabled={} // disable when error
+          >
+            Save
+          </Button>
+        </Box>
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+
+const StyledDialog = styled(Dialog)(() => ({
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+}));
+
+const StyledDialogTitle = styled(DialogTitle)`
+padding: 12px 20px;
+font-size: 14px;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: space-between;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+display: flex;
+flex-direction: column;
+gap: 12px;
+padding: 20px 12px 20px 20px;
+`;
+
+const StyledRangesHeader = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+}));
+
+const StyledDialogActions = styled(DialogActions)`
+padding: 12px 20px;
+height: 40px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+font-size: 12px;
+color: #757575;
+`;
+
+export default NameManagerDialog;
+import type { DefinedName, Model } from "@ironcalc/wasm";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+} from "@mui/material";
+import { t } from "i18next";
+import { BookOpen, Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import NamedRange from "./NamedRange";
+import { getShortRangeToString } from "./util";
+
+type NameManagerDialogProperties = {
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+};
+
+function NameManagerDialog(props: NameManagerDialogProperties) {
+  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+  const [definedName, setDefinedName] = useState<DefinedName>({
+    name: "",
+    scope: 0,
+    formula: "",
+  });
+
+  // render named ranges from model
+  useEffect(() => {
+    const definedNamesModel = props.model.getDefinedNameList();
+    setDefinedNamesLocal(definedNamesModel);
+    console.log("definedNamesModel EFFECT", definedNamesModel);
+  });
+
+  const handleSave = () => {
+    console.log("SAVE DIALOG", definedName);
+    // create newDefinedName and close
+    // props.model.newDefinedName(
+    // 	definedName.name,
+    // 	definedName.scope,
+    // 	definedName.formula,
+    // );
+    props.onClose();
+  };
+
+  const handleChange = (field: keyof DefinedName, value: string | number) => {
+    setDefinedName((prev: DefinedName) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleDelete = () => {
+    console.log("definedName marked for deletion");
+  };
+
+  const formatFormula = (): string => {
+    const selectedView = props.model.getSelectedView();
+
+    return getShortRangeToString(selectedView);
+  };
+
+  return (
+    <StyledDialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth={false}
+      scroll="paper"
+    >
+      <StyledDialogTitle>
+        Named Ranges
+        <IconButton onClick={() => props.onClose()}>
+          <X size={16} />
+        </IconButton>
+      </StyledDialogTitle>
+      <StyledDialogContent dividers>
+        <StyledRangesHeader>
+          <Box width="171px">{t("name_manager_dialog.name")}</Box>
+          <Box width="171px">{t("name_manager_dialog.range")}</Box>
+          <Box width="171px">{t("name_manager_dialog.scope")}</Box>
+        </StyledRangesHeader>
+        {definedNamesLocal?.map((definedName) => (
+          <NamedRange
+            worksheets={props.model.getWorksheetsProperties()}
+            name={definedName.name}
+            scope={definedName.scope}
+            formula={definedName.formula}
+            key={definedName.name}
+            model={props.model}
+            onChange={handleChange}
+            onDelete={handleDelete}
+          />
+        ))}
+        <NamedRange
+          worksheets={props.model.getWorksheetsProperties()}
+          formula={formatFormula()}
+          onChange={handleChange}
+          model={props.model}
+        />
+      </StyledDialogContent>
+      <StyledDialogActions>
+        <Box display="flex" alignItems="center" gap={"8px"}>
+          <BookOpen color="grey" size={16} />
+          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
+            {t("name_manager_dialog.help")}
+          </span>
+        </Box>
+        <Box display="flex" gap="8px" width={"155px"}>
+          {/* change hover color? */}
+          <Button
+            onClick={() => props.onClose()}
+            variant="contained"
+            disableElevation
+            color="info"
+            sx={{
+              bgcolor: (theme): string => theme.palette.grey["200"],
+              color: (theme): string => theme.palette.grey["700"],
+              textTransform: "none",
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant="contained"
+            disableElevation
+            sx={{ textTransform: "none" }}
+            startIcon={<Check size={16} />}
+          >
+            Save
+          </Button>
+        </Box>
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+
+const StyledDialog = styled(Dialog)(() => ({
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+}));
+
+const StyledDialogTitle = styled(DialogTitle)`
+padding: 12px 20px;
+font-size: 14px;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: space-between;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+display: flex;
+flex-direction: column;
+gap: 12px;
+padding: 20px 12px 20px 20px;
+`;
+
+const StyledRangesHeader = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+}));
+
+const StyledDialogActions = styled(DialogActions)`
+padding: 12px 20px;
+height: 40px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+font-size: 12px;
+color: #757575;
+`;
+
+export default NameManagerDialog;

webapp/src/components/NamedRange.tsx

@@ -0,0 +1,168 @@
+import type { DefinedName, Model, WorksheetProperties } from "@ironcalc/wasm";
+import {
+  Box,
+  Divider,
+  IconButton,
+  MenuItem,
+  TextField,
+  styled,
+  Box,
+  Divider,
+  IconButton,
+  MenuItem,
+  TextField,
+  styled,
+} from "@mui/material";
+import { Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+
+type NamedRangeProperties = {
+  name?: string;
+  scope?: number;
+  formula: string;
+  model: Model;
+  worksheets: WorksheetProperties[];
+  onChange: (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => void;
+  onDelete?: (name: string, scope: number | undefined) => void;
+  canDelete: boolean;
+  onUpdate?: (
+    name: string,
+    scope: number | undefined,
+    newName: string,
+    newScope: number | undefined,
+    newFormula: string,
+  ) => void;
+};
+
+function NamedRange(props: NamedRangeProperties) {
+  const [name, setName] = useState(props.name || "");
+  const [scope, setScope] = useState(props.scope || undefined);
+  const [formula, setFormula] = useState(props.formula);
+  const [nameError, setNameError] = useState(false);
+  const [formulaError, setFormulaError] = useState(false);
+
+  const handleChange = (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => {
+    if (field === "name") {
+      setName(value as string);
+      props.onChange("name", value);
+    }
+    if (field === "scope") {
+      setScope(value as number | undefined);
+      props.onChange("scope", value);
+    }
+    if (field === "formula") {
+      setFormula(value as string);
+      props.onChange("formula", value);
+    }
+  };
+
+  useEffect(() => {
+    // send initial formula value to parent
+    handleChange("formula", formula);
+  }, []);
+
+  const handleDelete = () => {
+    props.onDelete?.(name, scope);
+  };
+
+  return (
+    <>
+      <StyledBox>
+        <StyledTextField
+          id="name"
+          variant="outlined"
+          size="small"
+          margin="none"
+          fullWidth
+          error={nameError}
+          value={name}
+          onChange={(event) => handleChange("name", event.target.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => event.stopPropagation()}
+        />
+        <StyledTextField
+          id="scope"
+          variant="outlined"
+          select
+          size="small"
+          margin="none"
+          fullWidth
+          value={scope ?? "Workbook (Global)"}
+          onChange={(event) =>
+            handleChange(
+              "scope",
+              event.target.value === "Workbook (Global)"
+                ? undefined
+                : event.target.value,
+            )
+          }
+        >
+          <MenuItem value="Workbook (Global)">Workbook (Global)</MenuItem>
+          {props.worksheets.map((option, index) => (
+            <MenuItem key={option.sheet_id} value={index}>
+              {option.name}
+            </MenuItem>
+          ))}
+        </StyledTextField>
+        <StyledTextField
+          id="formula"
+          variant="outlined"
+          size="small"
+          margin="none"
+          fullWidth
+          error={formulaError}
+          value={formula}
+          onChange={(event) => handleChange("formula", event.target.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => event.stopPropagation()}
+        />
+        <StyledIconButton onClick={handleDelete} disabled={!props.canDelete}>
+          <Trash2 size={12} />
+        </StyledIconButton>
+      </StyledBox>
+      <Divider />
+    </>
+  );
+}
+
+const StyledBox = styled(Box)`
+display: flex;
+gap: 12px;
+width: 577px;
+`;
+
+const StyledTextField = styled(TextField)(() => ({
+  "& .MuiInputBase-root": {
+    height: "28px",
+    margin: 0,
+  },
+  "& .MuiInputBase-root": {
+    height: "28px",
+    margin: 0,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.error.main,
+  "&.Mui-disabled": {
+    opacity: 0.6,
+    color: theme.palette.error.light,
+  },
+  color: theme.palette.error.main,
+  "&.Mui-disabled": {
+    opacity: 0.6,
+    color: theme.palette.error.light,
+  },
+}));
+
+export default NamedRange;

webapp/src/components/toolbar.tsx

@@ -1,6 +1,7 @@
 import type {
   BorderOptions,
   HorizontalAlignment,
+  Model,
   VerticalAlignment,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
@@ -22,6 +23,7 @@ import {
   Percent,
   Redo2,
   Strikethrough,
+  Tags,
   Type,
   Underline,
   Undo2,
@@ -34,6 +36,8 @@ import {
   DecimalPlacesIncreaseIcon,
 } from "../icons";
 import { theme } from "../theme";
+import NameManagerDialog from "./NameManagerDialog";
+import NameManagerDialog from "./NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -72,12 +76,14 @@ type ToolbarProperties = {
   numFmt: string;
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
+  model: Model;
 };
 
 function Toolbar(properties: ToolbarProperties) {
   const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
   const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
   const [borderPickerOpen, setBorderPickerOpen] = useState(false);
+  const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
 
   const fontColorButton = useRef(null);
   const fillColorButton = useRef(null);
@@ -340,6 +346,18 @@ function Toolbar(properties: ToolbarProperties) {
       >
         {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
       </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => {
+          setNameManagerDialogOpen(true);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.name_manager")}
+      >
+        <Tags />
+      </StyledButton>
 
       <ColorPicker
         color={properties.fontColor}
@@ -375,6 +393,13 @@ function Toolbar(properties: ToolbarProperties) {
         anchorEl={borderButton}
         open={borderPickerOpen}
       />
+      <NameManagerDialog
+        open={nameManagerDialogOpen}
+        onClose={() => {
+          setNameManagerDialogOpen(false);
+        }}
+        model={properties.model}
+      />
     </ToolbarContainer>
   );
 }

webapp/src/components/util.ts

@@ -1,6 +1,10 @@
 import type { Area, Cell } from "./types";
 
-import { columnNameFromNumber } from "@ironcalc/wasm";
+import {
+  type SelectedView,
+  type WorksheetProperties,
+  columnNameFromNumber,
+} from "@ironcalc/wasm";
 
 /**
  *  Returns true if the keypress should start editing
@@ -57,7 +61,24 @@ export function rangeToStr(
   if (rowStart === rowEnd && columnStart === columnEnd) {
     return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
   }
-  return `${sheetName}${columnNameFromNumber(
+  return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}:${columnNameFromNumber(
-    columnStart,
+    columnEnd,
-  )}${rowStart}:${columnNameFromNumber(columnEnd)}${rowEnd}`;
+  )}${rowEnd}`;
+}
+
+export function getFullRangeToString(
+  selectedView: SelectedView,
+  worksheets: WorksheetProperties[], // solo pasar names
+): string {
+  // order of values is confusing compared to rangeToStr range type, needs refactoring for consistency
+  const [rowStart, columnStart, rowEnd, columnEnd] = selectedView.range;
+  const sheetNames = worksheets.map((s) => s.name);
+  const sheetName = `${sheetNames[selectedView.sheet]}!`;
+
+  if (rowStart === rowEnd && columnStart === columnEnd) {
+    return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
+  }
+  return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}:${columnNameFromNumber(
+    columnEnd,
+  )}${rowEnd}`;
 }

webapp/src/components/workbook.tsx

@@ -115,6 +115,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("num_fmt", numberFmt);
   };
 
+  const onNamedRangesUpdate = () => {
+    // update named ranges in model
+  };
+
   const onCopyStyles = () => {
     const {
       sheet,
@@ -569,6 +573,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
+        model={model}
       />
       <FormulaBar
         cellAddress={cellAddress()}

webapp/src/locale/en_us.json

@@ -1,79 +1,93 @@
 {
-  "toolbar": {
+	"toolbar": {
-    "redo": "Redo",
+		"redo": "Redo",
-    "undo": "Undo",
+		"undo": "Undo",
-    "copy_styles": "Copy styles",
+		"copy_styles": "Copy styles",
-    "euro": "Format as Euro",
+		"euro": "Format as Euro",
-    "percentage": "Format as Percentage",
+		"percentage": "Format as Percentage",
-    "bold": "Bold",
+		"bold": "Bold",
-    "italic": "Italic",
+		"italic": "Italic",
-    "underline": "Underline",
+		"underline": "Underline",
-    "strike_through": "Strikethrough",
+		"strike_through": "Strikethrough",
-    "align_left": "Align left",
+		"align_left": "Align left",
-    "align_right": "Align right",
+		"align_right": "Align right",
-    "align_center": "Align center",
+		"align_center": "Align center",
-    "format_number": "Format number",
+		"format_number": "Format number",
-    "font_color": "Font color",
+		"font_color": "Font color",
-    "fill_color": "Fill color",
+		"fill_color": "Fill color",
-    "decimal_places_increase": "Increase decimal places",
+		"decimal_places_increase": "Increase decimal places",
-    "decimal_places_decrease": "Decrease decimal places",
+		"decimal_places_decrease": "Decrease decimal places",
-    "show_hide_grid_lines": "Show/hide grid lines",
+		"show_hide_grid_lines": "Show/hide grid lines",
-    "vertical_align_bottom": "Align bottom",
+		"name_manager": "Name manager",
-    "vertical_align_middle": " Align middle",
+		"name_manager": "Name manager",
-    "vertical_align_top": "Align top",
+		"vertical_align_bottom": "Align bottom",
-    "format_menu": {
+		"vertical_align_middle": " Align middle",
-      "auto": "Auto",
+		"vertical_align_top": "Align top",
-      "number": "Number",
+		"format_menu": {
-      "percentage": "Percentage",
+			"auto": "Auto",
-      "currency_eur": "Euro (EUR)",
+			"number": "Number",
-      "currency_usd": "Dollar (USD)",
+			"percentage": "Percentage",
-      "currency_gbp": "British Pound (GBD)",
+			"currency_eur": "Euro (EUR)",
-      "date_short": "Short date",
+			"currency_usd": "Dollar (USD)",
-      "date_long": "Long date",
+			"currency_gbp": "British Pound (GBD)",
-      "custom": "Custom",
+			"date_short": "Short date",
-      "number_example": "1,000.00",
+			"date_long": "Long date",
-      "percentage_example": "10%",
+			"custom": "Custom",
-      "currency_eur_example": "€",
+			"number_example": "1,000.00",
-      "currency_usd_example": "$",
+			"percentage_example": "10%",
-      "currency_gbp_example": "£",
+			"currency_eur_example": "€",
-      "date_short_example": "09/24/2024",
+			"currency_usd_example": "$",
-      "date_long_example": "Tuesday, September 24, 2024"
+			"currency_gbp_example": "£",
-    },
+			"date_short_example": "09/24/2024",
-    "borders": {
+			"date_long_example": "Tuesday, September 24, 2024"
-      "title": "Borders",
+		},
-      "all": "All borders",
+		"borders": {
-      "inner": "Inner borders",
+			"title": "Borders",
-      "outer": "Outer borders",
+			"all": "All borders",
-      "top": "Top borders",
+			"inner": "Inner borders",
-      "bottom": "Bottom borders",
+			"outer": "Outer borders",
-      "clear": "Clear borders",
+			"top": "Top borders",
-      "left": "Left borders",
+			"bottom": "Bottom borders",
-      "right": "Right borders",
+			"clear": "Clear borders",
-      "horizontal": "Horizontal borders",
+			"left": "Left borders",
-      "vertical": "Vertical borders",
+			"right": "Right borders",
-      "color": "Border color",
+			"horizontal": "Horizontal borders",
-      "style": "Border style"
+			"vertical": "Vertical borders",
-    }
+			"color": "Border color",
-  },
+			"style": "Border style"
-  "num_fmt": {
+		}
-    "title": "Custom number format",
+	},
-    "label": "Number format",
+	"num_fmt": {
-    "close": "Close dialog",
+		"title": "Custom number format",
-    "save": "Save"
+		"label": "Number format",
-  },
+		"close": "Close dialog",
-  "sheet_rename": {
+		"save": "Save"
-    "rename": "Save",
+	},
-    "label": "New name",
+	"sheet_rename": {
-    "title": "Rename Sheet",
+		"rename": "Save",
-    "close": "Close dialog"
+		"label": "New name",
-  },
+		"title": "Rename Sheet",
-  "formula_input": {
+		"close": "Close dialog"
-    "update": "Update",
+	},
-    "label": "Formula",
+	"formula_input": {
-    "title": "Update formula"
+		"update": "Update",
-  },
+		"label": "Formula",
-  "navigation": {
+		"title": "Update formula"
-    "add_sheet": "Add sheet",
+	},
-    "sheet_list": "Sheet list"
+	"navigation": {
-  }
+		"add_sheet": "Add sheet",
+		"sheet_list": "Sheet list"
+	},
+	"name_manager_dialog": {
+		"help": "Learn more about Named Ranges",
+		"name": "Name",
+		"range": "Scope",
+		"scope": "Range"
+	},
+	"name_manager_dialog": {
+		"help": "Learn more about Named Ranges",
+		"name": "Name",
+		"range": "Scope",
+		"scope": "Range"
+	}
 }