@universe-platform/ui 0.1.0-beta.33 → 0.1.0-beta.34

package/dist/index.js

@@ -8402,9 +8402,10 @@ function TableBlock(props) {
 }
 
 // src/components/PlacementBlock/PlacementBlock.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_ag_grid_react = require("ag-grid-react");
 var import_ag_grid_community = require("ag-grid-community");
+var import_lucide_react10 = require("lucide-react");
 
 // src/components/PlacementBlock/PlacementSettings.tsx
 var import_react18 = __toESM(require("react"));
@@ -8799,8 +8800,107 @@ var PlacementSettings = ({ config, onChange, tables }) => {
   ] });
 };
 
-// src/components/PlacementBlock/PlacementBlock.tsx
+// src/components/PlacementBlock/PlacementRelationButtons.tsx
+var import_react19 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var GROUP_COLORS = [
+  { title: "bg-blue-600 text-white", active: "bg-blue-600 border-blue-600 text-white hover:bg-blue-700", count: "text-blue-700" },
+  { title: "bg-violet-600 text-white", active: "bg-violet-600 border-violet-600 text-white hover:bg-violet-700", count: "text-violet-700" },
+  { title: "bg-emerald-600 text-white", active: "bg-emerald-600 border-emerald-600 text-white hover:bg-emerald-700", count: "text-emerald-700" },
+  { title: "bg-amber-500 text-white", active: "bg-amber-500 border-amber-500 text-white hover:bg-amber-600", count: "text-amber-700" },
+  { title: "bg-rose-600 text-white", active: "bg-rose-600 border-rose-600 text-white hover:bg-rose-700", count: "text-rose-700" }
+];
+var isRawObjectId2 = (s) => /^[0-9a-fA-F]{24}$/.test(s);
+function rowMatchesRelationFilter(row, colName, id) {
+  var _a;
+  return normalizeRelationValue((_a = row.data) == null ? void 0 : _a[colName]).includes(id);
+}
+var PlacementRelationButtons = ({
+  columnNames,
+  rows,
+  filters,
+  onFilterChange,
+  relationOptions,
+  className = ""
+}) => {
+  const groups = (0, import_react19.useMemo)(() => {
+    const activeEntries = Object.entries(filters).filter(([, v]) => v !== void 0 && v !== null && v !== "");
+    return (columnNames || []).map((colName) => {
+      var _a, _b, _c, _d;
+      const otherEntries = activeEntries.filter(([name]) => name !== colName);
+      const base = otherEntries.length === 0 ? rows : rows.filter((r) => otherEntries.every(([name, val]) => rowMatchesRelationFilter(r, name, val)));
+      const counts = /* @__PURE__ */ new Map();
+      for (const r of base) {
+        new Set(normalizeRelationValue((_a = r.data) == null ? void 0 : _a[colName])).forEach((id) => counts.set(id, (counts.get(id) || 0) + 1));
+      }
+      const activeId = filters[colName] ? String(filters[colName]) : null;
+      const labelById = /* @__PURE__ */ new Map();
+      for (const opt of relationOptions[colName] || []) {
+        const id = String((_c = (_b = opt == null ? void 0 : opt.id) != null ? _b : opt == null ? void 0 : opt._id) != null ? _c : "");
+        const label = String((_d = opt == null ? void 0 : opt.label) != null ? _d : "").trim();
+        if (id && label && !isRawObjectId2(label)) labelById.set(id, label);
+      }
+      const options = [];
+      const ids = /* @__PURE__ */ new Set([...counts.keys(), ...activeId ? [activeId] : []]);
+      ids.forEach((id) => {
+        const label = labelById.get(id);
+        if (!label) return;
+        options.push({ id, label, count: counts.get(id) || 0 });
+      });
+      options.sort((a, b) => a.label.localeCompare(b.label, "he"));
+      return { key: colName, title: colName, options, activeId };
+    });
+  }, [columnNames, rows, filters, relationOptions]);
+  if (!columnNames || columnNames.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: `border-t border-slate-100 pt-3 ${className}`,
+      "data-testid": "placement-relation-buttons",
+      children: groups.every((g) => g.options.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "py-2 text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E2\u05E8\u05DB\u05D9\u05DD \u05DC\u05D4\u05E6\u05D2\u05D4 \u05D1\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05E9\u05E0\u05D1\u05D7\u05E8\u05D5" }) : (
+        // כל עמודה במתחם נפרד: בשורה הראשונה הכותרת (תגית צבעונית), ומהשורה שמתחת הכפתורים
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2.5", children: groups.map((group, gi) => {
+          if (group.options.length === 0) return null;
+          const color = GROUP_COLORS[gi % GROUP_COLORS.length];
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "bg-white border border-slate-200 rounded-xl p-3 flex flex-col gap-2.5 shadow-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-2 pb-2 border-b border-slate-100", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: `px-2.5 py-0.5 rounded-md text-xs font-bold truncate ${color.title}`, title: group.title, children: group.title }),
+              group.activeId && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onFilterChange(group.key, ""),
+                  className: "text-[11px] font-semibold text-rose-600 hover:text-rose-700 hover:underline cursor-pointer shrink-0",
+                  children: "\u05E0\u05E7\u05D4 \u05E1\u05D9\u05E0\u05D5\u05DF"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap items-end gap-x-2 gap-y-2.5", children: group.options.map((opt) => {
+              const active = group.activeId === opt.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center gap-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: `text-[11px] font-bold leading-none ${active ? color.count : "text-slate-500"}`, children: opt.count }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onFilterChange(group.key, active ? "" : opt.id),
+                    title: active ? "\u05DC\u05D7\u05E5 \u05DC\u05D1\u05D9\u05D8\u05D5\u05DC \u05D4\u05E1\u05D9\u05E0\u05D5\u05DF" : `\u05E1\u05E0\u05DF \u05DC\u05E4\u05D9: ${opt.label}`,
+                    "aria-pressed": active,
+                    className: `px-3 h-8 rounded-md border text-xs font-semibold whitespace-nowrap shadow-2xs transition-colors cursor-pointer ${active ? color.active : "bg-white border-slate-300 text-slate-700 hover:bg-slate-50 hover:border-slate-400"}`,
+                    children: opt.label
+                  }
+                )
+              ] }, opt.id);
+            }) })
+          ] }, group.key);
+        }) })
+      )
+    }
+  );
+};
+
+// src/components/PlacementBlock/PlacementBlock.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
 import_ag_grid_community.ModuleRegistry.registerModules([import_ag_grid_community.AllCommunityModule]);
 var FETCH_LIMIT = 1e3;
 function normalizeRows(records) {
@@ -8837,7 +8937,7 @@ var ColorDotRenderer = (props) => {
   const { statuses, defaultStatusId } = props;
   const status = statuses.find((c) => c.id === item.statusId) || statuses.find((c) => c.id === defaultStatusId) || statuses[0];
   if (!status) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       type: "button",
@@ -8851,7 +8951,7 @@ var ColorDotRenderer = (props) => {
 };
 var CheckCellRenderer = (props) => {
   if (!props.data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "input",
     {
       type: "checkbox",
@@ -8862,7 +8962,7 @@ var CheckCellRenderer = (props) => {
     }
   ) });
 };
-var CheckHeader = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var CheckHeader = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "input",
   {
     type: "checkbox",
@@ -8875,23 +8975,48 @@ var CheckHeader = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div"
     "aria-label": "\u05D1\u05D7\u05D9\u05E8\u05EA \u05DB\u05DC \u05D4\u05DE\u05D5\u05E2\u05DE\u05D3\u05D9\u05DD"
   }
 ) });
