@inspirer-dev/crm-dashboard 1.0.11 → 1.0.13

package/dist/_chunks/index-CzC9cKzN.js

@@ -0,0 +1,380 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const utils = require("./utils-CmonL0io.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
+  if (operator === "$exists") {
+    const boolVal = value === true || value === "true";
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Switch,
+        {
+          label: "",
+          selected: boolVal,
+          onChange: () => onChange(!boolVal),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: boolVal ? "exists" : "not exists" })
+    ] });
+  }
+  if (metric.valueType === "boolean") {
+    const boolVal = value === true || value === "true";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.SingleSelect,
+      {
+        value: boolVal ? "true" : "false",
+        onChange: (val) => onChange(val === "true"),
+        disabled,
+        size: "S",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "true", children: "Yes" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "false", children: "No" })
+        ]
+      }
+    );
+  }
+  if (metric.valueType === "time_ago") {
+    const { amount, unit } = utils.parseTimeAgoValue(value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          type: "number",
+          value: String(amount),
+          onChange: (e) => {
+            const num = parseInt(e.target.value, 10) || 0;
+            onChange(utils.createTimeAgoValue(num, unit));
+          },
+          disabled,
+          size: "S",
+          "aria-label": "Time amount"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.SingleSelect,
+        {
+          value: unit,
+          onChange: (val) => onChange(utils.createTimeAgoValue(amount, val)),
+          disabled,
+          size: "S",
+          children: utils.TIME_UNITS.map((u) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: u.value, children: u.label }, u.value))
+        }
+      ) })
+    ] });
+  }
+  if (metric.key === "lifecycle_stage") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.SingleSelect,
+      {
+        value: String(value || ""),
+        onChange: (val) => onChange(val),
+        disabled,
+        size: "S",
+        children: utils.LIFECYCLE_STAGES.map((stage) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: stage, children: stage.charAt(0).toUpperCase() + stage.slice(1) }, stage))
+      }
+    );
+  }
+  if (metric.valueType === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.TextInput,
+      {
+        type: "number",
+        value: String(value ?? ""),
+        onChange: (e) => {
+          const num = parseFloat(e.target.value);
+          onChange(isNaN(num) ? 0 : num);
+        },
+        disabled,
+        size: "S",
+        "aria-label": "Value"
+      }
+    ) });
+  }
+  if (operator === "$in" || operator === "$nin") {
+    const arrVal = Array.isArray(value) ? value.join(", ") : String(value || "");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.TextInput,
+      {
+        value: arrVal,
+        onChange: (e) => {
+          const arr = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
+          onChange(arr);
+        },
+        placeholder: "value1, value2, ...",
+        disabled,
+        size: "S",
+        "aria-label": "Values"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.TextInput,
+    {
+      value: String(value ?? ""),
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      size: "S",
+      "aria-label": "Value"
+    }
+  );
+};
+const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
+  const theme = styled.useTheme();
+  const colors = theme?.colors;
+  const metric = utils.getMetricDefinition(rule.field);
+  const availableOperators = metric?.operators || utils.OPERATORS.map((o) => o.value);
+  const handleFieldChange = (fieldKey) => {
+    const newMetric = utils.getMetricDefinition(fieldKey);
+    let newValue = 0;
+    if (newMetric?.valueType === "boolean") {
+      newValue = false;
+    } else if (newMetric?.valueType === "time_ago") {
+      newValue = { hours_ago: 24 };
+    } else if (newMetric?.valueType === "string") {
+      newValue = "";
+    }
+    const newOp = newMetric?.operators[0] || "$eq";
+    onUpdate({ ...rule, field: fieldKey, operator: newOp, value: newValue });
+  };
+  const handleOperatorChange = (op) => {
+    let newValue = rule.value;
+    if (op === "$exists") {
+      newValue = true;
+    } else if ((op === "$in" || op === "$nin") && !Array.isArray(rule.value)) {
+      newValue = [];
+    }
+    onUpdate({ ...rule, operator: op, value: newValue });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Flex,
+    {
+      gap: 2,
+      alignItems: "center",
+      padding: 2,
+      background: "neutral0",
+      hasRadius: true,
+      style: { border: `1px solid ${colors?.neutral200 || "#dcdce4"}` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 200px", minWidth: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            value: rule.field,
+            onChange: (val) => handleFieldChange(val),
+            disabled,
+            size: "S",
+            children: Object.entries(utils.METRICS_BY_CATEGORY).map(([category, metrics]) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: `__header_${category}`, disabled: true, children: utils.CATEGORY_LABELS[category] || category }),
+              metrics.map((m) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: m.key, children: m.label }, m.key))
+            ] }, category))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            value: rule.operator,
+            onChange: (val) => handleOperatorChange(val),
+            disabled,
+            size: "S",
+            children: utils.OPERATORS.filter((op) => availableOperators.includes(op.value)).map((op) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: op.value, children: op.label }, op.value))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 150px", minWidth: "120px" }, children: metric && /* @__PURE__ */ jsxRuntime.jsx(
+          ValueInput,
+          {
+            metric,
+            value: rule.value,
+            operator: rule.operator,
+            onChange: (val) => onUpdate({ ...rule, value: val }),
+            disabled
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete rule", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete rule", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
+      ]
+    }
+  );
+};
+const RuleGroupComponent = ({
+  group,
+  onUpdate,
+  onDelete,
+  depth = 0,
+  disabled
+}) => {
+  const theme = styled.useTheme();
+  const colors = theme?.colors;
+  const borderColors = {
+    0: colors?.primary200 || "#d9d8ff",
+    1: colors?.success200 || "#c6f0c2",
+    2: colors?.warning200 || "#fae7b9",
+    3: colors?.danger200 || "#f5c0b8"
+  };
+  const borderColor = borderColors[depth % 4] || borderColors[0];
+  const handleAddRule = () => {
+    onUpdate(utils.addRuleToGroup(group, group.id, utils.createEmptyRule()));
+  };
+  const handleAddGroup = () => {
+    const newLogic = group.logic === "$and" ? "$or" : "$and";
+    onUpdate(utils.addRuleToGroup(group, group.id, utils.createEmptyGroup(newLogic)));
+  };
+  const handleLogicToggle = () => {
+    onUpdate(utils.updateGroupLogic(group, group.id, group.logic === "$and" ? "$or" : "$and"));
+  };
+  const handleRuleUpdate = (ruleId, updatedRule) => {
+    onUpdate(utils.updateRuleInGroup(group, ruleId, () => updatedRule));
+  };
+  const handleRuleDelete = (ruleId) => {
+    onUpdate(utils.deleteRuleFromGroup(group, ruleId));
+  };
+  const handleNestedGroupUpdate = (nestedGroup) => {
+    onUpdate({
+      ...group,
+      rules: group.rules.map(
+        (item) => utils.isRuleGroup(item) && item.id === nestedGroup.id ? nestedGroup : item
+      )
+    });
+  };
+  const handleNestedGroupDelete = (groupId) => {
+    onUpdate(utils.deleteGroupFromParent(group, groupId));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      padding: 3,
+      background: depth === 0 ? "neutral100" : "neutral0",
+      hasRadius: true,
+      style: {
+        borderLeft: `3px solid ${borderColor}`,
+        marginLeft: depth > 0 ? "12px" : 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                variant: group.logic === "$and" ? "default" : "secondary",
+                size: "S",
+                onClick: handleLogicToggle,
+                disabled,
+                children: group.logic === "$and" ? "AND" : "OR"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: group.logic === "$and" ? "All conditions must match" : "Any condition can match" })
+          ] }),
+          depth > 0 && onDelete && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete group", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete group", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: group.rules.map((item, index) => {
+          if (utils.isRuleGroup(item)) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              RuleGroupComponent,
+              {
+                group: item,
+                onUpdate: handleNestedGroupUpdate,
+                onDelete: () => handleNestedGroupDelete(item.id),
+                depth: depth + 1,
+                disabled
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            RuleRow,
+            {
+              rule: item,
+              onUpdate: (updated) => handleRuleUpdate(item.id, updated),
+              onDelete: () => handleRuleDelete(item.id),
+              disabled
+            },
+            item.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, marginTop: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: "secondary",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+              onClick: handleAddRule,
+              disabled,
+              children: "Add condition"
+            }
+          ),
+          depth < 2 && /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Layout, {}),
+              onClick: handleAddGroup,
+              disabled,
+              children: [
+                "Add ",
+                group.logic === "$and" ? "OR" : "AND",
+                " group"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const RulesBuilder = React.forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [config, setConfig] = React.useState(() => utils.deserializeConfig(value));
+    React.useEffect(() => {
+      setConfig(utils.deserializeConfig(value));
+    }, [value]);
+    const displayLabel = React.useMemo(() => {
+      if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes(".")) {
+        return intlLabel.defaultMessage;
+      }
+      return "Segment Rules";
+    }, [intlLabel]);
+    const rulesCount = React.useMemo(() => utils.countRules(config), [config]);
+    const handleConfigUpdate = React.useCallback(
+      (newConfig) => {
+        setConfig(newConfig);
+        onChange({ target: { name, value: utils.serializeConfig(newConfig) } });
+      },
+      [name, onChange]
+    );
+    const handleClear = () => {
+      handleConfigUpdate(utils.createInitialConfig());
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { children: [
+            rulesCount,
+            " rule",
+            rulesCount !== 1 ? "s" : ""
+          ] }),
+          rulesCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "ghost", size: "S", onClick: handleClear, disabled, children: "Clear all" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RuleGroupComponent,
+        {
+          group: config,
+          onUpdate: handleConfigUpdate,
+          depth: 0,
+          disabled
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+RulesBuilder.displayName = "RulesBuilder";
+exports.default = RulesBuilder;

package/dist/_chunks/index-DlVJIvrD.mjs

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo } from "react";
+import { Field, Flex, Typography, Box, TextInput, Tooltip, IconButton, Button, Badge } from "@strapi/design-system";
+import { ArrowUp, ArrowDown, Trash, Plus } from "@strapi/icons";
+import { m as generateId } from "./utils-C6_ndVAZ.mjs";
+const parseButtons = (value) => {
+  if (!value) return [];
+  if (Array.isArray(value)) {
+    return value.map((b) => ({
+      id: typeof b?.id === "string" ? b.id : generateId(),
+      text: typeof b?.text === "string" ? b.text : "",
+      url: typeof b?.url === "string" ? b.url : "",
+      row: typeof b?.row === "number" ? b.row : 0
+    }));
+  }
+  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 : generateId(),
+        text: typeof b?.text === "string" ? b.text : "",
+        url: typeof b?.url === "string" ? b.url : "",
+        row: typeof b?.row === "number" ? b.row : 0
+      }));
+    } catch {
+      return [];
+    }
+  }
+  return [];
+};
+const serializeButtons = (buttons) => JSON.stringify(buttons);
+const isValidUrl = (url) => {
+  try {
+    const u = new URL(url);
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+const ButtonsBuilder = forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [buttons, setButtons] = useState(() => parseButtons(value));
+    useEffect(() => {
+      setButtons(parseButtons(value));
+    }, [value]);
+    const update = (next) => {
+      setButtons(next);
+      onChange({ target: { name, value: serializeButtons(next) } });
+    };
+    const addButton = () => {
+      update([
+        ...buttons,
+        { id: generateId(), text: "Button", url: "https://cases.gg", row: 0 }
+      ]);
+    };
+    const updateButton = (id, patch) => {
+      update(buttons.map((b) => b.id === id ? { ...b, ...patch } : b));
+    };
+    const deleteButton = (id) => {
+      update(buttons.filter((b) => b.id !== id));
+    };
+    const move = (from, to) => {
+      if (to < 0 || to >= buttons.length) return;
+      const copy = [...buttons];
+      const [item] = copy.splice(from, 1);
+      copy.splice(to, 0, item);
+      update(copy);
+    };
+    const previewRows = useMemo(() => {
+      const rows = /* @__PURE__ */ new Map();
+      for (const b of buttons) {
+        const row = b.row ?? 0;
+        rows.set(row, [...rows.get(row) || [], b]);
+      }
+      return Array.from(rows.entries()).sort((a, b) => a[0] - b[0]).map(([row, items]) => ({ row, items }));
+    }, [buttons]);
+    return /* @__PURE__ */ jsx(Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: intlLabel?.defaultMessage || "Buttons" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Build Telegram inline keyboard buttons (text + URL). Stored as JSON." }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        buttons.map((btn, idx) => {
+          const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+          return /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              alignItems: "flex-start",
+              padding: 3,
+              background: "neutral0",
+              hasRadius: true,
+              style: { border: "1px solid #dcdce4" },
+              children: [
+                /* @__PURE__ */ jsx(Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { name: `${name}.${btn.id}.text`, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Text" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: btn.text,
+                      onChange: (e) => updateButton(btn.id, { text: e.target.value }),
+                      disabled
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(Box, { style: { flex: 3, minWidth: 220 }, children: /* @__PURE__ */ jsxs(Field.Root, { name: `${name}.${btn.id}.url`, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "URL" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: btn.url,
+                      onChange: (e) => updateButton(btn.id, { url: e.target.value }),
+                      disabled
+                    }
+                  ),
+                  !urlOk && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", style: { marginTop: 4 }, children: "Please enter a valid http/https URL" })
+                ] }) }),
+                /* @__PURE__ */ jsx(Box, { style: { width: 90 }, children: /* @__PURE__ */ jsxs(Field.Root, { name: `${name}.${btn.id}.row`, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Row" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      type: "number",
+                      value: String(btn.row ?? 0),
+                      onChange: (e) => updateButton(btn.id, { row: parseInt(e.target.value, 10) || 0 }),
+                      disabled
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, paddingTop: 6, children: [
+                  /* @__PURE__ */ jsx(Tooltip, { label: "Move up", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: () => move(idx, idx - 1),
+                      label: "Move up",
+                      variant: "ghost",
+                      disabled: disabled || idx === 0,
+                      children: /* @__PURE__ */ jsx(ArrowUp, {})
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Tooltip, { label: "Move down", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: () => move(idx, idx + 1),
+                      label: "Move down",
+                      variant: "ghost",
+                      disabled: disabled || idx === buttons.length - 1,
+                      children: /* @__PURE__ */ jsx(ArrowDown, {})
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Tooltip, { label: "Delete button", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: () => deleteButton(btn.id),
+                      label: "Delete button",
+                      variant: "ghost",
+                      disabled,
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  ) })
+                ] })
+              ]
+            },
+            btn.id
+          );
+        }),
+        buttons.length === 0 && /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, style: { border: "1px dashed #dcdce4" }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "No buttons. Add one to create an inline keyboard." }) })
+      ] }),
+      /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: addButton, disabled, variant: "secondary", children: "Add button" }) }),
+      buttons.length > 0 && /* @__PURE__ */ jsxs(Box, { paddingTop: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: 8, display: "block" }, children: "Preview" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: previewRows.map((row) => /* @__PURE__ */ jsx(Flex, { gap: 1, wrap: "wrap", children: row.items.map((b) => /* @__PURE__ */ jsx(Badge, { backgroundColor: "primary100", children: b.text || "(empty)" }, b.id)) }, row.row)) })
+      ] }),
+      error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+      hint && /* @__PURE__ */ jsx(Field.Hint, { children: hint })
+    ] }) });
+  }
+);
+ButtonsBuilder.displayName = "ButtonsBuilder";
+export {
+  ButtonsBuilder as default
+};

package/dist/_chunks/{index-Bnjm_sYk.mjs → index-JOsIDBgU.mjs}

@@ -96,15 +96,33 @@ const DEFAULT_CONFIG = {
 };
 const parseConfig = (value) => {
   if (!value) return DEFAULT_CONFIG;
-  try {
-    const parsed = JSON.parse(value);
-    if (parsed.logic && Array.isArray(parsed.rules)) {
-      return parsed;
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed.logic && Array.isArray(parsed.rules)) {
+        return {
+          ...parsed,
+          rules: parsed.rules.map((rule) => ({
+            ...rule,
+            id: rule.id || generateId()
+          }))
+        };
+      }
+      return DEFAULT_CONFIG;
+    } catch {
+      return DEFAULT_CONFIG;
     }
-    return DEFAULT_CONFIG;
-  } catch {
-    return DEFAULT_CONFIG;
   }
+  if (value.logic && Array.isArray(value.rules)) {
+    return {
+      ...value,
+      rules: value.rules.map((rule) => ({
+        ...rule,
+        id: rule.id || generateId()
+      }))
+    };
+  }
+  return DEFAULT_CONFIG;
 };
 const serializeConfig = (config) => {
   return JSON.stringify(config);