@kevlid/discordmenus 0.0.2

package/src/render/object.js

@@ -0,0 +1,417 @@
+const { ComponentTypes, ButtonStyles } = require("./types");
+const { OptionTypes } = require("../utils/types");
+const {
+    renderButton,
+    renderSeparator,
+    renderTextDisplay,
+    renderActionRow,
+    renderHeader,
+    renderSubOptionSection,
+    validateString,
+    validateNumber,
+} = require("./utils");
+const { encodeId, Presets } = require("../utils/customIds");
+const { MaxComponents, ObjectPageOverhead, ComponentsV2MessageFlags } = require("../utils/constants");
+const ModalInputPrefix = "m";
+
+function renderObjectPage(menuKey, option, objectValue, userId, category, page, objectPageIndex = 0) {
+    const maxPageCost = Math.max(1, MaxComponents - ObjectPageOverhead);
+
+    const objectPages = [];
+    let currentObjectPage = [];
+    let currentCost = 0;
+
+    for (const subOption of option.options) {
+        let subOptionCost = Number(subOption.cost);
+        if (!Number.isFinite(subOptionCost) || subOptionCost <= 0) {
+            subOptionCost = 2;
+        }
+
+        if (currentObjectPage.length > 0 && currentCost + subOptionCost > maxPageCost) {
+            objectPages.push(currentObjectPage);
+            currentObjectPage = [];
+            currentCost = 0;
+        }
+
+        currentObjectPage.push(subOption);
+        currentCost += subOptionCost;
+    }
+
+    if (currentObjectPage.length > 0) {
+        objectPages.push(currentObjectPage);
+    }
+
+    if (objectPages.length <= 0) {
+        objectPages.push([]);
+    }
+
+    const totalObjectPages = objectPages.length;
+    const clampedObjectPage = Math.max(0, Math.min(objectPageIndex, totalObjectPages - 1));
+
+    const ctx = { u: userId, cat: category, page, op: clampedObjectPage };
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+
+    const headerLines = [`## ${option.title}`];
+    const mainDesc = (option.description && String(option.description).trim()) || "";
+    if (mainDesc) {
+        headerLines.push(`-# ${mainDesc}`);
+    }
+    if (totalObjectPages > 1) {
+        headerLines.push(`-# Page ${clampedObjectPage + 1}/${totalObjectPages}`);
+    }
+    const headerDisplay = renderTextDisplay(headerLines.join("\n"));
+    const divider = renderSeparator(true);
+    let containerComponents = [headerDisplay, divider];
+    const pageOptions = objectPages[clampedObjectPage];
+    for (const subOption of pageOptions) {
+        let subValue;
+        if (objectValue != null && typeof objectValue === "object") {
+            subValue = objectValue[subOption.key];
+        } else {
+            subValue = null;
+        }
+        const subComponent = renderObjectSubOption(menuKey, option.key, subOption, subValue, ctx);
+        containerComponents.push(subComponent);
+    }
+    containerComponents = containerComponents.filter(c => c && typeof c === "object" && "type" in c);
+
+    const hasPrevPage = clampedObjectPage > 0;
+    const hasNextPage = clampedObjectPage < totalObjectPages - 1;
+
+    const navRow = renderActionRow(
+        renderButton(genId(option.key, OptionTypes.Object, Presets.nav, String(0), "first"), "<<", ButtonStyles.Secondary, !hasPrevPage),
+        renderButton(genId(option.key, OptionTypes.Object, Presets.nav, String(clampedObjectPage - 1)), "<", ButtonStyles.Secondary, !hasPrevPage),
+        renderButton(genId(option.key, OptionTypes.Object, Presets.done), "Done", ButtonStyles.Secondary),
+        renderButton(genId(option.key, OptionTypes.Object, Presets.nav, String(clampedObjectPage + 1)), ">", ButtonStyles.Secondary, !hasNextPage),
+        renderButton(genId(option.key, OptionTypes.Object, Presets.nav, String(totalObjectPages - 1), "last"), ">>", ButtonStyles.Secondary, !hasNextPage),
+    );
+
+    return {
+        flags: ComponentsV2MessageFlags,
+        components: [
+            { type: ComponentTypes.Container, components: containerComponents },
+            navRow,
+        ],
+    };
+}
+
+function renderObjectSubOption(menuKey, objectKey, subOption, currentValue, ctx) {
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+
+    const titleSuffix = subOption.required ? " (required)" : "";
+    const lines = [`**${subOption.title}**${titleSuffix}`];
+
+    if (subOption.description) {
+        lines.push(`-# ${subOption.description}`);
+    }
+
+    if (subOption.preview) {
+        if (subOption.type === OptionTypes.List) {
+            let count;
+            if (Array.isArray(currentValue)) {
+                count = currentValue.length;
+            } else {
+                count = 0;
+            }
+
+            let pluralSuffix;
+            if (count !== 1) {
+                pluralSuffix = "s";
+            } else {
+                pluralSuffix = "";
+            }
+
+            if (count > 0) {
+                lines.push(`\`${count} Item${pluralSuffix}\``);
+            } else {
+                lines.push("`(empty)`");
+            }
+        } else {
+            if (currentValue != null) {
+                lines.push(`\`${currentValue}\``);
+            } else if (!subOption.required) {
+                lines.push("`(not set)`");
+            }
+        }
+    }
+
+    const textContent = renderTextDisplay(lines.join("\n"));
+    let button;
+
+    if (subOption.type === OptionTypes.String || subOption.type === OptionTypes.Number) {
+        button = renderButton(genId(objectKey, OptionTypes.Object, Presets.subModal, subOption.key), "Edit", ButtonStyles.Secondary);
+    } else if (subOption.type === OptionTypes.Boolean) {
+        let newValue;
+        if (currentValue) {
+            newValue = "false";
+        } else {
+            newValue = "true";
+        }
+
+        let label;
+        if (currentValue) {
+            label = subOption.trueLabel ?? "True";
+        } else {
+            label = subOption.falseLabel ?? "False";
+        }
+
+        button = renderButton(genId(objectKey, OptionTypes.Object, Presets.subBoolean, subOption.key, newValue), label, ButtonStyles.Secondary);
+    } else if (subOption.type === OptionTypes.List) {
+        button = renderButton(genId(objectKey, OptionTypes.Object, Presets.subList, subOption.key, Presets.view), "View", ButtonStyles.Secondary);
+    } else {
+        throw new Error(`Unsupported sub-option type "${subOption.type}" inside Object`);
+    }
+
+    return renderSubOptionSection(textContent, button);
+}
+
+function renderObjectListPage(menuKey, objectOption, subOption, items, listPageIndex, userId, category, page, objectPage = 0) {
+    const itemsPerPage = Math.max(1, Math.floor((MaxComponents - ObjectListPageOverhead) / ObjectListItemCost));
+
+    let safeItems;
+    if (Array.isArray(items)) {
+        safeItems = items;
+    } else {
+        safeItems = [];
+    }
+
+    const totalPages = Math.max(1, Math.ceil(safeItems.length / itemsPerPage));
+    const clampedPage = Math.min(Math.max(0, listPageIndex), totalPages - 1);
+    const start = clampedPage * itemsPerPage;
+    const pageItems = safeItems.slice(start, start + itemsPerPage);
+
+    const ctx = { u: userId, cat: category, page, sub: clampedPage, op: objectPage };
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+
+    const headerText = renderHeader(subOption.title, subOption.description);
+    const headerDisplay = renderTextDisplay(headerText);
+    const divider = renderSeparator(true);
+    const containerComponents = [headerDisplay, divider];
+
+    if (pageItems.length === 0) {
+        containerComponents.push(renderTextDisplay("`(no items)`"));
+    } else {
+        for (const [i, item] of pageItems.entries()) {
+            const itemComponents = renderObjectListItem(menuKey, objectOption.key, subOption, item, start + i, ctx);
+            containerComponents.push(...itemComponents);
+        }
+    }
+
+    const hasPrev = clampedPage > 0;
+    const hasNext = clampedPage < totalPages - 1;
+
+    const jumpItems = Math.min(10, Math.max(1, Math.ceil(safeItems.length * 0.1)));
+    const jumpPages = Math.max(1, Math.ceil(jumpItems / itemsPerPage));
+    const fastPrevPage = Math.max(0, clampedPage - jumpPages);
+    const fastNextPage = Math.min(totalPages - 1, clampedPage + jumpPages);
+
+    const navRow = renderActionRow(
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.nav, String(fastPrevPage)), "<<", ButtonStyles.Secondary, fastPrevPage === clampedPage),
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.nav, String(clampedPage - 1)), "<", ButtonStyles.Secondary, !hasPrev),
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.nav, String(clampedPage + 1)), ">", ButtonStyles.Secondary, !hasNext),
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.nav, String(fastNextPage)), ">>", ButtonStyles.Secondary, fastNextPage === clampedPage),
+    );
+
+    const actionRow = renderActionRow(
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.done), "Done", ButtonStyles.Secondary),
+        renderButton(genId(objectOption.key, OptionTypes.Object, Presets.subList, subOption.key, Presets.add), "Add", ButtonStyles.Success),
+    );
+
+    return {
+        flags: ComponentsV2MessageFlags,
+        components: [
+            { type: ComponentTypes.Container, components: containerComponents },
+            navRow,
+            actionRow,
+        ],
+    };
+}
+
+function renderObjectListItem(menuKey, objectKey, subOption, value, absIndex, ctx) {
+    let displayValue;
+    if (value != null) {
+        if (typeof value === "object") {
+            const entries = Object.entries(value);
+            if (entries.length <= 0) {
+                displayValue = "(empty object)";
+            } else {
+                const lines = [];
+                const maxPreviewLines = 4;
+                const previewEntries = entries.slice(0, maxPreviewLines);
+                for (const [key, entryValue] of previewEntries) {
+                    let printable;
+                    if (entryValue == null) {
+                        printable = "(not set)";
+                    } else if (typeof entryValue === "object") {
+                        printable = JSON.stringify(entryValue);
+                    } else {
+                        printable = String(entryValue);
+                    }
+                    lines.push(`${key}: ${printable}`);
+                }
+                if (entries.length > maxPreviewLines) {
+                    lines.push(`... +${entries.length - maxPreviewLines} more`);
+                }
+                displayValue = lines.join("\n");
+            }
+        } else {
+            displayValue = String(value);
+        }
+    } else {
+        displayValue = "(not set)";
+    }
+
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+
+    const editButton = renderButton(genId(objectKey, OptionTypes.Object, Presets.subList, subOption.key, Presets.edit, String(absIndex)), "Edit", ButtonStyles.Secondary);
+    const deleteButton = renderButton(genId(objectKey, OptionTypes.Object, Presets.subList, subOption.key, Presets.delete, String(absIndex)), "Delete", ButtonStyles.Secondary);
+
+    return [
+        renderTextDisplay(displayValue.split("\n").map(line => `> ${line}`).join("\n")),
+        renderActionRow(editButton, deleteButton),
+        renderSeparator(),
+    ];
+}
+
+function renderObjectTextInput(objectKey, subOption, currentValue) {
+    const genId = encodeId(ModalInputPrefix, [objectKey, OptionTypes.Object, Presets.subModal, subOption.key]);
+    let component;
+
+    if (subOption.type === OptionTypes.String) {
+        const minLen = subOption.minLength ?? 0;
+        const maxLen = subOption.maxLength ?? 4000;
+
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateString(String(currentValue), minLen, maxLen);
+        } else {
+            prefill = "";
+        }
+
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 2,
+            placeholder: subOption.description ?? "Enter a value...",
+            min_length: minLen,
+            max_length: maxLen,
+            required: subOption.required || minLen > 0,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else if (subOption.type === OptionTypes.Number) {
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateNumber(String(currentValue), subOption.minValue ?? -Infinity, subOption.maxValue ?? Infinity);
+        } else {
+            prefill = "";
+        }
+
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 1,
+            placeholder: subOption.description ?? "Enter a number...",
+            required: false,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else {
+        throw new Error(`Sub-option type "${subOption.type}" does not support modal input`);
+    }
+
+    return {
+        type: ComponentTypes.Label,
+        label: subOption.title,
+        description: subOption.description,
+        component: component,
+    };
+}
+
+function renderObjectListTextInput(objectKey, subOption, currentValue, itemIndex) {
+    const isAdd = itemIndex == null;
+
+    let idValues;
+    if (isAdd) {
+        idValues = [objectKey, OptionTypes.Object, Presets.subListModal, subOption.key, Presets.add];
+    } else {
+        idValues = [objectKey, OptionTypes.Object, Presets.subListModal, subOption.key, Presets.edit, String(itemIndex)];
+    }
+    const genId = encodeId(ModalInputPrefix, idValues);
+
+    const cfg = subOption.itemConfig;
+    let component;
+
+    if (subOption.itemType === OptionTypes.String) {
+        const minLen = cfg.minLength ?? 0;
+        const maxLen = cfg.maxLength ?? 4000;
+
+        let value;
+        if (isAdd) {
+            value = "";
+        } else if (currentValue != null) {
+            value = validateString(String(currentValue), minLen, maxLen);
+        } else {
+            value = "";
+        }
+
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 2,
+            placeholder: cfg.description ?? "Enter a value...",
+            min_length: minLen,
+            max_length: maxLen,
+            required: minLen > 0,
+        };
+        if (value !== "") {
+            component.value = value;
+        }
+    } else if (subOption.itemType === OptionTypes.Number) {
+        let value;
+        if (isAdd) {
+            value = "";
+        } else if (currentValue != null) {
+            value = validateNumber(String(currentValue), cfg.minValue ?? -Infinity, cfg.maxValue ?? Infinity);
+        } else {
+            value = "";
+        }
+
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 1,
+            placeholder: cfg.description ?? "Enter a number...",
+            required: true,
+        };
+        if (value !== "") {
+            component.value = value;
+        }
+    } else {
+        throw new Error(`List item type "${subOption.itemType}" does not support modal input`);
+    }
+
+    let labelText;
+    if (isAdd) {
+        labelText = "Add item";
+    } else {
+        labelText = "Edit item";
+    }
+
+    return {
+        type: ComponentTypes.Label,
+        label: labelText,
+        description: null,
+        component: component,
+    };
+}
+
+module.exports = {
+    renderObjectPage,
+    renderObjectSubOption,
+    renderObjectListPage,
+    renderObjectTextInput,
+    renderObjectListTextInput,
+};