+var RelationFilterHeader = (props) => {
+  const btnRef = (0, import_react20.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center justify-center w-full min-w-0 leading-tight select-none", title: props.displayName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => {
+          var _a;
+          e.stopPropagation();
+          e.preventDefault();
+          const rect = (_a = btnRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          if (rect) props.onOpen(props.colName, rect);
+        },
+        className: `p-0.5 rounded transition-colors cursor-pointer mb-0.5 shrink-0 ${props.active ? "text-blue-600 bg-blue-100 hover:bg-blue-200" : "text-slate-400 hover:text-slate-600 hover:bg-slate-200/60"}`,
+        title: props.active ? "\u05E1\u05D9\u05E0\u05D5\u05DF \u05E4\u05E2\u05D9\u05DC - \u05DC\u05D7\u05E5 \u05DC\u05E9\u05D9\u05E0\u05D5\u05D9" : "\u05E1\u05D9\u05E0\u05D5\u05DF \u05DC\u05E4\u05D9 \u05E2\u05DE\u05D5\u05D3\u05D4",
+        "aria-label": `\u05E1\u05D9\u05E0\u05D5\u05DF \u05DC\u05E4\u05D9 ${props.displayName}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Filter, { className: "w-3 h-3" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate w-full text-center", children: props.displayName })
+  ] });
+};
 var PlacementBlock = (props) => {
   var _a, _b;
   const { executeAction, fetchSourceData, fetchTargetData, updateAssignment, className = "" } = props;
-  const config = (0, import_react19.useMemo)(() => {
+  const config = (0, import_react20.useMemo)(() => {
     var _a2, _b2, _c;
     const raw = (_a2 = props.config) != null ? _a2 : props.settings;
     if (!raw) return void 0;
     return ((_b2 = raw.config) == null ? void 0 : _b2.sourceTableId) || ((_c = raw.config) == null ? void 0 : _c.targetTableId) ? raw.config : raw;
   }, [props.config, props.settings]);
-  const statuses = (0, import_react19.useMemo)(
+  const statuses = (0, import_react20.useMemo)(
     () => {
       var _a2;
       return ((_a2 = config == null ? void 0 : config.statusColors) == null ? void 0 : _a2.length) ? config.statusColors : DEFAULT_PLACEMENT_STATUS_COLORS;
     },
     [config == null ? void 0 : config.statusColors]
   );
-  const defaultStatusId = (0, import_react19.useMemo)(
+  const defaultStatusId = (0, import_react20.useMemo)(
     () => resolveDefaultStatusId(statuses, config == null ? void 0 : config.defaultReturnStatusId),
     [statuses, config == null ? void 0 : config.defaultReturnStatusId]
   );
@@ -8899,27 +9024,31 @@ var PlacementBlock = (props) => {
   const targetTableId = config == null ? void 0 : config.targetTableId;
   const displayField = (config == null ? void 0 : config.sourceDisplayFieldId) || "name";
   const assignmentField = config == null ? void 0 : config.targetAssignmentFieldId;
-  const executeActionRef = (0, import_react19.useRef)(executeAction);
+  const executeActionRef = (0, import_react20.useRef)(executeAction);
   executeActionRef.current = executeAction;
-  const legacyRef = (0, import_react19.useRef)({ fetchSourceData, fetchTargetData, updateAssignment });
+  const legacyRef = (0, import_react20.useRef)({ fetchSourceData, fetchTargetData, updateAssignment });
   legacyRef.current = { fetchSourceData, fetchTargetData, updateAssignment };
-  const [sourceRows, setSourceRows] = (0, import_react19.useState)([]);
-  const [sourceColumns, setSourceColumns] = (0, import_react19.useState)([]);
-  const [targetRows, setTargetRows] = (0, import_react19.useState)([]);
-  const [targetColumns, setTargetColumns] = (0, import_react19.useState)([]);
-  const [targetRelOptions, setTargetRelOptions] = (0, import_react19.useState)({});
-  const [selectedTargetId, setSelectedTargetId] = (0, import_react19.useState)("");
-  const [candidateIds, setCandidateIds] = (0, import_react19.useState)([]);
-  const [checkedIds, setCheckedIds] = (0, import_react19.useState)([]);
-  const [isSaving, setIsSaving] = (0, import_react19.useState)(false);
-  const [sourceSearch, setSourceSearch] = (0, import_react19.useState)("");
-  const [candidateSearch, setCandidateSearch] = (0, import_react19.useState)("");
-  const [statusMap, setStatusMap] = (0, import_react19.useState)({});
-  const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
-  const [loadError, setLoadError] = (0, import_react19.useState)(null);
-  const [saveError, setSaveError] = (0, import_react19.useState)(null);
-  const [targetFilters, setTargetFilters] = (0, import_react19.useState)({});
-  const loadTable = (0, import_react19.useCallback)(async (tableId, kind) => {
+  const [sourceRows, setSourceRows] = (0, import_react20.useState)([]);
+  const [sourceColumns, setSourceColumns] = (0, import_react20.useState)([]);
+  const [sourceRelOptions, setSourceRelOptions] = (0, import_react20.useState)({});
+  const [sourceRelFilters, setSourceRelFilters] = (0, import_react20.useState)({});
+  const [targetRows, setTargetRows] = (0, import_react20.useState)([]);
+  const [targetColumns, setTargetColumns] = (0, import_react20.useState)([]);
+  const [targetRelOptions, setTargetRelOptions] = (0, import_react20.useState)({});
+  const [selectedTargetId, setSelectedTargetId] = (0, import_react20.useState)("");
+  const [candidateIds, setCandidateIds] = (0, import_react20.useState)([]);
+  const [checkedIds, setCheckedIds] = (0, import_react20.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react20.useState)(false);
+  const [sourceSearch, setSourceSearch] = (0, import_react20.useState)("");
+  const [candidateSearch, setCandidateSearch] = (0, import_react20.useState)("");
+  const [statusMap, setStatusMap] = (0, import_react20.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react20.useState)(false);
+  const [loadError, setLoadError] = (0, import_react20.useState)(null);
+  const [saveError, setSaveError] = (0, import_react20.useState)(null);
+  const [colFilters, setColFilters] = (0, import_react20.useState)({ source: {}, cand: {} });
+  const [filterPopover, setFilterPopover] = (0, import_react20.useState)(null);
+  const [targetFilters, setTargetFilters] = (0, import_react20.useState)({});
+  const loadTable = (0, import_react20.useCallback)(async (tableId, kind) => {
     const exec = executeActionRef.current;
     if (exec) {
       const res = await exec("FETCH_TABLE_DATA", { tableId, tableMetaId: tableId, limit: FETCH_LIMIT, skip: 0 });
@@ -8932,7 +9061,7 @@ var PlacementBlock = (props) => {
     }
     throw new Error("executeAction \u05DC\u05D0 \u05D4\u05D5\u05E2\u05D1\u05E8 \u05DC\u05E8\u05DB\u05D9\u05D1 \u05D4\u05E9\u05D9\u05D1\u05D5\u05E5");
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!sourceTableId || !targetTableId) return;
     let cancelled = false;
     (async () => {
@@ -8946,6 +9075,7 @@ var PlacementBlock = (props) => {
         if (cancelled) return;
         setSourceRows(src.rows);
         setSourceColumns(src.columns);
+        setSourceRelOptions(src.relationOptions || {});
         setTargetRows(tgt.rows);
         setTargetColumns(tgt.columns);
         setTargetRelOptions(tgt.relationOptions || {});
@@ -8959,7 +9089,7 @@ var PlacementBlock = (props) => {
       cancelled = true;
     };
   }, [sourceTableId, targetTableId, loadTable]);
-  const displayValue = (0, import_react19.useCallback)((col, val) => {
+  const displayValue = (0, import_react20.useCallback)((col, val) => {
     var _a2, _b2, _c, _d, _e;
     let text2 = cellText(val);
     if (text2 && /^[a-fA-F0-9]{24}$/.test(text2)) {
@@ -8979,7 +9109,50 @@ var PlacementBlock = (props) => {
     }
     return text2;
   }, [targetRelOptions, targetRows, sourceRows]);
-  const filterColumns = (0, import_react19.useMemo)(() => {
+  const relationLabelMaps = (0, import_react20.useMemo)(() => {
+    const maps = {};
+    Object.entries(sourceRelOptions || {}).forEach(([colName, opts]) => {
+      const m = /* @__PURE__ */ new Map();
+      (opts || []).forEach((o) => {
+        var _a2, _b2, _c;
+        const label = cellText((_b2 = (_a2 = o == null ? void 0 : o.label) != null ? _a2 : o == null ? void 0 : o.title) != null ? _b2 : o == null ? void 0 : o.name);
+        if (label) m.set(String((_c = o.id) != null ? _c : o._id), label);
+      });
+      maps[colName] = m;
+    });
+    return maps;
+  }, [sourceRelOptions]);
+  const relationLabelsOf = (0, import_react20.useCallback)((row, colName) => {
+    var _a2;
+    const map = relationLabelMaps[colName];
+    const ids = normalizeRelationValue((_a2 = row.data) == null ? void 0 : _a2[colName]);
+    const labels = map ? ids.map((id) => map.get(String(id))).filter((l) => !!l) : [];
+    if (labels.length) return labels;
+    const txt = cellText(readColumnValue(row.data, colName));
+    return txt && !/^[a-fA-F0-9]{24}$/.test(txt) ? txt.split(", ").filter(Boolean) : [];
+  }, [relationLabelMaps]);
+  const rowPassesColFilters = (0, import_react20.useCallback)((row, filters) => {
+    return Object.entries(filters).every(([colName, f]) => {
+      if (!f) return true;
+      const labels = relationLabelsOf(row, colName);
+      if (Array.isArray(f)) return f.length === 0 || labels.some((l) => f.includes(l));
+      if (f.operator === "notIn") return !labels.some((l) => f.values.includes(l));
+      return true;
+    });
+  }, [relationLabelsOf]);
+  const setColFilter = (0, import_react20.useCallback)((grid, colName, payload) => {
+    setColFilters((prev) => {
+      const next = __spreadValues({}, prev[grid]);
+      if (payload === void 0) delete next[colName];
+      else next[colName] = payload;
+      return __spreadProps(__spreadValues({}, prev), { [grid]: next });
+    });
+  }, []);
+  const openColFilter = (0, import_react20.useCallback)((grid, colName, rect) => {
+    setFilterPopover((cur) => cur && cur.grid === grid && cur.colName === colName ? null : { grid, colName, rect });
+  }, []);
+  const closeColFilter = (0, import_react20.useCallback)(() => setFilterPopover(null), []);
+  const filterColumns = (0, import_react20.useMemo)(() => {
     const definedFilters = (config == null ? void 0 : config.filterFields) || [];
     const legacyFilters = [config == null ? void 0 : config.targetFilterField1Id, config == null ? void 0 : config.targetFilterField2Id].filter(Boolean);
     const fieldsToUse = definedFilters.length > 0 ? definedFilters : legacyFilters;
@@ -9005,7 +9178,7 @@ var PlacementBlock = (props) => {
     return targetColumns.filter((c) => isUserColumn(c) && c.name !== assignmentField && !["id", "_id", "id_", "statusId"].includes(c.name)).slice(0, 3);
   }, [targetColumns, assignmentField, config]);
   const rawSelectorField = (config == null ? void 0 : config.targetSelectorFieldId) || (config == null ? void 0 : config.targetDisplayFieldId) || ((_a = filterColumns[0]) == null ? void 0 : _a.name) || "";
-  const selectorField = (0, import_react19.useMemo)(() => {
+  const selectorField = (0, import_react20.useMemo)(() => {
     const { relationColumn } = parseColumnRef(rawSelectorField);
     if (relationColumn && !targetColumns.some((c) => c.name === rawSelectorField) && targetColumns.some((c) => {
       var _a2;
@@ -9015,7 +9188,7 @@ var PlacementBlock = (props) => {
     }
     return rawSelectorField;
   }, [rawSelectorField, targetColumns]);
-  const filteredTargetRows = (0, import_react19.useMemo)(() => {
+  const filteredTargetRows = (0, import_react20.useMemo)(() => {
     return targetRows.filter((r) => {
       return filterColumns.every((col) => {
         const filterVal = targetFilters[col.name];
@@ -9024,7 +9197,7 @@ var PlacementBlock = (props) => {
       });
     });
   }, [targetRows, targetFilters, filterColumns, displayValue]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (filteredTargetRows.length > 0) {
       if (!selectedTargetId || !filteredTargetRows.some((r) => r.id === selectedTargetId)) {
         setSelectedTargetId(filteredTargetRows[0].id);
@@ -9033,11 +9206,11 @@ var PlacementBlock = (props) => {
       setSelectedTargetId("");
     }
   }, [filteredTargetRows, selectedTargetId]);
-  const assignmentColumn = (0, import_react19.useMemo)(() => targetColumns.find((c) => c.name === assignmentField), [targetColumns, assignmentField]);
+  const assignmentColumn = (0, import_react20.useMemo)(() => targetColumns.find((c) => c.name === assignmentField), [targetColumns, assignmentField]);
   const isRelationField = ((_b = assignmentColumn == null ? void 0 : assignmentColumn.type) == null ? void 0 : _b.toUpperCase()) === "RELATION";
   const assignmentLabel = (assignmentColumn == null ? void 0 : assignmentColumn.label) || (assignmentColumn == null ? void 0 : assignmentColumn.name) || assignmentField || "";
-  const nameOf = (0, import_react19.useCallback)((row) => cellText(readColumnValue(row.data, displayField)) || "\u05DC\u05DC\u05D0 \u05E9\u05DD", [displayField]);
-  const assignedIds = (0, import_react19.useMemo)(() => {
+  const nameOf = (0, import_react20.useCallback)((row) => cellText(readColumnValue(row.data, displayField)) || "\u05DC\u05DC\u05D0 \u05E9\u05DD", [displayField]);
+  const assignedIds = (0, import_react20.useMemo)(() => {
     var _a2;
     const target = targetRows.find((r) => r.id === selectedTargetId);
     if (!target || !assignmentField) return [];
@@ -9051,22 +9224,36 @@ var PlacementBlock = (props) => {
     }).filter((id) => !!id && sourceRows.some((s) => s.id === id));
     return Array.from(new Set(ids));
   }, [selectedTargetId, targetRows, sourceRows, assignmentField, isRelationField, nameOf]);
-  const assignedIdsRef = (0, import_react19.useRef)(assignedIds);
+  const assignedIdsRef = (0, import_react20.useRef)(assignedIds);
   assignedIdsRef.current = assignedIds;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setCandidateIds(assignedIdsRef.current);
     setCheckedIds(assignedIdsRef.current);
   }, [selectedTargetId, sourceRows]);
-  const toGridRow = (0, import_react19.useCallback)((r, checked = false) => __spreadProps(__spreadValues({}, r.data), { id: r.id, __label: nameOf(r), __checked: checked, statusId: statusMap[r.id] || defaultStatusId }), [nameOf, statusMap, defaultStatusId]);
-  const candidateGridData = (0, import_react19.useMemo)(() => {
+  const toGridRow = (0, import_react20.useCallback)((r, checked = false) => __spreadProps(__spreadValues({}, r.data), { id: r.id, __label: nameOf(r), __checked: checked, statusId: statusMap[r.id] || defaultStatusId }), [nameOf, statusMap, defaultStatusId]);
+  const candidateRows = (0, import_react20.useMemo)(() => candidateIds.map((id) => sourceRows.find((r) => r.id === id)).filter((r) => !!r), [candidateIds, sourceRows]);
+  const candidateGridData = (0, import_react20.useMemo)(() => {
     const checked = new Set(checkedIds);
-    return candidateIds.map((id) => sourceRows.find((r) => r.id === id)).filter((r) => !!r).map((r) => toGridRow(r, checked.has(r.id)));
-  }, [candidateIds, checkedIds, sourceRows, toGridRow]);
-  const availableGridData = (0, import_react19.useMemo)(() => {
+    return candidateRows.filter((r) => rowPassesColFilters(r, colFilters.cand)).map((r) => toGridRow(r, checked.has(r.id)));
+  }, [candidateRows, checkedIds, toGridRow, rowPassesColFilters, colFilters.cand]);
+  const availableRows = (0, import_react20.useMemo)(() => {
     const set = new Set(candidateIds);
-    return sourceRows.filter((r) => !set.has(r.id)).map((r) => toGridRow(r));
-  }, [candidateIds, sourceRows, toGridRow]);
-  const persistAssignment = (0, import_react19.useCallback)(async (nextIds) => {
+    return sourceRows.filter((r) => !set.has(r.id));
+  }, [candidateIds, sourceRows]);
+  const relationButtonColumns = (0, import_react20.useMemo)(() => {
+    const wanted = Array.isArray(config == null ? void 0 : config.relationButtonColumns) ? config.relationButtonColumns : [];
+    return wanted.filter((name) => sourceColumns.some((c) => (c == null ? void 0 : c.name) === name && String(c == null ? void 0 : c.type).toUpperCase() === "RELATION"));
+  }, [config, sourceColumns]);
+  const hasRelationButtons = relationButtonColumns.length > 0;
+  const handleRelationFilterChange = (0, import_react20.useCallback)((colName, id) => {
+    setSourceRelFilters((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: id }));
+  }, []);
+  const availableGridData = (0, import_react20.useMemo)(() => {
+    const active = Object.entries(sourceRelFilters).filter(([name, v]) => !!v && relationButtonColumns.includes(name));
+    const byButtons = active.length === 0 ? availableRows : availableRows.filter((r) => active.every(([name, v]) => rowMatchesRelationFilter(r, name, v)));
+    return byButtons.filter((r) => rowPassesColFilters(r, colFilters.source)).map((r) => toGridRow(r));
+  }, [availableRows, sourceRelFilters, relationButtonColumns, toGridRow, rowPassesColFilters, colFilters.source]);
+  const persistAssignment = (0, import_react20.useCallback)(async (nextIds) => {
     const exec = executeActionRef.current;
     if (exec && targetTableId && assignmentField && selectedTargetId) {
       const value = isRelationField ? nextIds : nextIds.map((id) => sourceRows.find((r) => r.id === id)).filter((r) => !!r).map(nameOf).join(", ");
@@ -9078,33 +9265,33 @@ var PlacementBlock = (props) => {
       for (const id of nextIds.filter((i) => !assignedIds.includes(i))) await legacyRef.current.updateAssignment(selectedTargetId, id);
     }
   }, [targetTableId, assignmentField, selectedTargetId, isRelationField, sourceRows, nameOf, assignedIds]);
-  const moveToCandidates = (0, import_react19.useCallback)((id) => {
+  const moveToCandidates = (0, import_react20.useCallback)((id) => {
     setCandidateIds((prev) => prev.includes(id) ? prev : [...prev, id]);
   }, []);
-  const moveToSource = (0, import_react19.useCallback)((id) => {
+  const moveToSource = (0, import_react20.useCallback)((id) => {
     setCandidateIds((prev) => prev.filter((x) => x !== id));
     setCheckedIds((prev) => prev.filter((x) => x !== id));
     setStatusMap((prev) => __spreadProps(__spreadValues({}, prev), { [id]: defaultStatusId }));
   }, [defaultStatusId]);
-  const moveToCandidatesRef = (0, import_react19.useRef)(moveToCandidates);
+  const moveToCandidatesRef = (0, import_react20.useRef)(moveToCandidates);
   moveToCandidatesRef.current = moveToCandidates;
-  const moveToSourceRef = (0, import_react19.useRef)(moveToSource);
+  const moveToSourceRef = (0, import_react20.useRef)(moveToSource);
   moveToSourceRef.current = moveToSource;
-  const toggleChecked = (0, import_react19.useCallback)((id) => {
+  const toggleChecked = (0, import_react20.useCallback)((id) => {
     setCheckedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
   }, []);
   const allChecked = candidateIds.length > 0 && candidateIds.every((id) => checkedIds.includes(id));
   const someChecked = candidateIds.some((id) => checkedIds.includes(id));
-  const toggleAll = (0, import_react19.useCallback)(() => {
+  const toggleAll = (0, import_react20.useCallback)(() => {
     setCheckedIds(allChecked ? [] : [...candidateIds]);
   }, [allChecked, candidateIds]);
-  const returnAll = (0, import_react19.useCallback)(() => {
+  const returnAll = (0, import_react20.useCallback)(() => {
     setCandidateIds([]);
     setCheckedIds([]);
   }, []);
-  const checkedCandidates = (0, import_react19.useMemo)(() => candidateIds.filter((id) => checkedIds.includes(id)), [candidateIds, checkedIds]);
+  const checkedCandidates = (0, import_react20.useMemo)(() => candidateIds.filter((id) => checkedIds.includes(id)), [candidateIds, checkedIds]);
   const isDirty = checkedCandidates.length !== assignedIds.length || checkedCandidates.some((id) => !assignedIds.includes(id));
-  const submitAssignment = (0, import_react19.useCallback)(async () => {
+  const submitAssignment = (0, import_react20.useCallback)(async () => {
     if (!selectedTargetId) {
       alert("\u05D0\u05E0\u05D0 \u05D1\u05D7\u05E8 \u05E7\u05D5\u05D3\u05DD \u05E8\u05E9\u05D5\u05DE\u05EA \u05D9\u05E2\u05D3 \u05DC\u05E4\u05E0\u05D9 \u05D4\u05E9\u05D9\u05D1\u05D5\u05E5");
       return;
@@ -9120,14 +9307,14 @@ var PlacementBlock = (props) => {
       setIsSaving(false);
     }
   }, [selectedTargetId, persistAssignment, checkedCandidates]);
-  const cycleStatus = (0, import_react19.useCallback)((recordId) => {
+  const cycleStatus = (0, import_react20.useCallback)((recordId) => {
     setStatusMap((prev) => {
       const current = prev[recordId] || defaultStatusId;
       const idx = statuses.findIndex((c) => c.id === current);
       return __spreadProps(__spreadValues({}, prev), { [recordId]: statuses[(idx + 1) % statuses.length].id });
     });
   }, [statuses, defaultStatusId]);
-  const cancelAssignment = (0, import_react19.useCallback)(async () => {
+  const cancelAssignment = (0, import_react20.useCallback)(async () => {
     if (!selectedTargetId || assignedIds.length === 0) return;
     if (!window.confirm(`\u05DC\u05D1\u05D8\u05DC \u05D0\u05EA \u05D4\u05E9\u05D9\u05D1\u05D5\u05E5 \u05D5\u05DC\u05DE\u05D7\u05D5\u05E7 \u05D0\u05EA \u05D4\u05E0\u05EA\u05D5\u05DF \u05DE\u05E9\u05D3\u05D4 "${assignmentLabel}"?`)) return;
     const removed = new Set(assignedIds);
@@ -9143,7 +9330,8 @@ var PlacementBlock = (props) => {
       setIsSaving(false);
     }
   }, [selectedTargetId, assignedIds, assignmentLabel, persistAssignment]);
-  const makeColDefs = (0, import_react19.useCallback)((columns, fallbackName, withCheckbox = false) => {
+  const makeColDefs = (0, import_react20.useCallback)((columns, fallbackName, grid, withCheckbox = false) => {
+    const gridFilters = colFilters[grid];
     const defs = [];
     if (withCheckbox) {
       defs.push({
@@ -9173,21 +9361,50 @@ var PlacementBlock = (props) => {
         var _a2;
         return (_a2 = p.data) == null ? void 0 : _a2[displayField];
       }, valueFormatter: (p) => cellText(p.value), getQuickFilterText: (p) => cellText(p.value), rowDrag: true, flex: 1, minWidth: 120 });
-      ordered.forEach((c, i) => defs.push({ colId: c.name, field: c.name, headerName: c.label || c.name, valueGetter: (p) => readColumnValue(p.data, c.name), valueFormatter: (p) => displayValue(c, p.value), getQuickFilterText: (p) => cellText(displayValue(c, p.value)), rowDrag: !displayIsRelated && i === 0, flex: 1, minWidth: 120 }));
+      ordered.forEach((c, i) => {
+        const def = { colId: c.name, field: c.name, headerName: c.label || c.name, valueGetter: (p) => readColumnValue(p.data, c.name), valueFormatter: (p) => displayValue(c, p.value), getQuickFilterText: (p) => cellText(displayValue(c, p.value)), rowDrag: !displayIsRelated && i === 0, flex: 1, minWidth: 120 };
+        if (String(c.type).toUpperCase() === "RELATION") {
+          def.headerComponent = RelationFilterHeader;
+          def.headerComponentParams = { colName: c.name, active: !!gridFilters[c.name], onOpen: (name, rect) => openColFilter(grid, name, rect) };
+        }
+        defs.push(def);
+      });
     } else {
       defs.push({ field: "__label", headerName: fallbackName, rowDrag: true, flex: 1 });
     }
     return defs;
-  }, [cycleStatus, statuses, defaultStatusId, displayField, displayValue, toggleChecked, toggleAll, allChecked, someChecked]);
+  }, [cycleStatus, statuses, defaultStatusId, displayField, displayValue, toggleChecked, toggleAll, allChecked, someChecked, colFilters, openColFilter]);
   const sourceHeader = displayField === "name" ? "\u05E9\u05DD" : columnRefLabel(displayField);
-  const sourceColDefs = (0, import_react19.useMemo)(() => makeColDefs(sourceColumns, sourceHeader), [makeColDefs, sourceColumns, sourceHeader]);
-  const candidateColDefs = (0, import_react19.useMemo)(() => makeColDefs(sourceColumns, sourceHeader, true), [makeColDefs, sourceColumns, sourceHeader]);
-  const getRowId = (0, import_react19.useCallback)((p) => p.data.id, []);
-  const sourceContainerRef = (0, import_react19.useRef)(null);
-  const assignedContainerRef = (0, import_react19.useRef)(null);
-  const [sourceApi, setSourceApi] = (0, import_react19.useState)(null);
-  const [assignedApi, setAssignedApi] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
+  const sourceColDefs = (0, import_react20.useMemo)(() => makeColDefs(sourceColumns, sourceHeader, "source"), [makeColDefs, sourceColumns, sourceHeader]);
+  const candidateColDefs = (0, import_react20.useMemo)(() => makeColDefs(sourceColumns, sourceHeader, "cand", true), [makeColDefs, sourceColumns, sourceHeader]);
+  const defaultColDef = (0, import_react20.useMemo)(() => ({ resizable: true }), []);
+  const scrollableColIds = (defs) => defs.filter((d) => !d.pinned).map((d) => {
+    var _a2;
+    return (_a2 = d.colId) != null ? _a2 : d.field;
+  }).filter(Boolean);
+  const expandColumns = (0, import_react20.useCallback)((api) => {
+    api == null ? void 0 : api.sizeColumnsToFit();
+  }, []);
+  const shrinkColumns = (0, import_react20.useCallback)((api, defs) => {
+    api == null ? void 0 : api.autoSizeColumns(scrollableColIds(defs));
+  }, []);
+  const popoverOptions = (0, import_react20.useMemo)(() => {
+    if (!filterPopover) return [];
+    const rows = filterPopover.grid === "source" ? availableRows : candidateRows;
+    const set = /* @__PURE__ */ new Set();
+    rows.forEach((r) => relationLabelsOf(r, filterPopover.colName).forEach((l) => set.add(l)));
+    return Array.from(set).sort((a, b) => a.localeCompare(b, "he")).map((label) => ({ id: label, label }));
+  }, [filterPopover, availableRows, candidateRows, relationLabelsOf]);
+  const popoverColumn = (0, import_react20.useMemo)(
+    () => filterPopover ? sourceColumns.find((c) => c.name === filterPopover.colName) : void 0,
+    [filterPopover, sourceColumns]
+  );
+  const getRowId = (0, import_react20.useCallback)((p) => p.data.id, []);
+  const sourceContainerRef = (0, import_react20.useRef)(null);
+  const assignedContainerRef = (0, import_react20.useRef)(null);
+  const [sourceApi, setSourceApi] = (0, import_react20.useState)(null);
+  const [assignedApi, setAssignedApi] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
     if (!sourceApi || !assignedApi) return;
     const toAssigned = { getContainer: () => assignedContainerRef.current, onDragStop: (p) => {
       var _a2, _b2;
@@ -9210,61 +9427,61 @@ var PlacementBlock = (props) => {
       }
     };
   }, [sourceApi, assignedApi]);
-  const selectorLabel = (0, import_react19.useMemo)(() => {
+  const selectorLabel = (0, import_react20.useMemo)(() => {
     const col = targetColumns.find((c) => c.name === selectorField || c.id === selectorField);
     return (col == null ? void 0 : col.label) || columnRefLabel(selectorField) || "\u05D1\u05D7\u05D9\u05E8\u05EA \u05E8\u05E9\u05D5\u05DE\u05D4 \u05DC\u05E9\u05D9\u05D1\u05D5\u05E5";
   }, [targetColumns, selectorField]);
-  const assignedText = (0, import_react19.useMemo)(
+  const assignedText = (0, import_react20.useMemo)(
     () => assignedIds.map((id) => sourceRows.find((r) => r.id === id)).filter((r) => !!r).map(nameOf).join(", "),
     [assignedIds, sourceRows, nameOf]
   );
   const activeTarget = targetRows.find((r) => r.id === selectedTargetId);
-  const targetLabel = (0, import_react19.useCallback)((r) => {
+  const targetLabel = (0, import_react20.useCallback)((r) => {
     const col = targetColumns.find((c) => c.name === selectorField || c.id === selectorField);
     return displayValue(col || { name: selectorField }, readColumnValue(r.data, selectorField)) || "\u05DC\u05DC\u05D0 \u05E9\u05DD";
   }, [selectorField, targetColumns, displayValue]);
-  const previewColumns = (0, import_react19.useMemo)(() => targetColumns.filter((c) => isUserColumn(c) && c.name !== assignmentField && !["id", "_id", "id_", "statusId"].includes(c.name)), [targetColumns, assignmentField]);
+  const previewColumns = (0, import_react20.useMemo)(() => targetColumns.filter((c) => isUserColumn(c) && c.name !== assignmentField && !["id", "_id", "id_", "statusId"].includes(c.name)), [targetColumns, assignmentField]);
   if (!config || !sourceTableId || !targetTableId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-4 text-xs text-slate-500 border border-dashed border-slate-300 rounded-xl", dir: "rtl", children: "\u05E8\u05DB\u05D9\u05D1 \u05D4\u05E9\u05D9\u05D1\u05D5\u05E5 \u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8 (\u05D7\u05E1\u05E8\u05D5\u05EA \u05D8\u05D1\u05DC\u05EA \u05DE\u05E7\u05D5\u05E8 / \u05D8\u05D1\u05DC\u05EA \u05D9\u05E2\u05D3)." });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-4 text-xs text-slate-500 border border-dashed border-slate-300 rounded-xl", dir: "rtl", children: "\u05E8\u05DB\u05D9\u05D1 \u05D4\u05E9\u05D9\u05D1\u05D5\u05E5 \u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8 (\u05D7\u05E1\u05E8\u05D5\u05EA \u05D8\u05D1\u05DC\u05EA \u05DE\u05E7\u05D5\u05E8 / \u05D8\u05D1\u05DC\u05EA \u05D9\u05E2\u05D3)." });
   }
   const selectClass = "w-full p-2 border border-slate-300 rounded-lg text-xs font-medium text-slate-700 bg-slate-50 outline-none focus:border-brand";
   const labelClass = "block text-[11px] font-semibold text-slate-500 mb-1";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `w-full flex flex-col gap-4 p-4 bg-slate-50 min-h-[850px] rounded-xl border border-slate-200 ${className}`, dir: "rtl", children: [
-    (loadError || saveError) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-3 text-xs rounded-lg bg-rose-50 border border-rose-200 text-rose-700", children: loadError || saveError }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col lg:flex-row gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-full lg:w-1/3 bg-teal-50/40 p-4 rounded-xl border border-teal-100 shadow-xs flex flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h4", { className: "font-bold text-teal-900 border-b border-teal-200 pb-2 mb-3 text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "\u{1F4CC}" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `w-full flex flex-col gap-4 p-4 bg-slate-50 min-h-[850px] rounded-xl border border-slate-200 ${className}`, dir: "rtl", children: [
+    (loadError || saveError) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-3 text-xs rounded-lg bg-rose-50 border border-rose-200 text-rose-700", children: loadError || saveError }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col lg:flex-row gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-full lg:w-1/2 bg-teal-50/40 p-4 rounded-xl border border-teal-100 shadow-xs flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("h4", { className: "font-bold text-teal-900 border-b border-teal-200 pb-2 mb-3 text-base flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u{1F4CC}" }),
           " \u05E4\u05E8\u05D8\u05D9 \u05D4\u05D9\u05E2\u05D3 \u05DC\u05E9\u05D9\u05D1\u05D5\u05E5"
         ] }),
-        activeTarget ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2 text-xs text-slate-700 overflow-y-auto pr-1 max-h-32", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "font-bold text-slate-900 text-sm mb-1", children: targetLabel(activeTarget) }),
+        activeTarget ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 content-start text-base text-slate-700 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "col-span-full font-bold text-slate-900 text-lg mb-1", children: targetLabel(activeTarget) }),
           previewColumns.map((col) => ({ col, text: displayValue(col, readColumnValue(activeTarget.data, col.name)) })).filter(({ col, text: text2 }) => {
             var _a2;
             return text2 && (col.type === "RELATION" || typeof ((_a2 = activeTarget.data) == null ? void 0 : _a2[col.name]) !== "object");
-          }).map(({ col, text: text2 }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-2 items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "font-semibold shrink-0", children: [
+          }).map(({ col, text: text2 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `flex gap-2 items-start ${(col.label || col.name) === "\u05E4\u05E8\u05D8\u05D9\u05DD \u05E0\u05D5\u05E1\u05E4\u05D9\u05DD" ? "sm:col-span-2" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "font-semibold shrink-0", children: [
               col.label || col.name,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "break-words line-clamp-2", children: text2 })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "break-words", children: text2 })
           ] }, col.name)),
-          assignmentField && assignedText && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-2 items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "font-semibold shrink-0", children: [
+          assignmentField && assignedText && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-2 items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "font-semibold shrink-0", children: [
               assignmentLabel,
               ":"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "break-words line-clamp-2", title: assignedText, children: assignedText })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "break-words", title: assignedText, children: assignedText })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mt-3 pt-3 border-t border-teal-200/60 text-teal-800 font-bold", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "col-span-full self-end mt-1 pt-1.5 border-t border-teal-200/60 text-teal-800 font-bold text-xs leading-none whitespace-nowrap overflow-hidden text-ellipsis", children: [
             "\u05DE\u05E9\u05D5\u05D1\u05E6\u05D9\u05DD \u05DB\u05E8\u05D2\u05E2: ",
             assignedIds.length
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-slate-500 text-xs text-center py-6", children: isLoading ? "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." : "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05E8\u05E9\u05D5\u05DE\u05EA \u05D9\u05E2\u05D3." })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-slate-500 text-xs text-center py-6", children: isLoading ? "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." : "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05E8\u05E9\u05D5\u05DE\u05EA \u05D9\u05E2\u05D3." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full lg:w-2/3 bg-white p-4 rounded-xl border border-slate-200 shadow-xs flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { className: "font-bold text-slate-800 mb-3 text-sm", children: "\u05E1\u05D9\u05E0\u05D5\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D4\u05D9\u05E2\u05D3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col sm:flex-row gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full lg:w-1/2 bg-white p-4 rounded-xl border border-slate-200 shadow-xs flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h4", { className: "font-bold text-slate-800 mb-3 text-sm", children: "\u05E1\u05D9\u05E0\u05D5\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D4\u05D9\u05E2\u05D3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col sm:flex-row gap-3", children: [
           filterColumns.map((col, index) => {
             const previousColumns = filterColumns.slice(0, index);
             const validRowsForThisFilter = targetRows.filter((r) => {
@@ -9277,9 +9494,9 @@ var PlacementBlock = (props) => {
             const uniqueValues = Array.from(new Set(
               validRowsForThisFilter.map((r) => displayValue(col, readColumnValue(r.data, col.name)))
             )).filter(Boolean).sort((a, b) => a.localeCompare(b, "he"));
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 basis-0 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: labelClass, children: col.label || columnRefLabel(col.name) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 basis-0 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: labelClass, children: col.label || columnRefLabel(col.name) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "select",
                 {
                   className: selectClass,
@@ -9295,64 +9512,93 @@ var PlacementBlock = (props) => {
                     });
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
-                    uniqueValues.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: v, children: v }, v))
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
+                    uniqueValues.map((v) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: v, children: v }, v))
                   ]
                 }
               )
             ] }, col.name);
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 basis-0 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: labelClass, children: selectorLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { className: selectClass, value: selectedTargetId, onChange: (e) => setSelectedTargetId(e.target.value), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("option", { value: "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 basis-0 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: labelClass, children: selectorLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("select", { className: selectClass, value: selectedTargetId, onChange: (e) => setSelectedTargetId(e.target.value), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("option", { value: "", children: [
                 "-- \u05D1\u05D7\u05E8 \u05DE\u05EA\u05D5\u05DA ",
                 filteredTargetRows.length,
                 " \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA --"
               ] }),
