@inspirer-dev/crm-dashboard 1.0.84 → 1.0.86

package/dist/_chunks/index-CKr1VvX0.mjs

@@ -0,0 +1,476 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState, useMemo } from "react";
+import { Field, Flex, Box, Typography, Button, Tooltip, IconButton, SingleSelect, SingleSelectOption, Card, CardContent, NumberInput } from "@strapi/design-system";
+import { Plus, Trash } from "@strapi/icons";
+import { useTheme } from "styled-components";
+const TRIGGER_PARAMS = [
+  {
+    key: "delaySeconds",
+    label: "Задержка",
+    description: "Задержка перед показом после срабатывания триггера",
+    unit: "сек",
+    min: 0,
+    placeholder: "7",
+    stageTypes: ["side_hint", "modal", "retry"]
+  },
+  {
+    key: "timeOnSiteSeconds",
+    label: "Время на сайте",
+    description: "Мин. время на сайте для срабатывания",
+    unit: "сек",
+    min: 0,
+    placeholder: "120",
+    stageTypes: ["exit_intent", "side_hint", "modal"]
+  },
+  {
+    key: "scrollThresholdPx",
+    label: "Порог скролла",
+    description: "Скролл в пикселях для срабатывания",
+    unit: "px",
+    min: 0,
+    placeholder: "200",
+    stageTypes: ["side_hint"]
+  },
+  {
+    key: "idleSeconds",
+    label: "Бездействие",
+    description: "Время без кликов/скролла",
+    unit: "сек",
+    min: 0,
+    placeholder: "15",
+    stageTypes: ["side_hint"]
+  },
+  {
+    key: "caseViewSeconds",
+    label: "Просмотр кейса",
+    description: "Время на странице кейса",
+    unit: "сек",
+    min: 0,
+    placeholder: "12",
+    stageTypes: ["modal", "side_hint"]
+  },
+  {
+    key: "activePlayMinutes",
+    label: "Активная игра",
+    description: "Время активной игры",
+    unit: "мин",
+    min: 0,
+    placeholder: "10",
+    stageTypes: ["modal"]
+  },
+  {
+    key: "actionCountThreshold",
+    label: "Порог действий",
+    description: "Кол-во значимых действий + низкий баланс",
+    unit: "",
+    min: 0,
+    placeholder: "2",
+    stageTypes: ["modal"]
+  },
+  {
+    key: "balanceThresholdMultiplier",
+    label: "Множитель баланса",
+    description: 'Множитель мин. цены кейса для "низкого баланса"',
+    unit: "×",
+    min: 0,
+    placeholder: "1.5",
+    stageTypes: ["modal", "side_hint"]
+  },
+  {
+    key: "abandonedTimeoutMinutes",
+    label: "Таймаут заброшенного депозита",
+    description: "Через сколько минут депозит считается заброшенным",
+    unit: "мин",
+    min: 1,
+    placeholder: "10",
+    stageTypes: ["retry"]
+  },
+  {
+    key: "minDepositAmount",
+    label: "Мин. сумма депозита",
+    description: "Подстановка в {{min_deposit}} в текстах",
+    unit: "₽",
+    min: 0,
+    placeholder: "250",
+    stageTypes: ["modal", "side_hint", "retry"]
+  }
+];
+const STAGE_TYPE_LABELS = {
+  side_hint: "Side-hint",
+  modal: "Modal",
+  exit_intent: "Exit intent",
+  retry: "Retry"
+};
+const parseValue = (value) => {
+  if (!value) return [{}];
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) return parsed.length > 0 ? parsed : [{}];
+      if (typeof parsed === "object" && parsed !== null) return [parsed];
+    } catch {
+    }
+    return [{}];
+  }
+  if (Array.isArray(value)) return value.length > 0 ? value : [{}];
+  if (typeof value === "object") return [value];
+  return [{}];
+};
+const serialize = (groups) => {
+  const cleaned = groups.map((group) => {
+    const out = {};
+    for (const [key, val] of Object.entries(group)) {
+      if (typeof val === "number") out[key] = val;
+    }
+    return out;
+  }).filter((group) => Object.keys(group).length > 0);
+  return JSON.stringify(cleaned.length > 0 ? cleaned : []);
+};
+const DEPTH_BORDERS = ["#7b79ff", "#ee5e52", "#0c75af", "#328048"];
+const useThemeColors = () => {
+  const theme = useTheme();
+  const isDark = theme?.colors?.neutral0 === "#212134";
+  return useMemo(
+    () => ({
+      isDark,
+      emptyBorder: isDark ? "#32324d" : "#dcdce4",
+      cardBorder: isDark ? "#32324d" : "#eaeaef",
+      tagBg: isDark ? "#2d2d4a" : "#f0f0ff",
+      groupBg: isDark ? "#1a1a2e" : "#f6f6f9",
+      orDividerLine: isDark ? "#32324d" : "#dcdce4",
+      andLabelColor: isDark ? "#a5a5ba" : "#666687",
+      depthBorders: DEPTH_BORDERS
+    }),
+    [isDark]
+  );
+};
+const getParamDef = (key) => TRIGGER_PARAMS.find((p) => p.key === key);
+const ParamCard = ({
+  paramKey,
+  value,
+  onValueChange,
+  onRemove,
+  disabled,
+  colors
+}) => {
+  const def = getParamDef(paramKey);
+  if (!def) return null;
+  return /* @__PURE__ */ jsx(Card, { background: "neutral0", style: { border: `1px solid ${colors.cardBorder}` }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", padding: 3, children: [
+    /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", marginBottom: 1, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: def.label }),
+        def.unit && /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+          "(",
+          def.unit,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: def.description }),
+      /* @__PURE__ */ jsx(Flex, { gap: 1, marginTop: 1, wrap: "wrap", children: def.stageTypes.map((st) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            padding: "1px 6px",
+            borderRadius: "4px",
+            backgroundColor: colors.tagBg,
+            fontSize: "11px"
+          },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary600", children: STAGE_TYPE_LABELS[st] || st })
+        },
+        st
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { style: { width: 120, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        placeholder: def.placeholder,
+        value: value ?? "",
+        onValueChange,
+        disabled,
+        size: "S",
+        step: paramKey === "balanceThresholdMultiplier" ? 0.1 : 1
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { label: "Удалить параметр", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onRemove,
+        label: "Delete",
+        variant: "ghost",
+        size: "S",
+        disabled,
+        style: { color: "#d02b20", flexShrink: 0 },
+        children: /* @__PURE__ */ jsx(Trash, { width: 16, height: 16 })
+      }
+    ) })
+  ] }) }) });
+};
+const AndLabel = ({ colors }) => /* @__PURE__ */ jsx(Flex, { justifyContent: "center", paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "sigma",
+    textColor: "neutral600",
+    style: {
+      fontSize: "11px",
+      fontWeight: 700,
+      letterSpacing: "0.5px",
+      color: colors.andLabelColor,
+      textTransform: "uppercase"
+    },
+    children: "И"
+  }
+) });
+const OrDivider = ({ colors }) => /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, paddingTop: 2, paddingBottom: 2, children: [
+  /* @__PURE__ */ jsx(Box, { style: { flex: 1, height: "1px", backgroundColor: colors.orDividerLine } }),
+  /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        padding: "2px 12px",
+        borderRadius: "12px",
+        border: `1px solid ${colors.orDividerLine}`,
+        backgroundColor: colors.isDark ? "#212134" : "#ffffff"
+      },
+      children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "sigma",
+          style: {
+            fontSize: "11px",
+            fontWeight: 700,
+            letterSpacing: "0.5px",
+            color: colors.andLabelColor,
+            textTransform: "uppercase"
+          },
+          children: "ИЛИ"
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsx(Box, { style: { flex: 1, height: "1px", backgroundColor: colors.orDividerLine } })
+] });
+const ParamGroupCard = ({
+  group,
+  groupIndex,
+  totalGroups,
+  onAddParam,
+  onRemoveParam,
+  onSetValue,
+  onRemoveGroup,
+  disabled,
+  colors
+}) => {
+  const activeKeys = Object.keys(group);
+  const availableParams = TRIGGER_PARAMS.filter((p) => !activeKeys.includes(p.key));
+  const borderColor = colors.depthBorders[groupIndex % colors.depthBorders.length];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      padding: 4,
+      hasRadius: true,
+      style: {
+        backgroundColor: colors.groupBg,
+        borderLeft: `3px solid ${borderColor}`,
+        border: `1px solid ${colors.cardBorder}`,
+        borderLeftWidth: "3px",
+        borderLeftColor: borderColor
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "sigma",
+              textColor: "neutral700",
+              style: { textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" },
+              children: [
+                "Группа ",
+                groupIndex + 1
+              ]
+            }
+          ),
+          totalGroups > 1 && /* @__PURE__ */ jsx(Tooltip, { label: "Удалить группу", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onRemoveGroup,
+              label: "Удалить группу",
+              variant: "ghost",
+              size: "S",
+              disabled,
+              style: { color: "#d02b20" },
+              children: /* @__PURE__ */ jsx(Trash, { width: 14, height: 14 })
+            }
+          ) })
+        ] }),
+        activeKeys.length === 0 ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 3,
+            hasRadius: true,
+            style: {
+              border: `1px dashed ${colors.emptyBorder}`,
+              textAlign: "center"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Добавьте параметры в группу" })
+          }
+        ) : activeKeys.map((key, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx(AndLabel, { colors }),
+          /* @__PURE__ */ jsx(
+            ParamCard,
+            {
+              paramKey: key,
+              value: group[key],
+              onValueChange: (val) => onSetValue(key, val),
+              onRemove: () => onRemoveParam(key),
+              disabled,
+              colors
+            }
+          )
+        ] }, key)),
+        availableParams.length > 0 && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(AddParamSelect, { available: availableParams, onAdd: onAddParam, disabled }) })
+      ] })
+    }
+  );
+};
+const TriggerParamsField = forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const initialRef = useRef(value);
+    const [groups, setGroups] = useState(() => parseValue(initialRef.current));
+    const colors = useThemeColors();
+    const update = (next) => {
+      setGroups(next);
+      onChange({ target: { name, value: serialize(next) } });
+    };
+    const addGroup = () => {
+      update([...groups, {}]);
+    };
+    const removeGroup = (idx) => {
+      const next = groups.filter((_, i) => i !== idx);
+      update(next.length > 0 ? next : [{}]);
+    };
+    const addParamToGroup = (idx, key) => {
+      const next = groups.map((g, i) => i === idx ? { ...g, [key]: null } : g);
+      update(next);
+    };
+    const removeParamFromGroup = (idx, key) => {
+      const next = groups.map((g, i) => {
+        if (i !== idx) return g;
+        const copy = { ...g };
+        delete copy[key];
+        return copy;
+      });
+      update(next);
+    };
+    const setParamValue = (idx, key, val) => {
+      const next = groups.map((g, i) => i === idx ? { ...g, [key]: val ?? null } : g);
+      update(next);
+    };
+    const allEmpty = groups.every((g) => Object.keys(g).length === 0);
+    return /* @__PURE__ */ jsx(Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: intlLabel?.defaultMessage || "Trigger Params" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Настройте параметры срабатывания для этого этапа" })
+      ] }) }),
+      groups.length === 1 && allEmpty ? /* @__PURE__ */ jsxs(
+        Box,
+        {
+          padding: 5,
+          background: "neutral100",
+          hasRadius: true,
+          style: {
+            border: `2px dashed ${colors.emptyBorder}`,
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", children: "Параметры не настроены" }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                textColor: "neutral400",
+                style: { display: "block", marginTop: 4 },
+                children: "Добавьте параметры триггера, чтобы управлять условиями показа этапа"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 0, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        idx > 0 && /* @__PURE__ */ jsx(OrDivider, { colors }),
+        /* @__PURE__ */ jsx(
+          ParamGroupCard,
+          {
+            group,
+            groupIndex: idx,
+            totalGroups: groups.length,
+            onAddParam: (key) => addParamToGroup(idx, key),
+            onRemoveParam: (key) => removeParamFromGroup(idx, key),
+            onSetValue: (key, val) => setParamValue(idx, key, val),
+            onRemoveGroup: () => removeGroup(idx),
+            disabled,
+            colors
+          }
+        )
+      ] }, idx)) }),
+      groups.length === 1 && allEmpty ? /* @__PURE__ */ jsx(
+        AddParamSelect,
+        {
+          available: TRIGGER_PARAMS,
+          onAdd: (key) => addParamToGroup(0, key),
+          disabled
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(Plus, {}),
+          onClick: addGroup,
+          disabled,
+          variant: "tertiary",
+          size: "S",
+          children: "Добавить OR группу"
+        }
+      ),
+      error && /* @__PURE__ */ jsx(Field.Error, {}),
+      hint && /* @__PURE__ */ jsx(Field.Hint, {})
+    ] }) });
+  }
+);
+TriggerParamsField.displayName = "TriggerParamsField";
+const AddParamSelect = ({ available, onAdd, disabled }) => {
+  const [selected, setSelected] = useState(null);
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", children: [
+    /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+      SingleSelect,
+      {
+        placeholder: "Выберите параметр...",
+        value: selected,
+        onChange: (val) => setSelected(val),
+        disabled,
+        size: "S",
+        children: available.map((p) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: p.key, children: [
+          p.label,
+          " — ",
+          p.description
+        ] }, p.key))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        startIcon: /* @__PURE__ */ jsx(Plus, {}),
+        onClick: () => {
+          if (selected) {
+            onAdd(selected);
+            setSelected(null);
+          }
+        },
+        disabled: disabled || !selected,
+        variant: "secondary",
+        size: "S",
+        children: "Добавить"
+      }
+    )
+  ] });
+};
+export {
+  TriggerParamsField as default
+};