package/src/render/page.js

@@ -0,0 +1,142 @@
+const { OptionTypes } = require("../utils/types");
+const { Presets, encodeId } = require("../utils/customIds");
+const { ComponentTypes, ButtonStyles } = require("./types");
+const {
+    renderButton,
+    renderSeparator,
+    renderTextDisplay,
+    renderActionRow,
+    renderHeader
+} = require("./utils");
+const { renderSelectMenuOption } = require("./selectMenu");
+const SelectOptionTypes = new Set([
+    OptionTypes.StringSelect,
+    OptionTypes.UserSelect,
+    OptionTypes.RoleSelect,
+    OptionTypes.MentionableSelect,
+    OptionTypes.ChannelSelect,
+]);
+
+
+function renderNavigation(menuKey, userId, targets, category, pageIndex) {
+    const previousCategory = targets.previousCategory ?? null;
+    const previousPage = targets.previousPage ?? null;
+    const nextPage = targets.nextPage ?? null;
+    const nextCategory = targets.nextCategory ?? null;
+    const genId = (preset, target) => encodeId(menuKey, [preset, Presets.nav], {
+        u: userId,
+        cat: target?.cat ?? 0,
+        page: target?.page ?? 0,
+    });
+    const prevCategoryButton = renderButton(genId(Presets.previousCategory, previousCategory), "<<", ButtonStyles.Secondary, !previousCategory);
+    const prevPageButton = renderButton(genId(Presets.previousPage, previousPage), "<", ButtonStyles.Secondary, !previousPage);
+    const spacerId = encodeId(menuKey, [Presets.navSpacer, Presets.nav], {
+        u: userId,
+        cat: category,
+        page: pageIndex,
+    });
+    const spacer = renderButton(spacerId, "O", ButtonStyles.Secondary, true);
+    const nextPageButton = renderButton(genId(Presets.nextPage, nextPage), ">", ButtonStyles.Secondary, !nextPage);
+    const nextCategoryButton = renderButton(genId(Presets.nextCategory, nextCategory), ">>", ButtonStyles.Secondary, !nextCategory);
+    return renderActionRow(prevCategoryButton, prevPageButton, spacer, nextPageButton, nextCategoryButton);
+}
+
+function renderContainer({ title, description, components }) {
+    const headerText = renderHeader(title, description);
+    const header = renderTextDisplay(headerText);
+    const divider = renderSeparator(true);
+    return {
+        type: ComponentTypes.Container,
+        components: [header, divider, ...components],
+    };
+}
+
+function renderOption(menuKey, opt, currentValue, userId, category, page) {
+    if (SelectOptionTypes.has(opt.type)) {
+        return renderSelectMenuOption(menuKey, opt, currentValue, userId, category, page);
+    }
+    const lines = [`**${opt.title}**`];
+    if (opt.description) {
+        lines.push(`-# ${opt.description}`);
+    }
+    if (opt.preview) {
+        if (opt.type === OptionTypes.List) {
+            let count;
+            if (Array.isArray(currentValue)) {
+                count = currentValue.length;
+            } else {
+                count = 0;
+            }
+            let pluralSuffix;
+            if (count !== 1) {
+                pluralSuffix = "s";
+            } else {
+                pluralSuffix = "";
+            }
+            if (count > 0) {
+                lines.push(`\`${count} Item${pluralSuffix}\``);
+            } else {
+                lines.push("`(empty)`");
+            }
+        } else if (opt.type === OptionTypes.Object) {
+            let isConfigured = false;
+            if (currentValue != null && typeof currentValue === "object") {
+                isConfigured = Object.keys(currentValue).length > 0;
+            }
+            if (isConfigured) {
+                lines.push("`Configured`");
+            } else {
+                lines.push("`Not configured`");
+            }
+        } else {
+            if (currentValue != null) {
+                lines.push(`\`${currentValue}\``);
+            } else {
+                lines.push("`(not set)`");
+            }
+        }
+    }
+    const textContent = renderTextDisplay(lines.join("\n"));
+    const button = renderAccessory(menuKey, opt, currentValue, userId, category, page);
+    return [
+        {
+            type: ComponentTypes.Section,
+            components: [textContent],
+            accessory: button,
+        },
+        renderSeparator(),
+    ];
+}
+
+function renderAccessory(menuKey, opt, currentValue, userId, category, page) {
+    const ctx = { u: userId, cat: category, page: page };
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+    if (opt.type === OptionTypes.String || opt.type === OptionTypes.Number) {
+        return renderButton(genId(opt.key, opt.type, "modal"), "Edit", ButtonStyles.Secondary);
+    }
+    if (opt.type === OptionTypes.Boolean) {
+        let newValue;
+        if (currentValue) {
+            newValue = "false";
+        } else {
+            newValue = "true";
+        }
+        let label;
+        if (currentValue) {
+            label = opt.trueLabel ?? "True";
+        } else {
+            label = opt.falseLabel ?? "False";
+        }
+        return renderButton(genId(opt.key, OptionTypes.Boolean, newValue), label, ButtonStyles.Secondary);
+    }
+    if (opt.type === OptionTypes.List) {
+        return renderButton(genId(opt.key, OptionTypes.List, Presets.view), "View", ButtonStyles.Secondary);
+    }
+    if (opt.type === OptionTypes.Object) {
+        return renderButton(genId(opt.key, OptionTypes.Object, Presets.view), "View", ButtonStyles.Secondary);
+    }
+    throw new Error(`Unknown option type "${opt.type}"`);
+}
+
+
+module.exports = { renderNavigation, renderContainer, renderOption, renderAccessory };

