@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/appState.js

@@ -0,0 +1,222 @@
+import { COLOR_PALETTE } from "./colors";
+import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, THEME, } from "./constants";
+import { t } from "./i18n";
+import { getDateTime } from "./utils";
+const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
+    ? devicePixelRatio
+    : 1;
+export const getDefaultAppState = () => {
+    return {
+        showWelcomeScreen: false,
+        theme: THEME.LIGHT,
+        collaborators: new Map(),
+        currentChartType: "bar",
+        currentItemBackgroundColor: DEFAULT_ELEMENT_PROPS.backgroundColor,
+        currentItemEndArrowhead: "arrow",
+        currentItemFillStyle: DEFAULT_ELEMENT_PROPS.fillStyle,
+        currentItemFontFamily: DEFAULT_FONT_FAMILY,
+        currentItemFontSize: DEFAULT_FONT_SIZE,
+        currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
+        currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
+        currentItemStartArrowhead: null,
+        currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
+        currentItemRoundness: "round",
+        currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
+        currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
+        currentItemTextAlign: DEFAULT_TEXT_ALIGN,
+        cursorButton: "up",
+        activeEmbeddable: null,
+        draggingElement: null,
+        editingElement: null,
+        editingGroupId: null,
+        editingLinearElement: null,
+        activeTool: {
+            type: "selection",
+            customType: null,
+            locked: DEFAULT_ELEMENT_PROPS.locked,
+            lastActiveTool: null,
+        },
+        penMode: false,
+        penDetected: false,
+        errorMessage: null,
+        exportBackground: true,
+        exportScale: defaultExportScale,
+        exportEmbedScene: false,
+        exportWithDarkMode: false,
+        fileHandle: null,
+        gridSize: null,
+        isBindingEnabled: true,
+        defaultSidebarDockedPreference: false,
+        isLoading: false,
+        isResizing: false,
+        isRotating: false,
+        lastPointerDownWith: "mouse",
+        multiElement: null,
+        name: `${t("labels.untitled")}-${getDateTime()}`,
+        contextMenu: null,
+        openMenu: null,
+        openPopup: null,
+        openSidebar: null,
+        openDialog: null,
+        pasteDialog: { shown: false, data: null },
+        previousSelectedElementIds: {},
+        resizingElement: null,
+        scrolledOutside: false,
+        scrollX: 0,
+        scrollY: 0,
+        selectedElementIds: {},
+        selectedGroupIds: {},
+        selectedElementsAreBeingDragged: false,
+        selectionElement: null,
+        shouldCacheIgnoreZoom: false,
+        showStats: false,
+        startBoundElement: null,
+        suggestedBindings: [],
+        frameRendering: { enabled: true, clip: true, name: true, outline: true },
+        frameToHighlight: null,
+        editingFrame: null,
+        elementsToHighlight: null,
+        toast: null,
+        viewBackgroundColor: COLOR_PALETTE.white,
+        zenModeEnabled: false,
+        zoom: {
+            value: 1,
+        },
+        viewModeEnabled: false,
+        pendingImageElementId: null,
+        showHyperlinkPopup: false,
+        selectedLinearElement: null,
+        snapLines: [],
+        originSnapOffset: {
+            x: 0,
+            y: 0,
+        },
+        objectsSnapModeEnabled: false,
+        userToFollow: null,
+        followedBy: new Set(),
+    };
+};
+/**
+ * Config containing all AppState keys. Used to determine whether given state
+ *  prop should be stripped when exporting to given storage type.
+ */
+const APP_STATE_STORAGE_CONF = ((config) => config)({
+    showWelcomeScreen: { browser: true, export: false, server: false },
+    theme: { browser: true, export: false, server: false },
+    collaborators: { browser: false, export: false, server: false },
+    currentChartType: { browser: true, export: false, server: false },
+    currentItemBackgroundColor: { browser: true, export: false, server: false },
+    currentItemEndArrowhead: { browser: true, export: false, server: false },
+    currentItemFillStyle: { browser: true, export: false, server: false },
+    currentItemFontFamily: { browser: true, export: false, server: false },
+    currentItemFontSize: { browser: true, export: false, server: false },
+    currentItemRoundness: {
+        browser: true,
+        export: false,
+        server: false,
+    },
+    currentItemOpacity: { browser: true, export: false, server: false },
+    currentItemRoughness: { browser: true, export: false, server: false },
+    currentItemStartArrowhead: { browser: true, export: false, server: false },
+    currentItemStrokeColor: { browser: true, export: false, server: false },
+    currentItemStrokeStyle: { browser: true, export: false, server: false },
+    currentItemStrokeWidth: { browser: true, export: false, server: false },
+    currentItemTextAlign: { browser: true, export: false, server: false },
+    cursorButton: { browser: true, export: false, server: false },
+    activeEmbeddable: { browser: false, export: false, server: false },
+    draggingElement: { browser: false, export: false, server: false },
+    editingElement: { browser: false, export: false, server: false },
+    editingGroupId: { browser: true, export: false, server: false },
+    editingLinearElement: { browser: false, export: false, server: false },
+    activeTool: { browser: true, export: false, server: false },
+    penMode: { browser: true, export: false, server: false },
+    penDetected: { browser: true, export: false, server: false },
+    errorMessage: { browser: false, export: false, server: false },
+    exportBackground: { browser: true, export: false, server: false },
+    exportEmbedScene: { browser: true, export: false, server: false },
+    exportScale: { browser: true, export: false, server: false },
+    exportWithDarkMode: { browser: true, export: false, server: false },
+    fileHandle: { browser: false, export: false, server: false },
+    gridSize: { browser: true, export: true, server: true },
+    height: { browser: false, export: false, server: false },
+    isBindingEnabled: { browser: false, export: false, server: false },
+    defaultSidebarDockedPreference: {
+        browser: true,
+        export: false,
+        server: false,
+    },
+    isLoading: { browser: false, export: false, server: false },
+    isResizing: { browser: false, export: false, server: false },
+    isRotating: { browser: false, export: false, server: false },
+    lastPointerDownWith: { browser: true, export: false, server: false },
+    multiElement: { browser: false, export: false, server: false },
+    name: { browser: true, export: false, server: false },
+    offsetLeft: { browser: false, export: false, server: false },
+    offsetTop: { browser: false, export: false, server: false },
+    contextMenu: { browser: false, export: false, server: false },
+    openMenu: { browser: true, export: false, server: false },
+    openPopup: { browser: false, export: false, server: false },
+    openSidebar: { browser: true, export: false, server: false },
+    openDialog: { browser: false, export: false, server: false },
+    pasteDialog: { browser: false, export: false, server: false },
+    previousSelectedElementIds: { browser: true, export: false, server: false },
+    resizingElement: { browser: false, export: false, server: false },
+    scrolledOutside: { browser: true, export: false, server: false },
+    scrollX: { browser: true, export: false, server: false },
+    scrollY: { browser: true, export: false, server: false },
+    selectedElementIds: { browser: true, export: false, server: false },
+    selectedGroupIds: { browser: true, export: false, server: false },
+    selectedElementsAreBeingDragged: {
+        browser: false,
+        export: false,
+        server: false,
+    },
+    selectionElement: { browser: false, export: false, server: false },
+    shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
+    showStats: { browser: true, export: false, server: false },
+    startBoundElement: { browser: false, export: false, server: false },
+    suggestedBindings: { browser: false, export: false, server: false },
+    frameRendering: { browser: false, export: false, server: false },
+    frameToHighlight: { browser: false, export: false, server: false },
+    editingFrame: { browser: false, export: false, server: false },
+    elementsToHighlight: { browser: false, export: false, server: false },
+    toast: { browser: false, export: false, server: false },
+    viewBackgroundColor: { browser: true, export: true, server: true },
+    width: { browser: false, export: false, server: false },
+    zenModeEnabled: { browser: true, export: false, server: false },
+    zoom: { browser: true, export: false, server: false },
+    viewModeEnabled: { browser: false, export: false, server: false },
+    pendingImageElementId: { browser: false, export: false, server: false },
+    showHyperlinkPopup: { browser: false, export: false, server: false },
+    selectedLinearElement: { browser: true, export: false, server: false },
+    snapLines: { browser: false, export: false, server: false },
+    originSnapOffset: { browser: false, export: false, server: false },
+    objectsSnapModeEnabled: { browser: true, export: false, server: false },
+    userToFollow: { browser: false, export: false, server: false },
+    followedBy: { browser: false, export: false, server: false },
+});
+const _clearAppStateForStorage = (appState, exportType) => {
+    const stateForExport = {};
+    for (const key of Object.keys(appState)) {
+        const propConfig = APP_STATE_STORAGE_CONF[key];
+        if (propConfig?.[exportType]) {
+            const nextValue = appState[key];
+            // https://github.com/microsoft/TypeScript/issues/31445
+            stateForExport[key] = nextValue;
+        }
+    }
+    return stateForExport;
+};
+export const clearAppStateForLocalStorage = (appState) => {
+    return _clearAppStateForStorage(appState, "browser");
+};
+export const cleanAppStateForExport = (appState) => {
+    return _clearAppStateForStorage(appState, "export");
+};
+export const clearAppStateForDatabase = (appState) => {
+    return _clearAppStateForStorage(appState, "server");
+};
+export const isEraserActive = ({ activeTool, }) => activeTool.type === "eraser";
+export const isHandToolActive = ({ activeTool, }) => {
+    return activeTool.type === "hand";
+};