-              filteredTargetRows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: r.id, children: targetLabel(r) }, r.id))
+              filteredTargetRows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: r.id, children: targetLabel(r) }, r.id))
             ] })
           ] })
-        ] })
+        ] }),
+        hasRelationButtons && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          PlacementRelationButtons,
+          {
+            className: "mt-4 pb-24",
+            columnNames: relationButtonColumns,
+            rows: availableRows,
+            filters: sourceRelFilters,
+            onFilterChange: handleRelationFilterChange,
+            relationOptions: sourceRelOptions
+          }
+        )
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col lg:flex-row w-full gap-4 h-[550px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-full lg:w-1/2 flex flex-col border border-slate-200 rounded-xl shadow-xs bg-white overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "bg-slate-100 p-3 border-b border-slate-200 flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-between items-center font-bold text-slate-800 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col lg:flex-row w-full gap-4 h-[550px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `w-full ${hasRelationButtons ? "lg:flex-1 lg:min-w-0" : "lg:w-1/2"} flex flex-col border border-slate-200 rounded-xl shadow-xs bg-white overflow-hidden`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "bg-slate-100 p-3 border-b border-slate-200 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-between items-center font-bold text-slate-800 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
               "\u05E8\u05E9\u05D9\u05DE\u05EA \u05DE\u05E7\u05D5\u05E8 (",
               availableGridData.length,
               ")"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[11px] font-normal text-slate-500 bg-white px-2 py-0.5 rounded-full shadow-sm border border-slate-200", children: "\u05D2\u05E8\u05D5\u05E8 \u05E9\u05DE\u05D0\u05DC\u05D4 \u05DC\u05E9\u05D9\u05D1\u05D5\u05E5 \u2190" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: () => shrinkColumns(sourceApi, sourceColDefs), title: "\u05E6\u05DE\u05E6\u05DD \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05DC\u05E4\u05D9 \u05D4\u05EA\u05D5\u05DB\u05DF", className: "px-2 py-0.5 rounded-md text-[11px] font-medium bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 cursor-pointer", children: "\u2192\u2190 \u05E6\u05DE\u05E6\u05DD" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: () => expandColumns(sourceApi), title: "\u05D4\u05E8\u05D7\u05D1 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05DC\u05E8\u05D5\u05D7\u05D1 \u05D4\u05D8\u05D1\u05DC\u05D4", className: "px-2 py-0.5 rounded-md text-[11px] font-medium bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 cursor-pointer", children: "\u2190\u2192 \u05D4\u05E8\u05D7\u05D1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-normal text-slate-500 bg-white px-2 py-0.5 rounded-full shadow-sm border border-slate-200", children: "\u05D2\u05E8\u05D5\u05E8 \u05E9\u05DE\u05D0\u05DC\u05D4 \u05DC\u05E9\u05D9\u05D1\u05D5\u05E5 \u2190" })
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "search", value: sourceSearch, onChange: (e) => setSourceSearch(e.target.value), placeholder: "\u05E1\u05D9\u05E0\u05D5\u05DF...", className: "w-full p-2 border border-slate-300 rounded-lg text-xs bg-white outline-none focus:border-brand" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "search", value: sourceSearch, onChange: (e) => setSourceSearch(e.target.value), placeholder: "\u05E1\u05D9\u05E0\u05D5\u05DF...", className: "w-full p-2 border border-slate-300 rounded-lg text-xs bg-white outline-none focus:border-brand" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: sourceContainerRef, className: "ag-theme-quartz flex-1 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ag_grid_react.AgGridReact, { rowData: availableGridData, columnDefs: sourceColDefs, getRowId, enableRtl: true, rowDragManaged: false, quickFilterText: sourceSearch, onGridReady: (e) => setSourceApi(e.api), loading: isLoading }) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: sourceContainerRef, className: "ag-theme-quartz flex-1 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ag_grid_react.AgGridReact, { rowData: availableGridData, columnDefs: sourceColDefs, defaultColDef, headerHeight: 56, getRowId, enableRtl: true, rowDragManaged: false, quickFilterText: sourceSearch, onGridReady: (e) => setSourceApi(e.api), loading: isLoading }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-full lg:w-1/2 flex flex-col border border-blue-200 rounded-xl shadow-xs bg-white overflow-hidden ring-1 ring-blue-100", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "bg-blue-50/80 p-3 border-b border-blue-100 flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-wrap justify-between items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 font-bold text-blue-900 text-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `w-full ${hasRelationButtons ? "lg:flex-1 lg:min-w-0" : "lg:w-1/2"} flex flex-col border border-blue-200 rounded-xl shadow-xs bg-white overflow-hidden ring-1 ring-blue-100`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "bg-blue-50/80 p-3 border-b border-blue-100 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap justify-between items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 font-bold text-blue-900 text-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
                 "\u05DE\u05D5\u05E2\u05DE\u05D3\u05D9\u05DD \u05DC\u05E9\u05D9\u05D1\u05D5\u05E5 (",
                 candidateGridData.length,
                 ")"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[11px] font-normal text-blue-700 bg-white px-2 py-0.5 rounded-full shadow-sm border border-blue-100", children: "\u2192 \u05D2\u05E8\u05D5\u05E8 \u05D9\u05DE\u05D9\u05E0\u05D4 \u05DC\u05D4\u05D7\u05D6\u05E8\u05D4" })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-normal text-blue-700 bg-white px-2 py-0.5 rounded-full shadow-sm border border-blue-100", children: "\u2192 \u05D2\u05E8\u05D5\u05E8 \u05D9\u05DE\u05D9\u05E0\u05D4 \u05DC\u05D4\u05D7\u05D6\u05E8\u05D4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: () => shrinkColumns(assignedApi, candidateColDefs), title: "\u05E6\u05DE\u05E6\u05DD \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05DC\u05E4\u05D9 \u05D4\u05EA\u05D5\u05DB\u05DF", className: "px-2 py-0.5 rounded-md text-[11px] font-medium bg-white border border-blue-100 text-slate-600 hover:bg-blue-50 cursor-pointer", children: "\u2192\u2190 \u05E6\u05DE\u05E6\u05DD" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: () => expandColumns(assignedApi), title: "\u05D4\u05E8\u05D7\u05D1 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05DC\u05E8\u05D5\u05D7\u05D1 \u05D4\u05D8\u05D1\u05DC\u05D4", className: "px-2 py-0.5 rounded-md text-[11px] font-medium bg-white border border-blue-100 text-slate-600 hover:bg-blue-50 cursor-pointer", children: "\u2190\u2192 \u05D4\u05E8\u05D7\u05D1" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", onClick: returnAll, disabled: candidateIds.length === 0, className: "px-3 py-1.5 rounded-lg text-xs font-bold bg-amber-400 hover:bg-amber-500 text-slate-900 disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: "\u21BA \u05D4\u05D7\u05D6\u05E8 \u05D4\u05DB\u05DC" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", onClick: submitAssignment, disabled: !selectedTargetId || !isDirty || isSaving, className: "px-4 py-1.5 rounded-lg text-xs font-bold bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: isSaving ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05D1\u05E5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", onClick: cancelAssignment, disabled: !selectedTargetId || assignedIds.length === 0 || isSaving, className: "px-3 py-1.5 rounded-lg text-xs font-bold bg-white hover:bg-rose-50 text-rose-600 border border-rose-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: "\u05D1\u05D9\u05D8\u05D5\u05DC \u05E9\u05D9\u05D1\u05D5\u05E5" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: returnAll, disabled: candidateIds.length === 0, className: "px-3 py-1.5 rounded-lg text-xs font-bold bg-amber-400 hover:bg-amber-500 text-slate-900 disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: "\u21BA \u05D4\u05D7\u05D6\u05E8 \u05D4\u05DB\u05DC" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: submitAssignment, disabled: !selectedTargetId || !isDirty || isSaving, className: "px-4 py-1.5 rounded-lg text-xs font-bold bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: isSaving ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05D1\u05E5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: cancelAssignment, disabled: !selectedTargetId || assignedIds.length === 0 || isSaving, className: "px-3 py-1.5 rounded-lg text-xs font-bold bg-white hover:bg-rose-50 text-rose-600 border border-rose-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors", children: "\u05D1\u05D9\u05D8\u05D5\u05DC \u05E9\u05D9\u05D1\u05D5\u05E5" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "search", value: candidateSearch, onChange: (e) => setCandidateSearch(e.target.value), placeholder: "\u05E1\u05D9\u05E0\u05D5\u05DF...", className: "w-full p-2 border border-slate-300 rounded-lg text-xs bg-white outline-none focus:border-brand" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "search", value: candidateSearch, onChange: (e) => setCandidateSearch(e.target.value), placeholder: "\u05E1\u05D9\u05E0\u05D5\u05DF...", className: "w-full p-2 border border-slate-300 rounded-lg text-xs bg-white outline-none focus:border-brand" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: assignedContainerRef, className: "ag-theme-quartz flex-1 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ag_grid_react.AgGridReact, { rowData: candidateGridData, columnDefs: candidateColDefs, getRowId, enableRtl: true, rowDragManaged: false, quickFilterText: candidateSearch, onGridReady: (e) => setAssignedApi(e.api), loading: isLoading }) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: assignedContainerRef, className: "ag-theme-quartz flex-1 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ag_grid_react.AgGridReact, { rowData: candidateGridData, columnDefs: candidateColDefs, defaultColDef, headerHeight: 56, getRowId, enableRtl: true, rowDragManaged: false, quickFilterText: candidateSearch, onGridReady: (e) => setAssignedApi(e.api), loading: isLoading }) })
       ] })
-    ] })
+    ] }),
+    filterPopover && popoverColumn && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      RelationFilterPopover,
+      {
+        isOpen: true,
+        onClose: closeColFilter,
+        column: popoverColumn,
+        triggerRect: filterPopover.rect,
+        options: popoverOptions,
+        filterValue: colFilters[filterPopover.grid][filterPopover.colName],
+        onSelectionChange: (payload) => setColFilter(filterPopover.grid, filterPopover.colName, payload)
+      }
+    )
   ] });
 };
 
@@ -9361,8 +9607,8 @@ var import_react26 = __toESM(require("react"));
 var import_lucide_react17 = require("lucide-react");
 
 // src/components/WhatsAppComponent/CreateTemplateModal.tsx
-var import_react20 = require("react");
-var import_lucide_react10 = require("lucide-react");
+var import_react21 = require("react");
+var import_lucide_react11 = require("lucide-react");
 var import_emoji_picker_react = __toESM(require("emoji-picker-react"));
 
 // src/components/WhatsAppComponent/utils/templateModalHelpers.ts
@@ -9481,7 +9727,7 @@ function readFileAsBase64(file) {
 }
 
 // src/components/WhatsAppComponent/CreateTemplateModal.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CreateTemplateModal({
   isOpen,
   onClose,