package/src/render/selectMenu.js

@@ -0,0 +1 @@
+const { OptionTypes } = require("../utils/types");
    if (Array.isArray(currentValue)) {
        return currentValue;
    }
    if (currentValue != null) {
        return [currentValue];
    }
    return [];
    const ctx = { userId, category, page };
    const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
    const component = {
        type: opt.selectType,
        custom_id: customId,
        min_values: opt.minValues,
        max_values: opt.maxValues,
    };
    if (opt.placeholder != null) {
        component.placeholder = opt.placeholder;
    }
    if (opt.type === OptionTypes.StringSelect) {
        const selectedValues = toIdArray(currentValue);
        component.options = opt.choices.map(c => ({
            label: c.label,
            value: c.value,
            description: c.description,
            default: selectedValues.includes(c.value),
        }));
    }
    if (opt.type === OptionTypes.UserSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "user" }));
        }
    }
    if (opt.type === OptionTypes.RoleSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "role" }));
        }
    }
    if (opt.type === OptionTypes.ChannelSelect) {
        if (opt.channelTypes && opt.channelTypes.length > 0) {
            component.channel_types = opt.channelTypes;
        }
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "channel" }));
        }
    }
    return component;
    const lines = [`**${opt.title}**`];
    if (opt.description) {
        lines.push(`-# ${opt.description}`);
    }
    const textDisplay = renderTextDisplay(lines.join("\n"));
    const selectMenu = renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page);
    const actionRow = renderActionRow(selectMenu);
    return [textDisplay, actionRow, renderSeparator()];