package/dist/_chunks/{index-Cg0G_bTE.js → index-CapXG1AZ.js}

@@ -6,26 +6,24 @@ const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const utils = require("./utils-CAs_GSGv.js");
+const mapRawButton = (b) => ({
+  id: typeof b?.id === "string" ? b.id : utils.generateId(),
+  text: typeof b?.text === "string" ? b.text : "",
+  url: typeof b?.url === "string" ? b.url : "",
+  row: typeof b?.row === "number" ? b.row : 0,
+  type: b?.type === "screen" ? "screen" : "url",
+  screenSlug: typeof b?.screenSlug === "string" ? b.screenSlug : ""
+});
 const parseButtons = (value) => {
   if (!value) return [];
   if (Array.isArray(value)) {
-    return value.map((b) => ({
-      id: typeof b?.id === "string" ? b.id : utils.generateId(),
-      text: typeof b?.text === "string" ? b.text : "",
-      url: typeof b?.url === "string" ? b.url : "",
-      row: typeof b?.row === "number" ? b.row : 0
-    }));
+    return value.map(mapRawButton);
   }
   if (typeof value === "string") {
     try {
       const parsed = JSON.parse(value);
       if (!Array.isArray(parsed)) return [];
-      return parsed.map((b) => ({
-        id: typeof b?.id === "string" ? b.id : utils.generateId(),
-        text: typeof b?.text === "string" ? b.text : "",
-        url: typeof b?.url === "string" ? b.url : "",
-        row: typeof b?.row === "number" ? b.row : 0
-      }));
+      return parsed.map(mapRawButton);
     } catch {
       return [];
     }
@@ -61,37 +59,38 @@ const useThemeColors = () => {
     }
   }), [isDark]);
 };