@@ -9491,26 +9737,26 @@ function CreateTemplateModal({
   executeAction,
   orgId
 }) {
-  const [templateName, setTemplateName] = (0, import_react20.useState)("");
-  const [language, setLanguage] = (0, import_react20.useState)("he");
-  const [category, setCategory] = (0, import_react20.useState)("MARKETING");
-  const [bodyText, setBodyText] = (0, import_react20.useState)("");
-  const [variableSamples, setVariableSamples] = (0, import_react20.useState)({});
-  const [hasFileHeader, setHasFileHeader] = (0, import_react20.useState)(false);
-  const [selectedFile, setSelectedFile] = (0, import_react20.useState)(null);
-  const [fileBase64, setFileBase64] = (0, import_react20.useState)("");
-  const [buttons, setButtons] = (0, import_react20.useState)([]);
-  const [isAddButtonOpen, setIsAddButtonOpen] = (0, import_react20.useState)(false);
-  const addButtonDropdownRef = (0, import_react20.useRef)(null);
-  const [isSubmitting, setIsSubmitting] = (0, import_react20.useState)(false);
-  const [submittingStep, setSubmittingStep] = (0, import_react20.useState)("");
-  const [submitError, setSubmitError] = (0, import_react20.useState)(null);
-  const [fileError, setFileError] = (0, import_react20.useState)(null);
-  const textareaRef = (0, import_react20.useRef)(null);
-  const fileInputRef = (0, import_react20.useRef)(null);
-  const emojiPickerRef = (0, import_react20.useRef)(null);
-  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [templateName, setTemplateName] = (0, import_react21.useState)("");
+  const [language, setLanguage] = (0, import_react21.useState)("he");
+  const [category, setCategory] = (0, import_react21.useState)("MARKETING");
+  const [bodyText, setBodyText] = (0, import_react21.useState)("");
+  const [variableSamples, setVariableSamples] = (0, import_react21.useState)({});
+  const [hasFileHeader, setHasFileHeader] = (0, import_react21.useState)(false);
+  const [selectedFile, setSelectedFile] = (0, import_react21.useState)(null);
+  const [fileBase64, setFileBase64] = (0, import_react21.useState)("");
+  const [buttons, setButtons] = (0, import_react21.useState)([]);
+  const [isAddButtonOpen, setIsAddButtonOpen] = (0, import_react21.useState)(false);
+  const addButtonDropdownRef = (0, import_react21.useRef)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react21.useState)(false);
+  const [submittingStep, setSubmittingStep] = (0, import_react21.useState)("");
+  const [submitError, setSubmitError] = (0, import_react21.useState)(null);
+  const [fileError, setFileError] = (0, import_react21.useState)(null);
+  const textareaRef = (0, import_react21.useRef)(null);
+  const fileInputRef = (0, import_react21.useRef)(null);
+  const emojiPickerRef = (0, import_react21.useRef)(null);
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     function handleClickOutside(event) {
       if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
         setIsEmojiPickerOpen(false);
@@ -9534,7 +9780,7 @@ function CreateTemplateModal({
       document.removeEventListener("keydown", handleKeyDown2);
     };
   }, [isEmojiPickerOpen, isAddButtonOpen]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (isOpen) {
       setTemplateName("");
       setLanguage("he");
@@ -9553,10 +9799,10 @@ function CreateTemplateModal({
       setIsEmojiPickerOpen(false);
     }
   }, [isOpen]);
-  const uniqueVariables = (0, import_react20.useMemo)(() => {
+  const uniqueVariables = (0, import_react21.useMemo)(() => {
     return extractUniqueVariableIndices(bodyText);
   }, [bodyText]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setVariableSamples((prev) => {
       const next = {};
       uniqueVariables.forEach((idx) => {
@@ -9567,7 +9813,7 @@ function CreateTemplateModal({
   }, [uniqueVariables]);
   const isNameEmpty = templateName.trim().length === 0;
   const isNamePatternValid = isValidTemplateName(templateName);
-  const isNameDuplicate = (0, import_react20.useMemo)(() => {
+  const isNameDuplicate = (0, import_react21.useMemo)(() => {
     const trimmedName = templateName.trim().toLowerCase();
     if (!trimmedName) return false;
     if (existingTemplates && existingTemplates.length > 0) {
@@ -9577,9 +9823,9 @@ function CreateTemplateModal({
     }
     return isDuplicateTemplateName(trimmedName, existingTemplateNames, language);
   }, [templateName, language, existingTemplates, existingTemplateNames]);
-  const ratioInfo = (0, import_react20.useMemo)(() => validateWordToVariableRatio(bodyText), [bodyText]);
-  const seqInfo = (0, import_react20.useMemo)(() => validateSequentialVariables(bodyText), [bodyText]);
-  const validationResult = (0, import_react20.useMemo)(() => {
+  const ratioInfo = (0, import_react21.useMemo)(() => validateWordToVariableRatio(bodyText), [bodyText]);
+  const seqInfo = (0, import_react21.useMemo)(() => validateSequentialVariables(bodyText), [bodyText]);
+  const validationResult = (0, import_react21.useMemo)(() => {
     return validateWhatsAppTemplate({
       name: templateName,
       language,
@@ -9833,12 +10079,12 @@ function CreateTemplateModal({
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: "fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 overflow-y-auto animate-in fade-in duration-200",
       dir: "rtl",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           className: "bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-2xl max-h-[92vh] flex flex-col overflow-hidden animate-in zoom-in-95 duration-150",
@@ -9846,43 +10092,43 @@ function CreateTemplateModal({
           "aria-modal": "true",
           "aria-labelledby": "modal-title",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/70", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Plus, { className: "w-4 h-4" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { id: "modal-title", className: "text-sm font-bold text-slate-900", children: "\u05D9\u05E6\u05D9\u05E8\u05EA \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs text-slate-500", children: "\u05D4\u05D2\u05D3\u05E8\u05EA \u05EA\u05D5\u05DB\u05DF \u05D4\u05D5\u05D3\u05E2\u05D4 \u05D5\u05DE\u05E9\u05EA\u05E0\u05D9\u05DD \u05DC\u05D0\u05D9\u05E9\u05D5\u05E8 Meta Cloud API" })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/70", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Plus, { className: "w-4 h-4" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { id: "modal-title", className: "text-sm font-bold text-slate-900", children: "\u05D9\u05E6\u05D9\u05E8\u05EA \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-slate-500", children: "\u05D4\u05D2\u05D3\u05E8\u05EA \u05EA\u05D5\u05DB\u05DF \u05D4\u05D5\u05D3\u05E2\u05D4 \u05D5\u05DE\u05E9\u05EA\u05E0\u05D9\u05DD \u05DC\u05D0\u05D9\u05E9\u05D5\u05E8 Meta Cloud API" })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: onClose,
                   className: "p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-200/60 rounded-lg transition-colors cursor-pointer",
                   "aria-label": "\u05E1\u05D2\u05D5\u05E8",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.X, { className: "w-5 h-5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.X, { className: "w-5 h-5" })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col overflow-hidden flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-6 overflow-y-auto space-y-5 flex-1", children: [
-                submitError && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-800 flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.AlertCircle, { className: "w-4 h-4 text-rose-600 shrink-0" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: submitError })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col overflow-hidden flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-6 overflow-y-auto space-y-5 flex-1", children: [
+                submitError && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-3 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-800 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.AlertCircle, { className: "w-4 h-4 text-rose-600 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: submitError })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-xs font-bold text-slate-800", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "block text-xs font-bold text-slate-800", children: [
                       "\u05E9\u05DD \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4 ",
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                     ] }),
-                    templateName && isNamePatternValid && !isNameDuplicate && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[11px] text-emerald-600 font-semibold flex items-center gap-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.CheckCircle2, { className: "w-3.5 h-3.5" }),
+                    templateName && isNamePatternValid && !isNameDuplicate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[11px] text-emerald-600 font-semibold flex items-center gap-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CheckCircle2, { className: "w-3.5 h-3.5" }),
                       " \u05E9\u05DD \u05EA\u05E7\u05D9\u05DF"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     "input",
                     {
                       type: "text",
@@ -9894,47 +10140,47 @@ function CreateTemplateModal({
                       required: true
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400 mt-1", children: "\u05D0\u05D5\u05EA\u05D9\u05D5\u05EA \u05E7\u05D8\u05E0\u05D5\u05EA \u05D1\u05D0\u05E0\u05D2\u05DC\u05D9\u05EA, \u05DE\u05E1\u05E4\u05E8\u05D9\u05DD \u05D5\u05E7\u05D5\u05D5\u05D9\u05DD \u05EA\u05D7\u05EA\u05D5\u05E0\u05D9\u05DD \u05D1\u05DC\u05D1\u05D3." }),
-                  !isNameEmpty && isNameDuplicate && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-[11px] text-rose-600 font-semibold flex items-center gap-1 mt-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.AlertCircle, { className: "w-3.5 h-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400 mt-1", children: "\u05D0\u05D5\u05EA\u05D9\u05D5\u05EA \u05E7\u05D8\u05E0\u05D5\u05EA \u05D1\u05D0\u05E0\u05D2\u05DC\u05D9\u05EA, \u05DE\u05E1\u05E4\u05E8\u05D9\u05DD \u05D5\u05E7\u05D5\u05D5\u05D9\u05DD \u05EA\u05D7\u05EA\u05D5\u05E0\u05D9\u05DD \u05D1\u05DC\u05D1\u05D3." }),
+                  !isNameEmpty && isNameDuplicate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[11px] text-rose-600 font-semibold flex items-center gap-1 mt-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.AlertCircle, { className: "w-3.5 h-3.5 shrink-0" }),
                     "\u05E9\u05DD \u05D4\u05EA\u05D1\u05E0\u05D9\u05EA \u05DB\u05D1\u05E8 \u05E7\u05D9\u05D9\u05DD \u05D1\u05D7\u05E9\u05D1\u05D5\u05DF \u05E2\u05D1\u05D5\u05E8 \u05E9\u05E4\u05D4 \u05D6\u05D5 (",
                     language,
                     "). \u05D0\u05E0\u05D0 \u05D1\u05D7\u05E8 \u05E9\u05DD \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 \u05D0\u05D5 \u05E9\u05E4\u05D4 \u05D0\u05D7\u05E8\u05EA."
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-xs font-semibold text-slate-700", children: "\u05E9\u05E4\u05D4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "block text-xs font-semibold text-slate-700", children: "\u05E9\u05E4\u05D4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "select",
                       {
                         value: language,
                         onChange: (e) => setLanguage(e.target.value),
                         className: "w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl text-slate-800 outline-hidden",
-                        children: LANGUAGE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                        children: LANGUAGE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-xs font-semibold text-slate-700", children: "\u05E7\u05D8\u05D2\u05D5\u05E8\u05D9\u05D4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "block text-xs font-semibold text-slate-700", children: "\u05E7\u05D8\u05D2\u05D5\u05E8\u05D9\u05D4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "select",
                       {
                         value: category,
                         onChange: (e) => setCategory(e.target.value),
                         className: "w-full px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl text-slate-800 outline-hidden",
-                        children: CATEGORY_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                        children: CATEGORY_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-xs font-bold text-slate-800", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "block text-xs font-bold text-slate-800", children: [
                     "\u05EA\u05D5\u05DB\u05DF \u05D2\u05D5\u05E3 \u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 ",
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "border border-slate-200 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500 rounded-xl overflow-visible bg-white transition-all shadow-xs relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border border-slate-200 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500 rounded-xl overflow-visible bg-white transition-all shadow-xs relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "textarea",
                       {
                         ref: textareaRef,
@@ -9949,14 +10195,14 @@ function CreateTemplateModal({
                         required: true
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       "div",
                       {
                         className: "bg-slate-50/90 border-t border-slate-100 px-3 py-1.5 flex items-center justify-between gap-2 select-none relative",
                         dir: language === "en_US" ? "ltr" : "rtl",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -9964,10 +10210,10 @@ function CreateTemplateModal({
                                 onClick: () => handleApplyFormatting("*"),
                                 title: "\u05DE\u05D5\u05D3\u05D2\u05E9 (Bold) *\u05D8\u05E7\u05E1\u05D8*",
                                 className: "w-7 h-7 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-200/70 active:bg-slate-300/80 flex items-center justify-center font-bold text-xs transition-colors cursor-pointer",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Bold, { className: "w-3.5 h-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Bold, { className: "w-3.5 h-3.5" })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -9975,10 +10221,10 @@ function CreateTemplateModal({
                                 onClick: () => handleApplyFormatting("_"),
                                 title: "\u05E0\u05D8\u05D5\u05D9 (Italic) _\u05D8\u05E7\u05E1\u05D8_",
                                 className: "w-7 h-7 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-200/70 active:bg-slate-300/80 flex items-center justify-center italic text-xs transition-colors cursor-pointer",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Italic, { className: "w-3.5 h-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Italic, { className: "w-3.5 h-3.5" })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -9986,12 +10232,12 @@ function CreateTemplateModal({
                                 onClick: () => handleApplyFormatting("~"),
                                 title: "\u05E7\u05D5 \u05D7\u05D5\u05E6\u05D4 (Strikethrough) ~\u05D8\u05E7\u05E1\u05D8~",
                                 className: "w-7 h-7 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-200/70 active:bg-slate-300/80 flex items-center justify-center text-xs transition-colors cursor-pointer",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Strikethrough, { className: "w-3.5 h-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Strikethrough, { className: "w-3.5 h-3.5" })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative inline-block", ref: emojiPickerRef, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative inline-block", ref: emojiPickerRef, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -9999,16 +10245,16 @@ function CreateTemplateModal({
                                   onClick: () => setIsEmojiPickerOpen(!isEmojiPickerOpen),
                                   title: "\u05D4\u05D5\u05E1\u05E3 \u05D0\u05D9\u05DE\u05D5\u05D2'\u05D9 (Emoji)",
                                   className: `w-7 h-7 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${isEmojiPickerOpen ? "bg-emerald-100 text-emerald-700" : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/70 active:bg-slate-300/80"}`,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Smile, { className: "w-4 h-4" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Smile, { className: "w-4 h-4" })
                                 }
                               ),
-                              isEmojiPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              isEmojiPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "div",
                                 {
                                   className: `absolute bottom-full mb-2 ${language === "en_US" ? "left-0" : "right-0"} z-50 shadow-2xl rounded-2xl overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95 duration-100`,
                                   dir: "ltr",
                                   onMouseDown: (e) => e.stopPropagation(),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                     import_emoji_picker_react.default,
                                     {
                                       onEmojiClick: (emojiData) => {
@@ -10025,8 +10271,8 @@ function CreateTemplateModal({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-4 w-px bg-slate-200 mx-1" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                               "button",
                               {
                                 type: "button",
@@ -10036,28 +10282,28 @@ function CreateTemplateModal({
                                 "aria-label": language === "en_US" ? "Add variable" : "\u05DE\u05E9\u05EA\u05E0\u05D4",
                                 className: "h-7 px-2 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-200/70 active:bg-slate-300/80 flex items-center gap-1 text-xs font-medium transition-colors cursor-pointer",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Plus, { className: "w-3.5 h-3.5" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: language === "en_US" ? "Add variable" : "\u05DE\u05E9\u05EA\u05E0\u05D4" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Plus, { className: "w-3.5 h-3.5" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: language === "en_US" ? "Add variable" : "\u05DE\u05E9\u05EA\u05E0\u05D4" })
                                 ]
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1 font-mono text-[11px]",
                               dir: "ltr",
                               title: "\u05DE\u05D2\u05D1\u05DC\u05EA \u05EA\u05D5\u05D5\u05D9\u05DD (1024 \u05EA\u05D5\u05D5\u05D9\u05DD \u05DC\u05DB\u05DC \u05D4\u05D9\u05D5\u05EA\u05E8)",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                   "span",
                                   {
                                     className: `font-semibold transition-colors ${bodyText.length >= 1024 ? "text-rose-600" : bodyText.length >= 950 ? "text-amber-600" : "text-slate-500"}`,
                                     children: bodyText.length
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-slate-300", children: "/" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-slate-400", children: "1024" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-slate-300", children: "/" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-slate-400", children: "1024" })
                               ]
                             }
                           )
@@ -10065,30 +10311,30 @@ function CreateTemplateModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-wrap items-center justify-between text-[11px] text-slate-400 px-1 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-wrap items-center justify-between text-[11px] text-slate-400 px-1 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
                       ratioInfo.staticWordsCount,
                       " \u05DE\u05D9\u05DC\u05D9\u05DD"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
                       ratioInfo.variableCount,
                       " \u05DE\u05E9\u05EA\u05E0\u05D9\u05DD"
                     ] })
                   ] }) }),
-                  uniqueVariables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-bold text-slate-800", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Info, { className: "w-4 h-4 text-emerald-600" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u05E2\u05E8\u05DB\u05D9\u05DD \u05DC\u05D3\u05D5\u05D2\u05DE\u05D4 \u05DC\u05DE\u05E9\u05EA\u05E0\u05D9\u05DD (\u05D7\u05D5\u05D1\u05D4 \u05DC\u05D0\u05D9\u05E9\u05D5\u05E8 Meta)" })
+                  uniqueVariables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-bold text-slate-800", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Info, { className: "w-4 h-4 text-emerald-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05E2\u05E8\u05DB\u05D9\u05DD \u05DC\u05D3\u05D5\u05D2\u05DE\u05D4 \u05DC\u05DE\u05E9\u05EA\u05E0\u05D9\u05DD (\u05D7\u05D5\u05D1\u05D4 \u05DC\u05D0\u05D9\u05E9\u05D5\u05E8 Meta)" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[11px] text-slate-500 leading-relaxed", children: "Meta \u05D3\u05D5\u05E8\u05E9\u05EA \u05D3\u05D5\u05D2\u05DE\u05D4 \u05E2\u05D1\u05D5\u05E8 \u05DB\u05DC \u05DE\u05E9\u05EA\u05E0\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 \u05DB\u05D3\u05D9 \u05DC\u05D5\u05D5\u05D3\u05D0 \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA \u05EA\u05D5\u05DB\u05DF." }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1", children: uniqueVariables.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-[11px] font-semibold text-slate-700 font-mono", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[11px] text-slate-500 leading-relaxed", children: "Meta \u05D3\u05D5\u05E8\u05E9\u05EA \u05D3\u05D5\u05D2\u05DE\u05D4 \u05E2\u05D1\u05D5\u05E8 \u05DB\u05DC \u05DE\u05E9\u05EA\u05E0\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 \u05DB\u05D3\u05D9 \u05DC\u05D5\u05D5\u05D3\u05D0 \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA \u05EA\u05D5\u05DB\u05DF." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1", children: uniqueVariables.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "block text-[11px] font-semibold text-slate-700 font-mono", children: [
                         "\u05D3\u05D5\u05D2\u05DE\u05D4 \u05E2\u05D1\u05D5\u05E8 ",
                         `{{${idx}}}`,
                         " ",
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         "input",
                         {
                           type: "text",
@@ -10103,21 +10349,21 @@ function CreateTemplateModal({
                       )
                     ] }, idx)) })
                   ] }),
-                  bodyText.trim().length > 0 && validationResult.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-3.5 bg-amber-50 border border-amber-200 rounded-xl space-y-1.5 text-xs text-amber-900", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1.5 font-bold", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.AlertCircle, { className: "w-4 h-4 text-amber-600 shrink-0" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u05D3\u05E8\u05D9\u05E9\u05D5\u05EA \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA Meta \u05DC\u05D7\u05E1\u05D9\u05DE\u05EA \u05E9\u05D2\u05D9\u05D0\u05D5\u05EA:" })
+                  bodyText.trim().length > 0 && validationResult.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-3.5 bg-amber-50 border border-amber-200 rounded-xl space-y-1.5 text-xs text-amber-900", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 font-bold", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.AlertCircle, { className: "w-4 h-4 text-amber-600 shrink-0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05D3\u05E8\u05D9\u05E9\u05D5\u05EA \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA Meta \u05DC\u05D7\u05E1\u05D9\u05DE\u05EA \u05E9\u05D2\u05D9\u05D0\u05D5\u05EA:" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "list-disc list-inside space-y-1 text-[11px] pr-2 leading-relaxed", children: validationResult.errors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: err }, i)) })
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "list-disc list-inside space-y-1 text-[11px] pr-2 leading-relaxed", children: validationResult.errors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: err }, i)) })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Paperclip, { className: "w-4 h-4 text-slate-600" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "modalHeaderFileCheckbox", className: "text-xs font-bold text-slate-800 cursor-pointer", children: "\u05E7\u05D5\u05D1\u05E5 \u05DB\u05D5\u05EA\u05E8\u05EA \u05DE\u05E6\u05D5\u05E8\u05E3 (\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Paperclip, { className: "w-4 h-4 text-slate-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: "modalHeaderFileCheckbox", className: "text-xs font-bold text-slate-800 cursor-pointer", children: "\u05E7\u05D5\u05D1\u05E5 \u05DB\u05D5\u05EA\u05E8\u05EA \u05DE\u05E6\u05D5\u05E8\u05E3 (\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -10133,12 +10379,12 @@ function CreateTemplateModal({
                       }
                     )
                   ] }),
-                  hasFileHeader && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-3 pt-1", children: [
-                    fileError && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-3 bg-rose-50 border border-rose-200 rounded-xl flex items-center gap-2 text-xs text-rose-700 font-semibold animate-in fade-in duration-150", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.AlertCircle, { className: "w-4 h-4 text-rose-600 shrink-0" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: fileError })
+                  hasFileHeader && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-3 pt-1", children: [
+                    fileError && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-3 bg-rose-50 border border-rose-200 rounded-xl flex items-center gap-2 text-xs text-rose-700 font-semibold animate-in fade-in duration-150", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.AlertCircle, { className: "w-4 h-4 text-rose-600 shrink-0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: fileError })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "input",
                       {
                         ref: fileInputRef,
@@ -10148,7 +10394,7 @@ function CreateTemplateModal({
                         className: "hidden"
                       }
                     ),
-                    !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -10158,49 +10404,49 @@ function CreateTemplateModal({
                         },
                         className: "w-full p-4 border-2 border-dashed border-slate-300 hover:border-emerald-500 rounded-xl flex flex-col items-center justify-center gap-2 bg-white hover:bg-emerald-50/30 transition-all cursor-pointer",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Upload, { className: "w-4 h-4" }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-center", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-bold text-emerald-700 block", children: "\u05DC\u05D7\u05E5 \u05DC\u05D1\u05D7\u05D9\u05E8\u05EA \u05E7\u05D5\u05D1\u05E5" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] text-slate-400", children: "PDF, JPG, PNG, MP4 \u05E2\u05D3 5MB" })
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-9 h-9 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Upload, { className: "w-4 h-4" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-center", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-emerald-700 block", children: "\u05DC\u05D7\u05E5 \u05DC\u05D1\u05D7\u05D9\u05E8\u05EA \u05E7\u05D5\u05D1\u05E5" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-slate-400", children: "PDF, JPG, PNG, MP4 \u05E2\u05D3 5MB" })
                           ] })
                         ]
                       }
                     ),
