@proveanything/smartlinks-utils-ui 0.1.0

package/dist/chunk-IVUFK6SS.js

@@ -0,0 +1,780 @@
+import { cn } from './chunk-L7FQ52F5.js';
+import { useState, useCallback } from 'react';
+import { GitBranch, Plus, Filter, ChevronRight, X, RefreshCw, Trash2, ChevronDown, ToggleLeft, Package, MapPin, Tag, Monitor, Calendar, User, Hash, Globe, Tags } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var CONDITION_TYPES = [
+  { value: "version", title: "Version", description: "Match specific versions", icon: "tags", color: "#7c3aed", helpText: "Limit by specific versions of your application or product." },
+  { value: "country", title: "Country", description: "Filter by geographic location", icon: "globe", color: "#2563eb", helpText: "Limit by the user's country or region." },
+  { value: "value", title: "Value", description: "Match custom field values", icon: "hash", color: "#ea580c", helpText: "Compare text, numbers, or boolean values using various operators." },
+  { value: "user", title: "User", description: "Filter by auth & permissions", icon: "user", color: "#16a34a", helpText: "Limit by authentication status, ownership, group membership, or admin privileges." },
+  { value: "date", title: "Date", description: "Time-based conditions", icon: "calendar", color: "#dc2626", helpText: "Limit by specific dates or date ranges." },
+  { value: "device", title: "Device", description: "Filter by device type", icon: "monitor", color: "#0891b2", helpText: "Limit by the type of device or operating system." },
+  { value: "tag", title: "Label", description: "Match by tags or labels", icon: "tag", color: "#db2777", helpText: "Limit by assigned labels or tags." },
+  { value: "geofence", title: "Geofence", description: "Geographic boundary", icon: "map-pin", color: "#0d9488", helpText: "Limit by geographic boundaries (rectangular area)." },
+  { value: "product", title: "Product ID", description: "Match specific items", icon: "package", color: "#d97706", helpText: "Limit by specific product IDs." },
+  { value: "itemStatus", title: "Item Status", description: "Filter by item state", icon: "toggle-left", color: "#ea580c", helpText: "Limit by item status such as proof, claimable, owner, or virtual." },
+  { value: "condition", title: "Condition", description: "Reference another condition", icon: "git-branch", color: "#4f46e5", helpText: "Reference another saved condition and check if it passes or fails." }
+];
+var iconMap = {
+  tags: Tags,
+  globe: Globe,
+  hash: Hash,
+  user: User,
+  calendar: Calendar,
+  monitor: Monitor,
+  tag: Tag,
+  "map-pin": MapPin,
+  package: Package,
+  "toggle-left": ToggleLeft,
+  "git-branch": GitBranch
+};
+function getConditionMeta(type) {
+  if (!type) return void 0;
+  return CONDITION_TYPES.find((t) => t.value === type);
+}
+function getConditionIcon(type) {
+  const meta = getConditionMeta(type);
+  return meta && iconMap[meta.icon] || Hash;
+}
+function getConditionSummary(cond, options) {
+  if (!cond.type) return "No condition type selected";
+  const meta = getConditionMeta(cond.type);
+  let summary = meta?.title || cond.type;
+  switch (cond.type) {
+    case "version":
+      if (cond.versions?.length) {
+        const verb = cond.contains ? "is" : "is not";
+        summary += ` ${verb} ${cond.versions.map((v) => typeof v === "string" ? v : v.title || v.value || "").join(", ")}`;
+      }
+      break;
+    case "country":
+      if (cond.useRegions && cond.regions?.length) {
+        const verb = cond.contains ? "is in" : "is not in";
+        const names = cond.regions.map((r) => {
+          const reg = REGION_OPTIONS.find((o) => o.value === r);
+          return reg?.title || r;
+        });
+        summary += ` ${verb} ${names.join(", ")}`;
+      } else if (cond.countries?.length) {
+        const verb = cond.contains ? "is" : "is not";
+        summary += ` ${verb} ${cond.countries.join(", ")}`;
+      }
+      break;
+    case "value":
+      if (cond.field) {
+        const ops = { equal: "=", not: "\u2260", greater: ">", less: "<" };
+        summary += `: ${cond.field} ${ops[cond.validationType || ""] || ""} ${cond.value ?? "?"}`;
+      }
+      break;
+    case "tag":
+      if (cond.tags?.length) {
+        const verb = cond.contains ? "has" : "does not have";
+        summary += ` ${verb} ${cond.tags.length} label(s)`;
+      }
+      break;
+    case "device":
+      if (cond.displays?.length) {
+        const verb = cond.contains ? "is" : "is not";
+        summary += ` ${verb} ${cond.displays.join(", ")}`;
+      }
+      break;
+    case "user": {
+      const userTypes = {
+        valid: "is logged in",
+        invalid: "is logged out",
+        owner: "is item owner",
+        group: cond.groupIds?.length ? `in ${cond.groupIds.length} group(s)` : "in groups",
+        admin: "is admin"
+      };
+      summary += ` ${userTypes[cond.userType || ""] || ""}`;
+      break;
+    }
+    case "product":
+      if (cond.productIds?.length) {
+        const verb = cond.contains ? "is" : "is not";
+        summary += ` ${verb} ${cond.productIds.length} item(s)`;
+      }
+      break;
+    case "condition":
+      if (cond.conditionId) {
+        const condRef = options?.savedConditions?.find((c) => c.value === cond.conditionId);
+        summary += `: ${condRef?.title || cond.conditionId} ${cond.passes ? "passes" : "fails"}`;
+      }
+      break;
+    case "date": {
+      const dateTests = { before: "before", after: "after", between: "between" };
+      summary += ` is ${dateTests[cond.dateTest || ""] || ""}`;
+      if (cond.beforeDate) summary += ` ${cond.beforeDate}`;
+      if (cond.afterDate) summary += ` ${cond.afterDate}`;
+      if (cond.rangeDate) summary += ` ${cond.rangeDate}`;
+      break;
+    }
+    case "geofence": {
+      const verb = cond.contains ? "inside" : "outside";
+      summary += ` ${verb} bounds`;
+      break;
+    }
+    case "itemStatus": {
+      const statusTypes = {
+        hasProof: "has proof",
+        noProof: "has no proof",
+        isClaimable: "is claimable",
+        notClaimable: "is not claimable",
+        hasOwner: "has owner",
+        isVirtual: "is virtual"
+      };
+      summary += ` ${statusTypes[cond.statusType || ""] || ""}`;
+      break;
+    }
+  }
+  return summary;
+}
+var DISPLAY_OPTIONS = [
+  { title: "Desktop", value: "desktop" },
+  { title: "Mobile", value: "mobile" },
+  { title: "Android", value: "android" },
+  { title: "iOS", value: "ios" },
+  { title: "Apple Mac", value: "mac" },
+  { title: "Microsoft Windows", value: "win" }
+];
+var REGION_OPTIONS = [
+  { title: "European Union (EU)", value: "eu", description: "All 27 EU member states" },
+  { title: "European Economic Area (EEA)", value: "eea", description: "EU + Iceland, Liechtenstein, Norway" },
+  { title: "United Kingdom", value: "uk", description: "England, Scotland, Wales, Northern Ireland" },
+  { title: "North America", value: "northamerica", description: "USA, Canada, Mexico" },
+  { title: "Asia Pacific", value: "asiapacific", description: "Major Asia-Pacific markets" }
+];
+var USER_TYPE_OPTIONS = [
+  { title: "Is Logged In", value: "valid" },
+  { title: "Is Logged Out", value: "invalid" },
+  { title: "Is Item Owner", value: "owner" },
+  { title: "Is Group Member", value: "group" },
+  { title: "Is Admin", value: "admin" }
+];
+var ITEM_STATUS_OPTIONS = [
+  { title: "Is Product (Not Item)", value: "hasProof" },
+  { title: "Is Single Item", value: "noProof" },
+  { title: "Is Item & Claimable", value: "isClaimable" },
+  { title: "Is Item & Claimed", value: "notClaimable" },
+  { title: "Is Virtual Item", value: "isVirtual" },
+  { title: "Is Not A Virtual Item", value: "notVirtual" }
+];
+var VALUE_OPERATORS = [
+  { title: "Equal to", value: "equal" },
+  { title: "Not Equal", value: "not" },
+  { title: "Greater Than", value: "greater" },
+  { title: "Less Than", value: "less" }
+];
+var FIELD_TYPES = [
+  { title: "Boolean", value: "boolean" },
+  { title: "Integer", value: "integer" },
+  { title: "Text", value: "text" }
+];
+var ConditionTypePicker = ({ onSelect }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-3", children: "Choose a condition type:" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: CONDITION_TYPES.map((ct) => {
+      const Icon = getConditionIcon(ct.value);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onSelect(ct.value),
+          className: cn(
+            "flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-200 dark:border-gray-700",
+            "hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50/50 dark:hover:bg-blue-950/20",
+            "transition-all text-center cursor-pointer"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-8 h-8 rounded-full flex items-center justify-center",
+                style: { backgroundColor: `${ct.color}18`, color: ct.color },
+                children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-gray-700 dark:text-gray-300", children: ct.title })
+          ]
+        },
+        ct.value
+      );
+    }) })
+  ] });
+};
+var ContainsToggle = ({ value = true, onChange, trueLabel = "Is One Of", falseLabel = "Is Not One Of", disabled }) => /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5 w-fit", children: [{ v: true, label: trueLabel }, { v: false, label: falseLabel }].map((opt) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    onClick: () => onChange(opt.v),
+    disabled,
+    className: cn(
+      "px-2.5 py-1 text-xs font-medium rounded transition-colors",
+      value === opt.v ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+    ),
+    children: opt.label
+  },
+  String(opt.v)
+)) });
+var ChipSelect = ({ options, selected, onChange, disabled }) => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((opt) => {
+  const isSelected = selected.includes(opt.value);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => {
+        if (disabled) return;
+        onChange(isSelected ? selected.filter((v) => v !== opt.value) : [...selected, opt.value]);
+      },
+      disabled,
+      title: opt.description,
+      className: cn(
+        "px-2.5 py-1 text-xs rounded-full border transition-colors",
+        isSelected ? "bg-blue-100 dark:bg-blue-900/40 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300" : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600"
+      ),
+      children: opt.title
+    },
+    opt.value
+  );
+}) });
+var inputClass = "w-full px-2.5 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500";
+var ConditionConfig = ({
+  condition: cond,
+  onChange,
+  editorProps,
+  readOnly
+}) => {
+  const update = (patch) => onChange({ ...cond, ...patch });
+  switch (cond.type) {
+    // ─── VERSION ──────────────────────────────────
+    case "version":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
+        editorProps.versions?.length ? /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: editorProps.versions.map((v) => ({ title: v.title, value: v.value || "" })),
+            selected: (cond.versions || []).map((v) => typeof v === "string" ? v : v.value || ""),
+            onChange: (vals) => update({ versions: vals.map((v) => ({ value: v, title: editorProps.versions?.find((o) => o.value === v)?.title || v })) }),
+            disabled: readOnly
+          }
+        ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic", children: "No versions available" })
+      ] });
+    // ─── COUNTRY ──────────────────────────────────
+    case "country":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Use regions" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => update({ useRegions: !cond.useRegions }),
+              disabled: readOnly,
+              className: cn(
+                "w-8 h-5 rounded-full transition-colors relative",
+                cond.useRegions ? "bg-blue-500" : "bg-gray-300 dark:bg-gray-600"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: cn(
+                "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform",
+                cond.useRegions ? "translate-x-3.5" : "translate-x-0.5"
+              ) })
+            }
+          )
+        ] }),
+        cond.useRegions ? /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: REGION_OPTIONS,
+            selected: cond.regions || [],
+            onChange: (vals) => update({ regions: vals }),
+            disabled: readOnly
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            value: (cond.countries || []).join(", "),
+            onChange: (e) => update({ countries: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }),
+            placeholder: "US, GB, DE, \u2026",
+            disabled: readOnly
+          }
+        )
+      ] });
+    // ─── VALUE ────────────────────────────────────
+    case "value":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Field Name" }),
+            /* @__PURE__ */ jsx("input", { className: inputClass, value: cond.field || "", onChange: (e) => update({ field: e.target.value }), placeholder: "field_name", disabled: readOnly })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Field Type" }),
+            /* @__PURE__ */ jsx("select", { className: inputClass, value: cond.fieldType || "text", onChange: (e) => update({ fieldType: e.target.value }), disabled: readOnly, children: FIELD_TYPES.map((ft) => /* @__PURE__ */ jsx("option", { value: ft.value, children: ft.title }, ft.value)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Operator" }),
+            /* @__PURE__ */ jsx("select", { className: inputClass, value: cond.validationType || "equal", onChange: (e) => update({ validationType: e.target.value }), disabled: readOnly, children: VALUE_OPERATORS.map((op) => /* @__PURE__ */ jsx("option", { value: op.value, children: op.title }, op.value)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Value" }),
+            /* @__PURE__ */ jsx("input", { className: inputClass, value: String(cond.value ?? ""), onChange: (e) => update({ value: e.target.value }), placeholder: "value", disabled: readOnly })
+          ] })
+        ] })
+      ] });
+    // ─── USER ─────────────────────────────────────
+    case "user":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: USER_TYPE_OPTIONS,
+            selected: cond.userType ? [cond.userType] : [],
+            onChange: (vals) => update({ userType: vals[vals.length - 1] || void 0 }),
+            disabled: readOnly
+          }
+        ),
+        cond.userType === "group" && editorProps.userGroups?.length ? /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: editorProps.userGroups,
+            selected: cond.groupIds || [],
+            onChange: (vals) => update({ groupIds: vals }),
+            disabled: readOnly
+          }
+        ) : null
+      ] });
+    // ─── DATE ─────────────────────────────────────
+    case "date":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5 w-fit", children: ["before", "after", "between"].map((dt) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => update({ dateTest: dt }),
+            disabled: readOnly,
+            className: cn(
+              "px-2.5 py-1 text-xs font-medium rounded transition-colors capitalize",
+              cond.dateTest === dt ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400"
+            ),
+            children: [
+              "Is ",
+              dt
+            ]
+          },
+          dt
+        )) }),
+        (cond.dateTest === "before" || cond.dateTest === "between") && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: cond.dateTest === "between" ? "Start Date" : "Before Date" }),
+          /* @__PURE__ */ jsx("input", { type: "date", className: inputClass, value: cond.beforeDate || "", onChange: (e) => update({ beforeDate: e.target.value }), disabled: readOnly })
+        ] }),
+        (cond.dateTest === "after" || cond.dateTest === "between") && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: cond.dateTest === "between" ? "End Date" : "After Date" }),
+          /* @__PURE__ */ jsx("input", { type: "date", className: inputClass, value: cond.afterDate || "", onChange: (e) => update({ afterDate: e.target.value }), disabled: readOnly })
+        ] })
+      ] });
+    // ─── DEVICE ───────────────────────────────────
+    case "device":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
+        /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: DISPLAY_OPTIONS,
+            selected: cond.displays || [],
+            onChange: (vals) => update({ displays: vals }),
+            disabled: readOnly
+          }
+        )
+      ] });
+    // ─── TAG ──────────────────────────────────────
+    case "tag":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
+        editorProps.tags?.length ? /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: editorProps.tags.map((t) => ({ title: t, value: t })),
+            selected: cond.tags || [],
+            onChange: (vals) => update({ tags: vals }),
+            disabled: readOnly
+          }
+        ) : /* @__PURE__ */ jsx("input", { className: inputClass, value: (cond.tags || []).join(", "), onChange: (e) => update({ tags: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "tag1, tag2, \u2026", disabled: readOnly })
+      ] });
+    // ─── GEOFENCE ─────────────────────────────────
+    case "geofence":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), trueLabel: "Is Inside Of", falseLabel: "Is Outside Of", disabled: readOnly }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [
+          { label: "Latitude 1 (NW)", key: "lat1" },
+          { label: "Longitude 1 (NW)", key: "lng1" },
+          { label: "Latitude 2 (SE)", key: "lat2" },
+          { label: "Longitude 2 (SE)", key: "lng2" }
+        ].map((f) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: f.label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              step: "any",
+              className: inputClass,
+              value: cond[f.key] ?? "",
+              onChange: (e) => update({ [f.key]: e.target.value ? parseFloat(e.target.value) : void 0 }),
+              disabled: readOnly
+            }
+          )
+        ] }, f.key)) })
+      ] });
+    // ─── PRODUCT ──────────────────────────────────
+    case "product":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
+        editorProps.products?.length ? /* @__PURE__ */ jsx(
+          ChipSelect,
+          {
+            options: editorProps.products,
+            selected: cond.productIds || [],
+            onChange: (vals) => update({ productIds: vals }),
+            disabled: readOnly
+          }
+        ) : /* @__PURE__ */ jsx("input", { className: inputClass, value: (cond.productIds || []).join(", "), onChange: (e) => update({ productIds: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "product-id-1, product-id-2, \u2026", disabled: readOnly })
+      ] });
+    // ─── ITEM STATUS ──────────────────────────────
+    case "itemStatus":
+      return /* @__PURE__ */ jsx(
+        ChipSelect,
+        {
+          options: ITEM_STATUS_OPTIONS,
+          selected: cond.statusType ? [cond.statusType] : [],
+          onChange: (vals) => update({ statusType: vals[vals.length - 1] || void 0 }),
+          disabled: readOnly
+        }
+      );
+    // ─── CONDITION REFERENCE ──────────────────────
+    case "condition":
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        editorProps.savedConditions?.length ? /* @__PURE__ */ jsxs("select", { className: inputClass, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), disabled: readOnly, children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select a condition\u2026" }),
+          editorProps.savedConditions.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.title }, c.value))
+        ] }) : /* @__PURE__ */ jsx("input", { className: inputClass, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), placeholder: "Condition ID", disabled: readOnly }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5 w-fit", children: [{ v: true, l: "Passes" }, { v: false, l: "Fails" }].map((opt) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => update({ passes: opt.v }),
+            disabled: readOnly,
+            className: cn(
+              "px-2.5 py-1 text-xs font-medium rounded transition-colors",
+              cond.passes === opt.v ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400"
+            ),
+            children: opt.l
+          },
+          String(opt.v)
+        )) })
+      ] });
+    default:
+      return /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic", children: "Unknown condition type" });
+  }
+};
+var ConditionCard = ({
+  condition,
+  index,
+  onChange,
+  onDelete,
+  editorProps,
+  readOnly
+}) => {
+  const [expanded, setExpanded] = useState(!condition.type);
+  const meta = getConditionMeta(condition.type);
+  const Icon = getConditionIcon(condition.type);
+  const summary = getConditionSummary(condition, { savedConditions: editorProps.savedConditions });
+  const handleSelectType = (type) => {
+    onChange({ ...condition, type });
+    setExpanded(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 px-4 py-3 cursor-pointer select-none transition-colors",
+          "hover:bg-gray-50 dark:hover:bg-gray-800/50"
+        ),
+        style: meta ? {
+          background: `linear-gradient(90deg, ${meta.color}08 0%, transparent 100%)`
+        } : void 0,
+        onClick: () => setExpanded(!expanded),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0",
+              style: meta ? { backgroundColor: `${meta.color}18`, color: meta.color } : { backgroundColor: "#e5e7eb" },
+              children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 truncate", children: meta?.title || "Select Condition Type" }),
+            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate", children: summary })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            condition.type && !readOnly && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange({ type: null });
+                },
+                className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+                title: "Change type",
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-3.5 h-3.5 text-gray-400" })
+              }
+            ),
+            !readOnly && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete();
+                },
+                className: "p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors",
+                title: "Delete",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5 text-red-400" })
+              }
+            ),
+            expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-gray-400" })
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-100 dark:border-gray-800 px-4 py-3", children: !condition.type ? /* @__PURE__ */ jsx(ConditionTypePicker, { onSelect: handleSelectType }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      meta?.helpText && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 italic", children: meta.helpText }),
+      /* @__PURE__ */ jsx(
+        ConditionConfig,
+        {
+          condition,
+          onChange,
+          editorProps,
+          readOnly
+        }
+      )
+    ] }) })
+  ] });
+};
+var ConditionsSummary = ({
+  value,
+  savedConditions
+}) => {
+  const count = value.conditions.filter((c) => c.type).length;
+  if (count === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: "No conditions set" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 ml-auto" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsx(Filter, { className: "w-3.5 h-3.5" }),
+      count,
+      " condition",
+      count !== 1 ? "s" : "",
+      " \xB7 ",
+      value.type === "and" ? "Match ALL" : "Match ANY",
+      /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 ml-auto" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+      value.conditions.filter((c) => c.type).slice(0, 5).map((cond, i) => {
+        const meta = getConditionMeta(cond.type);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium",
+            style: {
+              backgroundColor: meta ? `${meta.color}15` : "#e5e7eb",
+              color: meta?.color || "#6b7280"
+            },
+            children: getConditionSummary(cond, { savedConditions })
+          },
+          i
+        );
+      }),
+      count > 5 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-gray-100 dark:bg-gray-800 text-gray-500", children: [
+        "+",
+        count - 5,
+        " more"
+      ] })
+    ] })
+  ] });
+};
+var EditorDialog = ({ open, onClose, children }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-2xl max-h-[80vh] bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden mx-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Edit Conditions" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-gray-500" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children })
+    ] })
+  ] });
+};
+var ConditionsEditorContent = ({
+  value,
+  onChange,
+  isGlobal,
+  versions,
+  tags,
+  products,
+  savedConditions,
+  userGroups,
+  readOnly = false,
+  className
+}) => {
+  const editorProps = { versions, tags, products, savedConditions, userGroups };
+  const updateCondition = useCallback((index, updated) => {
+    const next = { ...value, conditions: [...value.conditions] };
+    next.conditions[index] = updated;
+    onChange(next);
+  }, [value, onChange]);
+  const deleteCondition = useCallback((index) => {
+    const next = { ...value, conditions: value.conditions.filter((_, i) => i !== index) };
+    onChange(next);
+  }, [value, onChange]);
+  const addCondition = useCallback(() => {
+    const next = { ...value, conditions: [...value.conditions, {}] };
+    onChange(next);
+  }, [value, onChange]);
+  const toggleLogic = useCallback((logic) => {
+    onChange({ ...value, type: logic });
+  }, [value, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("smartlinks-ui-conditions-editor space-y-4", className), children: [
+    isGlobal && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "w-full px-3 py-2 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500",
+          value: value.title || "",
+          onChange: (e) => onChange({ ...value, title: e.target.value }),
+          placeholder: "Condition Title",
+          disabled: readOnly
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onChange({ ...value, disabled: !value.disabled }),
+            disabled: readOnly,
+            className: cn(
+              "w-9 h-5 rounded-full transition-colors relative",
+              value.disabled ? "bg-blue-500" : "bg-gray-300 dark:bg-gray-600"
+            ),
+            children: /* @__PURE__ */ jsx("span", { className: cn(
+              "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform",
+              value.disabled ? "translate-x-4" : "translate-x-0.5"
+            ) })
+          }
+        ),
+        "Disabled / Hidden"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 mb-3", children: [
+        /* @__PURE__ */ jsx(GitBranch, { className: "w-3.5 h-3.5" }),
+        "Logic Type"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleLogic("and"),
+            disabled: readOnly,
+            className: cn(
+              "flex-1 px-3 py-2 text-sm font-medium rounded transition-colors",
+              value.type === "and" ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+            ),
+            children: "Match ALL (AND)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleLogic("or"),
+            disabled: readOnly,
+            className: cn(
+              "flex-1 px-3 py-2 text-sm font-medium rounded transition-colors",
+              value.type === "or" ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+            ),
+            children: "Match ANY (OR)"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: "Conditions" }),
+      /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-[10px] font-medium rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300", children: value.conditions.length })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: value.conditions.map((cond, idx) => /* @__PURE__ */ jsx(
+      ConditionCard,
+      {
+        condition: cond,
+        index: idx,
+        onChange: (updated) => updateCondition(idx, updated),
+        onDelete: () => deleteCondition(idx),
+        editorProps,
+        readOnly
+      },
+      idx
+    )) }),
+    !readOnly && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: addCondition,
+        className: cn(
+          "w-full flex items-center justify-center gap-2 py-3 rounded-lg",
+          "border-2 border-dashed border-gray-300 dark:border-gray-600",
+          "text-sm text-gray-500 dark:text-gray-400",
+          "hover:border-blue-400 dark:hover:border-blue-500 hover:text-blue-500 dark:hover:text-blue-400",
+          "transition-colors cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
+          "Add New Condition"
+        ]
+      }
+    )
+  ] });
+};
+var ConditionsEditor = (props) => {
+  const { mode = "inline", trigger, open: controlledOpen, onClose, value, savedConditions, className, ...rest } = props;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleClose = useCallback(() => {
+    setInternalOpen(false);
+    onClose?.();
+  }, [onClose]);
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx(ConditionsEditorContent, { value, savedConditions, className, ...rest });
+  }
+  const triggerElement = trigger || /* @__PURE__ */ jsx("div", { className: cn(
+    "rounded-lg border border-gray-200 dark:border-gray-700 p-3 cursor-pointer",
+    "hover:border-gray-300 dark:hover:border-gray-600 transition-colors",
+    className
+  ), children: /* @__PURE__ */ jsx(ConditionsSummary, { value, savedConditions }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setInternalOpen(true), className: "cursor-pointer", children: triggerElement }),
+    /* @__PURE__ */ jsx(EditorDialog, { open: isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx(ConditionsEditorContent, { value, savedConditions, ...rest }) })
+  ] });
+};
+
+export { ConditionsEditor };
+//# sourceMappingURL=chunk-IVUFK6SS.js.map
+//# sourceMappingURL=chunk-IVUFK6SS.js.map