-const TelegramButtonPreview = ({ text, url }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "a",
-  {
-    href: url || "#",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    onClick: (e) => !url && e.preventDefault(),
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "6px",
-      padding: "8px 16px",
-      backgroundColor: "#3390ec",
-      color: "#ffffff",
-      borderRadius: "8px",
-      textDecoration: "none",
-      fontSize: "14px",
-      fontWeight: 500,
-      cursor: url ? "pointer" : "default",
-      transition: "background-color 0.15s ease",
-      minWidth: "80px"
-    },
-    onMouseEnter: (e) => url && (e.currentTarget.style.backgroundColor = "#2b7ed8"),
-    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#3390ec",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons.Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: text || "(empty)" })
-    ]
-  }
-);
+const TelegramButtonPreview = ({ text, btnType }) => {
+  const isScreen = btnType === "screen";
+  const bgColor = isScreen ? "#7c3aed" : "#3390ec";
+  const bgHover = isScreen ? "#6d28d9" : "#2b7ed8";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        backgroundColor: bgColor,
+        color: "#ffffff",
+        borderRadius: "8px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        cursor: "default",
+        transition: "background-color 0.15s ease",
+        minWidth: "80px"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bgHover,
+      onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bgColor,
+      children: [
+        isScreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.Layout, { width: 14, height: 14, style: { opacity: 0.9 } }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: text || "(empty)" })
+      ]
+    }
+  );
+};
 const ButtonsBuilder = React.forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [buttons, setButtons] = React.useState(() => parseButtons(value));