-                    selectedFile && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-3 bg-white border border-emerald-200 rounded-xl flex items-center justify-between gap-3 shadow-2xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2.5 overflow-hidden", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0", children: selectedFile.type.includes("pdf") || selectedFile.name.toLowerCase().endsWith(".pdf") ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.FileText, { className: "w-4 h-4" }) : selectedFile.type.includes("video") || selectedFile.name.toLowerCase().match(/\.(mp4|mov|avi|webm)$/) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Video, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Image, { className: "w-4 h-4" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "overflow-hidden", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs font-bold text-slate-800 truncate", title: selectedFile.name, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { dir: "ltr", className: "inline-block truncate max-w-full", children: selectedFile.name }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { dir: "ltr", className: "inline-block", children: [
+                    selectedFile && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-3 bg-white border border-emerald-200 rounded-xl flex items-center justify-between gap-3 shadow-2xs", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2.5 overflow-hidden", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0", children: selectedFile.type.includes("pdf") || selectedFile.name.toLowerCase().endsWith(".pdf") ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.FileText, { className: "w-4 h-4" }) : selectedFile.type.includes("video") || selectedFile.name.toLowerCase().match(/\.(mp4|mov|avi|webm)$/) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Video, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Image, { className: "w-4 h-4" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-bold text-slate-800 truncate", title: selectedFile.name, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { dir: "ltr", className: "inline-block truncate max-w-full", children: selectedFile.name }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { dir: "ltr", className: "inline-block", children: [
                             formatFileSize(selectedFile.size),
                             selectedFile.type ? ` \u2022 ${selectedFile.type}` : ""
                           ] }) })
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         "button",
                         {
                           type: "button",
                           onClick: handleRemoveFile,
                           className: "p-1 text-slate-400 hover:text-rose-600 rounded-md transition-colors cursor-pointer",
                           title: "\u05D4\u05E1\u05E8 \u05E7\u05D5\u05D1\u05E5",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Trash2, { className: "w-4 h-4" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Trash2, { className: "w-4 h-4" })
                         }
                       )
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.MousePointerClick, { className: "w-4 h-4 text-slate-600" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-bold text-slate-800 block", children: "\u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD \u05D0\u05D9\u05E0\u05D8\u05E8\u05D0\u05E7\u05D8\u05D9\u05D1\u05D9\u05D9\u05DD (\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] text-slate-400 block", children: "\u05D4\u05D5\u05E1\u05E4\u05EA \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9 \u05E7\u05E8\u05D9\u05D0\u05D4 \u05DC\u05E4\u05E2\u05D5\u05DC\u05D4 (CTA) \u05D5\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4 (\u05E2\u05D3 10 \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD)" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-3.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.MousePointerClick, { className: "w-4 h-4 text-slate-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-slate-800 block", children: "\u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD \u05D0\u05D9\u05E0\u05D8\u05E8\u05D0\u05E7\u05D8\u05D9\u05D1\u05D9\u05D9\u05DD (\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-slate-400 block", children: "\u05D4\u05D5\u05E1\u05E4\u05EA \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9 \u05E7\u05E8\u05D9\u05D0\u05D4 \u05DC\u05E4\u05E2\u05D5\u05DC\u05D4 (CTA) \u05D5\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4 (\u05E2\u05D3 10 \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD)" })
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                         "span",
                         {
                           className: `text-[10px] font-mono px-2 py-0.5 rounded-full border ${buttons.length >= 10 ? "bg-amber-50 text-amber-700 border-amber-200 font-bold" : "bg-white text-slate-500 border-slate-200"}`,
@@ -10210,8 +10456,8 @@ function CreateTemplateModal({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", ref: addButtonDropdownRef, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: addButtonDropdownRef, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                           "button",
                           {
                             type: "button",
@@ -10220,10 +10466,10 @@ function CreateTemplateModal({
                             className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-xl border transition-all ${buttons.length >= 10 ? "bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed opacity-60" : "bg-white text-emerald-700 border-emerald-200 hover:bg-emerald-50/80 active:scale-[0.98] shadow-2xs cursor-pointer"}`,
                             title: buttons.length >= 10 ? "\u05D4\u05D2\u05E2\u05EA \u05DC\u05DE\u05D2\u05D1\u05DC\u05D4 \u05D4\u05DE\u05E8\u05D1\u05D9\u05EA \u05E9\u05DC 10 \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD" : "\u05D4\u05D5\u05E1\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8 \u05D7\u05D3\u05E9",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Plus, { className: "w-3.5 h-3.5" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u05D4\u05D5\u05E1\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                                import_lucide_react10.ChevronDown,
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Plus, { className: "w-3.5 h-3.5" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05D4\u05D5\u05E1\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                                import_lucide_react11.ChevronDown,
                                 {
                                   className: `w-3.5 h-3.5 transition-transform ${isAddButtonOpen ? "rotate-180" : ""}`
                                 }
@@ -10231,63 +10477,63 @@ function CreateTemplateModal({
                             ]
                           }
                         ),
-                        isAddButtonOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute top-full left-0 mt-1.5 w-64 bg-white border border-slate-200 rounded-xl shadow-xl z-30 p-1.5 space-y-1 animate-in fade-in-50 zoom-in-95 duration-100 divide-y divide-slate-100", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                        isAddButtonOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute top-full left-0 mt-1.5 w-64 bg-white border border-slate-200 rounded-xl shadow-xl z-30 p-1.5 space-y-1 animate-in fade-in-50 zoom-in-95 duration-100 divide-y divide-slate-100", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "button",
                             {
                               type: "button",
                               onClick: () => handleAddButton("QUICK_REPLY"),
                               className: "w-full p-2 text-right rounded-lg hover:bg-slate-50 flex items-start gap-2.5 transition-colors cursor-pointer group",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-7 h-7 rounded-md bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-emerald-100", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.MessageSquare, { className: "w-3.5 h-3.5" }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Custom (\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05DE\u05E2\u05E0\u05D4 \u05DE\u05D4\u05D9\u05E8 \u05D1\u05DC\u05D7\u05D9\u05E6\u05D4 \u05D0\u05D7\u05EA" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-7 h-7 rounded-md bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-emerald-100", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.MessageSquare, { className: "w-3.5 h-3.5" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Custom (\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05DE\u05E2\u05E0\u05D4 \u05DE\u05D4\u05D9\u05E8 \u05D1\u05DC\u05D7\u05D9\u05E6\u05D4 \u05D0\u05D7\u05EA" })
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "button",
                             {
                               type: "button",
                               onClick: () => handleAddButton("URL"),
                               className: "w-full p-2 text-right rounded-lg hover:bg-slate-50 flex items-start gap-2.5 transition-colors cursor-pointer group pt-2",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-7 h-7 rounded-md bg-sky-50 text-sky-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-sky-100", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.ExternalLink, { className: "w-3.5 h-3.5" }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Visit website (\u05E7\u05D9\u05E9\u05D5\u05E8 \u05DC\u05D0\u05EA\u05E8)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05E7\u05D9\u05E9\u05D5\u05E8 \u05D0\u05D9\u05E0\u05D8\u05E8\u05E0\u05D8 \u05E1\u05D8\u05D8\u05D9" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-7 h-7 rounded-md bg-sky-50 text-sky-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-sky-100", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ExternalLink, { className: "w-3.5 h-3.5" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Visit website (\u05E7\u05D9\u05E9\u05D5\u05E8 \u05DC\u05D0\u05EA\u05E8)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05E7\u05D9\u05E9\u05D5\u05E8 \u05D0\u05D9\u05E0\u05D8\u05E8\u05E0\u05D8 \u05E1\u05D8\u05D8\u05D9" })
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "button",
                             {
                               type: "button",
                               onClick: () => handleAddButton("PHONE_NUMBER"),
                               className: "w-full p-2 text-right rounded-lg hover:bg-slate-50 flex items-start gap-2.5 transition-colors cursor-pointer group pt-2",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-7 h-7 rounded-md bg-violet-50 text-violet-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-violet-100", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Phone, { className: "w-3.5 h-3.5" }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Call phone number (\u05D7\u05D9\u05D5\u05D2 \u05DC\u05DE\u05E1\u05E4\u05E8)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05D7\u05D9\u05D5\u05D2 \u05D9\u05E9\u05D9\u05E8 \u05DC\u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-7 h-7 rounded-md bg-violet-50 text-violet-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-violet-100", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Phone, { className: "w-3.5 h-3.5" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Call phone number (\u05D7\u05D9\u05D5\u05D2 \u05DC\u05DE\u05E1\u05E4\u05E8)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05D7\u05D9\u05D5\u05D2 \u05D9\u05E9\u05D9\u05E8 \u05DC\u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF" })
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "button",
                             {
                               type: "button",
                               onClick: () => handleAddButton("COPY_CODE"),
                               className: "w-full p-2 text-right rounded-lg hover:bg-slate-50 flex items-start gap-2.5 transition-colors cursor-pointer group pt-2",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-7 h-7 rounded-md bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-amber-100", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Copy, { className: "w-3.5 h-3.5" }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Copy offer code (\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3 \u05E7\u05D5\u05E4\u05D5\u05DF \u05DC\u05DC\u05D5\u05D7" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-7 h-7 rounded-md bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-amber-100", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Copy, { className: "w-3.5 h-3.5" }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-semibold text-slate-800", children: "Copy offer code (\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[10px] text-slate-400 leading-tight", children: "\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3 \u05E7\u05D5\u05E4\u05D5\u05DF \u05DC\u05DC\u05D5\u05D7" })
                                 ] })
                               ]
                             }
@@ -10296,55 +10542,55 @@ function CreateTemplateModal({
                       ] })
                     ] })
                   ] }),
-                  buttons.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-3 text-center border border-dashed border-slate-200 rounded-lg text-slate-400 text-xs bg-white/60", children: '\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD. \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05D4\u05D5\u05E1\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8" \u05DB\u05D3\u05D9 \u05DC\u05D4\u05D5\u05E1\u05D9\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8 \u05E8\u05D0\u05E9\u05D5\u05DF \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA.' }),
-                  buttons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-2.5", children: buttons.map((btn, index) => {
+                  buttons.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-3 text-center border border-dashed border-slate-200 rounded-lg text-slate-400 text-xs bg-white/60", children: '\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05DB\u05E4\u05EA\u05D5\u05E8\u05D9\u05DD. \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05D4\u05D5\u05E1\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8" \u05DB\u05D3\u05D9 \u05DC\u05D4\u05D5\u05E1\u05D9\u05E3 \u05DB\u05E4\u05EA\u05D5\u05E8 \u05E8\u05D0\u05E9\u05D5\u05DF \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA.' }),
+                  buttons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2.5", children: buttons.map((btn, index) => {
                     const btnNum = index + 1;
-                    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       "div",
                       {
                         className: "p-3 bg-white border border-slate-200 rounded-xl space-y-2.5 shadow-2xs transition-all hover:border-slate-300",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-[11px] font-bold text-slate-400 font-mono", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[11px] font-bold text-slate-400 font-mono", children: [
                                 "#",
                                 btnNum
                               ] }),
-                              btn.type === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 text-[10px] font-semibold", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.MessageSquare, { className: "w-3 h-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Custom (\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4)" })
+                              btn.type === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 text-[10px] font-semibold", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.MessageSquare, { className: "w-3 h-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Custom (\u05EA\u05D2\u05D5\u05D1\u05D4 \u05DE\u05D4\u05D9\u05E8\u05D4)" })
                               ] }),
-                              btn.type === "URL" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-sky-50 text-sky-700 border border-sky-200 text-[10px] font-semibold", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.ExternalLink, { className: "w-3 h-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Visit website (\u05E7\u05D9\u05E9\u05D5\u05E8 \u05DC\u05D0\u05EA\u05E8)" })
+                              btn.type === "URL" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-sky-50 text-sky-700 border border-sky-200 text-[10px] font-semibold", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ExternalLink, { className: "w-3 h-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Visit website (\u05E7\u05D9\u05E9\u05D5\u05E8 \u05DC\u05D0\u05EA\u05E8)" })
                               ] }),
-                              btn.type === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-violet-50 text-violet-700 border border-violet-200 text-[10px] font-semibold", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Phone, { className: "w-3 h-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Call phone number (\u05D7\u05D9\u05D5\u05D2 \u05DC\u05DE\u05E1\u05E4\u05E8)" })
+                              btn.type === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-violet-50 text-violet-700 border border-violet-200 text-[10px] font-semibold", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Phone, { className: "w-3 h-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Call phone number (\u05D7\u05D9\u05D5\u05D2 \u05DC\u05DE\u05E1\u05E4\u05E8)" })
                               ] }),
-                              btn.type === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-amber-50 text-amber-700 border border-amber-200 text-[10px] font-semibold", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Copy, { className: "w-3 h-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Copy offer code (\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3)" })
+                              btn.type === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-amber-50 text-amber-700 border border-amber-200 text-[10px] font-semibold", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Copy, { className: "w-3 h-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Copy offer code (\u05D4\u05E2\u05EA\u05E7\u05EA \u05E7\u05D5\u05D3)" })
                               ] })
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               "button",
                               {
                                 type: "button",
                                 onClick: () => handleRemoveButton(index),
                                 className: "p-1 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer",
                                 title: "\u05D4\u05E1\u05E8 \u05DB\u05E4\u05EA\u05D5\u05E8",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Trash2, { className: "w-3.5 h-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Trash2, { className: "w-3.5 h-3.5" })
                               }
                             )
                           ] }),
-                          btn.type === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                          btn.type === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                 "\u05D8\u05E7\u05E1\u05D8 \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 ",
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                                 "span",
                                 {
                                   className: `font-mono text-[10px] ${(btn.text || "").length >= 25 ? "text-amber-600 font-bold" : "text-slate-400"}`,
@@ -10355,7 +10601,7 @@ function CreateTemplateModal({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               "input",
                               {
                                 type: "text",
@@ -10367,14 +10613,14 @@ function CreateTemplateModal({
                               }
                             )
                           ] }),
-                          btn.type === "URL" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                          btn.type === "URL" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                   "\u05D8\u05E7\u05E1\u05D8 \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 ",
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                                   "span",
                                   {
                                     className: `font-mono text-[10px] ${(btn.text || "").length >= 25 ? "text-amber-600 font-bold" : "text-slate-400"}`,
@@ -10385,7 +10631,7 @@ function CreateTemplateModal({
                                   }
                                 )
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -10397,18 +10643,18 @@ function CreateTemplateModal({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                   "\u05DB\u05EA\u05D5\u05D1\u05EA URL \u05E1\u05D8\u05D8\u05D9\u05EA ",
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
                                   (btn.url || "").length,
                                   "/2000"
                                 ] })
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "url",
@@ -10422,14 +10668,14 @@ function CreateTemplateModal({
                               )
                             ] })
                           ] }),
-                          btn.type === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                          btn.type === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                   "\u05D8\u05E7\u05E1\u05D8 \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 ",
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                                   "span",
                                   {
                                     className: `font-mono text-[10px] ${(btn.text || "").length >= 25 ? "text-amber-600 font-bold" : "text-slate-400"}`,
@@ -10440,7 +10686,7 @@ function CreateTemplateModal({
                                   }
                                 )
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -10452,18 +10698,18 @@ function CreateTemplateModal({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                   "\u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF (\u05E4\u05D5\u05E8\u05DE\u05D8: +[\u05E7\u05D9\u05D3\u05D5\u05DE\u05EA][\u05DE\u05E1\u05E4\u05E8]) ",
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
                                   (btn.phone_number || "").length,
                                   "/20"
                                 ] })
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "tel",
@@ -10477,14 +10723,14 @@ function CreateTemplateModal({
                               )
                             ] })
                           ] }),
-                          btn.type === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "font-semibold text-slate-700", children: [
+                          btn.type === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "font-semibold text-slate-700", children: [
                                   "\u05E7\u05D5\u05D3 \u05D4\u05E6\u05E2\u05D4 / \u05E7\u05D5\u05E4\u05D5\u05DF ",
-                                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-rose-500", children: "*" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-rose-500", children: "*" })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                                   "span",
                                   {
                                     className: `font-mono text-[10px] ${(btn.example || "").length >= 15 ? "text-amber-600 font-bold" : "text-slate-400"}`,
@@ -10495,7 +10741,7 @@ function CreateTemplateModal({
                                   }
                                 )
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -10508,15 +10754,15 @@ function CreateTemplateModal({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "font-semibold text-slate-700", children: "\u05D8\u05E7\u05E1\u05D8 \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 (\u05D1\u05E8\u05D9\u05E8\u05EA \u05DE\u05D7\u05D3\u05DC: \u05D4\u05E2\u05EA\u05E7 \u05E7\u05D5\u05D3)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "font-semibold text-slate-700", children: "\u05D8\u05E7\u05E1\u05D8 \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 (\u05D1\u05E8\u05D9\u05E8\u05EA \u05DE\u05D7\u05D3\u05DC: \u05D4\u05E2\u05EA\u05E7 \u05E7\u05D5\u05D3)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "font-mono text-[10px] text-slate-400", children: [
                                   (btn.text || "").length,
                                   "/25"
                                 ] })
                               ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -10536,8 +10782,8 @@ function CreateTemplateModal({
                   }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "px-6 py-4 border-t border-slate-100 flex items-center justify-end gap-3 bg-slate-50/50", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-6 py-4 border-t border-slate-100 flex items-center justify-end gap-3 bg-slate-50/50", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     type: "button",
@@ -10547,19 +10793,19 @@ function CreateTemplateModal({
                     children: "\u05D1\u05D9\u05D8\u05D5\u05DC"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     type: "submit",
                     disabled: !canSubmit,
                     className: `inline-flex items-center gap-2 px-5 py-2 text-xs font-semibold text-white rounded-xl shadow-xs transition-all cursor-pointer active:scale-[0.98] ${canSubmit ? "bg-emerald-600 hover:bg-emerald-700" : "bg-slate-300 text-slate-500 cursor-not-allowed opacity-60"}`,
                     title: !canSubmit ? fileError || validationResult.errors[0] || "\u05D9\u05E9 \u05DC\u05D4\u05E9\u05DC\u05D9\u05DD \u05D0\u05EA \u05DB\u05DC \u05E9\u05D3\u05D5\u05EA \u05D4\u05D7\u05D5\u05D1\u05D4 \u05D1\u05D0\u05D5\u05E4\u05DF \u05EA\u05E7\u05D9\u05DF" : "\u05E9\u05DC\u05D7 \u05EA\u05D1\u05E0\u05D9\u05EA \u05DC\u05D0\u05D9\u05E9\u05D5\u05E8 Meta",
-                    children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Loader2, { className: "w-4 h-4 animate-spin" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: submittingStep || "\u05D9\u05D5\u05E6\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA..." })
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.CheckCircle2, { className: "w-4 h-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u05E9\u05DC\u05D7 \u05DC\u05D1\u05D3\u05D9\u05E7\u05D4" })
+                    children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Loader2, { className: "w-4 h-4 animate-spin" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: submittingStep || "\u05D9\u05D5\u05E6\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA..." })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CheckCircle2, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05E9\u05DC\u05D7 \u05DC\u05D1\u05D3\u05D9\u05E7\u05D4" })
                     ] })
                   }
                 )
@@ -10573,11 +10819,11 @@ function CreateTemplateModal({
 }
 
 // src/components/WhatsAppComponent/hooks/useWhatsAppState.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/WhatsAppComponent/utils/recipientEngine.ts
 var STORAGE_KEY_TEST_PHONE = "whatsapp_test_phone";
-function isRawObjectId2(str) {
+function isRawObjectId3(str) {
   if (typeof str !== "string") return false;
   const trimmed = str.trim();
   return /^[0-9a-fA-F]{24}$/.test(trimmed) || trimmed.startsWith("temp_");
@@ -10587,14 +10833,14 @@ function getRelationOptionLabel(opt, colDef, allRelationOptions) {
   if (!opt) return "";
   if (typeof opt === "string") {
     const trimmed = opt.trim();
-    if (!isRawObjectId2(trimmed)) return trimmed;
+    if (!isRawObjectId3(trimmed)) return trimmed;
     if (allRelationOptions) {
       for (const list of Object.values(allRelationOptions)) {
         if (Array.isArray(list)) {
           const match = list.find((item) => ((item == null ? void 0 : item.id) || (item == null ? void 0 : item._id)) === trimmed);
           if (match) {
             const resolved = getRelationOptionLabel(match, colDef);
-            if (resolved && !isRawObjectId2(resolved)) {
+            if (resolved && !isRawObjectId3(resolved)) {
               return resolved;
             }
           }
@@ -10607,11 +10853,11 @@ function getRelationOptionLabel(opt, colDef, allRelationOptions) {
   const displayField = (_a = colDef == null ? void 0 : colDef.config) == null ? void 0 : _a.displayField;
   if (displayField && opt.data && opt.data[displayField] !== void 0 && opt.data[displayField] !== null) {
     const val = String(opt.data[displayField]).trim();
-    if (val && !isRawObjectId2(val) && val !== rawId) return val;
+    if (val && !isRawObjectId3(val) && val !== rawId) return val;
   }
   if (opt.label && typeof opt.label === "string") {
     const trimmed = opt.label.trim();
-    if (trimmed && !isRawObjectId2(trimmed) && trimmed !== rawId) {
+    if (trimmed && !isRawObjectId3(trimmed) && trimmed !== rawId) {
       return trimmed;
     }
   }
@@ -10634,14 +10880,14 @@ function getRelationOptionLabel(opt, colDef, allRelationOptions) {
       const val = opt.data[key];
       if (val !== void 0 && val !== null) {
         const str = String(val).trim();
-        if (str && !isRawObjectId2(str) && str !== rawId) return str;
+        if (str && !isRawObjectId3(str) && str !== rawId) return str;
       }
     }
     for (const [k, v] of Object.entries(opt.data)) {
       if (k.startsWith("_") || k.toLowerCase().endsWith("id") || k.toLowerCase() === "id") continue;
       if (v !== void 0 && v !== null) {
         const str = String(v).trim();
-        if (str && !isRawObjectId2(str) && str !== rawId) return str;
+        if (str && !isRawObjectId3(str) && str !== rawId) return str;
       }
     }
   }
@@ -10650,7 +10896,7 @@ function getRelationOptionLabel(opt, colDef, allRelationOptions) {
     const val = opt[key];
     if (val !== void 0 && val !== null) {
       const str = String(val).trim();
-      if (str && !isRawObjectId2(str) && str !== rawId) return str;
+      if (str && !isRawObjectId3(str) && str !== rawId) return str;
     }
   }
   if (opt.label && typeof opt.label === "string" && opt.label.trim()) {
@@ -11878,29 +12124,29 @@ function useWhatsAppState(props) {
     data: injectedData
   } = props;
   const orgId = props.orgId || props.organizationId || (settings == null ? void 0 : settings.orgId) || (settings == null ? void 0 : settings.organizationId) || (injectedData == null ? void 0 : injectedData.orgId) || (injectedData == null ? void 0 : injectedData.organizationId);
-  const [tableColumns2, setTableColumns] = (0, import_react21.useState)(() => {
+  const [tableColumns2, setTableColumns] = (0, import_react22.useState)(() => {
     return Array.isArray(settings == null ? void 0 : settings.columns) ? settings.columns : [];
   });
-  const [rawRecords, setRawRecords] = (0, import_react21.useState)(() => {
+  const [rawRecords, setRawRecords] = (0, import_react22.useState)(() => {
     if (Array.isArray(injectedData)) return injectedData;
     if (Array.isArray(injectedData == null ? void 0 : injectedData.records)) return injectedData.records;
     return [];
   });
-  const [relationOptions, setRelationOptions] = (0, import_react21.useState)(() => {
+  const [relationOptions, setRelationOptions] = (0, import_react22.useState)(() => {
     return (injectedData == null ? void 0 : injectedData.relationOptions) || {};
   });
-  const [isLoadingTableData, setIsLoadingTableData] = (0, import_react21.useState)(() => Boolean(settings == null ? void 0 : settings.tableMetaId));
-  const [activeSubtableScans, setActiveSubtableScans] = (0, import_react21.useState)(0);
-  const [tableError, setTableError] = (0, import_react21.useState)(null);
-  const [filters, setFilters] = (0, import_react21.useState)({});
-  const [selectedRowIds, setSelectedRowIds] = (0, import_react21.useState)([]);
-  const [autoSelectCount, setAutoSelectCount] = (0, import_react21.useState)(null);
-  const isAutoSelectingRef = (0, import_react21.useRef)(false);
-  const isManualOverrideRef = (0, import_react21.useRef)(false);
-  const prevAutoSelectCountRef = (0, import_react21.useRef)(null);
-  const fetchedTableIdsRef = (0, import_react21.useRef)(/* @__PURE__ */ new Set());
-  const fullyFetchedRelationKeysRef = (0, import_react21.useRef)(/* @__PURE__ */ new Set());
-  const loadTableData = (0, import_react21.useCallback)(async () => {
+  const [isLoadingTableData, setIsLoadingTableData] = (0, import_react22.useState)(() => Boolean(settings == null ? void 0 : settings.tableMetaId));
+  const [activeSubtableScans, setActiveSubtableScans] = (0, import_react22.useState)(0);
+  const [tableError, setTableError] = (0, import_react22.useState)(null);
+  const [filters, setFilters] = (0, import_react22.useState)({});
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react22.useState)([]);
+  const [autoSelectCount, setAutoSelectCount] = (0, import_react22.useState)(null);
+  const isAutoSelectingRef = (0, import_react22.useRef)(false);
+  const isManualOverrideRef = (0, import_react22.useRef)(false);
+  const prevAutoSelectCountRef = (0, import_react22.useRef)(null);
+  const fetchedTableIdsRef = (0, import_react22.useRef)(/* @__PURE__ */ new Set());
+  const fullyFetchedRelationKeysRef = (0, import_react22.useRef)(/* @__PURE__ */ new Set());
+  const loadTableData = (0, import_react22.useCallback)(async () => {
     var _a2;
     const tableId = (settings == null ? void 0 : settings.tableMetaId) || (injectedData == null ? void 0 : injectedData.tableMetaId) || (injectedData == null ? void 0 : injectedData.tableId);
     if (!tableId || !executeAction) return;
@@ -11967,10 +12213,10 @@ function useWhatsAppState(props) {
     executeAction,
     orgId
   ]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     loadTableData();
   }, [loadTableData]);
-  const filterableColumns = (0, import_react21.useMemo)(() => {
+  const filterableColumns = (0, import_react22.useMemo)(() => {
     return (tableColumns2 || []).filter((col) => {
       var _a2;
       if (!col || col.name === "_id" || col.id === "_id") return false;
@@ -11978,15 +12224,15 @@ function useWhatsAppState(props) {
       return type === "RELATION" || type === "BOOLEAN";
     });
   }, [tableColumns2]);
-  const [referencedTableSchemas, setReferencedTableSchemas] = (0, import_react21.useState)({});
-  const subtableCols = (0, import_react21.useMemo)(() => {
+  const [referencedTableSchemas, setReferencedTableSchemas] = (0, import_react22.useState)({});
+  const subtableCols = (0, import_react22.useMemo)(() => {
     return (tableColumns2 || []).filter((col) => {
       var _a2;
       const type = (_a2 = col.type) == null ? void 0 : _a2.toUpperCase();
       return type === "RELATION" || type === "SUB_TABLE" || type === "SUBTABLE";
     });
   }, [tableColumns2]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!executeAction) return;
     const unrequestedCols = subtableCols.filter((col) => {
       var _a2;
@@ -12032,20 +12278,20 @@ function useWhatsAppState(props) {
   const isScanningPhoneColumns = Boolean(
     isLoadingTableData || activeSubtableScans > 0 || tableColumns2.length === 0 && Boolean(settings == null ? void 0 : settings.tableMetaId)
   );
-  const targetPhoneOptions = (0, import_react21.useMemo)(() => {
+  const targetPhoneOptions = (0, import_react22.useMemo)(() => {
     const cols = tableColumns2 && tableColumns2.length > 0 ? tableColumns2 : Array.isArray(settings == null ? void 0 : settings.columns) ? settings.columns : [];
     return scanTargetPhoneOptions(cols, referencedTableSchemas);
   }, [tableColumns2, settings == null ? void 0 : settings.columns, referencedTableSchemas]);
-  const phoneColumns = (0, import_react21.useMemo)(() => {
+  const phoneColumns = (0, import_react22.useMemo)(() => {
     return targetPhoneOptions.map((opt) => ({ name: opt.label, id: opt.id, type: "PHONE" }));
   }, [targetPhoneOptions]);
-  const [phoneColumnId, setPhoneColumnId] = (0, import_react21.useState)("");
-  const [subtableFilterColumn, setSubtableFilterColumn] = (0, import_react21.useState)("");
-  const [subtableFilterValue, setSubtableFilterValue] = (0, import_react21.useState)("");
-  const [subtableSendLimit, setSubtableSendLimit] = (0, import_react21.useState)(
+  const [phoneColumnId, setPhoneColumnId] = (0, import_react22.useState)("");
+  const [subtableFilterColumn, setSubtableFilterColumn] = (0, import_react22.useState)("");
+  const [subtableFilterValue, setSubtableFilterValue] = (0, import_react22.useState)("");
+  const [subtableSendLimit, setSubtableSendLimit] = (0, import_react22.useState)(
     (settings == null ? void 0 : settings.subtableSendLimit) || "PRIMARY"
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (targetPhoneOptions.length > 0) {
       const isValid = targetPhoneOptions.some(
         (opt) => opt.id === phoneColumnId || opt.columnName === phoneColumnId
@@ -12057,13 +12303,13 @@ function useWhatsAppState(props) {
       setPhoneColumnId("");
     }
   }, [targetPhoneOptions, phoneColumnId]);
-  const selectedPhoneOption = (0, import_react21.useMemo)(() => {
+  const selectedPhoneOption = (0, import_react22.useMemo)(() => {
     if (!phoneColumnId) return targetPhoneOptions[0] || null;
     return targetPhoneOptions.find(
       (opt) => opt.id === phoneColumnId || opt.columnName === phoneColumnId
     ) || targetPhoneOptions[0] || null;
   }, [targetPhoneOptions, phoneColumnId]);
-  const subtableFilterableColumns = (0, import_react21.useMemo)(() => {
+  const subtableFilterableColumns = (0, import_react22.useMemo)(() => {
     var _a2, _b2, _c;
     if (!selectedPhoneOption || selectedPhoneOption.type !== "SUBTABLE") {
       return [];
@@ -12082,14 +12328,14 @@ function useWhatsAppState(props) {
       return type === "BOOLEAN" || type === "RELATION";
     });
   }, [selectedPhoneOption, referencedTableSchemas, tableColumns2]);
-  const selectedSubtableFilterCol = (0, import_react21.useMemo)(() => {
+  const selectedSubtableFilterCol = (0, import_react22.useMemo)(() => {
     return subtableFilterableColumns.find((c) => c.name === subtableFilterColumn);
   }, [subtableFilterableColumns, subtableFilterColumn]);
-  const [enablePostSendAction, setEnablePostSendAction] = (0, import_react21.useState)(false);
-  const [postSendActionColumn, setPostSendActionColumn] = (0, import_react21.useState)("");
-  const [postSendActionValue, setPostSendActionValue] = (0, import_react21.useState)("");
-  const [postSendActionTargetType, setPostSendActionTargetType] = (0, import_react21.useState)("MAIN");
-  const postSendActionTargetOptions = (0, import_react21.useMemo)(() => {
+  const [enablePostSendAction, setEnablePostSendAction] = (0, import_react22.useState)(false);
+  const [postSendActionColumn, setPostSendActionColumn] = (0, import_react22.useState)("");
+  const [postSendActionValue, setPostSendActionValue] = (0, import_react22.useState)("");
+  const [postSendActionTargetType, setPostSendActionTargetType] = (0, import_react22.useState)("MAIN");
+  const postSendActionTargetOptions = (0, import_react22.useMemo)(() => {
     var _a2, _b2, _c;
     const options = [];
     (tableColumns2 || []).forEach((col) => {
@@ -12134,14 +12380,14 @@ function useWhatsAppState(props) {
     }
     return options;
   }, [tableColumns2, selectedPhoneOption, referencedTableSchemas]);
-  const selectedPostSendOption = (0, import_react21.useMemo)(() => {
+  const selectedPostSendOption = (0, import_react22.useMemo)(() => {
     return postSendActionTargetOptions.find(
       (opt) => opt.id === postSendActionColumn || opt.columnName === postSendActionColumn
     );
   }, [postSendActionTargetOptions, postSendActionColumn]);
   const selectedPostSendCol = selectedPostSendOption;
-  const [isTestPromptOpen, setIsTestPromptOpen] = (0, import_react21.useState)(false);
-  const [testPhoneNumber, setTestPhoneNumber] = (0, import_react21.useState)(() => {
+  const [isTestPromptOpen, setIsTestPromptOpen] = (0, import_react22.useState)(false);
+  const [testPhoneNumber, setTestPhoneNumber] = (0, import_react22.useState)(() => {
     if (typeof window !== "undefined") {
       try {
         return localStorage.getItem(STORAGE_KEY_TEST_PHONE) || "";
@@ -12151,10 +12397,10 @@ function useWhatsAppState(props) {
     }
     return "";
   });
-  const [testFeedback, setTestFeedback] = (0, import_react21.useState)(null);
-  const [isSendingTest, setIsSendingTest] = (0, import_react21.useState)(false);
-  const [isSendingBroadcast, setIsSendingBroadcast] = (0, import_react21.useState)(false);
-  const [broadcastProgress, setBroadcastProgress] = (0, import_react21.useState)({
+  const [testFeedback, setTestFeedback] = (0, import_react22.useState)(null);
+  const [isSendingTest, setIsSendingTest] = (0, import_react22.useState)(false);
+  const [isSendingBroadcast, setIsSendingBroadcast] = (0, import_react22.useState)(false);
+  const [broadcastProgress, setBroadcastProgress] = (0, import_react22.useState)({
     current: 0,
     total: 0,
     successful: 0,
@@ -12162,12 +12408,12 @@ function useWhatsAppState(props) {
     skipped: 0,
     percent: 0
   });
-  const [broadcastSummary, setBroadcastSummary] = (0, import_react21.useState)(null);
-  const [rowStatusMap, setRowStatusMap] = (0, import_react21.useState)({});
-  const clearBroadcastSummary = (0, import_react21.useCallback)(() => {
+  const [broadcastSummary, setBroadcastSummary] = (0, import_react22.useState)(null);
+  const [rowStatusMap, setRowStatusMap] = (0, import_react22.useState)({});
+  const clearBroadcastSummary = (0, import_react22.useCallback)(() => {
     setBroadcastSummary(null);
   }, []);
-  const handleTestPhoneChange = (0, import_react21.useCallback)((val) => {
+  const handleTestPhoneChange = (0, import_react22.useCallback)((val) => {
     setTestPhoneNumber(val);
     if (typeof window !== "undefined") {
       try {
@@ -12177,7 +12423,7 @@ function useWhatsAppState(props) {
       }
     }
   }, []);
-  const getRelationOptionsForCol = (0, import_react21.useCallback)(
+  const getRelationOptionsForCol = (0, import_react22.useCallback)(
     (colName, parentColName) => {
       var _a2, _b2, _c, _d;
       if (parentColName) {
@@ -12220,7 +12466,7 @@ function useWhatsAppState(props) {
     },
     [relationOptions, subtableFilterableColumns, postSendActionTargetOptions, tableColumns2, filterableColumns]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     var _a2, _b2, _c, _d, _e;
     if (!executeAction) return;
     const targets = [];
@@ -12314,7 +12560,7 @@ function useWhatsAppState(props) {
       }
     });
   }, [filterableColumns, selectedPhoneOption, referencedTableSchemas, tableColumns2, executeAction, selectedPostSendOption, orgId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     var _a2, _b2, _c;
     if (!executeAction || !selectedSubtableFilterCol) return;
     if (((_a2 = selectedSubtableFilterCol.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION") return;
@@ -12365,7 +12611,7 @@ function useWhatsAppState(props) {
       }
     })();
   }, [selectedSubtableFilterCol, selectedPhoneOption, executeAction, orgId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     var _a2, _b2;
     if (!executeAction || !selectedPostSendOption) return;
     if (selectedPostSendOption.type !== "RELATION") return;
@@ -12418,7 +12664,7 @@ function useWhatsAppState(props) {
       }
     })();
   }, [selectedPostSendOption, executeAction, orgId]);
-  const filteredRecords = (0, import_react21.useMemo)(() => {
+  const filteredRecords = (0, import_react22.useMemo)(() => {
     const activeEntries = Object.entries(filters).filter(
       ([_, val]) => val !== void 0 && val !== null && val !== ""
     );
@@ -12450,7 +12696,7 @@ function useWhatsAppState(props) {
     });
   }, [rawRecords, filters, filterableColumns]);
   const filteredData = filteredRecords;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (autoSelectCount !== null && autoSelectCount > 0) {
       isAutoSelectingRef.current = true;
       const sliced = filteredData.slice(0, autoSelectCount);
@@ -12468,7 +12714,7 @@ function useWhatsAppState(props) {
     isManualOverrideRef.current = false;
     prevAutoSelectCountRef.current = autoSelectCount;
   }, [autoSelectCount, filteredData]);
-  const embeddedTableExecuteAction = (0, import_react21.useCallback)(async (actionType, payload) => {
+  const embeddedTableExecuteAction = (0, import_react22.useCallback)(async (actionType, payload) => {
     if (actionType === "FETCH_TABLE_DATA") {
       const colFilters = (payload == null ? void 0 : payload.columnFilters) || (payload == null ? void 0 : payload.filters);
       const searchQuery = payload == null ? void 0 : payload.search;
@@ -12511,10 +12757,10 @@ function useWhatsAppState(props) {
   const handleClearFilters = () => {
     setFilters({});
   };
-  const activeFiltersCount = (0, import_react21.useMemo)(() => {
+  const activeFiltersCount = (0, import_react22.useMemo)(() => {
     return Object.values(filters).filter((v) => v !== "").length;
   }, [filters]);
-  const handleSelectionChange = (0, import_react21.useCallback)((selectedIds) => {
+  const handleSelectionChange = (0, import_react22.useCallback)((selectedIds) => {
     setSelectedRowIds((prev) => {
       if (prev.length === selectedIds.length && prev.every((id, idx) => id === selectedIds[idx])) {
         return prev;
@@ -12528,13 +12774,13 @@ function useWhatsAppState(props) {
       return selectedIds;
     });
   }, [autoSelectCount]);
-  const handleRowToggle = (0, import_react21.useCallback)((rowId, checked) => {
+  const handleRowToggle = (0, import_react22.useCallback)((rowId, checked) => {
     if (autoSelectCount !== null && autoSelectCount > 0) {
       isManualOverrideRef.current = true;
       setAutoSelectCount(null);
     }
   }, [autoSelectCount]);
-  const toggleRowSelection = (0, import_react21.useCallback)((rowId, checked) => {
+  const toggleRowSelection = (0, import_react22.useCallback)((rowId, checked) => {
     if (autoSelectCount !== null && autoSelectCount > 0) {
       isManualOverrideRef.current = true;
       setAutoSelectCount(null);
@@ -12550,15 +12796,15 @@ function useWhatsAppState(props) {
       return prev;
     });
   }, [autoSelectCount]);
-  const [templates, setTemplates] = (0, import_react21.useState)([]);
-  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react21.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react21.useState)(true);
-  const [fetchError, setFetchError] = (0, import_react21.useState)(null);
-  const [isModalOpen, setIsModalOpen] = (0, import_react21.useState)(false);
-  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react21.useState)(false);
-  const [isDeleting, setIsDeleting] = (0, import_react21.useState)(false);
-  const [feedback, setFeedback] = (0, import_react21.useState)(null);
-  const loadTemplates = (0, import_react21.useCallback)(async () => {
+  const [templates, setTemplates] = (0, import_react22.useState)([]);
+  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react22.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react22.useState)(true);
+  const [fetchError, setFetchError] = (0, import_react22.useState)(null);
+  const [isModalOpen, setIsModalOpen] = (0, import_react22.useState)(false);
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react22.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react22.useState)(false);
+  const [feedback, setFeedback] = (0, import_react22.useState)(null);
+  const loadTemplates = (0, import_react22.useCallback)(async () => {
     var _a2, _b2;
     if (!executeAction) {
       setIsLoading(false);
@@ -12610,13 +12856,13 @@ function useWhatsAppState(props) {
       setIsLoading(false);
     }
   }, [executeAction, orgId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     loadTemplates();
   }, [loadTemplates]);
-  const selectedTemplate = (0, import_react21.useMemo)(() => {
+  const selectedTemplate = (0, import_react22.useMemo)(() => {
     return templates.find((t) => t.id === selectedTemplateId) || null;
   }, [templates, selectedTemplateId]);
-  const templateBodyText = (0, import_react21.useMemo)(() => {
+  const templateBodyText = (0, import_react22.useMemo)(() => {
     if (!(selectedTemplate == null ? void 0 : selectedTemplate.components)) return "";
     const bodyComp = selectedTemplate.components.find(
       (c) => {
@@ -12626,7 +12872,7 @@ function useWhatsAppState(props) {
     );
     return (bodyComp == null ? void 0 : bodyComp.text) || "";
   }, [selectedTemplate]);
-  const templateHeaderComp = (0, import_react21.useMemo)(() => {
+  const templateHeaderComp = (0, import_react22.useMemo)(() => {
     if (!(selectedTemplate == null ? void 0 : selectedTemplate.components)) return null;
     return selectedTemplate.components.find(
       (c) => {
@@ -12635,8 +12881,8 @@ function useWhatsAppState(props) {
       }
     ) || null;
   }, [selectedTemplate]);
-  const [headerMediaUrl, setHeaderMediaUrl] = (0, import_react21.useState)("");
-  (0, import_react21.useEffect)(() => {
+  const [headerMediaUrl, setHeaderMediaUrl] = (0, import_react22.useState)("");
+  (0, import_react22.useEffect)(() => {
     if (!templateHeaderComp) {
       setHeaderMediaUrl("");
       return;
@@ -12653,7 +12899,7 @@ function useWhatsAppState(props) {
       setHeaderMediaUrl("");
     }
   }, [templateHeaderComp, selectedTemplate == null ? void 0 : selectedTemplate.name]);
-  const handleHeaderMediaUrlChange = (0, import_react21.useCallback)(
+  const handleHeaderMediaUrlChange = (0, import_react22.useCallback)(
     (newUrl) => {
       setHeaderMediaUrl(newUrl);
       if ((selectedTemplate == null ? void 0 : selectedTemplate.name) && typeof window !== "undefined") {
@@ -12672,7 +12918,7 @@ function useWhatsAppState(props) {
     },
     [selectedTemplate == null ? void 0 : selectedTemplate.name]
   );
-  const handleResetHeaderMediaUrl = (0, import_react21.useCallback)(() => {
+  const handleResetHeaderMediaUrl = (0, import_react22.useCallback)(() => {
     if ((selectedTemplate == null ? void 0 : selectedTemplate.name) && typeof window !== "undefined") {
       try {
         localStorage.removeItem(`whatsapp_template_media_${selectedTemplate.name}`);
@@ -12686,8 +12932,8 @@ function useWhatsAppState(props) {
     );
     setHeaderMediaUrl(defaultUrl || "");
   }, [templateHeaderComp, selectedTemplate == null ? void 0 : selectedTemplate.name]);
-  const [isUploadingMedia, setIsUploadingMedia] = (0, import_react21.useState)(false);
-  const handleFileUpload = (0, import_react21.useCallback)(
+  const [isUploadingMedia, setIsUploadingMedia] = (0, import_react22.useState)(false);
+  const handleFileUpload = (0, import_react22.useCallback)(
     async (file, templateName) => {
       const tplName = templateName || (selectedTemplate == null ? void 0 : selectedTemplate.name) || "";
       if (!file) return;
@@ -12728,14 +12974,14 @@ function useWhatsAppState(props) {
     },
     [selectedTemplate == null ? void 0 : selectedTemplate.name]
   );
-  const templateVariables = (0, import_react21.useMemo)(() => {
+  const templateVariables = (0, import_react22.useMemo)(() => {
     return extractTemplateVariables(selectedTemplate);
   }, [selectedTemplate]);
-  const [variableMapping, setVariableMapping] = (0, import_react21.useState)({});
-  (0, import_react21.useEffect)(() => {
+  const [variableMapping, setVariableMapping] = (0, import_react22.useState)({});
+  (0, import_react22.useEffect)(() => {
     setVariableMapping({});
   }, [selectedTemplateId]);
-  const textableColumnOptions = (0, import_react21.useMemo)(() => {
+  const textableColumnOptions = (0, import_react22.useMemo)(() => {
     return getTextableColumnOptions({
       tableColumns: tableColumns2,
       selectedPhoneOption,
@@ -12761,7 +13007,7 @@ function useWhatsAppState(props) {
       });
     });
   };
-  const existingTemplateNames = (0, import_react21.useMemo)(() => {
+  const existingTemplateNames = (0, import_react22.useMemo)(() => {
     return templates.map((t) => t.name);
   }, [templates]);
   const handleDeleteTemplate = async () => {
@@ -12808,14 +13054,14 @@ function useWhatsAppState(props) {
     postSendActionColumn,
     postSendActionValue
   );
-  const isStaticVariableMissing = (0, import_react21.useMemo)(() => {
+  const isStaticVariableMissing = (0, import_react22.useMemo)(() => {
     return isStaticVariableIncomplete(templateVariables, variableMapping);
   }, [templateVariables, variableMapping]);
-  const currentRecords = (0, import_react21.useMemo)(() => {
+  const currentRecords = (0, import_react22.useMemo)(() => {
     var _a2;
     return rawRecords && rawRecords.length > 0 ? rawRecords : Array.isArray(props.data) ? props.data : Array.isArray((_a2 = props.data) == null ? void 0 : _a2.records) ? props.data.records : [];
   }, [rawRecords, props.data]);
-  const preparedRecipients = (0, import_react21.useMemo)(() => {
+  const preparedRecipients = (0, import_react22.useMemo)(() => {
     return prepareRecipients({
       selectedIds: selectedRowIds,
       records: currentRecords,
@@ -12835,7 +13081,7 @@ function useWhatsAppState(props) {
     selectedSubtableFilterCol
   ]);
   const finalRecipientCount = preparedRecipients.length;
-  const validMainRowsCount = (0, import_react21.useMemo)(() => {
+  const validMainRowsCount = (0, import_react22.useMemo)(() => {
     const rowIdSet = new Set(
       preparedRecipients.map((r) => r.mainRowId).filter(Boolean)
     );
@@ -12944,7 +13190,7 @@ function useWhatsAppState(props) {
       setIsSendingTest(false);
     }
   };
-  const handleSendMessages = (0, import_react21.useCallback)(async () => {
+  const handleSendMessages = (0, import_react22.useCallback)(async () => {
     var _a2, _b2;
     if (isSendDisabled || isSendingBroadcast) return;
     const recipients = preparedRecipients;
@@ -13250,9 +13496,9 @@ function useWhatsAppState(props) {
 }
 
 // src/components/WhatsAppComponent/ui/TemplateSelectionBlock.tsx
-var import_react22 = require("react");
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function TemplateSelectionBlock({
   selectedTemplate,
   selectedTemplateId,
@@ -13278,16 +13524,16 @@ function TemplateSelectionBlock({
   isUploadingMedia = false,
   handleFileUpload
 }) {
-  const fileInputRef = (0, import_react22.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "col-span-12 lg:col-span-5 min-h-[26rem] h-full flex flex-col bg-slate-50/70 border border-slate-200 rounded-2xl p-3.5 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1.5 shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between pb-1.5 border-b border-slate-200/70 shrink-0 gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.FileText, { className: "w-4 h-4 text-emerald-600 shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-slate-800 truncate", children: "\u05EA\u05D1\u05E0\u05D9\u05EA \u05D5\u05EA\u05D5\u05DB\u05DF \u05D4\u05D5\u05D3\u05E2\u05D4" })
+  const fileInputRef = (0, import_react23.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "col-span-12 lg:col-span-5 min-h-[26rem] h-full flex flex-col bg-slate-50/70 border border-slate-200 rounded-2xl p-3.5 relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1.5 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between pb-1.5 border-b border-slate-200/70 shrink-0 gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.FileText, { className: "w-4 h-4 text-emerald-600 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-bold text-slate-800 truncate", children: "\u05EA\u05D1\u05E0\u05D9\u05EA \u05D5\u05EA\u05D5\u05DB\u05DF \u05D4\u05D5\u05D3\u05E2\u05D4" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "button",
             {
               type: "button",
@@ -13296,12 +13542,12 @@ function TemplateSelectionBlock({
               className: `h-7 px-2 text-[11px] font-semibold rounded-lg border transition-all flex items-center gap-1 ${selectedTemplate && !isDeleting ? "bg-white text-rose-600 hover:bg-rose-50 border-rose-200 active:scale-[0.98] shadow-2xs cursor-pointer" : "bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed opacity-60"}`,
               title: !selectedTemplate ? "\u05D1\u05D7\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05DB\u05D3\u05D9 \u05DC\u05DE\u05D7\u05D5\u05E7 \u05D0\u05D5\u05EA\u05D4" : `\u05DE\u05D7\u05E7 \u05D0\u05EA \u05D4\u05EA\u05D1\u05E0\u05D9\u05EA "${selectedTemplate.name}"`,
               children: [
-                isDeleting ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Loader2, { className: "w-3.5 h-3.5 animate-spin text-rose-500" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Trash2, { className: "w-3.5 h-3.5 text-rose-500" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05DE\u05D7\u05D9\u05E7\u05D4" })
+                isDeleting ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Loader2, { className: "w-3.5 h-3.5 animate-spin text-rose-500" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Trash2, { className: "w-3.5 h-3.5 text-rose-500" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05DE\u05D7\u05D9\u05E7\u05D4" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "button",
             {
               type: "button",
@@ -13309,41 +13555,41 @@ function TemplateSelectionBlock({
               className: "h-7 px-2.5 text-[11px] font-semibold text-white bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] rounded-lg shadow-2xs transition-all flex items-center gap-1 cursor-pointer",
               title: "\u05E6\u05D5\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Plus, { className: "w-3.5 h-3.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05D7\u05D3\u05E9" })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Plus, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05D7\u05D3\u05E9" })
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             type: "button",
             onClick: () => setIsDropdownOpen((prev) => !prev),
             className: "w-full h-8.5 px-3 bg-white hover:bg-slate-100/70 border border-slate-200 rounded-xl text-right flex items-center justify-between transition-colors cursor-pointer text-xs",
             children: [
-              selectedTemplate ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 overflow-hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              selectedTemplate ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 overflow-hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "span",
                   {
                     className: `w-2 h-2 rounded-full shrink-0 ${getStatusConfig(selectedTemplate.status).dotColor}`
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-semibold text-slate-900 truncate", children: selectedTemplate.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] text-slate-400 shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-semibold text-slate-900 truncate", children: selectedTemplate.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-[10px] text-slate-400 shrink-0", children: [
                   "(",
                   selectedTemplate.category,
                   " \u2022 ",
                   selectedTemplate.language,
                   ")"
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-slate-400", children: "\u05D1\u05D7\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05E7\u05D9\u05D9\u05DE\u05EA \u05DE\u05D4\u05E8\u05E9\u05D9\u05DE\u05D4..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0 mr-1", children: [
-                isLoadingTemplates && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Loader2, { className: "w-3.5 h-3.5 text-emerald-600 animate-spin" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  import_lucide_react11.ChevronDown,
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-slate-400", children: "\u05D1\u05D7\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05E7\u05D9\u05D9\u05DE\u05EA \u05DE\u05D4\u05E8\u05E9\u05D9\u05DE\u05D4..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0 mr-1", children: [
+                isLoadingTemplates && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Loader2, { className: "w-3.5 h-3.5 text-emerald-600 animate-spin" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  import_lucide_react12.ChevronDown,
                   {
                     className: `w-3.5 h-3.5 text-slate-400 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`
                   }
@@ -13352,21 +13598,21 @@ function TemplateSelectionBlock({
             ]
           }
         ),
-        isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: "fixed inset-0 z-40",
               onClick: () => setIsDropdownOpen(false)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-xl shadow-xl z-50 max-h-52 overflow-y-auto divide-y divide-slate-100 animate-in fade-in-50 zoom-in-95 duration-100", children: [
-            templates.length === 0 && !isLoadingTemplates && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-3 text-center text-xs text-slate-400", children: '\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D1\u05E0\u05D9\u05D5\u05EA. \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05E6\u05D5\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4".' }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-xl shadow-xl z-50 max-h-52 overflow-y-auto divide-y divide-slate-100 animate-in fade-in-50 zoom-in-95 duration-100", children: [
+            templates.length === 0 && !isLoadingTemplates && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-3 text-center text-xs text-slate-400", children: '\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D1\u05E0\u05D9\u05D5\u05EA. \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05E6\u05D5\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05D7\u05D3\u05E9\u05D4".' }),
             templates.map((tpl) => {
               const statusConfig = getStatusConfig(tpl.status);
               const isSelected = tpl.id === selectedTemplateId;
               const canSelect = statusConfig.isSelectable;
-              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 "div",
                 {
                   onClick: () => {
@@ -13379,29 +13625,29 @@ function TemplateSelectionBlock({
                   className: `p-2.5 flex items-center justify-between gap-2.5 transition-colors ${canSelect ? "hover:bg-slate-50 cursor-pointer" : "opacity-60 bg-slate-50/60 cursor-not-allowed"} ${isSelected ? "bg-emerald-50/50" : ""}`,
                   title: !canSelect ? `\u05E1\u05D8\u05D8\u05D5\u05E1 \u05EA\u05D1\u05E0\u05D9\u05EA: ${tpl.status}. \u05E8\u05E7 \u05EA\u05D1\u05E0\u05D9\u05D5\u05EA \u05D1\u05DE\u05E6\u05D1 \u05DE\u05D0\u05D5\u05E9\u05E8 \u05D0\u05D5 \u05E4\u05E2\u05D9\u05DC \u05E0\u05D9\u05EA\u05E0\u05D5\u05EA \u05DC\u05D1\u05D7\u05D9\u05E8\u05D4.` : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 overflow-hidden", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 overflow-hidden", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         "span",
                         {
                           className: `w-2 h-2 rounded-full shrink-0 ${statusConfig.dotColor}`
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "overflow-hidden", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "overflow-hidden", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           "p",
                           {
                             className: `text-xs font-semibold truncate ${isSelected ? "text-emerald-700" : canSelect ? "text-slate-800" : "text-slate-500"}`,
                             children: tpl.name
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[10px] text-slate-400", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-[10px] text-slate-400", children: [
                           tpl.category,
                           " \u2022 ",
                           tpl.language
                         ] })
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "span",
                       {
                         className: `text-[9px] font-semibold px-2 py-0.5 rounded-full border shrink-0 ${statusConfig.badgeBg} ${statusConfig.badgeText}`,
@@ -13417,18 +13663,18 @@ function TemplateSelectionBlock({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between text-[11px] font-semibold text-slate-600 shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05EA\u05E6\u05D5\u05D2\u05EA \u05D4\u05D5\u05D3\u05E2\u05D4" }),
-        selectedTemplate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[10px] text-slate-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between text-[11px] font-semibold text-slate-600 shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05EA\u05E6\u05D5\u05D2\u05EA \u05D4\u05D5\u05D3\u05E2\u05D4" }),
+        selectedTemplate && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-[10px] text-slate-400", children: [
           "(",
           templateBodyText.length,
           " \u05EA\u05D5\u05D5\u05D9\u05DD)"
         ] })
       ] }),
-      selectedTemplate ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto bg-white border border-slate-200 rounded-lg p-3 text-sm text-slate-700 leading-relaxed font-sans whitespace-pre-wrap select-all shadow-2xs", children: templateBodyText || "(\u05D2\u05D5\u05E3 \u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E8\u05D9\u05E7)" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-h-0 py-3 bg-white border border-dashed border-slate-200 rounded-lg text-center text-sm text-slate-400 flex flex-col items-center justify-center gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05EA\u05D1\u05E0\u05D9\u05EA" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-slate-400", children: '\u05D1\u05D7\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05DE\u05D4\u05E8\u05E9\u05D9\u05DE\u05D4 \u05D0\u05D5 \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05D7\u05D3\u05E9"' })
+      selectedTemplate ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto bg-white border border-slate-200 rounded-lg p-3 text-sm text-slate-700 leading-relaxed font-sans whitespace-pre-wrap select-all shadow-2xs", children: templateBodyText || "(\u05D2\u05D5\u05E3 \u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E8\u05D9\u05E7)" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-h-0 py-3 bg-white border border-dashed border-slate-200 rounded-lg text-center text-sm text-slate-400 flex flex-col items-center justify-center gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05EA\u05D1\u05E0\u05D9\u05EA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-slate-400", children: '\u05D1\u05D7\u05E8 \u05EA\u05D1\u05E0\u05D9\u05EA \u05DE\u05D4\u05E8\u05E9\u05D9\u05DE\u05D4 \u05D0\u05D5 \u05DC\u05D7\u05E5 \u05E2\u05DC "+ \u05D7\u05D3\u05E9"' })
       ] }),
       selectedTemplate && (() => {
         var _a;
@@ -13437,19 +13683,19 @@ function TemplateSelectionBlock({
         );
         const tplButtons = (buttonsComp == null ? void 0 : buttonsComp.buttons) || [];
         if (!tplButtons || tplButtons.length === 0) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-wrap gap-1.5 shrink-0 pt-0.5", children: tplButtons.map((btn, idx) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1.5 shrink-0 pt-0.5", children: tplButtons.map((btn, idx) => {
           const btnType = (btn.type || "").toUpperCase();
           const btnText = btn.text || (btnType === "COPY_CODE" ? `\u05D4\u05E2\u05EA\u05E7 \u05E7\u05D5\u05D3: ${btn.example}` : "\u05DB\u05E4\u05EA\u05D5\u05E8");
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white border border-slate-200/90 text-slate-700 text-xs font-semibold shadow-2xs select-none",
               children: [
-                btnType === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.MessageSquare, { className: "w-3 h-3 text-emerald-600" }),
-                btnType === "URL" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ExternalLink, { className: "w-3 h-3 text-sky-600" }),
-                btnType === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Phone, { className: "w-3 h-3 text-violet-600" }),
-                btnType === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Copy, { className: "w-3 h-3 text-amber-600" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate max-w-[180px]", children: btnText })
+                btnType === "QUICK_REPLY" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.MessageSquare, { className: "w-3 h-3 text-emerald-600" }),
+                btnType === "URL" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.ExternalLink, { className: "w-3 h-3 text-sky-600" }),
+                btnType === "PHONE_NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Phone, { className: "w-3 h-3 text-violet-600" }),
+                btnType === "COPY_CODE" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Copy, { className: "w-3 h-3 text-amber-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate max-w-[180px]", children: btnText })
               ]
             },
             idx
@@ -13464,9 +13710,9 @@ function TemplateSelectionBlock({
         const docFilename = resolveDocumentFilename(templateHeaderComp, headerMediaUrl);
         const hasValidMedia = Boolean(headerMediaUrl && headerMediaUrl.trim() && headerMediaUrl.startsWith("http"));
         const uploadButtonLabel = headerFormat === "DOCUMENT" ? "\u05D4\u05E2\u05DC\u05D4 \u05DE\u05E1\u05DE\u05DA" : headerFormat === "IMAGE" ? "\u05D4\u05E2\u05DC\u05D4 \u05EA\u05DE\u05D5\u05E0\u05D4" : "\u05D4\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5";
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-2.5 bg-slate-50 border border-slate-200/90 rounded-xl flex items-center justify-between gap-3 shrink-0 shadow-2xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-2.5 overflow-hidden", children: headerFormat === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-8 h-8 rounded-lg overflow-hidden border border-slate-200 shrink-0 bg-slate-100 flex items-center justify-center", children: hasValidMedia ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-2.5 bg-slate-50 border border-slate-200/90 rounded-xl flex items-center justify-between gap-3 shrink-0 shadow-2xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-2.5 overflow-hidden", children: headerFormat === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-8 h-8 rounded-lg overflow-hidden border border-slate-200 shrink-0 bg-slate-100 flex items-center justify-center", children: hasValidMedia ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "img",
               {
                 src: headerMediaUrl,
@@ -13476,33 +13722,33 @@ function TemplateSelectionBlock({
                   e.currentTarget.style.display = "none";
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Image, { className: "w-4 h-4 text-amber-600" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-slate-400 block truncate", children: hasValidMedia ? "\u05E7\u05D5\u05D1\u05E5 \u05EA\u05DE\u05D5\u05E0\u05D4 \u05DE\u05E7\u05D5\u05E9\u05E8 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA" : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05EA\u05DE\u05D5\u05E0\u05D4" })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Image, { className: "w-4 h-4 text-amber-600" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-slate-400 block truncate", children: hasValidMedia ? "\u05E7\u05D5\u05D1\u05E5 \u05EA\u05DE\u05D5\u05E0\u05D4 \u05DE\u05E7\u05D5\u05E9\u05E8 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA" : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05EA\u05DE\u05D5\u05E0\u05D4" })
             ] })
-          ] }) : headerFormat === "DOCUMENT" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${hasValidMedia ? "bg-rose-50 text-rose-600 border-rose-100" : "bg-slate-100 text-slate-400 border-slate-200"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.FileText, { className: "w-4 h-4" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05DE\u05E1\u05DE\u05DA \u05DB\u05D5\u05EA\u05E8\u05EA (PDF)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-slate-500 font-mono block truncate", title: hasValidMedia ? docFilename : void 0, children: hasValidMedia ? docFilename : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05DE\u05E1\u05DE\u05DA" })
+          ] }) : headerFormat === "DOCUMENT" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${hasValidMedia ? "bg-rose-50 text-rose-600 border-rose-100" : "bg-slate-100 text-slate-400 border-slate-200"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.FileText, { className: "w-4 h-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05DE\u05E1\u05DE\u05DA \u05DB\u05D5\u05EA\u05E8\u05EA (PDF)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-slate-500 font-mono block truncate", title: hasValidMedia ? docFilename : void 0, children: hasValidMedia ? docFilename : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05DE\u05E1\u05DE\u05DA" })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${hasValidMedia ? "bg-indigo-50 text-indigo-600 border-indigo-100" : "bg-slate-100 text-slate-400 border-slate-200"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Video, { className: "w-4 h-4" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05E1\u05E8\u05D8\u05D5\u05DF \u05DB\u05D5\u05EA\u05E8\u05EA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-slate-400 block truncate", children: hasValidMedia ? "\u05E7\u05D5\u05D1\u05E5 \u05D5\u05D9\u05D3\u05D0\u05D5 \u05DE\u05E7\u05D5\u05E9\u05E8 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA" : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05D5\u05D9\u05D3\u05D0\u05D5" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${hasValidMedia ? "bg-indigo-50 text-indigo-600 border-indigo-100" : "bg-slate-100 text-slate-400 border-slate-200"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Video, { className: "w-4 h-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-bold text-slate-800 block truncate", children: "\u05E1\u05E8\u05D8\u05D5\u05DF \u05DB\u05D5\u05EA\u05E8\u05EA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-slate-400 block truncate", children: hasValidMedia ? "\u05E7\u05D5\u05D1\u05E5 \u05D5\u05D9\u05D3\u05D0\u05D5 \u05DE\u05E7\u05D5\u05E9\u05E8 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA" : "\u05D8\u05E8\u05DD \u05D4\u05D5\u05E2\u05DC\u05D4 \u05E7\u05D5\u05D1\u05E5 \u05D5\u05D9\u05D3\u05D0\u05D5" })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-            hasValidMedia ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-emerald-800 px-2 py-0.5 bg-emerald-50 border border-emerald-200 rounded-lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CheckCircle2, { className: "w-3 h-3 text-emerald-600" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+            hasValidMedia ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-emerald-800 px-2 py-0.5 bg-emerald-50 border border-emerald-200 rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.CheckCircle2, { className: "w-3 h-3 text-emerald-600" }),
               "\u05E7\u05D5\u05D1\u05E5 \u05DE\u05E6\u05D5\u05E8\u05E3 \u05EA\u05E7\u05D9\u05DF"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-semibold text-amber-800 px-2 py-0.5 bg-amber-50 border border-amber-200 rounded-lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.AlertCircle, { className: "w-3 h-3 text-amber-600 shrink-0" }),
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-semibold text-amber-800 px-2 py-0.5 bg-amber-50 border border-amber-200 rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.AlertCircle, { className: "w-3 h-3 text-amber-600 shrink-0" }),
               "\u05E0\u05D3\u05E8\u05E9 \u05E6\u05D9\u05E8\u05D5\u05E3 \u05E7\u05D5\u05D1\u05E5 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA \u05D6\u05D5"
             ] }),
-            hasValidMedia && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            hasValidMedia && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "a",
               {
                 href: headerMediaUrl,
@@ -13510,10 +13756,10 @@ function TemplateSelectionBlock({
                 rel: "noopener noreferrer",
                 title: "\u05EA\u05E6\u05D5\u05D2\u05D4 \u05DE\u05E7\u05D3\u05D9\u05DE\u05D4 \u05E9\u05DC \u05D4\u05E7\u05D5\u05D1\u05E5",
                 className: "p-1 text-slate-400 hover:text-emerald-700 hover:bg-slate-200/60 rounded-md transition-colors",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ExternalLink, { className: "w-3.5 h-3.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.ExternalLink, { className: "w-3.5 h-3.5" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "input",
               {
                 ref: fileInputRef,
@@ -13531,7 +13777,7 @@ function TemplateSelectionBlock({
                 disabled: isUploadingMedia
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 type: "button",
@@ -13542,39 +13788,39 @@ function TemplateSelectionBlock({
                 },
                 className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-lg transition-colors border shadow-2xs ${isUploadingMedia ? "bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed" : hasValidMedia ? "bg-white text-slate-700 hover:bg-slate-50 border-slate-200 hover:border-slate-300" : "bg-emerald-600 text-white hover:bg-emerald-700 border-emerald-600"}`,
                 title: hasValidMedia ? "\u05D4\u05D7\u05DC\u05E3 \u05E7\u05D5\u05D1\u05E5 \u05DE\u05D3\u05D9\u05D4 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA \u05D6\u05D5" : `${uploadButtonLabel} \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA \u05D6\u05D5`,
-                children: isUploadingMedia ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Loader2, { className: "w-3.5 h-3.5 animate-spin" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\u05DE\u05E2\u05DC\u05D4..." })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Upload, { className: "w-3.5 h-3.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hasValidMedia ? "\u05D4\u05D7\u05DC\u05E3 \u05E7\u05D5\u05D1\u05E5" : uploadButtonLabel })
+                children: isUploadingMedia ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Loader2, { className: "w-3.5 h-3.5 animate-spin" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05DE\u05E2\u05DC\u05D4..." })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Upload, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: hasValidMedia ? "\u05D4\u05D7\u05DC\u05E3 \u05E7\u05D5\u05D1\u05E5" : uploadButtonLabel })
                 ] })
               }
             )
           ] })
         ] });
       })(),