package/src/render/types.js

@@ -0,0 +1 @@
+const ComponentTypes = {
    ActionRow: 1,
    Button: 2,
    StringSelect: 3,
    TextInput: 4,
    UserSelect: 5,
    RoleSelect: 6,
    MentionableSelect: 7,
    ChannelSelect: 8,
    Section: 9,
    TextDisplay: 10,
    Separator: 14,
    Container: 17,
    Label: 18,
    Primary: 1,
    Secondary: 2,
    Success: 3,
    Danger: 4,

package/src/render/utils.js

@@ -0,0 +1,60 @@
+const { ComponentTypes } = require("./types");
+
+function renderButton(custom_id, label, style, disabled = false) {
+    return { type: ComponentTypes.Button, custom_id, label, style, disabled };
+}
+
+function renderSeparator(divider = false) {
+    return { type: ComponentTypes.Separator, divider, spacing: 1 };
+}
+
+function renderTextDisplay(content) {
+    return { type: ComponentTypes.TextDisplay, content };
+}
+
+function renderActionRow(...components) {
+    return { type: ComponentTypes.ActionRow, components };
+}
+
+function renderHeader(title, description) {
+    if (description) {
+        return `## ${title}\n-# ${description}`;
+    }
+    return `## ${title}`;
+}
+
+function renderSubOptionSection(textContent, button) {
+    return {
+        type: ComponentTypes.Section,
+        components: [textContent],
+        accessory: button,
+    };
+}
+
+function validateString(value, minLen, maxLen) {
+    const str = value != null ? String(value) : "";
+    if (str.length >= minLen && str.length <= maxLen) {
+        return str;
+    }
+    return "";
+}
+
+function validateNumber(value, minVal, maxVal) {
+    const str = value != null ? String(value) : "";
+    const parsed = parseFloat(str);
+    if (!isNaN(parsed) && parsed >= minVal && parsed <= maxVal) {
+        return str;
+    }
+    return "";
+}
+
+module.exports = {
+    renderButton,
+    renderSeparator,
+    renderTextDisplay,
+    renderActionRow,
+    renderHeader,
+    renderSubOptionSection,
+    validateString,
+    validateNumber,
+};