@@ -106,7 +105,7 @@ const ButtonsBuilder = React.forwardRef(
     const addButton = () => {
       update([
         ...buttons,
-        { id: utils.generateId(), text: "Button", url: "https://cases.gg", row: 0 }
+        { id: utils.generateId(), text: "Button", url: "https://cases.gg", row: 0, type: "url", screenSlug: "" }
       ]);
     };
     const updateButton = (id, patch) => {
@@ -164,7 +163,8 @@ const ButtonsBuilder = React.forwardRef(
           ]
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: buttons.map((btn, idx) => {
-        const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+        const isScreen = btn.type === "screen";
+        const urlOk = isScreen || (btn.url ?? "").length === 0 || isValidUrl(btn.url ?? "");
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Card,
           {
@@ -191,6 +191,22 @@ const ButtonsBuilder = React.forwardRef(
                     children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "primary600", children: idx + 1 })
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: 100, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: btn.type || "url",
+                    onChange: (val) => updateButton(btn.id, {
+                      type: val,
+                      ...val === "url" ? { screenSlug: "" } : { url: "" }
+                    }),
+                    disabled,
+                    size: "S",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "url", children: "URL" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "screen", children: "Screen" })
+                    ]
+                  }
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1, minWidth: 120 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.TextInput,
                   {
@@ -201,11 +217,20 @@ const ButtonsBuilder = React.forwardRef(
                     size: "S"
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                isScreen ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    placeholder: "screen-slug",
+                    value: btn.screenSlug ?? "",
+                    onChange: (e) => updateButton(btn.id, { screenSlug: e.target.value }),
+                    disabled,
+                    size: "S"
+                  }
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.TextInput,
                   {
                     placeholder: "https://...",
-                    value: btn.url,
+                    value: btn.url ?? "",
                     onChange: (e) => updateButton(btn.id, { url: e.target.value }),
                     disabled,
                     size: "S",
@@ -284,7 +309,7 @@ const ButtonsBuilder = React.forwardRef(
                 children: "PREVIEW"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsxRuntime.jsx(TelegramButtonPreview, { text: b.text, url: b.url }, b.id)) }, row.row)) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsxRuntime.jsx(TelegramButtonPreview, { text: b.text, btnType: b.type }, b.id)) }, row.row)) })
           ]
         }
       ),