-      selectedTemplate && templateVariables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "shrink-0 flex flex-col gap-1.5 pt-2 border-t border-slate-200/80 pb-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-bold text-slate-700", children: "\u05DE\u05D9\u05E4\u05D5\u05D9 \u05DE\u05E9\u05EA\u05E0\u05D9\u05DD" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-[9px] font-semibold text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200", children: [
+      selectedTemplate && templateVariables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "shrink-0 flex flex-col gap-1.5 pt-2 border-t border-slate-200/80 pb-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[11px] font-bold text-slate-700", children: "\u05DE\u05D9\u05E4\u05D5\u05D9 \u05DE\u05E9\u05EA\u05E0\u05D9\u05DD" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-[9px] font-semibold text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200", children: [
             templateVariables.length,
             " \u05DE\u05E9\u05EA\u05E0\u05D9\u05DD"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-48 overflow-y-auto space-y-1.5 pr-0.5", children: templateVariables.map((varKey) => {
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-h-48 overflow-y-auto space-y-1.5 pr-0.5", children: templateVariables.map((varKey) => {
           var _a;
           const mapping = variableMapping[varKey] || { type: "column", value: "" };
           const isStatic = mapping.type === "static";
           const selectedColVal = textableColumnOptions.some((o) => o.id === mapping.value) ? mapping.value : ((_a = textableColumnOptions.find((o) => o.columnName === mapping.value)) == null ? void 0 : _a.id) || mapping.value || "";
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               className: "flex items-center gap-1.5 p-1 bg-white border border-slate-200 rounded-xl text-xs shrink-0",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "px-2 py-0.5 bg-emerald-50 text-emerald-800 font-mono font-bold text-[11px] rounded-lg border border-emerald-200/80 shrink-0", children: `{{${varKey}}}` }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "inline-flex items-center p-0.5 bg-slate-100 rounded-lg border border-slate-200/80 shrink-0 text-[10px] font-medium", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "px-2 py-0.5 bg-emerald-50 text-emerald-800 font-mono font-bold text-[11px] rounded-lg border border-emerald-200/80 shrink-0", children: `{{${varKey}}}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "inline-flex items-center p-0.5 bg-slate-100 rounded-lg border border-slate-200/80 shrink-0 text-[10px] font-medium", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
                       type: "button",
@@ -13583,7 +13829,7 @@ function TemplateSelectionBlock({
                       children: "\u05E2\u05DE\u05D5\u05D3\u05D4"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
                       type: "button",
@@ -13593,7 +13839,7 @@ function TemplateSelectionBlock({
                     }
                   )
                 ] }),
-                isStatic ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                isStatic ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "text",
@@ -13602,20 +13848,20 @@ function TemplateSelectionBlock({
                     placeholder: "\u05D4\u05D6\u05DF \u05E2\u05E8\u05DA \u05E7\u05D1\u05D5\u05E2 (\u05D7\u05D5\u05D1\u05D4)...",
                     className: `flex-1 min-w-0 h-7 px-2 text-[11px] rounded-lg border bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none transition-colors ${!mapping.value || mapping.value.trim() === "" ? "border-amber-300 focus:border-amber-500 focus:ring-1 focus:ring-amber-500/20" : "border-slate-200 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20"}`
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                     "select",
                     {
                       value: selectedColVal,
                       onChange: (e) => handleVariableValueChange(varKey, e.target.value),
                       className: "w-full h-7 pr-2.5 pl-6 text-[11px] rounded-lg border border-slate-200 bg-white text-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 cursor-pointer truncate appearance-none",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: "\u05D1\u05D7\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D4..." }),
-                        textableColumnOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: opt.id, children: opt.label }, opt.id))
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "", children: "\u05D1\u05D7\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D4..." }),
+                        textableColumnOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: opt.id, children: opt.label }, opt.id))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ChevronDown, { className: "w-3 h-3 text-slate-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" })
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.ChevronDown, { className: "w-3 h-3 text-slate-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" })
                 ] })
               ]
             },
@@ -13628,8 +13874,8 @@ function TemplateSelectionBlock({
 }
 
 // src/components/WhatsAppComponent/ui/DynamicFiltersBlock.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DynamicFiltersBlock({
   filterableColumns,
   filters,
@@ -13644,31 +13890,31 @@ function DynamicFiltersBlock({
   loadTableData,
   isLoadingTableData
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "col-span-12 lg:col-span-3 min-h-[26rem] h-full flex flex-col justify-between bg-slate-50/70 border border-slate-200 rounded-2xl p-3.5 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between pb-2 border-b border-slate-200/70 shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.Filter, { className: "w-4 h-4 text-emerald-600" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs font-bold text-slate-800", children: "\u05E1\u05D9\u05E0\u05D5\u05DF \u05D3\u05D9\u05E0\u05DE\u05D9" }),
-          activeFiltersCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 border border-emerald-200", children: activeFiltersCount })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "col-span-12 lg:col-span-3 min-h-[26rem] h-full flex flex-col justify-between bg-slate-50/70 border border-slate-200 rounded-2xl p-3.5 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between pb-2 border-b border-slate-200/70 shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.Filter, { className: "w-4 h-4 text-emerald-600" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs font-bold text-slate-800", children: "\u05E1\u05D9\u05E0\u05D5\u05DF \u05D3\u05D9\u05E0\u05DE\u05D9" }),
+          activeFiltersCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 border border-emerald-200", children: activeFiltersCount })
         ] }),
-        activeFiltersCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        activeFiltersCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "button",
           {
             type: "button",
             onClick: handleClearFilters,
             className: "text-[11px] text-rose-600 hover:text-rose-700 font-semibold hover:underline flex items-center gap-1 cursor-pointer",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.X, { className: "w-3 h-3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05E0\u05E7\u05D4" })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.X, { className: "w-3 h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "\u05E0\u05E7\u05D4" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "py-1", children: filterableColumns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center justify-center text-center p-4 text-xs text-slate-400 gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E9\u05D3\u05D5\u05EA \u05DC\u05E1\u05D9\u05E0\u05D5\u05DF \u05D1\u05D8\u05D1\u05DC\u05D4 \u05D6\u05D5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-slate-400", children: "\u05E9\u05D3\u05D5\u05EA \u05DE\u05E1\u05D5\u05D2 \u05E7\u05E9\u05E8 \u05D5\u05D1\u05D5\u05DC\u05D9\u05D0\u05E0\u05D9 \u05D1\u05DC\u05D1\u05D3" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2", children: filterableColumns.map((col) => {
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "py-1", children: filterableColumns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center justify-center text-center p-4 text-xs text-slate-400 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E9\u05D3\u05D5\u05EA \u05DC\u05E1\u05D9\u05E0\u05D5\u05DF \u05D1\u05D8\u05D1\u05DC\u05D4 \u05D6\u05D5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-slate-400", children: "\u05E9\u05D3\u05D5\u05EA \u05DE\u05E1\u05D5\u05D2 \u05E7\u05E9\u05E8 \u05D5\u05D1\u05D5\u05DC\u05D9\u05D0\u05E0\u05D9 \u05D1\u05DC\u05D1\u05D3" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2", children: filterableColumns.map((col) => {
         var _a, _b, _c;
         const colType = (_a = col.type) == null ? void 0 : _a.toUpperCase();
         const isBoolean = colType === "BOOLEAN";
@@ -13676,9 +13922,9 @@ function DynamicFiltersBlock({
         const isActive = Boolean(currentValue);
         const refTableId = ((_b = col == null ? void 0 : col.config) == null ? void 0 : _b.referencedTableId) || (col == null ? void 0 : col.referencedTableId);
         const options = ((_c = getRelationOptionsForCol ? getRelationOptionsForCol(col.name) : []) == null ? void 0 : _c.length) > 0 ? getRelationOptionsForCol(col.name) : relationOptions[col.name] && relationOptions[col.name].length > 0 ? relationOptions[col.name] : refTableId && relationOptions[refTableId] && relationOptions[refTableId].length > 0 ? relationOptions[refTableId] : col.id && relationOptions[col.id] && relationOptions[col.id].length > 0 ? relationOptions[col.id] : [];
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "label",
               {
                 className: "text-[11px] font-semibold text-slate-700 truncate max-w-[130px]",
@@ -13686,49 +13932,49 @@ function DynamicFiltersBlock({
                 children: col.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[9px] text-slate-400 font-mono", children: isBoolean ? "\u05DB\u05DF/\u05DC\u05D0" : "\u05E7\u05E9\u05E8" })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[9px] text-slate-400 font-mono", children: isBoolean ? "\u05DB\u05DF/\u05DC\u05D0" : "\u05E7\u05E9\u05E8" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "select",
               {
                 value: currentValue,
                 onChange: (e) => handleFilterChange(col.name, e.target.value),
                 className: `w-full h-8 px-2 pr-2.5 pl-6 text-[11px] rounded-lg border transition-all appearance-none bg-white cursor-pointer truncate ${isActive ? "border-emerald-500 bg-emerald-50/20 text-emerald-900 font-medium ring-1 ring-emerald-500/20" : "border-slate-200 text-slate-700 hover:border-slate-300 focus:border-emerald-500"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
-                  isBoolean ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "true", children: "\u05DB\u05DF" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "false", children: "\u05DC\u05D0" })
-                  ] }) : options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: opt.id || opt._id, children: getRelationOptionLabel(opt, col, relationOptions) }, opt.id || opt._id))
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
+                  isBoolean ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "true", children: "\u05DB\u05DF" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "false", children: "\u05DC\u05D0" })
+                  ] }) : options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: opt.id || opt._id, children: getRelationOptionLabel(opt, col, relationOptions) }, opt.id || opt._id))
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.ChevronDown, { className: "w-3 h-3 text-slate-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.ChevronDown, { className: "w-3 h-3 text-slate-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" })
           ] })
         ] }, col.name);
       }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "pt-2.5 mt-2 border-t border-slate-200/80 flex items-center justify-between gap-1.5 shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "pt-2.5 mt-2 border-t border-slate-200/80 flex items-center justify-between gap-1.5 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-lg text-[11px] font-semibold border transition-all ${selectedRowIds.length > 0 ? "bg-emerald-50 text-emerald-800 border-emerald-200 shadow-2xs" : "bg-white text-slate-600 border-slate-200"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_lucide_react12.CheckSquare,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_lucide_react13.CheckSquare,
               {
                 className: `w-3 h-3 ${selectedRowIds.length > 0 ? "text-emerald-600" : "text-slate-400"}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
               "\u05E0\u05D1\u05D7\u05E8\u05D5 ",
               selectedRowIds.length
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -13736,8 +13982,8 @@ function DynamicFiltersBlock({
           disabled: isLoadingTableData,
           className: "p-1.5 text-slate-500 hover:text-slate-800 bg-white hover:bg-slate-100 border border-slate-200 rounded-lg transition-colors cursor-pointer disabled:opacity-50 shrink-0",
           title: "\u05E8\u05E2\u05E0\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9 \u05D8\u05D1\u05DC\u05D4",
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_lucide_react12.RefreshCw,
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_lucide_react13.RefreshCw,
             {
               className: `w-3.5 h-3.5 ${isLoadingTableData ? "animate-spin text-emerald-600" : ""}`
             }
@@ -13748,85 +13994,6 @@ function DynamicFiltersBlock({
   ] });
 }
 
-// src/components/WhatsAppComponent/ui/WhatsAppRelationButtons.tsx
-var import_react23 = require("react");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var isRawObjectId3 = (s) => /^[0-9a-fA-F]{24}$/.test(s);
-function recordMatches(record, colDef, filterVal) {
-  var _a;
-  if (!colDef) return true;
-  const cell = ((record == null ? void 0 : record.data) || {})[colDef.name];
-  const type = (_a = colDef.type) == null ? void 0 : _a.toUpperCase();
-  if (type === "BOOLEAN") {
-    const isTrue = cell === true || cell === "true" || cell === 1;
-    return isTrue === (filterVal === "true");
-  }
-  if (type === "RELATION") {
-    return normalizeRelationValue(cell).includes(filterVal);
-  }
-  return true;
-}
-function WhatsAppRelationButtons({
-  columnNames,
-  tableColumns: tableColumns2,
-  records,
-  filters,
-  onFilterChange,
-  relationOptions,
-  getRelationOptionsForCol
-}) {
-  const groups = (0, import_react23.useMemo)(() => {
-    var _a, _b;
-    const activeEntries = Object.entries(filters).filter(([, v]) => v !== void 0 && v !== null && v !== "");
-    const result = [];
-    for (const colName of columnNames || []) {
-      const colDef = (tableColumns2 || []).find((c) => c.name === colName);
-      if (!colDef || ((_a = colDef.type) == null ? void 0 : _a.toUpperCase()) !== "RELATION") continue;
-      const otherEntries = activeEntries.filter(([name]) => name !== colName);
-      const base = otherEntries.length === 0 ? records : records.filter(
-        (rec) => otherEntries.every(
-          ([name, val]) => recordMatches(rec, (tableColumns2 || []).find((c) => c.name === name), val)
-        )
-      );
-      const counts = /* @__PURE__ */ new Map();
-      for (const rec of base) {
-        const ids = new Set(normalizeRelationValue(((rec == null ? void 0 : rec.data) || {})[colName]));
-        ids.forEach((id) => counts.set(id, (counts.get(id) || 0) + 1));
-      }
-      const optionList = ((_b = getRelationOptionsForCol ? getRelationOptionsForCol(colName) : []) == null ? void 0 : _b.length) > 0 ? getRelationOptionsForCol(colName) : relationOptions[colName] || [];
-      const activeId = filters[colName] ? String(filters[colName]) : null;
-      const seen = /* @__PURE__ */ new Set();
-      const options = [];
-      for (const opt of optionList) {
-        const id = String((opt == null ? void 0 : opt.id) || (opt == null ? void 0 : opt._id) || "");
-        if (!id || seen.has(id)) continue;
-        const count = counts.get(id) || 0;
-        if (count === 0 && id !== activeId) continue;
-        seen.add(id);
-        options.push({ id, label: getRelationOptionLabel(opt, colDef, relationOptions), count });
-      }
-      counts.forEach((count, id) => {
-        if (seen.has(id)) return;
-        const label = getRelationOptionLabel(id, colDef, relationOptions);
-        if (!label || isRawObjectId3(label)) return;
-        seen.add(id);
-        options.push({ id, label, count });
-      });
-      result.push({ key: colName, title: colName, options, activeId });
-    }
-    return result;
-  }, [columnNames, tableColumns2, records, filters, relationOptions, getRelationOptionsForCol]);
-  if (!columnNames || columnNames.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative min-h-[12rem] 2xl:min-h-0", "data-testid": "whatsapp-relation-buttons", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "2xl:absolute 2xl:inset-0 flex flex-col bg-slate-50/70 border border-slate-200 rounded-2xl p-3.5 gap-2 overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-slate-200/70 shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.Zap, { className: "w-4 h-4 text-emerald-600" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs font-bold text-slate-800", children: "\u05E1\u05D9\u05E0\u05D5\u05DF \u05DE\u05D4\u05D9\u05E8" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto max-h-[22rem] 2xl:max-h-none pr-0.5", children: groups.every((g) => g.options.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "p-4 text-center text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E2\u05E8\u05DB\u05D9\u05DD \u05DC\u05D4\u05E6\u05D2\u05D4 \u05D1\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05E9\u05E0\u05D1\u05D7\u05E8\u05D5" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RelationButtonsView, { groups, stacked: true, onSelect: (col, id) => onFilterChange(col, id || "") }) })
-  ] }) });
-}
-
 // src/components/WhatsAppComponent/ui/SettingsAndActionsBlock.tsx
 var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -14569,13 +14736,6 @@ function WhatsAppComponent(props) {
   const { className = "", settings, orgId, componentId, executeAction } = props;
   const state = useWhatsAppState(props);
   const [activeTab, setActiveTab] = import_react26.default.useState("broadcast");
-  const relationButtonColumns = (Array.isArray(settings == null ? void 0 : settings.relationButtonColumns) ? settings.relationButtonColumns : []).filter(
-    (name) => (state.tableColumns || []).some((c) => {
-      var _a2;
-      return c.name === name && ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION";
-    })
-  );
-  const hasRelationButtons = relationButtonColumns.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
@@ -14683,111 +14843,97 @@ function WhatsAppComponent(props) {
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "p-4 flex flex-col gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `grid grid-cols-1 gap-4 shrink-0 items-stretch ${hasRelationButtons ? "2xl:grid-cols-2" : ""}`, children: [
-              hasRelationButtons && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                WhatsAppRelationButtons,
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 shrink-0 items-stretch", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                TemplateSelectionBlock,
+                {
+                  selectedTemplate: state.selectedTemplate,
+                  selectedTemplateId: state.selectedTemplateId,
+                  setSelectedTemplateId: state.setSelectedTemplateId,
+                  templates: state.templates,
+                  isLoadingTemplates: state.isLoadingTemplates,
+                  isDropdownOpen: state.isDropdownOpen,
+                  setIsDropdownOpen: state.setIsDropdownOpen,
+                  templateBodyText: state.templateBodyText,
+                  templateHeaderComp: state.templateHeaderComp,
+                  headerMediaUrl: state.headerMediaUrl,
+                  handleHeaderMediaUrlChange: state.handleHeaderMediaUrlChange,
+                  handleResetHeaderMediaUrl: state.handleResetHeaderMediaUrl,
+                  templateVariables: state.templateVariables,
+                  variableMapping: state.variableMapping,
+                  handleVariableTypeChange: state.handleVariableTypeChange,
+                  handleVariableValueChange: state.handleVariableValueChange,
+                  textableColumnOptions: state.textableColumnOptions,
+                  handleDeleteTemplate: state.handleDeleteTemplate,
+                  isDeleting: state.isDeleting,
+                  setIsModalOpen: state.setIsModalOpen,
+                  setFeedback: state.setFeedback,
+                  isUploadingMedia: state.isUploadingMedia,
+                  handleFileUpload: state.handleFileUpload
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                DynamicFiltersBlock,
                 {
-                  columnNames: relationButtonColumns,
-                  tableColumns: state.tableColumns,
-                  records: state.rawRecords,
+                  filterableColumns: state.filterableColumns,
                   filters: state.filters,
-                  onFilterChange: state.handleFilterChange,
+                  handleFilterChange: state.handleFilterChange,
+                  handleClearFilters: state.handleClearFilters,
+                  activeFiltersCount: state.activeFiltersCount,
                   relationOptions: state.relationOptions,
-                  getRelationOptionsForCol: state.getRelationOptionsForCol
+                  getRelationOptionsForCol: state.getRelationOptionsForCol,
+                  selectedRowIds: state.selectedRowIds,
+                  filteredRecordsCount: state.filteredRecords.length,
+                  rawRecordsCount: state.rawRecords.length,
+                  loadTableData: state.loadTableData,
+                  isLoadingTableData: state.isLoadingTableData
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 items-stretch", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  TemplateSelectionBlock,
-                  {
-                    selectedTemplate: state.selectedTemplate,
-                    selectedTemplateId: state.selectedTemplateId,
-                    setSelectedTemplateId: state.setSelectedTemplateId,
-                    templates: state.templates,
-                    isLoadingTemplates: state.isLoadingTemplates,
-                    isDropdownOpen: state.isDropdownOpen,
-                    setIsDropdownOpen: state.setIsDropdownOpen,
-                    templateBodyText: state.templateBodyText,
-                    templateHeaderComp: state.templateHeaderComp,
-                    headerMediaUrl: state.headerMediaUrl,
-                    handleHeaderMediaUrlChange: state.handleHeaderMediaUrlChange,
-                    handleResetHeaderMediaUrl: state.handleResetHeaderMediaUrl,
-                    templateVariables: state.templateVariables,
-                    variableMapping: state.variableMapping,
-                    handleVariableTypeChange: state.handleVariableTypeChange,
-                    handleVariableValueChange: state.handleVariableValueChange,
-                    textableColumnOptions: state.textableColumnOptions,
-                    handleDeleteTemplate: state.handleDeleteTemplate,
-                    isDeleting: state.isDeleting,
-                    setIsModalOpen: state.setIsModalOpen,
-                    setFeedback: state.setFeedback,
-                    isUploadingMedia: state.isUploadingMedia,
-                    handleFileUpload: state.handleFileUpload
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  DynamicFiltersBlock,
-                  {
-                    filterableColumns: state.filterableColumns,
-                    filters: state.filters,
-                    handleFilterChange: state.handleFilterChange,
-                    handleClearFilters: state.handleClearFilters,
-                    activeFiltersCount: state.activeFiltersCount,
-                    relationOptions: state.relationOptions,
-                    getRelationOptionsForCol: state.getRelationOptionsForCol,
-                    selectedRowIds: state.selectedRowIds,
-                    filteredRecordsCount: state.filteredRecords.length,
-                    rawRecordsCount: state.rawRecords.length,
-                    loadTableData: state.loadTableData,
-                    isLoadingTableData: state.isLoadingTableData
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  SettingsAndActionsBlock,
-                  {
-                    isScanningPhoneColumns: state.isScanningPhoneColumns,
-                    targetPhoneOptions: state.targetPhoneOptions,
-                    phoneColumnId: state.phoneColumnId,
-                    setPhoneColumnId: state.setPhoneColumnId,
-                    selectedPhoneOption: state.selectedPhoneOption,
-                    autoSelectCount: state.autoSelectCount,
-                    setAutoSelectCount: state.setAutoSelectCount,
-                    subtableFilterColumn: state.subtableFilterColumn,
-                    setSubtableFilterColumn: state.setSubtableFilterColumn,
-                    subtableFilterValue: state.subtableFilterValue,
-                    setSubtableFilterValue: state.setSubtableFilterValue,
-                    subtableSendLimit: state.subtableSendLimit,
-                    setSubtableSendLimit: state.setSubtableSendLimit,
-                    subtableFilterableColumns: state.subtableFilterableColumns,
-                    selectedSubtableFilterCol: state.selectedSubtableFilterCol,
-                    getRelationOptionsForCol: state.getRelationOptionsForCol,
-                    relationOptions: state.relationOptions,
-                    enablePostSendAction: state.enablePostSendAction,
-                    setEnablePostSendAction: state.setEnablePostSendAction,
-                    postSendActionColumn: state.postSendActionColumn,
-                    setPostSendActionColumn: state.setPostSendActionColumn,
-                    postSendActionValue: state.postSendActionValue,
-                    setPostSendActionValue: state.setPostSendActionValue,
-                    postSendActionTargetType: state.postSendActionTargetType,
-                    setPostSendActionTargetType: state.setPostSendActionTargetType,
-                    postSendActionTargetOptions: state.postSendActionTargetOptions,
-                    selectedPostSendOption: state.selectedPostSendCol,
-                    isTestDisabled: state.isTestDisabled,
-                    testButtonTitle: state.testButtonTitle,
-                    setIsTestPromptOpen: state.setIsTestPromptOpen,
-                    isSendDisabled: state.isSendDisabled,
-                    sendButtonTitle: state.sendButtonTitle,
-                    handleSendMessages: state.handleSendMessages,
-                    selectedRowIdsCount: state.selectedRowIds.length,
-                    finalRecipientCount: state.finalRecipientCount,
-                    validMainRowsCount: state.validMainRowsCount,
-                    isSendingBroadcast: state.isSendingBroadcast,
-                    broadcastProgress: state.broadcastProgress,
-                    broadcastSummary: state.broadcastSummary,
-                    clearBroadcastSummary: state.clearBroadcastSummary
-                  }
-                )
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                SettingsAndActionsBlock,
+                {
+                  isScanningPhoneColumns: state.isScanningPhoneColumns,
+                  targetPhoneOptions: state.targetPhoneOptions,
+                  phoneColumnId: state.phoneColumnId,
+                  setPhoneColumnId: state.setPhoneColumnId,
+                  selectedPhoneOption: state.selectedPhoneOption,
+                  autoSelectCount: state.autoSelectCount,
+                  setAutoSelectCount: state.setAutoSelectCount,
+                  subtableFilterColumn: state.subtableFilterColumn,
+                  setSubtableFilterColumn: state.setSubtableFilterColumn,
+                  subtableFilterValue: state.subtableFilterValue,
+                  setSubtableFilterValue: state.setSubtableFilterValue,
+                  subtableSendLimit: state.subtableSendLimit,
+                  setSubtableSendLimit: state.setSubtableSendLimit,
+                  subtableFilterableColumns: state.subtableFilterableColumns,
+                  selectedSubtableFilterCol: state.selectedSubtableFilterCol,
+                  getRelationOptionsForCol: state.getRelationOptionsForCol,
+                  relationOptions: state.relationOptions,
+                  enablePostSendAction: state.enablePostSendAction,
+                  setEnablePostSendAction: state.setEnablePostSendAction,
+                  postSendActionColumn: state.postSendActionColumn,
+                  setPostSendActionColumn: state.setPostSendActionColumn,
+                  postSendActionValue: state.postSendActionValue,
+                  setPostSendActionValue: state.setPostSendActionValue,
+                  postSendActionTargetType: state.postSendActionTargetType,
+                  setPostSendActionTargetType: state.setPostSendActionTargetType,
+                  postSendActionTargetOptions: state.postSendActionTargetOptions,
+                  selectedPostSendOption: state.selectedPostSendCol,
+                  isTestDisabled: state.isTestDisabled,
+                  testButtonTitle: state.testButtonTitle,
+                  setIsTestPromptOpen: state.setIsTestPromptOpen,
+                  isSendDisabled: state.isSendDisabled,
+                  sendButtonTitle: state.sendButtonTitle,
+                  handleSendMessages: state.handleSendMessages,
+                  selectedRowIdsCount: state.selectedRowIds.length,
+                  finalRecipientCount: state.finalRecipientCount,
+                  validMainRowsCount: state.validMainRowsCount,
+                  isSendingBroadcast: state.isSendingBroadcast,
+                  broadcastProgress: state.broadcastProgress,
+                  broadcastSummary: state.broadcastSummary,
+                  clearBroadcastSummary: state.clearBroadcastSummary
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full h-[calc(100vh-420px)] min-h-[320px] overflow-hidden border border-slate-200 rounded-2xl shadow-xs bg-white flex flex-col", children: state.isLoadingTableData && state.rawRecords.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex flex-col items-center justify-center p-12 text-center text-xs text-slate-400 gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react17.Loader2, { className: "w-6 h-6 animate-spin text-emerald-600" }),
@@ -14813,8 +14959,7 @@ function WhatsAppComponent(props) {
                 orgId,
                 componentId: `${componentId || "whatsapp"}-embedded-table`,
                 className: "h-full flex-1 border-0 rounded-2xl shadow-none",
-                rowStatusMap: state.rowStatusMap,
-                hideRelationButtons: true
+                rowStatusMap: state.rowStatusMap
               }
             ) })
           ] }),