package/dist/packages/excalidraw/charts.js

@@ -0,0 +1,365 @@
+import { COLOR_PALETTE, DEFAULT_CHART_COLOR_INDEX, getAllColorsSpecificShade, } from "./colors";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, VERTICAL_ALIGN, } from "./constants";
+import { newElement, newLinearElement, newTextElement } from "./element";
+import { randomId } from "./random";
+const BAR_WIDTH = 32;
+const BAR_GAP = 12;
+const BAR_HEIGHT = 256;
+const GRID_OPACITY = 50;
+export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
+export const VALID_SPREADSHEET = "VALID_SPREADSHEET";
+/**
+ * @private exported for testing
+ */
+export const tryParseNumber = (s) => {
+    const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
+    if (!match) {
+        return null;
+    }
+    return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
+};
+const isNumericColumn = (lines, columnIndex) => lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
+/**
+ * @private exported for testing
+ */
+export const tryParseCells = (cells) => {
+    const numCols = cells[0].length;
+    if (numCols > 2) {
+        return { type: NOT_SPREADSHEET, reason: "More than 2 columns" };
+    }
+    if (numCols === 1) {
+        if (!isNumericColumn(cells, 0)) {
+            return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
+        }
+        const hasHeader = tryParseNumber(cells[0][0]) === null;
+        const values = (hasHeader ? cells.slice(1) : cells).map((line) => tryParseNumber(line[0]));
+        if (values.length < 2) {
+            return { type: NOT_SPREADSHEET, reason: "Less than two rows" };
+        }
+        return {
+            type: VALID_SPREADSHEET,
+            spreadsheet: {
+                title: hasHeader ? cells[0][0] : null,
+                labels: null,
+                values: values,
+            },
+        };
+    }
+    const labelColumnNumeric = isNumericColumn(cells, 0);
+    const valueColumnNumeric = isNumericColumn(cells, 1);
+    if (!labelColumnNumeric && !valueColumnNumeric) {
+        return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
+    }
+    const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
+        ? [0, 1]
+        : [1, 0];
+    const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
+    const rows = hasHeader ? cells.slice(1) : cells;
+    if (rows.length < 2) {
+        return { type: NOT_SPREADSHEET, reason: "Less than 2 rows" };
+    }
+    return {
+        type: VALID_SPREADSHEET,
+        spreadsheet: {
+            title: hasHeader ? cells[0][valueColumnIndex] : null,
+            labels: rows.map((row) => row[labelColumnIndex]),
+            values: rows.map((row) => tryParseNumber(row[valueColumnIndex])),
+        },
+    };
+};
+const transposeCells = (cells) => {
+    const nextCells = [];
+    for (let col = 0; col < cells[0].length; col++) {
+        const nextCellRow = [];
+        for (let row = 0; row < cells.length; row++) {
+            nextCellRow.push(cells[row][col]);
+        }
+        nextCells.push(nextCellRow);
+    }
+    return nextCells;
+};
+export const tryParseSpreadsheet = (text) => {
+    // Copy/paste from excel, spreadsheets, tsv, csv.
+    // For now we only accept 2 columns with an optional header
+    // Check for tab separated values
+    let lines = text
+        .trim()
+        .split("\n")
+        .map((line) => line.trim().split("\t"));
+    // Check for comma separated files
+    if (lines.length && lines[0].length !== 2) {
+        lines = text
+            .trim()
+            .split("\n")
+            .map((line) => line.trim().split(","));
+    }
+    if (lines.length === 0) {
+        return { type: NOT_SPREADSHEET, reason: "No values" };
+    }
+    const numColsFirstLine = lines[0].length;
+    const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
+    if (!isSpreadsheet) {
+        return {
+            type: NOT_SPREADSHEET,
+            reason: "All rows don't have same number of columns",
+        };
+    }
+    const result = tryParseCells(lines);
+    if (result.type !== VALID_SPREADSHEET) {
+        const transposedResults = tryParseCells(transposeCells(lines));
+        if (transposedResults.type === VALID_SPREADSHEET) {
+            return transposedResults;
+        }
+    }
+    return result;
+};
+const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX);
+// Put all the common properties here so when the whole chart is selected
+// the properties dialog shows the correct selected values
+const commonProps = {
+    fillStyle: "hachure",
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: DEFAULT_FONT_SIZE,
+    opacity: 100,
+    roughness: 1,
+    strokeColor: COLOR_PALETTE.black,
+    roundness: null,
+    strokeStyle: "solid",
+    strokeWidth: 1,
+    verticalAlign: VERTICAL_ALIGN.MIDDLE,
+    locked: false,
+};
+const getChartDimensions = (spreadsheet) => {
+    const chartWidth = (BAR_WIDTH + BAR_GAP) * spreadsheet.values.length + BAR_GAP;
+    const chartHeight = BAR_HEIGHT + BAR_GAP * 2;
+    return { chartWidth, chartHeight };
+};
+const chartXLabels = (spreadsheet, x, y, groupId, backgroundColor) => {
+    return (spreadsheet.labels?.map((label, index) => {
+        return newTextElement({
+            groupIds: [groupId],
+            backgroundColor,
+            ...commonProps,
+            text: label.length > 8 ? `${label.slice(0, 5)}...` : label,
+            x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
+            y: y + BAR_GAP / 2,
+            width: BAR_WIDTH,
+            angle: 5.87,
+            fontSize: 16,
+            textAlign: "center",
+            verticalAlign: "top",
+        });
+    }) || []);
+};
+const chartYLabels = (spreadsheet, x, y, groupId, backgroundColor) => {
+    const minYLabel = newTextElement({
+        groupIds: [groupId],
+        backgroundColor,
+        ...commonProps,
+        x: x - BAR_GAP,
+        y: y - BAR_GAP,
+        text: "0",
+        textAlign: "right",
+    });
+    const maxYLabel = newTextElement({
+        groupIds: [groupId],
+        backgroundColor,
+        ...commonProps,
+        x: x - BAR_GAP,
+        y: y - BAR_HEIGHT - minYLabel.height / 2,
+        text: Math.max(...spreadsheet.values).toLocaleString(),
+        textAlign: "right",
+    });
+    return [minYLabel, maxYLabel];
+};
+const chartLines = (spreadsheet, x, y, groupId, backgroundColor) => {
+    const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+    const xLine = newLinearElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        type: "line",
+        x,
+        y,
+        startArrowhead: null,
+        endArrowhead: null,
+        width: chartWidth,
+        points: [
+            [0, 0],
+            [chartWidth, 0],
+        ],
+    });
+    const yLine = newLinearElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        type: "line",
+        x,
+        y,
+        startArrowhead: null,
+        endArrowhead: null,
+        height: chartHeight,
+        points: [
+            [0, 0],
+            [0, -chartHeight],
+        ],
+    });
+    const maxLine = newLinearElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        type: "line",
+        x,
+        y: y - BAR_HEIGHT - BAR_GAP,
+        startArrowhead: null,
+        endArrowhead: null,
+        strokeStyle: "dotted",
+        width: chartWidth,
+        opacity: GRID_OPACITY,
+        points: [
+            [0, 0],
+            [chartWidth, 0],
+        ],
+    });
+    return [xLine, yLine, maxLine];
+};
+// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g
+const chartBaseElements = (spreadsheet, x, y, groupId, backgroundColor, debug) => {
+    const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+    const title = spreadsheet.title
+        ? newTextElement({
+            backgroundColor,
+            groupIds: [groupId],
+            ...commonProps,
+            text: spreadsheet.title,
+            x: x + chartWidth / 2,
+            y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
+            roundness: null,
+            textAlign: "center",
+        })
+        : null;
+    const debugRect = debug
+        ? newElement({
+            backgroundColor,
+            groupIds: [groupId],
+            ...commonProps,
+            type: "rectangle",
+            x,
+            y: y - chartHeight,
+            width: chartWidth,
+            height: chartHeight,
+            strokeColor: COLOR_PALETTE.black,
+            fillStyle: "solid",
+            opacity: 6,
+        })
+        : null;
+    return [
+        ...(debugRect ? [debugRect] : []),
+        ...(title ? [title] : []),
+        ...chartXLabels(spreadsheet, x, y, groupId, backgroundColor),
+        ...chartYLabels(spreadsheet, x, y, groupId, backgroundColor),
+        ...chartLines(spreadsheet, x, y, groupId, backgroundColor),
+    ];
+};
+const chartTypeBar = (spreadsheet, x, y) => {
+    const max = Math.max(...spreadsheet.values);
+    const groupId = randomId();
+    const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
+    const bars = spreadsheet.values.map((value, index) => {
+        const barHeight = (value / max) * BAR_HEIGHT;
+        return newElement({
+            backgroundColor,
+            groupIds: [groupId],
+            ...commonProps,
+            type: "rectangle",
+            x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP,
+            y: y - barHeight - BAR_GAP,
+            width: BAR_WIDTH,
+            height: barHeight,
+        });
+    });
+    return [
+        ...bars,
+        ...chartBaseElements(spreadsheet, x, y, groupId, backgroundColor, import.meta.env.DEV),
+    ];
+};
+const chartTypeLine = (spreadsheet, x, y) => {
+    const max = Math.max(...spreadsheet.values);
+    const groupId = randomId();
+    const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
+    let index = 0;
+    const points = [];
+    for (const value of spreadsheet.values) {
+        const cx = index * (BAR_WIDTH + BAR_GAP);
+        const cy = -(value / max) * BAR_HEIGHT;
+        points.push([cx, cy]);
+        index++;
+    }
+    const maxX = Math.max(...points.map((element) => element[0]));
+    const maxY = Math.max(...points.map((element) => element[1]));
+    const minX = Math.min(...points.map((element) => element[0]));
+    const minY = Math.min(...points.map((element) => element[1]));
+    const line = newLinearElement({
+        backgroundColor,
+        groupIds: [groupId],
+        ...commonProps,
+        type: "line",
+        x: x + BAR_GAP + BAR_WIDTH / 2,
+        y: y - BAR_GAP,
+        startArrowhead: null,
+        endArrowhead: null,
+        height: maxY - minY,
+        width: maxX - minX,
+        strokeWidth: 2,
+        points: points,
+    });
+    const dots = spreadsheet.values.map((value, index) => {
+        const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2;
+        const cy = -(value / max) * BAR_HEIGHT + BAR_GAP / 2;
+        return newElement({
+            backgroundColor,
+            groupIds: [groupId],
+            ...commonProps,
+            fillStyle: "solid",
+            strokeWidth: 2,
+            type: "ellipse",
+            x: x + cx + BAR_WIDTH / 2,
+            y: y + cy - BAR_GAP * 2,
+            width: BAR_GAP,
+            height: BAR_GAP,
+        });
+    });
+    const lines = spreadsheet.values.map((value, index) => {
+        const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2;
+        const cy = (value / max) * BAR_HEIGHT + BAR_GAP / 2 + BAR_GAP;
+        return newLinearElement({
+            backgroundColor,
+            groupIds: [groupId],
+            ...commonProps,
+            type: "line",
+            x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2,
+            y: y - cy,
+            startArrowhead: null,
+            endArrowhead: null,
+            height: cy,
+            strokeStyle: "dotted",
+            opacity: GRID_OPACITY,
+            points: [
+                [0, 0],
+                [0, cy],
+            ],
+        });
+    });
+    return [
+        ...chartBaseElements(spreadsheet, x, y, groupId, backgroundColor, import.meta.env.DEV),
+        line,
+        ...lines,
+        ...dots,
+    ];
+};
+export const renderSpreadsheet = (chartType, spreadsheet, x, y) => {
+    if (chartType === "line") {
+        return chartTypeLine(spreadsheet, x, y);
+    }
+    return chartTypeBar(spreadsheet, x, y);
+};

package/dist/packages/excalidraw/clients.js

@@ -0,0 +1,34 @@
+function hashToInteger(id) {
+    let hash = 0;
+    if (id.length === 0) {
+        return hash;
+    }
+    for (let i = 0; i < id.length; i++) {
+        const char = id.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+    }
+    return hash;
+}
+export const getClientColor = (
+/**
+ * any uniquely identifying key, such as user id or socket id
+ */
+id) => {
+    // to get more even distribution in case `id` is not uniformly distributed to
+    // begin with, we hash it
+    const hash = Math.abs(hashToInteger(id));
+    // we want to get a multiple of 10 number in the range of 0-360 (in other
+    // words a hue value of step size 10). There are 37 such values including 0.
+    const hue = (hash % 37) * 10;
+    const saturation = 100;
+    const lightness = 83;
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};
+/**
+ * returns first char, capitalized
+ */
+export const getNameInitial = (name) => {
+    // first char can be a surrogate pair, hence using codePointAt
+    const firstCodePoint = name?.trim()?.codePointAt(0);
+    return (firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?").toUpperCase();
+};