@showwhat/configurator 2.0.0 → 2.1.0

package/dist/index.js

@@ -62,23 +62,46 @@ function stripAutoIds(definitions) {
 // src/components/condition-builder/StringConditionEditor.tsx
 import { useCallback as useCallback2, useMemo } from "react";
 
-// src/components/condition-builder/ConditionRow.tsx
+// src/components/condition-builder/ConditionBlockContext.tsx
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-function ConditionRow({ children }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "grid flex-1 items-start gap-2",
-      style: { gridTemplateColumns: "140px 72px 1fr" },
-      children
-    }
-  );
+var ConditionBlockContext = createContext(null);
+function ConditionBlockProvider({
+  children,
+  ...chrome
+}) {
+  return /* @__PURE__ */ jsx(ConditionBlockContext.Provider, { value: chrome, children });
+}
+function useConditionBlockChrome() {
+  return useContext(ConditionBlockContext);
+}
+
+// src/components/condition-builder/ConditionRow.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ConditionRow({ keySlot, children }) {
+  const chrome = useConditionBlockChrome();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    chrome && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      chrome.typeBadge,
+      /* @__PURE__ */ jsx2("div", { className: "flex-1" }),
+      chrome.controls
+    ] }),
+    keySlot && /* @__PURE__ */ jsx2("div", { children: keySlot }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "grid items-start gap-2",
+        style: { gridTemplateColumns: "minmax(8rem, auto) 1fr" },
+        children
+      }
+    )
+  ] });
 }
 
 // src/components/ui/input.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       type,
@@ -95,9 +118,9 @@ function Input({ className, type, ...props }) {
 }
 
 // src/components/condition-builder/KeyInput.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function KeyInput({ value, onChange, placeholder, disabled }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     Input,
     {
       className: "h-8 font-mono text-sm",
@@ -112,16 +135,16 @@ function KeyInput({ value, onChange, placeholder, disabled }) {
 
 // src/components/ui/select.tsx
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function Select({ ...props }) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({ ...props }) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
 }
 function SelectValue({ ...props }) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -129,7 +152,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -141,7 +164,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { render: /* @__PURE__ */ jsx5(ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -149,42 +172,31 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = "item-aligned",
-  align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    SelectPrimitive.Content,
+  return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx5(SelectPrimitive.Positioner, { "data-slot": "select-positioner", children: /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Popup,
     {
       "data-slot": "select-content",
       className: cn(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
         className
       ),
-      position,
-      align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx4(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx4(
-          SelectPrimitive.Viewport,
-          {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx4(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx5(SelectScrollUpArrow, {}),
+        /* @__PURE__ */ jsx5(SelectPrimitive.List, { className: "p-1", children }),
+        /* @__PURE__ */ jsx5(SelectScrollDownArrow, {})
       ]
     }
-  ) });
+  ) }) });
 }
-function SelectLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    SelectPrimitive.Label,
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.GroupLabel,
     {
       "data-slot": "select-label",
       className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
@@ -197,7 +209,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -207,15 +219,15 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "span",
           {
             "data-slot": "select-item-indicator",
             className: "absolute right-2 flex size-3.5 items-center justify-center",
-            children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(CheckIcon, { className: "size-4" }) })
+            children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(CheckIcon, { className: "size-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -224,7 +236,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -233,50 +245,86 @@ function SelectSeparator({
     }
   );
 }
-function SelectScrollUpButton({
+function SelectScrollUpArrow({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SelectPrimitive.ScrollUpButton,
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollUpArrow,
     {
-      "data-slot": "select-scroll-up-button",
+      "data-slot": "select-scroll-up-arrow",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsx4(ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx5(ChevronUpIcon, { className: "size-4" })
     }
   );
 }
-function SelectScrollDownButton({
+function SelectScrollDownArrow({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
-    SelectPrimitive.ScrollDownButton,
+  return /* @__PURE__ */ jsx5(
+    SelectPrimitive.ScrollDownArrow,
     {
-      "data-slot": "select-scroll-down-button",
+      "data-slot": "select-scroll-down-arrow",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx5(ChevronDownIcon, { className: "size-4" })
     }
   );
 }
 
 // src/components/condition-builder/OperatorSelect.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function OperatorSelect({ value, onChange, options, disabled }) {
-  return /* @__PURE__ */ jsxs2(Select, { value, onValueChange: onChange, disabled, children: [
-    /* @__PURE__ */ jsx5(SelectTrigger, { className: "h-8 font-mono text-xs", disabled, children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
-    /* @__PURE__ */ jsx5(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx5(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs3(Select, { value, onValueChange: (v) => onChange?.(v), disabled, children: [
+    /* @__PURE__ */ jsx6(SelectTrigger, { className: "h-8 w-full text-xs", disabled, children: /* @__PURE__ */ jsx6("span", { className: "truncate", children: selected?.label ?? value }) }),
+    /* @__PURE__ */ jsx6(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxs3(SelectItem, { value: opt.value, children: [
+      /* @__PURE__ */ jsx6("span", { children: opt.label }),
+      opt.code && /* @__PURE__ */ jsxs3("span", { className: "ml-1.5 text-muted-foreground", children: [
+        "(",
+        opt.code,
+        ")"
+      ] })
+    ] }, opt.value)) })
   ] });
 }
 
+// src/components/condition-builder/operator-labels.ts
+var LABEL = {
+  eq: "equals",
+  neq: "not equals",
+  gt: "more than",
+  gte: "at least",
+  lt: "less than",
+  lte: "at most",
+  in: "one of",
+  nin: "not one of",
+  regex: "matches"
+};
+function op(code) {
+  return { value: code, label: LABEL[code] ?? code, code };
+}
+var STRING_OPS = [op("eq"), op("neq"), op("in"), op("nin"), op("regex")];
+var NUMBER_OPS = [
+  op("eq"),
+  op("neq"),
+  op("gt"),
+  op("gte"),
+  op("lt"),
+  op("lte"),
+  op("in"),
+  op("nin")
+];
+var DATETIME_OPS = [op("eq"), op("gt"), op("gte"), op("lt"), op("lte")];
+var BOOL_OPS = [op("eq")];
+
 // src/components/condition-builder/TagInput.tsx
 import { useCallback, useState } from "react";
 
 // src/components/ui/badge.tsx
-import { Slot } from "radix-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var badgeBase = "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3";
 var badgeVariantStyles = {
   default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
@@ -292,12 +340,10 @@ function badgeVariants(opts) {
 function Badge({
   className,
   variant = "default",
-  asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot.Root : "span";
-  return /* @__PURE__ */ jsx6(
-    Comp,
+  return /* @__PURE__ */ jsx7(
+    "span",
     {
       "data-slot": "badge",
       "data-variant": variant,
@@ -308,7 +354,7 @@ function Badge({
 }
 
 // src/components/condition-builder/TagInput.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function TagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
   const [text, setText] = useState("");
@@ -358,14 +404,14 @@ function TagInput({ value, onChange, placeholder, disabled }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]${disabled ? " opacity-50" : ""}`,
       children: [
-        values.map((v, i) => /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
+        values.map((v, i) => /* @__PURE__ */ jsxs4(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
           v,
-          !disabled && /* @__PURE__ */ jsx7(
+          !disabled && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -376,7 +422,7 @@ function TagInput({ value, onChange, placeholder, disabled }) {
             }
           )
         ] }, `${v}-${i}`)),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
@@ -400,22 +446,18 @@ function buildAndCondition(conditions, id) {
 function buildOrCondition(conditions, id) {
   return id ? { id, type: "or", conditions } : { type: "or", conditions };
 }
+function buildCheckAnnotationsCondition(conditions, id) {
+  return id ? { id, type: "checkAnnotations", conditions } : { type: "checkAnnotations", conditions };
+}
 function buildCustomCondition(fields) {
   return fields;
 }
 
 // src/components/condition-builder/StringConditionEditor.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var OP_OPTIONS = [
-  { value: "eq", label: "eq" },
-  { value: "neq", label: "neq" },
-  { value: "in", label: "in" },
-  { value: "nin", label: "nin" },
-  { value: "regex", label: "regex" }
-];
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var meta = {
   type: "string",
-  label: "String",
+  label: "string",
   description: "Match a context key against string value(s)",
   defaults: { type: "string", key: "", op: "eq", value: "" }
 };
@@ -436,51 +478,56 @@ function StringConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  const op = rec.op;
-  const isArray = op === "in" || op === "nin";
-  const isRegex = op === "regex";
-  return /* @__PURE__ */ jsxs4(ConditionRow, { children: [
-    /* @__PURE__ */ jsx8(
-      KeyInput,
-      {
-        value: String(rec.key ?? ""),
-        onChange: (v) => update("key", v),
-        placeholder: "e.g. userId"
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      OperatorSelect,
-      {
-        value: String(rec.op ?? "eq"),
-        onChange: handleOpChange,
-        options: OP_OPTIONS
-      }
-    ),
-    isArray ? /* @__PURE__ */ jsx8(
-      TagInput,
-      {
-        value: rec.value ?? "",
-        onChange: (v) => update("value", v),
-        placeholder: "e.g. user-123"
-      }
-    ) : isRegex ? /* @__PURE__ */ jsx8(
-      Input,
-      {
-        className: "h-8 font-mono text-sm",
-        value: String(rec.value ?? ""),
-        placeholder: "e.g. ^test.*$",
-        onChange: (e) => update("value", e.target.value)
-      }
-    ) : /* @__PURE__ */ jsx8(
-      Input,
-      {
-        className: "h-8 text-sm",
-        value: String(rec.value ?? ""),
-        placeholder: "e.g. user-123",
-        onChange: (e) => update("value", e.target.value)
-      }
-    )
-  ] });
+  const op2 = rec.op;
+  const isArray = op2 === "in" || op2 === "nin";
+  const isRegex = op2 === "regex";
+  return /* @__PURE__ */ jsxs5(
+    ConditionRow,
+    {
+      keySlot: /* @__PURE__ */ jsx9(
+        KeyInput,
+        {
+          value: String(rec.key ?? ""),
+          onChange: (v) => update("key", v),
+          placeholder: "e.g. userId"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx9(
+          OperatorSelect,
+          {
+            value: String(rec.op ?? "eq"),
+            onChange: handleOpChange,
+            options: STRING_OPS
+          }
+        ),
+        isArray ? /* @__PURE__ */ jsx9(
+          TagInput,
+          {
+            value: rec.value ?? "",
+            onChange: (v) => update("value", v),
+            placeholder: "e.g. user-123"
+          }
+        ) : isRegex ? /* @__PURE__ */ jsx9(
+          Input,
+          {
+            className: "h-8 font-mono text-sm",
+            value: String(rec.value ?? ""),
+            placeholder: "e.g. ^test.*$",
+            onChange: (e) => update("value", e.target.value)
+          }
+        ) : /* @__PURE__ */ jsx9(
+          Input,
+          {
+            className: "h-8 text-sm",
+            value: String(rec.value ?? ""),
+            placeholder: "e.g. user-123",
+            onChange: (e) => update("value", e.target.value)
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/NumberConditionEditor.tsx
@@ -488,7 +535,7 @@ import { useCallback as useCallback4, useMemo as useMemo2 } from "react";
 
 // src/components/condition-builder/NumberTagInput.tsx
 import { useCallback as useCallback3, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function NumberTagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value : [value];
   const [text, setText] = useState2("");
@@ -538,14 +585,14 @@ function NumberTagInput({ value, onChange, placeholder, disabled }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]${disabled ? " opacity-50" : ""}`,
       children: [
-        values.map((v, i) => /* @__PURE__ */ jsxs5(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
+        values.map((v, i) => /* @__PURE__ */ jsxs6(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
           v,
-          !disabled && /* @__PURE__ */ jsx9(
+          !disabled && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -556,7 +603,7 @@ function NumberTagInput({ value, onChange, placeholder, disabled }) {
             }
           )
         ] }, `${v}-${i}`)),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "input",
           {
             className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
@@ -575,20 +622,10 @@ function NumberTagInput({ value, onChange, placeholder, disabled }) {
 }
 
 // src/components/condition-builder/NumberConditionEditor.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var OP_OPTIONS2 = [
-  { value: "eq", label: "eq" },
-  { value: "neq", label: "neq" },
-  { value: "gt", label: "gt" },
-  { value: "gte", label: "gte" },
-  { value: "lt", label: "lt" },
-  { value: "lte", label: "lte" },
-  { value: "in", label: "in" },
-  { value: "nin", label: "nin" }
-];
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var meta2 = {
   type: "number",
-  label: "Number",
+  label: "number",
   description: "Compare a context key against a number or list of numbers",
   defaults: { type: "number", key: "", op: "eq", value: 0 }
 };
@@ -609,43 +646,48 @@ function NumberConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  const op = rec.op;
-  const isArray = op === "in" || op === "nin";
-  return /* @__PURE__ */ jsxs6(ConditionRow, { children: [
-    /* @__PURE__ */ jsx10(
-      KeyInput,
-      {
-        value: String(rec.key ?? ""),
-        onChange: (v) => update("key", v),
-        placeholder: "e.g. score"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      OperatorSelect,
-      {
-        value: String(rec.op ?? "eq"),
-        onChange: handleOpChange,
-        options: OP_OPTIONS2
-      }
-    ),
-    isArray ? /* @__PURE__ */ jsx10(
-      NumberTagInput,
-      {
-        value: rec.value ?? [],
-        onChange: (v) => update("value", v),
-        placeholder: "e.g. 200"
-      }
-    ) : /* @__PURE__ */ jsx10(
-      Input,
-      {
-        type: "number",
-        className: "h-8 font-mono text-sm",
-        value: rec.value !== void 0 ? String(rec.value) : "",
-        placeholder: "e.g. 100",
-        onChange: (e) => update("value", e.target.value === "" ? "" : Number(e.target.value))
-      }
-    )
-  ] });
+  const op2 = rec.op;
+  const isArray = op2 === "in" || op2 === "nin";
+  return /* @__PURE__ */ jsxs7(
+    ConditionRow,
+    {
+      keySlot: /* @__PURE__ */ jsx11(
+        KeyInput,
+        {
+          value: String(rec.key ?? ""),
+          onChange: (v) => update("key", v),
+          placeholder: "e.g. score"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(
+          OperatorSelect,
+          {
+            value: String(rec.op ?? "eq"),
+            onChange: handleOpChange,
+            options: NUMBER_OPS
+          }
+        ),
+        isArray ? /* @__PURE__ */ jsx11(
+          NumberTagInput,
+          {
+            value: rec.value ?? [],
+            onChange: (v) => update("value", v),
+            placeholder: "e.g. 200"
+          }
+        ) : /* @__PURE__ */ jsx11(
+          Input,
+          {
+            type: "number",
+            className: "h-8 font-mono text-sm",
+            value: rec.value !== void 0 ? String(rec.value) : "",
+            placeholder: "e.g. 100",
+            onChange: (e) => update("value", e.target.value === "" ? "" : Number(e.target.value))
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/DatetimeConditionEditor.tsx
@@ -654,7 +696,7 @@ import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
 // src/components/common/DateTimeInput.tsx
 import { useRef, useState as useState3 } from "react";
 import { Calendar, Code } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function toLocalDatetime(iso) {
   if (!iso) return "";
   const d = new Date(iso);
@@ -672,15 +714,15 @@ function fromLocalDatetime(local) {
 }
 function DateTimeInput({ value, onChange, disabled }) {
   const [rawValue, setRawValue] = useState3(value);
-  const [showRaw, setShowRaw] = useState3(false);
+  const [showRaw, setShowRaw] = useState3(true);
   const prevValueRef = useRef(value);
   if (prevValueRef.current !== value) {
     prevValueRef.current = value;
     setRawValue(value);
   }
   if (showRaw) {
-    return /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx12(
         Input,
         {
           className: "h-8 flex-1 font-mono text-xs",
@@ -693,20 +735,20 @@ function DateTimeInput({ value, onChange, disabled }) {
           disabled
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
           className: "flex items-center justify-center w-8 h-8 text-muted-foreground hover:text-foreground",
           "aria-label": "Switch to date picker",
           onClick: () => setShowRaw(false),
-          children: /* @__PURE__ */ jsx11(Calendar, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ jsx12(Calendar, { className: "h-3.5 w-3.5" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
+    /* @__PURE__ */ jsx12(
       Input,
       {
         className: "h-8 flex-1 text-xs",
@@ -716,7 +758,7 @@ function DateTimeInput({ value, onChange, disabled }) {
         disabled
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -726,24 +768,17 @@ function DateTimeInput({ value, onChange, disabled }) {
           setRawValue(value);
           setShowRaw(true);
         },
-        children: /* @__PURE__ */ jsx11(Code, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx12(Code, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
 }
 
 // src/components/condition-builder/DatetimeConditionEditor.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-var OP_OPTIONS3 = [
-  { value: "eq", label: "eq" },
-  { value: "gt", label: "gt" },
-  { value: "gte", label: "gte" },
-  { value: "lt", label: "lt" },
-  { value: "lte", label: "lte" }
-];
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var meta3 = {
   type: "datetime",
-  label: "Datetime",
+  label: "datetime",
   description: "Compare a context key against a date/time",
   defaults: { type: "datetime", key: "", op: "eq", value: (/* @__PURE__ */ new Date()).toISOString() }
 };
@@ -755,34 +790,38 @@ function DatetimeConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  return /* @__PURE__ */ jsxs8(ConditionRow, { children: [
-    /* @__PURE__ */ jsx12(
-      KeyInput,
-      {
-        value: String(rec.key ?? ""),
-        onChange: (v) => update("key", v),
-        placeholder: "e.g. at"
-      }
-    ),
-    /* @__PURE__ */ jsx12(
-      OperatorSelect,
-      {
-        value: String(rec.op ?? "eq"),
-        onChange: (v) => update("op", v),
-        options: OP_OPTIONS3
-      }
-    ),
-    /* @__PURE__ */ jsx12(DateTimeInput, { value: String(rec.value ?? ""), onChange: (v) => update("value", v) })
-  ] });
+  return /* @__PURE__ */ jsxs9(
+    ConditionRow,
+    {
+      keySlot: /* @__PURE__ */ jsx13(
+        KeyInput,
+        {
+          value: String(rec.key ?? ""),
+          onChange: (v) => update("key", v),
+          placeholder: "e.g. at"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx13(
+          OperatorSelect,
+          {
+            value: String(rec.op ?? "eq"),
+            onChange: (v) => update("op", v),
+            options: DATETIME_OPS
+          }
+        ),
+        /* @__PURE__ */ jsx13(DateTimeInput, { value: String(rec.value ?? ""), onChange: (v) => update("value", v) })
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/BoolConditionEditor.tsx
 import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var OP_OPTIONS4 = [{ value: "eq", label: "eq" }];
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var meta4 = {
   type: "bool",
-  label: "Boolean",
+  label: "bool",
   description: "Match a context key against a boolean",
   defaults: { type: "bool", key: "", value: true }
 };
@@ -794,40 +833,44 @@ function BoolConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  return /* @__PURE__ */ jsxs9(ConditionRow, { children: [
-    /* @__PURE__ */ jsx13(
-      KeyInput,
-      {
-        value: String(rec.key ?? ""),
-        onChange: (v) => update("key", v),
-        placeholder: "e.g. isAdmin"
-      }
-    ),
-    /* @__PURE__ */ jsx13(OperatorSelect, { value: "eq", options: OP_OPTIONS4, disabled: true }),
-    /* @__PURE__ */ jsxs9(
-      Select,
-      {
-        value: String(rec.value ?? "true"),
-        onValueChange: (v) => update("value", v === "true"),
-        children: [
-          /* @__PURE__ */ jsx13(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
-          /* @__PURE__ */ jsxs9(SelectContent, { children: [
-            /* @__PURE__ */ jsx13(SelectItem, { value: "true", children: "true" }),
-            /* @__PURE__ */ jsx13(SelectItem, { value: "false", children: "false" })
-          ] })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs10(
+    ConditionRow,
+    {
+      keySlot: /* @__PURE__ */ jsx14(
+        KeyInput,
+        {
+          value: String(rec.key ?? ""),
+          onChange: (v) => update("key", v),
+          placeholder: "e.g. isAdmin"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx14(OperatorSelect, { value: "eq", options: BOOL_OPS, disabled: true }),
+        /* @__PURE__ */ jsxs10(
+          Select,
+          {
+            value: String(rec.value ?? "true"),
+            onValueChange: (v) => update("value", v === "true"),
+            children: [
+              /* @__PURE__ */ jsx14(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx14(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs10(SelectContent, { children: [
+                /* @__PURE__ */ jsx14(SelectItem, { value: "true", children: "true" }),
+                /* @__PURE__ */ jsx14(SelectItem, { value: "false", children: "false" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/EnvConditionEditor.tsx
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var OP_OPTIONS5 = [{ value: "eq", label: "eq" }];
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var meta5 = {
   type: "env",
-  label: "Environment",
+  label: "env",
   description: "Match the environment name",
   defaults: { type: "env", value: "" }
 };
@@ -839,10 +882,9 @@ function EnvConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  return /* @__PURE__ */ jsxs10(ConditionRow, { children: [
-    /* @__PURE__ */ jsx14(KeyInput, { value: "env", disabled: true }),
-    /* @__PURE__ */ jsx14(OperatorSelect, { value: "eq", options: OP_OPTIONS5, disabled: true }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11(ConditionRow, { children: [
+    /* @__PURE__ */ jsx15(OperatorSelect, { value: "eq", options: BOOL_OPS, disabled: true }),
+    /* @__PURE__ */ jsx15(
       TagInput,
       {
         value: rec.value ?? "",
@@ -855,20 +897,19 @@ function EnvConditionEditor({ condition, onChange }) {
 
 // src/components/condition-builder/StartAtConditionEditor.tsx
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var OP_OPTIONS6 = [{ value: "gte", label: "gte" }];
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var STARTAT_OPS = DATETIME_OPS.filter((o) => o.value === "gte");
 var meta6 = {
   type: "startAt",
-  label: "Start At",
+  label: "startAt",
   description: "Active after a specific date/time",
   defaults: { type: "startAt", value: (/* @__PURE__ */ new Date()).toISOString() }
 };
 function StartAtConditionEditor({ condition, onChange }) {
   const rec = useMemo6(() => condition, [condition]);
-  return /* @__PURE__ */ jsxs11(ConditionRow, { children: [
-    /* @__PURE__ */ jsx15(KeyInput, { value: "at", disabled: true }),
-    /* @__PURE__ */ jsx15(OperatorSelect, { value: "gte", options: OP_OPTIONS6, disabled: true }),
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12(ConditionRow, { children: [
+    /* @__PURE__ */ jsx16(OperatorSelect, { value: "gte", options: STARTAT_OPS, disabled: true }),
+    /* @__PURE__ */ jsx16(
       DateTimeInput,
       {
         value: String(rec.value ?? ""),
@@ -880,20 +921,19 @@ function StartAtConditionEditor({ condition, onChange }) {
 
 // src/components/condition-builder/EndAtConditionEditor.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var OP_OPTIONS7 = [{ value: "lt", label: "lt" }];
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var ENDAT_OPS = DATETIME_OPS.filter((o) => o.value === "lt");
 var meta7 = {
   type: "endAt",
-  label: "End At",
+  label: "endAt",
   description: "Active before a specific date/time",
   defaults: { type: "endAt", value: (/* @__PURE__ */ new Date()).toISOString() }
 };
 function EndAtConditionEditor({ condition, onChange }) {
   const rec = useMemo7(() => condition, [condition]);
-  return /* @__PURE__ */ jsxs12(ConditionRow, { children: [
-    /* @__PURE__ */ jsx16(KeyInput, { value: "at", disabled: true }),
-    /* @__PURE__ */ jsx16(OperatorSelect, { value: "lt", options: OP_OPTIONS7, disabled: true }),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs13(ConditionRow, { children: [
+    /* @__PURE__ */ jsx17(OperatorSelect, { value: "lt", options: ENDAT_OPS, disabled: true }),
+    /* @__PURE__ */ jsx17(
       DateTimeInput,
       {
         value: String(rec.value ?? ""),
@@ -919,8 +959,7 @@ function getConditionMeta(type) {
 }
 
 // src/components/ui/button.tsx
-import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var buttonBase = "inline-flex shrink-0 items-center justify-center gap-2 rounded text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:cursor-pointer";
 var buttonVariantStyles = {
   default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -952,13 +991,11 @@ function Button({
   className,
   variant = "default",
   size = "default",
-  asChild = false,
   ref,
   ...props
 }) {
-  const Comp = asChild ? Slot2.Root : "button";
-  return /* @__PURE__ */ jsx17(
-    Comp,
+  return /* @__PURE__ */ jsx18(
+    "button",
     {
       ref,
       "data-slot": "button",
@@ -971,19 +1008,17 @@ function Button({
 }
 
 // src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
-  decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
-    SeparatorPrimitive.Root,
+  return /* @__PURE__ */ jsx19(
+    SeparatorPrimitive,
     {
       "data-slot": "separator",
-      decorative,
       orientation,
       className: cn(
         "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
@@ -995,30 +1030,30 @@ function Separator({
 }
 
 // src/components/ui/scroll-area.tsx
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
             className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-            children
+            children: /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Content, { children })
           }
         ),
-        /* @__PURE__ */ jsx19(ScrollBar, {}),
-        /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx20(ScrollBar, {}),
+        /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -1028,8 +1063,8 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
+  return /* @__PURE__ */ jsx20(
+    ScrollAreaPrimitive.Scrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
       orientation,
@@ -1040,8 +1075,8 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx19(
-        ScrollAreaPrimitive.ScrollAreaThumb,
+      children: /* @__PURE__ */ jsx20(
+        ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "relative flex-1 rounded-full bg-border"
@@ -1053,30 +1088,30 @@ function ScrollBar({
 
 // src/components/ui/dialog.tsx
 import { XIcon } from "lucide-react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx20(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ jsx20(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
-function DialogOverlay({
+function DialogBackdrop({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
-    DialogPrimitive.Overlay,
+  return /* @__PURE__ */ jsx21(
+    DialogPrimitive.Backdrop,
     {
-      "data-slot": "dialog-overlay",
+      "data-slot": "dialog-backdrop",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/50 data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:animate-in data-[open]:fade-in-0",
         className
       ),
       ...props
@@ -1089,27 +1124,27 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx20(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs14(
-      DialogPrimitive.Content,
+  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx21(DialogBackdrop, {}),
+    /* @__PURE__ */ jsxs15(
+      DialogPrimitive.Popup,
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 sm:max-w-lg",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs14(
+          showCloseButton && /* @__PURE__ */ jsxs15(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx20(XIcon, {}),
-                /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx21(XIcon, {}),
+                /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -1119,7 +1154,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "dialog-header",
@@ -1134,7 +1169,7 @@ function DialogFooter({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -1142,13 +1177,13 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx20(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx20(Button, { variant: "outline", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ jsx21(DialogPrimitive.Close, { render: /* @__PURE__ */ jsx21(Button, { variant: "outline" }), children: "Close" })
       ]
     }
   );
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -1161,7 +1196,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -1171,46 +1206,44 @@ function DialogDescription({
   );
 }
 
-// src/components/ui/dropdown-menu.tsx
+// src/components/ui/menu.tsx
 import { CheckIcon as CheckIcon2, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function Menu({ ...props }) {
+  return /* @__PURE__ */ jsx22(MenuPrimitive.Root, { "data-slot": "menu", ...props });
 }
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+function MenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx22(MenuPrimitive.Trigger, { "data-slot": "menu-trigger", ...props });
 }
-function DropdownMenuContent({
+function MenuContent({
   className,
   sideOffset = 4,
+  align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
-    DropdownMenuPrimitive.Content,
+  return /* @__PURE__ */ jsx22(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx22(MenuPrimitive.Positioner, { "data-slot": "menu-positioner", sideOffset, align, children: /* @__PURE__ */ jsx22(
+    MenuPrimitive.Popup,
     {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
+      "data-slot": "menu-content",
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
         className
       ),
       ...props
     }
-  ) });
+  ) }) });
 }
-function DropdownMenuItem({
+function MenuItem({
   className,
   inset,
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
-    DropdownMenuPrimitive.Item,
+  return /* @__PURE__ */ jsx22(
+    MenuPrimitive.Item,
     {
-      "data-slot": "dropdown-menu-item",
+      "data-slot": "menu-item",
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
@@ -1221,14 +1254,14 @@ function DropdownMenuItem({
     }
   );
 }
-function DropdownMenuSeparator({
+function MenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
-    DropdownMenuPrimitive.Separator,
+  return /* @__PURE__ */ jsx22(
+    MenuPrimitive.Separator,
     {
-      "data-slot": "dropdown-menu-separator",
+      "data-slot": "menu-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
       ...props
     }
@@ -1236,11 +1269,10 @@ function DropdownMenuSeparator({
 }
 
 // src/components/ui/label.tsx
-import { Label as LabelPrimitive } from "radix-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
-    LabelPrimitive.Root,
+  return /* @__PURE__ */ jsx23(
+    "label",
     {
       "data-slot": "label",
       className: cn(
@@ -1253,23 +1285,37 @@ function Label({ className, ...props }) {
 }
 
 // src/components/ui/switch.tsx
-import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx23 } from "react/jsx-runtime";
-function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Switch({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  name,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx24(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled,
+      name,
+      nativeButton: false,
       className: cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-primary data-[unchecked]:bg-input",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         SwitchPrimitive.Thumb,
         {
           className: cn(
-            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0"
           )
         }
       )
@@ -1278,9 +1324,9 @@ function Switch({ className, ...props }) {
 }
 
 // src/components/ui/textarea.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "textarea",
     {
       "data-slot": "textarea",
@@ -1294,13 +1340,13 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx25(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx25(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -1308,29 +1354,35 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
-    PopoverPrimitive.Content,
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
+    PopoverPrimitive.Positioner,
     {
-      "data-slot": "popover-content",
+      "data-slot": "popover-positioner",
       align,
       sideOffset,
-      className: cn(
-        "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        className
-      ),
-      ...props
+      children: /* @__PURE__ */ jsx26(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
+            className
+          ),
+          ...props
+        }
+      )
     }
   ) });
 }
 
 // src/components/ui/tabs.tsx
-import { Tabs as TabsPrimitive } from "radix-ui";
-import { jsx as jsx26 } from "react/jsx-runtime";
-function Tabs({ ...props }) {
-  return /* @__PURE__ */ jsx26(TabsPrimitive.Root, { "data-slot": "tabs", ...props });
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(TabsPrimitive.Root, { "data-slot": "tabs", className, ...props });
 }
 function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     TabsPrimitive.List,
     {
       "data-slot": "tabs-list",
@@ -1342,24 +1394,24 @@ function TabsList({ className, ...props }) {
     }
   );
 }
-function TabsTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
-    TabsPrimitive.Trigger,
+function TabsTab({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    TabsPrimitive.Tab,
     {
-      "data-slot": "tabs-trigger",
+      "data-slot": "tabs-tab",
       className: cn(
-        "inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-none data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-l-transparent data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2.5 data-[orientation=vertical]:text-sm data-[orientation=vertical]:font-normal data-[orientation=vertical]:text-muted-foreground data-[orientation=vertical]:shadow-none data-[orientation=vertical]:hover:bg-muted data-[orientation=vertical]:data-[state=active]:border-l-primary data-[orientation=vertical]:data-[state=active]:bg-accent data-[orientation=vertical]:data-[state=active]:font-medium data-[orientation=vertical]:data-[state=active]:text-accent-foreground",
+        "inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-none data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-l-transparent data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2.5 data-[orientation=vertical]:text-sm data-[orientation=vertical]:font-normal data-[orientation=vertical]:text-muted-foreground data-[orientation=vertical]:shadow-none data-[orientation=vertical]:hover:bg-muted data-[orientation=vertical]:data-[selected]:border-l-primary data-[orientation=vertical]:data-[selected]:bg-accent data-[orientation=vertical]:data-[selected]:font-medium data-[orientation=vertical]:data-[selected]:text-accent-foreground",
         className
       ),
       ...props
     }
   );
 }
-function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(
-    TabsPrimitive.Content,
+function TabsPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    TabsPrimitive.Panel,
     {
-      "data-slot": "tabs-content",
+      "data-slot": "tabs-panel",
       className: cn(
         "flex-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
@@ -1371,7 +1423,7 @@ function TabsContent({ className, ...props }) {
 
 // src/components/common/ValueInput.tsx
 import { useRef as useRef2, useState as useState4 } from "react";
-import { Fragment, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function detectType(value) {
   if (typeof value === "boolean") return "boolean";
   if (typeof value === "number") return "number";
@@ -1443,18 +1495,18 @@ function ValueInput({ value, onChange, placeholder }) {
       setJsonError("Invalid JSON");
     }
   }
-  return /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsxs16(Select, { value: type, onValueChange: handleTypeChange, children: [
-      /* @__PURE__ */ jsx27(SelectTrigger, { className: "h-9 w-[110px] shrink-0 text-sm", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
-      /* @__PURE__ */ jsxs16(SelectContent, { children: [
-        /* @__PURE__ */ jsx27(SelectItem, { value: "string", children: "String" }),
-        /* @__PURE__ */ jsx27(SelectItem, { value: "number", children: "Number" }),
-        /* @__PURE__ */ jsx27(SelectItem, { value: "boolean", children: "Boolean" }),
-        /* @__PURE__ */ jsx27(SelectItem, { value: "json", children: "JSON" })
+  return /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxs17(Select, { value: type, onValueChange: (v) => handleTypeChange(v), children: [
+      /* @__PURE__ */ jsx28(SelectTrigger, { className: "h-9 w-[110px] shrink-0 text-sm", children: /* @__PURE__ */ jsx28(SelectValue, {}) }),
+      /* @__PURE__ */ jsxs17(SelectContent, { children: [
+        /* @__PURE__ */ jsx28(SelectItem, { value: "string", children: "String" }),
+        /* @__PURE__ */ jsx28(SelectItem, { value: "number", children: "Number" }),
+        /* @__PURE__ */ jsx28(SelectItem, { value: "boolean", children: "Boolean" }),
+        /* @__PURE__ */ jsx28(SelectItem, { value: "json", children: "JSON" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
-      type === "string" && /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsxs17("div", { className: "flex-1", children: [
+      type === "string" && /* @__PURE__ */ jsx28(
         Input,
         {
           className: "h-9 font-mono text-sm",
@@ -1463,7 +1515,7 @@ function ValueInput({ value, onChange, placeholder }) {
           onChange: (e) => onChange(e.target.value)
         }
       ),
-      type === "number" && /* @__PURE__ */ jsx27(
+      type === "number" && /* @__PURE__ */ jsx28(
         Input,
         {
           className: "h-9 font-mono text-sm",
@@ -1472,15 +1524,15 @@ function ValueInput({ value, onChange, placeholder }) {
           onChange: (e) => onChange(Number(e.target.value))
         }
       ),
-      type === "boolean" && /* @__PURE__ */ jsxs16(Select, { value: String(Boolean(value)), onValueChange: (v) => onChange(v === "true"), children: [
-        /* @__PURE__ */ jsx27(SelectTrigger, { className: "h-9 text-sm", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs16(SelectContent, { children: [
-          /* @__PURE__ */ jsx27(SelectItem, { value: "true", children: "true" }),
-          /* @__PURE__ */ jsx27(SelectItem, { value: "false", children: "false" })
+      type === "boolean" && /* @__PURE__ */ jsxs17(Select, { value: String(Boolean(value)), onValueChange: (v) => onChange(v === "true"), children: [
+        /* @__PURE__ */ jsx28(SelectTrigger, { className: "h-9 text-sm", children: /* @__PURE__ */ jsx28(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs17(SelectContent, { children: [
+          /* @__PURE__ */ jsx28(SelectItem, { value: "true", children: "true" }),
+          /* @__PURE__ */ jsx28(SelectItem, { value: "false", children: "false" })
         ] })
       ] }),
-      type === "json" && /* @__PURE__ */ jsxs16(Fragment, { children: [
-        /* @__PURE__ */ jsx27(
+      type === "json" && /* @__PURE__ */ jsxs17(Fragment, { children: [
+        /* @__PURE__ */ jsx28(
           Textarea,
           {
             className: "font-mono text-sm",
@@ -1490,9 +1542,9 @@ function ValueInput({ value, onChange, placeholder }) {
             onBlur: handleJsonBlur
           }
         ),
-        /* @__PURE__ */ jsxs16("div", { className: "mt-1 flex items-center gap-2", children: [
-          jsonError && /* @__PURE__ */ jsx27("p", { className: "text-xs text-destructive", children: jsonError }),
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs17("div", { className: "mt-1 flex items-center gap-2", children: [
+          jsonError && /* @__PURE__ */ jsx28("p", { className: "text-xs text-destructive", children: jsonError }),
+          /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -1510,11 +1562,11 @@ function ValueInput({ value, onChange, placeholder }) {
 }
 
 // src/components/common/ValidationMessage.tsx
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function ValidationMessage({ errors }) {
   if (!errors || errors.length === 0) return null;
-  return /* @__PURE__ */ jsx28("div", { className: "space-y-1", children: errors.map((err, i) => /* @__PURE__ */ jsxs17("p", { className: "text-xs text-destructive", children: [
-    err.path.length > 0 && /* @__PURE__ */ jsxs17("span", { className: "font-mono text-destructive/70", children: [
+  return /* @__PURE__ */ jsx29("div", { className: "space-y-1", children: errors.map((err, i) => /* @__PURE__ */ jsxs18("p", { className: "text-xs text-destructive", children: [
+    err.path.length > 0 && /* @__PURE__ */ jsxs18("span", { className: "font-mono text-destructive/70", children: [
       err.path.join("."),
       " "
     ] }),
@@ -1524,7 +1576,7 @@ function ValidationMessage({ errors }) {
 
 // src/components/common/ThemeToggle.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var icons = {
   light: Sun,
   dark: Moon,
@@ -1537,21 +1589,21 @@ var next = {
 };
 function ThemeToggle({ theme, onToggle }) {
   const Icon = icons[theme];
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Button,
     {
       variant: "ghost",
       size: "icon",
       onClick: () => onToggle(next[theme]),
       "aria-label": `Switch to ${next[theme]} theme`,
-      children: /* @__PURE__ */ jsx29(Icon, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx30(Icon, { className: "h-4 w-4" })
     }
   );
 }
 
 // src/components/common/ErrorBoundary.tsx
 import { Component } from "react";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function defaultOnError(error, info) {
   console.error("ErrorBoundary caught an error:", error, info);
 }
@@ -1575,15 +1627,15 @@ var ErrorBoundary = class extends Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsxs18(
+      return /* @__PURE__ */ jsxs19(
         "div",
         {
           role: "alert",
           className: "flex flex-col items-center justify-center gap-3 p-6 text-center",
           children: [
-            /* @__PURE__ */ jsx30("p", { className: "text-sm font-medium text-destructive", children: "Something went wrong" }),
-            /* @__PURE__ */ jsx30("p", { className: "text-xs text-muted-foreground", children: this.state.error.message }),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium text-destructive", children: "Something went wrong" }),
+            /* @__PURE__ */ jsx31("p", { className: "text-xs text-muted-foreground", children: this.state.error.message }),
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 type: "button",
@@ -1601,29 +1653,29 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/components/ui/alert-dialog.tsx
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function AlertDialog({ ...props }) {
-  return /* @__PURE__ */ jsx31(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ jsx32(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx32(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 function AlertDialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx31(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ jsx32(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
-function AlertDialogOverlay({
+function AlertDialogBackdrop({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
-    AlertDialogPrimitive.Overlay,
+  return /* @__PURE__ */ jsx32(
+    AlertDialogPrimitive.Backdrop,
     {
-      "data-slot": "alert-dialog-overlay",
+      "data-slot": "alert-dialog-backdrop",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/50 data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:animate-in data-[open]:fade-in-0",
         className
       ),
       ...props
@@ -1634,14 +1686,14 @@ function AlertDialogContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(AlertDialogPortal, { children: [
-    /* @__PURE__ */ jsx31(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx31(
-      AlertDialogPrimitive.Content,
+  return /* @__PURE__ */ jsxs20(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx32(AlertDialogBackdrop, {}),
+    /* @__PURE__ */ jsx32(
+      AlertDialogPrimitive.Popup,
       {
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 sm:max-w-lg",
           className
         ),
         ...props
@@ -1650,7 +1702,7 @@ function AlertDialogContent({
   ] });
 }
 function AlertDialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "alert-dialog-header",
@@ -1660,7 +1712,7 @@ function AlertDialogHeader({ className, ...props }) {
   );
 }
 function AlertDialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "alert-dialog-footer",
@@ -1673,7 +1725,7 @@ function AlertDialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     AlertDialogPrimitive.Title,
     {
       "data-slot": "alert-dialog-title",
@@ -1686,7 +1738,7 @@ function AlertDialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     AlertDialogPrimitive.Description,
     {
       "data-slot": "alert-dialog-description",
@@ -1699,14 +1751,14 @@ function AlertDialogAction({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(AlertDialogPrimitive.Action, { className: cn(buttonVariants(), className), ...props });
+  return /* @__PURE__ */ jsx32(AlertDialogPrimitive.Close, { className: cn(buttonVariants(), className), ...props });
 }
-function AlertDialogCancel({
+function AlertDialogClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
-    AlertDialogPrimitive.Cancel,
+  return /* @__PURE__ */ jsx32(
+    AlertDialogPrimitive.Close,
     {
       className: cn(buttonVariants({ variant: "outline" }), className),
       ...props
@@ -1715,7 +1767,7 @@ function AlertDialogCancel({
 }
 
 // src/components/common/ConfirmDialog.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function ConfirmDialog({
   title,
   description,
@@ -1725,16 +1777,16 @@ function ConfirmDialog({
   onOpenChange,
   children
 }) {
-  return /* @__PURE__ */ jsxs20(AlertDialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx32(AlertDialogTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs20(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs20(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogTitle, { children: title }),
-        /* @__PURE__ */ jsx32(AlertDialogDescription, { children: description })
+  return /* @__PURE__ */ jsxs21(AlertDialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx33(AlertDialogTrigger, { render: children, children: null }),
+    /* @__PURE__ */ jsxs21(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs21(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx33(AlertDialogTitle, { children: title }),
+        /* @__PURE__ */ jsx33(AlertDialogDescription, { children: description })
       ] }),
-      /* @__PURE__ */ jsxs20(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx32(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs21(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx33(AlertDialogClose, { children: "Cancel" }),
+        /* @__PURE__ */ jsx33(
           AlertDialogAction,
           {
             className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
@@ -1748,16 +1800,16 @@ function ConfirmDialog({
 }
 
 // src/components/condition-builder/ConditionBuilder.tsx
-import { Fragment as Fragment5 } from "react";
+import { Fragment as Fragment4 } from "react";
 
 // src/components/condition-builder/ConditionBlock.tsx
 import { memo as memo2 } from "react";
-import { isAndCondition, isOrCondition } from "showwhat";
+import { isAndCondition, isOrCondition, isCheckAnnotationsCondition } from "showwhat";
 import { X as X2 } from "lucide-react";
 
 // src/components/condition-builder/CustomConditionEditor.tsx
 import { useCallback as useCallback8, useRef as useRef3, useState as useState5 } from "react";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function extractArgs(condition) {
   return Object.fromEntries(Object.entries(condition).filter(([k]) => k !== "type" && k !== "id"));
 }
@@ -1765,7 +1817,11 @@ function argsToText(args) {
   if (Object.keys(args).length === 0) return "";
   return JSON.stringify(args, null, 2);
 }
-function CustomConditionEditor({ condition, onChange }) {
+function CustomConditionEditor({
+  condition,
+  onChange,
+  isPresetBacked = false
+}) {
   const rec = condition;
   const [text, setText] = useState5(() => argsToText(extractArgs(rec)));
   const [jsonError, setJsonError] = useState5(null);
@@ -1811,10 +1867,16 @@ function CustomConditionEditor({ condition, onChange }) {
     },
     [rec, onChange]
   );
-  return /* @__PURE__ */ jsxs21("div", { className: "flex-1 space-y-2", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx33(Label, { className: "text-xs text-muted-foreground", children: "Type" }),
-      /* @__PURE__ */ jsx33(
+  const chrome = useConditionBlockChrome();
+  return /* @__PURE__ */ jsxs22("div", { className: "flex-1 space-y-2", children: [
+    chrome && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+      chrome.typeBadge,
+      /* @__PURE__ */ jsx34("div", { className: "flex-1" }),
+      chrome.controls
+    ] }),
+    /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx34(Label, { className: "text-xs text-muted-foreground", children: "Type" }),
+      /* @__PURE__ */ jsx34(
         Input,
         {
           className: "h-8 font-mono text-sm",
@@ -1824,9 +1886,9 @@ function CustomConditionEditor({ condition, onChange }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx33(Label, { className: "text-xs text-muted-foreground", children: "Args" }),
-      /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx34(Label, { className: "text-xs text-muted-foreground", children: "Args" }),
+      /* @__PURE__ */ jsx34(
         Textarea,
         {
           className: "font-mono text-sm",
@@ -1843,44 +1905,53 @@ function CustomConditionEditor({ condition, onChange }) {
           onBlur: handleArgsBlur
         }
       ),
-      jsonError && /* @__PURE__ */ jsx33("p", { className: "mt-1 text-xs text-destructive", children: jsonError })
-    ] })
+      jsonError && /* @__PURE__ */ jsx34("p", { className: "mt-1 text-xs text-destructive", children: jsonError })
+    ] }),
+    isPresetBacked && /* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground/70 italic", children: "Some fields may be overridden by the preset configuration at evaluation time." })
   ] });
 }
 
 // src/components/condition-builder/ConditionExtensionsContext.tsx
-import { createContext, useContext } from "react";
-var ConditionExtensionsContext = createContext(null);
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ConditionExtensionsContext = createContext2(null);
 var ConditionExtensionsProvider = ConditionExtensionsContext.Provider;
 function useConditionExtensions() {
-  return useContext(ConditionExtensionsContext);
+  return useContext2(ConditionExtensionsContext);
 }
 
 // src/components/condition-builder/ConditionValueEditor.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function ConditionValueEditor({ condition, onChange }) {
   const extensions = useConditionExtensions();
   switch (condition.type) {
     case "string":
-      return /* @__PURE__ */ jsx34(StringConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(StringConditionEditor, { condition, onChange });
     case "number":
-      return /* @__PURE__ */ jsx34(NumberConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(NumberConditionEditor, { condition, onChange });
     case "datetime":
-      return /* @__PURE__ */ jsx34(DatetimeConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(DatetimeConditionEditor, { condition, onChange });
     case "bool":
-      return /* @__PURE__ */ jsx34(BoolConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(BoolConditionEditor, { condition, onChange });
     case "env":
-      return /* @__PURE__ */ jsx34(EnvConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(EnvConditionEditor, { condition, onChange });
     case "startAt":
-      return /* @__PURE__ */ jsx34(StartAtConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(StartAtConditionEditor, { condition, onChange });
     case "endAt":
-      return /* @__PURE__ */ jsx34(EndAtConditionEditor, { condition, onChange });
+      return /* @__PURE__ */ jsx35(EndAtConditionEditor, { condition, onChange });
     default: {
       const OverrideEditor = extensions?.editorOverrides.get(condition.type);
       if (OverrideEditor) {
-        return /* @__PURE__ */ jsx34(OverrideEditor, { condition, onChange });
+        return /* @__PURE__ */ jsx35(OverrideEditor, { condition, onChange });
       }
-      return /* @__PURE__ */ jsx34(CustomConditionEditor, { condition, onChange });
+      const isPresetBacked = extensions?.extraConditionTypes.some((m) => m.type === condition.type) ?? false;
+      return /* @__PURE__ */ jsx35(
+        CustomConditionEditor,
+        {
+          condition,
+          onChange,
+          isPresetBacked
+        }
+      );
     }
   }
 }
@@ -1889,7 +1960,8 @@ function ConditionValueEditor({ condition, onChange }) {
 import { X } from "lucide-react";
 
 // src/components/condition-builder/AddConditionMenu.tsx
-import { Plus } from "lucide-react";
+import { useState as useState6, useCallback as useCallback9, useRef as useRef4, useMemo as useMemo8 } from "react";
+import { Plus, Search } from "lucide-react";
 
 // src/components/condition-builder/utils.ts
 function buildDefaultCondition(type, id, extraTypes) {
@@ -1899,6 +1971,9 @@ function buildDefaultCondition(type, id, extraTypes) {
   if (type === "or") {
     return buildOrCondition([], id);
   }
+  if (type === "checkAnnotations") {
+    return buildCheckAnnotationsCondition([], id);
+  }
   if (type === "__custom") {
     return buildCustomCondition({ type: "", ...id ? { id } : {} });
   }
@@ -1914,43 +1989,114 @@ function buildDefaultCondition(type, id, extraTypes) {
 }
 
 // src/components/condition-builder/AddConditionMenu.tsx
-import { Fragment as Fragment2, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var BUILTIN_TYPES = /* @__PURE__ */ new Set(["string", "number", "datetime", "bool", "env", "startAt", "endAt"]);
+var GROUP_ITEMS = [
+  { type: "and", label: "and", group: "Groups" },
+  { type: "or", label: "or", group: "Groups" },
+  { type: "checkAnnotations", label: "checkAnnotations", group: "Groups" }
+];
+var CUSTOM_ITEM = { type: "__custom", label: "Custom", group: "" };
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx36("span", { className: "px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground/70", children });
+}
 function AddConditionMenu({ onAdd }) {
   const extensions = useConditionExtensions();
   const extraTypes = extensions?.extraConditionTypes ?? [];
-  const primitives = BUILTIN_CONDITION_TYPES.filter(
-    (m) => ["string", "number", "datetime", "bool"].includes(m.type)
-  );
-  const sugar = BUILTIN_CONDITION_TYPES.filter((m) => ["env", "startAt", "endAt"].includes(m.type));
-  return /* @__PURE__ */ jsxs22(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs22(DropdownMenuTrigger, { className: "inline-flex shrink-0 items-center justify-center gap-1.5 rounded px-3 h-8 text-sm font-medium hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", children: [
-      /* @__PURE__ */ jsx35(Plus, { className: "mr-1 h-3.5 w-3.5" }),
-      "Add condition"
-    ] }),
-    /* @__PURE__ */ jsxs22(DropdownMenuContent, { align: "start", children: [
-      primitives.map((meta8) => /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd(meta8.type), children: meta8.label }, meta8.type)),
-      /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}),
-      sugar.map((meta8) => /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd(meta8.type), children: meta8.label }, meta8.type)),
-      extraTypes.length > 0 && /* @__PURE__ */ jsxs22(Fragment2, { children: [
-        /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}),
-        extraTypes.map((meta8) => /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd(meta8.type), children: meta8.label }, meta8.type))
-      ] }),
-      /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd("and"), children: "AND Group" }),
-      /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd("or"), children: "OR Group" }),
-      /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx35(DropdownMenuItem, { onSelect: () => onAdd("__custom"), children: "Custom" })
-    ] })
-  ] });
+  const [filter, setFilter] = useState6("");
+  const inputRef = useRef4(null);
+  const allItems = useMemo8(() => {
+    const items = [];
+    for (const m of BUILTIN_CONDITION_TYPES) {
+      if (BUILTIN_TYPES.has(m.type)) {
+        items.push({ type: m.type, label: m.label, group: "Built-in" });
+      }
+    }
+    for (const m of extraTypes) {
+      items.push({ type: m.type, label: m.label, group: "Presets" });
+    }
+    items.push(...GROUP_ITEMS);
+    items.push(CUSTOM_ITEM);
+    return items;
+  }, [extraTypes]);
+  const filtered = useMemo8(() => {
+    if (!filter.trim()) return null;
+    const q = filter.toLowerCase();
+    return allItems.filter(
+      (item) => item.label.toLowerCase().includes(q) || item.type.toLowerCase().includes(q)
+    );
+  }, [filter, allItems]);
+  const handleSelect = useCallback9(
+    (type) => {
+      setFilter("");
+      onAdd(type);
+    },
+    [onAdd]
+  );
+  const builtins = BUILTIN_CONDITION_TYPES.filter((m) => BUILTIN_TYPES.has(m.type));
+  return /* @__PURE__ */ jsxs23(
+    Menu,
+    {
+      onOpenChange: (open) => {
+        if (!open) setFilter("");
+      },
+      children: [
+        /* @__PURE__ */ jsxs23(MenuTrigger, { className: "inline-flex shrink-0 items-center justify-center gap-1.5 rounded px-3 h-8 text-sm font-medium hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", children: [
+          /* @__PURE__ */ jsx36(Plus, { className: "mr-1 h-3.5 w-3.5" }),
+          "Add condition"
+        ] }),
+        /* @__PURE__ */ jsxs23(
+          MenuContent,
+          {
+            align: "start",
+            className: "flex max-h-[var(--available-height)] flex-col overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx36("div", { className: "shrink-0 px-1 pb-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 rounded-sm border border-input px-2 py-1", children: [
+                /* @__PURE__ */ jsx36(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/50" }),
+                /* @__PURE__ */ jsx36(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground/50",
+                    placeholder: "Filter...",
+                    value: filter,
+                    onChange: (e) => setFilter(e.target.value),
+                    onKeyDown: (e) => e.stopPropagation()
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx36("div", { className: "overflow-y-auto", children: filtered ? filtered.length > 0 ? filtered.map((item) => /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect(item.type), children: item.label }, item.type)) : /* @__PURE__ */ jsx36("span", { className: "block px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }) : /* @__PURE__ */ jsxs23(Fragment2, { children: [
+                /* @__PURE__ */ jsx36(SectionLabel, { children: "Built-in" }),
+                builtins.map((meta8) => /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect(meta8.type), children: meta8.label }, meta8.type)),
+                extraTypes.length > 0 && /* @__PURE__ */ jsxs23(Fragment2, { children: [
+                  /* @__PURE__ */ jsx36(MenuSeparator, {}),
+                  /* @__PURE__ */ jsx36(SectionLabel, { children: "Presets" }),
+                  extraTypes.map((meta8) => /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect(meta8.type), children: meta8.label }, meta8.type))
+                ] }),
+                /* @__PURE__ */ jsx36(MenuSeparator, {}),
+                /* @__PURE__ */ jsx36(SectionLabel, { children: "Groups" }),
+                /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect("and"), children: "and" }),
+                /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect("or"), children: "or" }),
+                /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect("checkAnnotations"), children: "checkAnnotations" }),
+                /* @__PURE__ */ jsx36(MenuSeparator, {}),
+                /* @__PURE__ */ jsx36(MenuItem, { onClick: () => handleSelect("__custom"), children: "Custom" })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/MoveButtons.tsx
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function MoveButtons({ onMoveUp, onMoveDown, size = "h-8 w-8" }) {
-  if (!onMoveUp && !onMoveDown) return null;
-  return /* @__PURE__ */ jsxs23(Fragment3, { children: [
-    /* @__PURE__ */ jsx36(
+  const hidden = !onMoveUp && !onMoveDown;
+  return /* @__PURE__ */ jsxs24("div", { className: hidden ? "invisible" : void 0, children: [
+    /* @__PURE__ */ jsx37(
       Button,
       {
         variant: "ghost",
@@ -1959,10 +2105,10 @@ function MoveButtons({ onMoveUp, onMoveDown, size = "h-8 w-8" }) {
         disabled: !onMoveUp,
         onClick: onMoveUp,
         "aria-label": "Move up",
-        children: /* @__PURE__ */ jsx36(ChevronUp, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx37(ChevronUp, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Button,
       {
         variant: "ghost",
@@ -1971,7 +2117,7 @@ function MoveButtons({ onMoveUp, onMoveDown, size = "h-8 w-8" }) {
         disabled: !onMoveDown,
         onClick: onMoveDown,
         "aria-label": "Move down",
-        children: /* @__PURE__ */ jsx36(ChevronDown, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx37(ChevronDown, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
@@ -1986,12 +2132,12 @@ function filterErrorsByPath(errors, pathKey, index) {
 }
 
 // src/components/condition-builder/useConditionArray.ts
-import { useCallback as useCallback9, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo9 } from "react";
 function useConditionArray(conditions, onChange) {
   const extensions = useConditionExtensions();
   const extraTypes = extensions?.extraConditionTypes;
-  const withIds = useMemo8(() => ensureIds(conditions), [conditions]);
-  const handleConditionChange = useCallback9(
+  const withIds = useMemo9(() => ensureIds(conditions), [conditions]);
+  const handleConditionChange = useCallback10(
     (index, updated) => {
       const next2 = [...withIds];
       next2[index] = updated;
@@ -1999,13 +2145,13 @@ function useConditionArray(conditions, onChange) {
     },
     [withIds, onChange]
   );
-  const handleConditionRemove = useCallback9(
+  const handleConditionRemove = useCallback10(
     (index) => {
       onChange(withIds.filter((_, i) => i !== index));
     },
     [withIds, onChange]
   );
-  const handleAddCondition = useCallback9(
+  const handleAddCondition = useCallback10(
     (type) => {
       const newCondition = buildDefaultCondition(
         type,
@@ -2016,7 +2162,7 @@ function useConditionArray(conditions, onChange) {
     },
     [withIds, onChange, extraTypes]
   );
-  const handleMoveUp = useCallback9(
+  const handleMoveUp = useCallback10(
     (index) => {
       if (index <= 0) return;
       const next2 = [...withIds];
@@ -2025,7 +2171,7 @@ function useConditionArray(conditions, onChange) {
     },
     [withIds, onChange]
   );
-  const handleMoveDown = useCallback9(
+  const handleMoveDown = useCallback10(
     (index) => {
       if (index >= withIds.length - 1) return;
       const next2 = [...withIds];
@@ -2045,8 +2191,22 @@ function useConditionArray(conditions, onChange) {
 }
 
 // src/components/condition-builder/ConditionGroup.tsx
-import { Fragment as Fragment4, memo } from "react";
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, memo } from "react";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+var GROUP_TYPE_CLASSES = {
+  and: { border: "border-primary/30", badge: "bg-primary/10 text-primary border-primary/20" },
+  or: {
+    border: "border-amber-500/30",
+    badge: "bg-amber-500/10 text-amber-600 border-amber-500/20 dark:text-amber-400"
+  },
+  default: {
+    border: "border-violet-500/30",
+    badge: "bg-violet-500/10 text-violet-600 border-violet-500/20 dark:text-violet-400"
+  }
+};
+function getGroupTypeClasses(type) {
+  return GROUP_TYPE_CLASSES[type] ?? GROUP_TYPE_CLASSES.default;
+}
 var ConditionGroup = memo(function ConditionGroup2({
   type,
   conditions: rawConditions,
@@ -2065,19 +2225,16 @@ var ConditionGroup = memo(function ConditionGroup2({
     handleMoveDown,
     handleAddCondition
   } = useConditionArray(rawConditions, onChange);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: cn(
-        "border-l-3 pl-3 pr-2 py-2 rounded-r-md",
-        type === "and" ? "border-primary/30" : "border-amber-500/30"
-      ),
+      className: cn("border-l-3 pl-3 pr-2 py-2 rounded-r-md", getGroupTypeClasses(type).border),
       style: {
         backgroundColor: `oklch(from var(--color-muted) l c h / ${Math.min(0.2 + depth * 0.1, 0.5)})`
       },
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "mb-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs25(
             Badge,
             {
               variant: "outline",
@@ -2086,19 +2243,19 @@ var ConditionGroup = memo(function ConditionGroup2({
                 "L",
                 depth,
                 " | ",
-                type.toUpperCase()
+                type
               ]
             }
           ),
-          /* @__PURE__ */ jsxs24("span", { className: "text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs25("span", { className: "text-sm text-muted-foreground", children: [
             conditions.length,
             " condition",
             conditions.length !== 1 ? "s" : ""
           ] }),
-          /* @__PURE__ */ jsx37("div", { className: "flex-1" }),
-          /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 gap-0.5", children: [
-            /* @__PURE__ */ jsx37(MoveButtons, { onMoveUp, onMoveDown, size: "h-6 w-6" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxs25("div", { className: "flex shrink-0 gap-0.5", children: [
+            /* @__PURE__ */ jsx38(MoveButtons, { onMoveUp, onMoveDown, size: "h-6 w-6" }),
+            /* @__PURE__ */ jsx38(
               Button,
               {
                 variant: "ghost",
@@ -2106,24 +2263,21 @@ var ConditionGroup = memo(function ConditionGroup2({
                 className: "h-6 w-6 text-destructive/60 hover:bg-destructive/10 hover:text-destructive",
                 "aria-label": "Remove condition group",
                 onClick: onRemove,
-                children: /* @__PURE__ */ jsx37(X, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx38(X, { className: "h-3.5 w-3.5" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx37("div", { className: "space-y-1.5", children: conditions.map((c, i) => /* @__PURE__ */ jsxs24(Fragment4, { children: [
-          i > 0 && /* @__PURE__ */ jsx37("div", { className: "flex", children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("div", { className: "space-y-1.5", children: conditions.map((c, i) => /* @__PURE__ */ jsxs25(Fragment3, { children: [
+          i > 0 && /* @__PURE__ */ jsx38("div", { className: "flex", children: /* @__PURE__ */ jsx38(
             Badge,
             {
               variant: "outline",
-              className: cn(
-                "select-none font-mono text-xs",
-                type === "and" ? "bg-primary/10 text-primary border-primary/20" : "bg-amber-500/10 text-amber-600 border-amber-500/20 dark:text-amber-400"
-              ),
-              children: type.toUpperCase()
+              className: cn("select-none font-mono text-xs", getGroupTypeClasses(type).badge),
+              children: type === "checkAnnotations" ? "and" : type
             }
           ) }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             ConditionBlock,
             {
               condition: c,
@@ -2136,15 +2290,18 @@ var ConditionGroup = memo(function ConditionGroup2({
             }
           )
         ] }, c.id)) }),
-        /* @__PURE__ */ jsx37("div", { className: "mt-2", children: /* @__PURE__ */ jsx37(AddConditionMenu, { onAdd: handleAddCondition }) })
+        /* @__PURE__ */ jsx38("div", { className: "mt-2", children: /* @__PURE__ */ jsx38(AddConditionMenu, { onAdd: handleAddCondition }) })
       ]
     }
   );
 });
 
 // src/components/condition-builder/ConditionBlock.tsx
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var GENERIC_ZOD_ERROR = "Invalid input";
+function TypeBadge({ label }) {
+  return /* @__PURE__ */ jsx39("span", { className: "inline-flex h-6 shrink-0 items-center rounded-md bg-muted px-2 text-xs font-medium text-muted-foreground", children: label });
+}
 var ConditionBlock = memo2(function ConditionBlock2({
   condition,
   onChange,
@@ -2157,14 +2314,14 @@ var ConditionBlock = memo2(function ConditionBlock2({
   function handleChange(updated) {
     onChange(updated);
   }
-  if (isAndCondition(condition) || isOrCondition(condition)) {
-    return /* @__PURE__ */ jsx38(
+  if (isAndCondition(condition) || isOrCondition(condition) || isCheckAnnotationsCondition(condition)) {
+    return /* @__PURE__ */ jsx39(
       ConditionGroup,
       {
         type: condition.type,
         conditions: condition.conditions,
         onChange: (conditions) => handleChange(
-          condition.type === "and" ? buildAndCondition(conditions, condition.id) : buildOrCondition(conditions, condition.id)
+          condition.type === "and" ? buildAndCondition(conditions, condition.id) : condition.type === "or" ? buildOrCondition(conditions, condition.id) : buildCheckAnnotationsCondition(conditions, condition.id)
         ),
         onRemove,
         onMoveUp,
@@ -2177,31 +2334,28 @@ var ConditionBlock = memo2(function ConditionBlock2({
   const extensions = useConditionExtensions();
   const meta8 = getConditionMeta(condition.type) ?? extensions?.extraConditionTypes.find((m) => m.type === condition.type);
   const label = meta8?.label ?? (condition.type || "Custom");
-  return /* @__PURE__ */ jsxs25("div", { className: "border border-border bg-card p-2 space-y-2", children: [
-    /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx38("span", { className: "flex h-8 shrink-0 items-center text-sm font-medium text-muted-foreground", children: label }),
-      /* @__PURE__ */ jsx38("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsxs25("div", { className: "flex shrink-0 gap-0.5", children: [
-        /* @__PURE__ */ jsx38(MoveButtons, { onMoveUp, onMoveDown }),
-        /* @__PURE__ */ jsx38(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-8 w-8 text-destructive/60 hover:bg-destructive/10 hover:text-destructive",
-            onClick: onRemove,
-            "aria-label": "Remove condition",
-            children: /* @__PURE__ */ jsx38(X2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx38(ConditionValueEditor, { condition, onChange: handleChange }),
-    (errors?.length ?? 0) > 0 && /* @__PURE__ */ jsx38("div", { className: "space-y-0.5", children: errors.map((err, i) => {
+  const typeBadge = /* @__PURE__ */ jsx39(TypeBadge, { label });
+  const controls = /* @__PURE__ */ jsxs26("div", { className: "flex shrink-0 gap-0.5", children: [
+    /* @__PURE__ */ jsx39(MoveButtons, { onMoveUp, onMoveDown }),
+    /* @__PURE__ */ jsx39(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8 text-destructive/60 hover:bg-destructive/10 hover:text-destructive",
+        onClick: onRemove,
+        "aria-label": "Remove condition",
+        children: /* @__PURE__ */ jsx39(X2, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs26("div", { className: "border border-border bg-card p-2 space-y-2", children: [
+    /* @__PURE__ */ jsx39(ConditionBlockProvider, { typeBadge, controls, children: /* @__PURE__ */ jsx39(ConditionValueEditor, { condition, onChange: handleChange }) }),
+    (errors?.length ?? 0) > 0 && /* @__PURE__ */ jsx39("div", { className: "space-y-0.5", children: errors.map((err, i) => {
       const field = err.path.length > 0 ? err.path.join(".") : null;
       const msg = err.message === GENERIC_ZOD_ERROR ? "Invalid condition \u2014 check required fields" : err.message;
-      return /* @__PURE__ */ jsxs25("p", { className: "text-xs text-destructive", children: [
-        field && /* @__PURE__ */ jsxs25("span", { className: "font-mono text-destructive/70", children: [
+      return /* @__PURE__ */ jsxs26("p", { className: "text-xs text-destructive", children: [
+        field && /* @__PURE__ */ jsxs26("span", { className: "font-mono text-destructive/70", children: [
           field,
           ": "
         ] }),
@@ -2212,7 +2366,7 @@ var ConditionBlock = memo2(function ConditionBlock2({
 });
 
 // src/components/condition-builder/ConditionBuilder.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 function ConditionBuilder({
   conditions: rawConditions,
   onChange,
@@ -2226,23 +2380,23 @@ function ConditionBuilder({
     handleMoveDown,
     handleAddCondition
   } = useConditionArray(rawConditions, onChange);
-  return /* @__PURE__ */ jsx39(ErrorBoundary, { children: /* @__PURE__ */ jsxs26("div", { className: "space-y-1.5", children: [
-    conditions.length > 0 && /* @__PURE__ */ jsxs26("div", { className: "border-l-3 pl-3 py-2 bg-muted/20 rounded-r-md border-primary/30", children: [
-      /* @__PURE__ */ jsx39("div", { className: "mb-2 flex items-center gap-2", children: /* @__PURE__ */ jsxs26("span", { className: "text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsx40(ErrorBoundary, { children: /* @__PURE__ */ jsxs27("div", { className: "space-y-1.5", children: [
+    conditions.length > 0 && /* @__PURE__ */ jsxs27("div", { className: "border-l-3 pl-3 py-2 bg-muted/20 rounded-r-md border-primary/30", children: [
+      /* @__PURE__ */ jsx40("div", { className: "mb-2 flex items-center gap-2", children: /* @__PURE__ */ jsxs27("span", { className: "text-sm text-muted-foreground", children: [
         conditions.length,
         " condition",
         conditions.length !== 1 ? "s" : ""
       ] }) }),
-      /* @__PURE__ */ jsx39("div", { className: "space-y-1.5", children: conditions.map((c, i) => /* @__PURE__ */ jsxs26(Fragment5, { children: [
-        i > 0 && /* @__PURE__ */ jsx39("div", { className: "flex", children: /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40("div", { className: "space-y-1.5", children: conditions.map((c, i) => /* @__PURE__ */ jsxs27(Fragment4, { children: [
+        i > 0 && /* @__PURE__ */ jsx40("div", { className: "flex", children: /* @__PURE__ */ jsx40(
           Badge,
           {
             variant: "outline",
             className: "select-none font-mono text-xs bg-primary/10 text-primary border-primary/20",
-            children: "AND"
+            children: "and"
           }
         ) }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           ConditionBlock,
           {
             condition: c,
@@ -2256,13 +2410,13 @@ function ConditionBuilder({
         )
       ] }, c.id)) })
     ] }),
-    /* @__PURE__ */ jsx39(AddConditionMenu, { onAdd: handleAddCondition })
+    /* @__PURE__ */ jsx40(AddConditionMenu, { onAdd: handleAddCondition })
   ] }) });
 }
 
 // src/components/variation-editor/VariationCard.tsx
-import { memo as memo3, useState as useState6 } from "react";
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { memo as memo3, useState as useState7 } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
 import { ChevronRight, Eye, GripVertical, Trash2 } from "lucide-react";
 
 // src/utils/condition-summary.ts
@@ -2330,10 +2484,10 @@ function formatOne(c, indent) {
   }
   const meta8 = getConditionMeta(c.type);
   const label = meta8?.label ?? c.type;
-  const { op, val } = formatLeafOperator(c);
+  const { op: op2, val } = formatLeafOperator(c);
   const key = "key" in c ? String(c.key) : "";
-  if (key && val) return [`${prefix}${key} ${op} ${val}`];
-  if (val) return [`${prefix}${label} ${op} ${val}`];
+  if (key && val) return [`${prefix}${key} ${op2} ${val}`];
+  if (val) return [`${prefix}${label} ${op2} ${val}`];
   return [`${prefix}${label}`];
 }
 function formatConditionSummary(conditions) {
@@ -2347,7 +2501,7 @@ function formatConditionSummary(conditions) {
 }
 
 // src/components/variation-editor/VariationCard.tsx
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var VariationCard = memo3(function VariationCard2({
   variation,
   index,
@@ -2356,34 +2510,39 @@ var VariationCard = memo3(function VariationCard2({
   onRemove,
   dragHandleProps
 }) {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const conditionCount = variation.conditions?.length ?? 0;
-  return /* @__PURE__ */ jsx40(CollapsiblePrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs27("div", { className: "rounded-lg border border-border/50 bg-card transition-colors hover:border-primary/30", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
-      /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs28("div", { className: "rounded-lg border border-border/50 bg-card transition-colors hover:border-primary/30", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx41(
         "button",
         {
           type: "button",
           className: "cursor-grab touch-none text-muted-foreground/50 hover:text-muted-foreground",
           "aria-label": "Drag to reorder",
           ...dragHandleProps,
-          children: /* @__PURE__ */ jsx40(GripVertical, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx41(GripVertical, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx40(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
-        "button",
+      /* @__PURE__ */ jsxs28(
+        Collapsible.Trigger,
         {
-          type: "button",
-          className: "flex flex-1 items-center gap-2 text-left hover:cursor-pointer",
+          render: /* @__PURE__ */ jsx41(
+            "button",
+            {
+              type: "button",
+              className: "flex flex-1 items-center gap-2 text-left hover:cursor-pointer"
+            }
+          ),
           children: [
-            /* @__PURE__ */ jsx40(Badge, { variant: "secondary", className: "font-mono text-xs", children: index }),
-            /* @__PURE__ */ jsx40("span", { className: "flex-1 truncate text-sm text-muted-foreground", children: variation.description || String(variation.value ?? "") }),
-            conditionCount > 0 && /* @__PURE__ */ jsxs27("span", { className: "text-xs text-muted-foreground/60", children: [
+            /* @__PURE__ */ jsx41(Badge, { variant: "secondary", className: "font-mono text-xs", children: index }),
+            /* @__PURE__ */ jsx41("span", { className: "flex-1 truncate text-sm text-muted-foreground", children: variation.description || String(variation.value ?? "") }),
+            conditionCount > 0 && /* @__PURE__ */ jsxs28("span", { className: "text-xs text-muted-foreground/60", children: [
               conditionCount,
               " ",
               conditionCount === 1 ? "condition" : "conditions"
             ] }),
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx41(
               ChevronRight,
               {
                 className: `h-4 w-4 text-muted-foreground/60 transition-transform ${open ? "rotate-90" : ""}`
@@ -2391,39 +2550,39 @@ var VariationCard = memo3(function VariationCard2({
             )
           ]
         }
-      ) })
+      )
     ] }),
-    /* @__PURE__ */ jsx40(CollapsiblePrimitive.Content, { children: /* @__PURE__ */ jsxs27("div", { className: "space-y-4 border-t border-border/40 px-4 py-4", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx40(Label, { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Value" }),
-        /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(Collapsible.Panel, { children: /* @__PURE__ */ jsxs28("div", { className: "space-y-4 border-t border-border/40 px-4 py-4", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx41(Label, { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Value" }),
+        /* @__PURE__ */ jsx41(
           ConfirmDialog,
           {
             title: "Remove variation?",
             description: `This will delete variation ${index} and all its conditions. This action cannot be undone.`,
             actionLabel: "Remove",
             onConfirm: onRemove,
-            children: /* @__PURE__ */ jsx40(
+            children: /* @__PURE__ */ jsx41(
               Button,
               {
                 variant: "ghost",
                 size: "icon-xs",
                 className: "shrink-0 text-destructive/60 hover:bg-destructive/10 hover:text-destructive",
                 "aria-label": "Remove variation",
-                children: /* @__PURE__ */ jsx40(Trash2, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx41(Trash2, { className: "h-3.5 w-3.5" })
               }
             )
           }
         )
       ] }),
-      /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(
         ValueInput,
         {
           value: variation.value,
           onChange: (value) => onChange({ ...variation, value })
         }
       ) }),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         "input",
         {
           className: "w-full border-none bg-transparent text-sm text-muted-foreground placeholder:text-muted-foreground/50 focus:text-foreground focus:outline-none",
@@ -2435,28 +2594,33 @@ var VariationCard = memo3(function VariationCard2({
           })
         }
       ),
-      /* @__PURE__ */ jsx40("div", { className: "border-t border-border/40 pt-4", children: /* @__PURE__ */ jsxs27("div", { className: "rounded-lg border border-border/40 bg-muted/30 p-3", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "mb-1.5 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx40(Label, { className: "text-sm font-medium", children: "Conditions" }),
-          conditionCount > 0 && /* @__PURE__ */ jsxs27(Dialog, { children: [
-            /* @__PURE__ */ jsx40(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(
-              "button",
+      /* @__PURE__ */ jsx41("div", { className: "border-t border-border/40 pt-4", children: /* @__PURE__ */ jsxs28("div", { className: "rounded-lg border border-border/40 bg-muted/30 p-3", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "mb-1.5 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx41(Label, { className: "text-sm font-medium", children: "Conditions" }),
+          conditionCount > 0 && /* @__PURE__ */ jsxs28(Dialog, { children: [
+            /* @__PURE__ */ jsx41(
+              DialogTrigger,
               {
-                type: "button",
-                className: "inline-flex items-center justify-center rounded p-0.5 text-muted-foreground/60 hover:text-muted-foreground",
-                children: /* @__PURE__ */ jsx40(Eye, { className: "h-3.5 w-3.5" })
+                render: /* @__PURE__ */ jsx41(
+                  "button",
+                  {
+                    type: "button",
+                    className: "inline-flex items-center justify-center rounded p-0.5 text-muted-foreground/60 hover:text-muted-foreground"
+                  }
+                ),
+                children: /* @__PURE__ */ jsx41(Eye, { className: "h-3.5 w-3.5" })
               }
-            ) }),
-            /* @__PURE__ */ jsxs27(DialogContent, { children: [
-              /* @__PURE__ */ jsxs27(DialogHeader, { children: [
-                /* @__PURE__ */ jsx40(DialogTitle, { children: "Condition Summary" }),
-                /* @__PURE__ */ jsx40(DialogDescription, { children: "Evaluation logic for this variation" })
+            ),
+            /* @__PURE__ */ jsxs28(DialogContent, { children: [
+              /* @__PURE__ */ jsxs28(DialogHeader, { children: [
+                /* @__PURE__ */ jsx41(DialogTitle, { children: "Condition Summary" }),
+                /* @__PURE__ */ jsx41(DialogDescription, { children: "Evaluation logic for this variation" })
               ] }),
-              /* @__PURE__ */ jsx40("pre", { className: "rounded-md bg-muted p-4 font-mono text-xs whitespace-pre overflow-auto max-h-80", children: formatConditionSummary(variation.conditions ?? []) })
+              /* @__PURE__ */ jsx41("pre", { className: "rounded-md bg-muted p-4 font-mono text-xs whitespace-pre overflow-auto max-h-80", children: formatConditionSummary(variation.conditions ?? []) })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           ConditionBuilder,
           {
             conditions: variation.conditions ?? [],
@@ -2468,7 +2632,7 @@ var VariationCard = memo3(function VariationCard2({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         ValidationMessage,
         {
           errors: validationErrors?.filter((err) => err.path[0] !== "conditions")
@@ -2479,7 +2643,7 @@ var VariationCard = memo3(function VariationCard2({
 });
 
 // src/components/variation-editor/VariationList.tsx
-import { useCallback as useCallback10, useMemo as useMemo9 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo10 } from "react";
 import {
   DndContext,
   closestCenter,
@@ -2495,7 +2659,7 @@ import {
   arrayMove
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function SortableVariation({
   id,
   variation,
@@ -2518,7 +2682,7 @@ function SortableVariation({
     transition,
     opacity: isDragging ? 0.5 : 1
   };
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ref: setNodeRef,
@@ -2527,7 +2691,7 @@ function SortableVariation({
         animationDelay: `${index * 50}ms`
       },
       className: "animate-fade-up",
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         VariationCard,
         {
           variation,
@@ -2550,9 +2714,9 @@ function VariationList({
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor)
   );
-  const variations = useMemo9(() => ensureIds(rawVariations), [rawVariations]);
-  const sortableIds = useMemo9(() => variations.map((v) => v.id), [variations]);
-  const handleDragEnd = useCallback10(
+  const variations = useMemo10(() => ensureIds(rawVariations), [rawVariations]);
+  const sortableIds = useMemo10(() => variations.map((v) => v.id), [variations]);
+  const handleDragEnd = useCallback11(
     (event) => {
       const { active, over } = event;
       if (!over || active.id === over.id) return;
@@ -2563,7 +2727,7 @@ function VariationList({
     },
     [sortableIds, variations, onChange]
   );
-  const handleVariationChange = useCallback10(
+  const handleVariationChange = useCallback11(
     (index, updated) => {
       const next2 = [...variations];
       next2[index] = updated;
@@ -2571,13 +2735,13 @@ function VariationList({
     },
     [variations, onChange]
   );
-  const handleRemove = useCallback10(
+  const handleRemove = useCallback11(
     (index) => {
       onChange(variations.filter((_, i) => i !== index));
     },
     [variations, onChange]
   );
-  return /* @__PURE__ */ jsx41("div", { className: "space-y-3", children: /* @__PURE__ */ jsx41(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx41(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: variations.map((v, i) => /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("div", { className: "space-y-3", children: /* @__PURE__ */ jsx42(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx42(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: variations.map((v, i) => /* @__PURE__ */ jsx42(
     SortableVariation,
     {
       id: v.id,
@@ -2592,9 +2756,18 @@ function VariationList({
 }
 
 // src/components/definition-editor/DefinitionEditor.tsx
-import { useRef as useRef4, useState as useState7 } from "react";
-import { AlertTriangle, Plus as Plus2, Save, Undo2 } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useRef as useRef5, useState as useState8 } from "react";
+import {
+  AlertTriangle,
+  Download,
+  MoreHorizontal,
+  Plus as Plus2,
+  RefreshCw,
+  Save,
+  Trash2 as Trash22,
+  Undo2
+} from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function DefinitionEditor({
   definitionKey,
   definition,
@@ -2604,11 +2777,15 @@ function DefinitionEditor({
   onUpdate,
   onRename,
   onSave,
-  onDiscard
+  onDiscard,
+  onRemove,
+  onExport,
+  onRefresh
 }) {
-  const [editingKey, setEditingKey] = useState7(false);
-  const [keyDraft, setKeyDraft] = useState7(definitionKey);
-  const prevKeyRef = useRef4(definitionKey);
+  const [editingKey, setEditingKey] = useState8(false);
+  const [deleteOpen, setDeleteOpen] = useState8(false);
+  const [keyDraft, setKeyDraft] = useState8(definitionKey);
+  const prevKeyRef = useRef5(definitionKey);
   if (prevKeyRef.current !== definitionKey) {
     prevKeyRef.current = definitionKey;
     setKeyDraft(definitionKey);
@@ -2633,9 +2810,9 @@ function DefinitionEditor({
     });
   }
   const errorCount = validationErrors?.length ?? 0;
-  return /* @__PURE__ */ jsxs28("div", { className: "flex h-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs28("div", { className: "flex shrink-0 items-center justify-end gap-2 border-b border-border bg-muted/30 px-4 py-2", children: [
-      /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex h-12 shrink-0 items-center justify-end gap-2 border-b border-border bg-muted/30 px-4", children: [
+      /* @__PURE__ */ jsxs29(
         Button,
         {
           variant: isDirty ? "default" : "ghost",
@@ -2643,38 +2820,86 @@ function DefinitionEditor({
           disabled: !isDirty || isPending,
           onClick: onSave,
           children: [
-            /* @__PURE__ */ jsx42(Save, { className: "mr-1.5 h-4 w-4" }),
+            /* @__PURE__ */ jsx43(Save, { className: "mr-1.5 h-4 w-4" }),
             "Save"
           ]
         }
       ),
-      onDiscard ? /* @__PURE__ */ jsx42(
+      onDiscard ? /* @__PURE__ */ jsx43(
         ConfirmDialog,
         {
           title: "Discard changes?",
           description: "This will revert all unsaved changes to this definition. This action cannot be undone.",
           actionLabel: "Discard",
           onConfirm: onDiscard,
-          children: /* @__PURE__ */ jsxs28(Button, { variant: "ghost", size: "sm", disabled: !isDirty || isPending, children: [
-            /* @__PURE__ */ jsx42(Undo2, { className: "mr-1.5 h-4 w-4" }),
+          children: /* @__PURE__ */ jsxs29(Button, { variant: "ghost", size: "sm", disabled: !isDirty || isPending, children: [
+            /* @__PURE__ */ jsx43(Undo2, { className: "mr-1.5 h-4 w-4" }),
             "Discard"
           ] })
         }
-      ) : /* @__PURE__ */ jsxs28(Button, { variant: "ghost", size: "sm", disabled: true, children: [
-        /* @__PURE__ */ jsx42(Undo2, { className: "mr-1.5 h-4 w-4" }),
+      ) : /* @__PURE__ */ jsxs29(Button, { variant: "ghost", size: "sm", disabled: true, children: [
+        /* @__PURE__ */ jsx43(Undo2, { className: "mr-1.5 h-4 w-4" }),
         "Discard"
-      ] })
+      ] }),
+      onExport && /* @__PURE__ */ jsxs29(Menu, { children: [
+        /* @__PURE__ */ jsxs29(
+          MenuTrigger,
+          {
+            render: /* @__PURE__ */ jsx43(Button, { variant: "ghost", size: "sm", disabled: isDirty || isPending }),
+            children: [
+              /* @__PURE__ */ jsx43(Download, { className: "mr-1.5 h-4 w-4" }),
+              "Export"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs29(MenuContent, { children: [
+          /* @__PURE__ */ jsx43(MenuItem, { onClick: () => onExport("yaml"), children: "Export as YAML" }),
+          /* @__PURE__ */ jsx43(MenuItem, { onClick: () => onExport("json"), children: "Export as JSON" })
+        ] })
+      ] }),
+      (onRemove || onRefresh) && /* @__PURE__ */ jsxs29(Menu, { children: [
+        /* @__PURE__ */ jsx43(MenuTrigger, { render: /* @__PURE__ */ jsx43(Button, { variant: "ghost", size: "sm", "aria-label": "More actions" }), children: /* @__PURE__ */ jsx43(MoreHorizontal, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs29(MenuContent, { children: [
+          onRefresh && /* @__PURE__ */ jsxs29(MenuItem, { disabled: isDirty || isPending, onClick: onRefresh, children: [
+            /* @__PURE__ */ jsx43(RefreshCw, { className: "mr-1.5 h-4 w-4" }),
+            "Refresh from server"
+          ] }),
+          onRemove && /* @__PURE__ */ jsxs29(
+            MenuItem,
+            {
+              className: "text-destructive/60 hover:text-destructive",
+              onClick: () => setDeleteOpen(true),
+              children: [
+                /* @__PURE__ */ jsx43(Trash22, { className: "mr-1.5 h-4 w-4" }),
+                "Delete"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      onRemove && /* @__PURE__ */ jsx43(
+        ConfirmDialog,
+        {
+          title: "Delete definition?",
+          description: `This will permanently remove "${definitionKey}" and all its variations. This action cannot be undone.`,
+          actionLabel: "Delete",
+          open: deleteOpen,
+          onOpenChange: setDeleteOpen,
+          onConfirm: onRemove,
+          children: /* @__PURE__ */ jsx43("span", {})
+        }
+      )
     ] }),
-    errorCount > 0 && /* @__PURE__ */ jsx42("div", { className: "shrink-0 border-b border-destructive/30 bg-destructive/10 px-4 py-2", children: /* @__PURE__ */ jsxs28("p", { className: "flex items-center gap-1.5 text-xs font-medium text-destructive", children: [
-      /* @__PURE__ */ jsx42(AlertTriangle, { className: "h-3.5 w-3.5" }),
+    errorCount > 0 && /* @__PURE__ */ jsx43("div", { className: "shrink-0 border-b border-destructive/30 bg-destructive/10 px-4 py-2", children: /* @__PURE__ */ jsxs29("p", { className: "flex items-center gap-1.5 text-xs font-medium text-destructive", children: [
+      /* @__PURE__ */ jsx43(AlertTriangle, { className: "h-3.5 w-3.5" }),
       errorCount,
       " validation error",
       errorCount !== 1 ? "s" : "",
       " \u2014 fix the highlighted fields below"
     ] }) }),
-    /* @__PURE__ */ jsx42("div", { className: "shrink-0 border-b border-border/50 mx-auto w-full max-w-3xl px-8 pt-8 pb-4 space-y-3", children: /* @__PURE__ */ jsxs28("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsx42("div", { className: "flex-1", children: editingKey ? /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43("div", { className: "shrink-0 border-b border-border/50 mx-auto w-full max-w-3xl px-8 pt-8 pb-4 space-y-3", children: /* @__PURE__ */ jsxs29("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsx43("div", { className: "flex-1", children: editingKey ? /* @__PURE__ */ jsx43(
           Input,
           {
             className: "h-auto border-none bg-transparent px-0 font-mono text-2xl font-semibold shadow-none focus-visible:ring-0",
@@ -2690,7 +2915,7 @@ function DefinitionEditor({
               }
             }
           }
-        ) : /* @__PURE__ */ jsx42(
+        ) : /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
@@ -2703,9 +2928,9 @@ function DefinitionEditor({
             children: definitionKey
           }
         ) }),
-        /* @__PURE__ */ jsxs28("div", { className: "flex shrink-0 items-center gap-2 pt-1.5", children: [
-          /* @__PURE__ */ jsx42(Label, { htmlFor: "definition-active", className: "text-xs text-muted-foreground", children: "Active" }),
-          /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsxs29("div", { className: "flex shrink-0 items-center gap-2 pt-1.5", children: [
+          /* @__PURE__ */ jsx43(Label, { htmlFor: "definition-active", className: "text-xs text-muted-foreground", children: "Active" }),
+          /* @__PURE__ */ jsx43(
             Switch,
             {
               id: "definition-active",
@@ -2718,7 +2943,7 @@ function DefinitionEditor({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         "input",
         {
           className: "w-full border-none bg-transparent text-sm text-muted-foreground placeholder:text-muted-foreground/50 focus:text-foreground focus:outline-none",
@@ -2732,10 +2957,10 @@ function DefinitionEditor({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx42("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx42("div", { className: "mx-auto w-full max-w-3xl px-8 py-8 space-y-4", children: /* @__PURE__ */ jsxs28("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx42("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Variations" }),
-        /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsx43("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx43("div", { className: "mx-auto w-full max-w-3xl px-8 py-8 space-y-4", children: /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx43("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Variations" }),
+        /* @__PURE__ */ jsxs29(
           Button,
           {
             variant: "ghost",
@@ -2743,13 +2968,13 @@ function DefinitionEditor({
             className: "h-7 text-xs text-muted-foreground",
             onClick: handleAddVariation,
             children: [
-              /* @__PURE__ */ jsx42(Plus2, { className: "mr-1 h-3 w-3" }),
+              /* @__PURE__ */ jsx43(Plus2, { className: "mr-1 h-3 w-3" }),
               "Add"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         VariationList,
         {
           variations: definition.variations,
@@ -2757,14 +2982,14 @@ function DefinitionEditor({
           onChange: (variations) => onUpdate({ ...definition, variations })
         }
       ),
-      definition.variations.length > 2 && /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsxs29(
         "button",
         {
           type: "button",
           className: "flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border/60 py-2.5 text-xs text-muted-foreground hover:border-border hover:text-foreground",
           onClick: handleAddVariation,
           children: [
-            /* @__PURE__ */ jsx42(Plus2, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx43(Plus2, { className: "h-3 w-3" }),
             "Add variation"
           ]
         }
@@ -2775,12 +3000,20 @@ function DefinitionEditor({
 
 // src/components/definition-list/DefinitionList.tsx
 import { useState as useState9 } from "react";
-import { Plus as Plus3, Search, X as X3 } from "lucide-react";
+import { Plus as Plus3, Search as Search2, X as X3 } from "lucide-react";
 
 // src/components/definition-list/DefinitionListItem.tsx
-import { memo as memo4, useState as useState8 } from "react";
-import { Trash2 as Trash22 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { memo as memo4 } from "react";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+var STATUS_CLASSES = {
+  unfetched: "border-muted-foreground/40 bg-muted-foreground/40",
+  error: "border-status-error bg-status-error",
+  error_dirty: "border-status-error bg-transparent",
+  active: "border-status-active bg-status-active",
+  active_dirty: "border-status-active bg-transparent",
+  inactive: "border-status-inactive bg-status-inactive",
+  inactive_dirty: "border-status-inactive bg-transparent"
+};
 var DefinitionListItem = memo4(function DefinitionListItem2({
   definitionKey,
   variationCount,
@@ -2788,11 +3021,16 @@ var DefinitionListItem = memo4(function DefinitionListItem2({
   hasErrors,
   isSelected,
   isDirty,
-  onSelect,
-  onRemove
+  onSelect
 }) {
-  const [confirmOpen, setConfirmOpen] = useState8(false);
-  return /* @__PURE__ */ jsxs29(
+  const isUnfetched = isActive === void 0;
+  function getStatusLabel() {
+    if (isUnfetched) return `${definitionKey} is unfetched`;
+    const state = hasErrors ? "error" : isActive ? "active" : "inactive";
+    const dirty = isDirty ? ", unsaved changes" : "";
+    return `${definitionKey} is ${state}${dirty}`;
+  }
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       tabIndex: 0,
@@ -2808,56 +3046,28 @@ var DefinitionListItem = memo4(function DefinitionListItem2({
         }
       },
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             role: "status",
-            "aria-label": `${definitionKey} is ${hasErrors ? "error" : isActive ? "active" : "inactive"}${isDirty ? ", unsaved changes" : ""}`,
+            "aria-label": getStatusLabel(),
             className: cn(
               "h-2 w-2 shrink-0 rounded-full border-[1.5px]",
-              hasErrors ? isDirty ? "border-status-error bg-transparent" : "border-status-error bg-status-error" : isActive ? isDirty ? "border-status-active bg-transparent" : "border-status-active bg-status-active" : isDirty ? "border-status-inactive bg-transparent" : "border-status-inactive bg-status-inactive"
+              isUnfetched ? STATUS_CLASSES.unfetched : hasErrors ? isDirty ? STATUS_CLASSES.error_dirty : STATUS_CLASSES.error : isActive ? isDirty ? STATUS_CLASSES.active_dirty : STATUS_CLASSES.active : isDirty ? STATUS_CLASSES.inactive_dirty : STATUS_CLASSES.inactive
             )
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate font-mono text-sm", children: definitionKey }),
-        /* @__PURE__ */ jsx43(Badge, { variant: "secondary", className: "text-xs tabular-nums", children: variationCount }),
-        /* @__PURE__ */ jsx43(
-          ConfirmDialog,
-          {
-            open: confirmOpen,
-            onOpenChange: setConfirmOpen,
-            title: "Delete definition?",
-            description: /* @__PURE__ */ jsxs29(Fragment6, { children: [
-              "This will permanently delete ",
-              /* @__PURE__ */ jsx43("strong", { className: "font-mono", children: definitionKey }),
-              " and all its variations. This action cannot be undone."
-            ] }),
-            actionLabel: "Delete",
-            onConfirm: onRemove,
-            children: /* @__PURE__ */ jsx43(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-xs",
-                className: "text-destructive/60 opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100",
-                "aria-label": `Remove ${definitionKey}`,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setConfirmOpen(true);
-                },
-                children: /* @__PURE__ */ jsx43(Trash22, { className: "h-3.5 w-3.5" })
-              }
-            )
-          }
-        )
+        /* @__PURE__ */ jsx44("span", { className: "min-w-0 flex-1 break-all font-mono text-sm", children: definitionKey }),
+        variationCount !== void 0 && /* @__PURE__ */ jsx44(Badge, { variant: "secondary", className: "text-xs tabular-nums", children: variationCount })
       ]
     }
   );
 });
 
 // src/components/definition-list/DefinitionList.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefinitionList({
+  keys,
   definitions,
   selectedKey,
   validationErrors,
@@ -2869,12 +3079,10 @@ function DefinitionList({
   const [search, setSearch] = useState9("");
   const [adding, setAdding] = useState9(false);
   const [newKey, setNewKey] = useState9("");
-  const keys = Object.keys(definitions).filter(
-    (k) => k.toLowerCase().includes(search.toLowerCase())
-  );
+  const filteredKeys = keys.filter((k) => k.toLowerCase().includes(search.toLowerCase()));
   async function handleAdd() {
     const trimmed = newKey.trim();
-    if (trimmed && !(trimmed in definitions)) {
+    if (trimmed && !keys.includes(trimmed)) {
       try {
         await onAdd(trimmed);
         setNewKey("");
@@ -2883,10 +3091,10 @@ function DefinitionList({
       }
     }
   }
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsx44("div", { className: "p-3", children: /* @__PURE__ */ jsxs30("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx44(Search, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx45("div", { className: "p-3", children: /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx45(Search2, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx45(
         Input,
         {
           className: "h-9 pl-8 text-sm",
@@ -2896,25 +3104,28 @@ function DefinitionList({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx44(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs30("div", { className: "px-2", children: [
-      keys.map((key) => /* @__PURE__ */ jsx44(
-        DefinitionListItem,
-        {
-          definitionKey: key,
-          variationCount: definitions[key].variations.length,
-          isActive: definitions[key].active !== false,
-          hasErrors: !!(validationErrors?.[key] && validationErrors[key].length > 0),
-          isDirty: dirtyKeys?.includes(key),
-          isSelected: key === selectedKey,
-          onSelect: () => onSelect(key),
-          onRemove: () => onRemove(key)
-        },
-        key
-      )),
-      keys.length === 0 && /* @__PURE__ */ jsx44("p", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: search ? "No definitions match" : "No definitions" })
+    /* @__PURE__ */ jsx45(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs31("div", { className: "px-2", children: [
+      filteredKeys.map((key) => {
+        const def = definitions[key];
+        return /* @__PURE__ */ jsx45(
+          DefinitionListItem,
+          {
+            definitionKey: key,
+            variationCount: def?.variations.length,
+            isActive: def ? def.active !== false : void 0,
+            hasErrors: !!(validationErrors?.[key] && validationErrors[key].length > 0),
+            isDirty: dirtyKeys?.includes(key),
+            isSelected: key === selectedKey,
+            onSelect: () => onSelect(key),
+            onRemove: () => onRemove(key)
+          },
+          key
+        );
+      }),
+      filteredKeys.length === 0 && /* @__PURE__ */ jsx45("p", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: search ? "No definitions match" : "No definitions" })
     ] }) }),
-    /* @__PURE__ */ jsx44("div", { className: "border-t border-border p-3", children: adding ? /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { className: "border-t border-border p-3", children: adding ? /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx45(
         Input,
         {
           className: "h-9 w-full font-mono text-sm",
@@ -2928,9 +3139,9 @@ function DefinitionList({
           }
         }
       ),
-      /* @__PURE__ */ jsxs30("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx44(Button, { size: "sm", className: "h-8 flex-1", onClick: handleAdd, children: "Save" }),
-        /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsxs31("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx45(Button, { size: "sm", className: "h-8 flex-1", onClick: handleAdd, children: "Save" }),
+        /* @__PURE__ */ jsx45(
           Button,
           {
             variant: "ghost",
@@ -2941,11 +3152,11 @@ function DefinitionList({
               setAdding(false);
               setNewKey("");
             },
-            children: /* @__PURE__ */ jsx44(X3, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx45(X3, { className: "h-4 w-4" })
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsxs30(
+    ] }) : /* @__PURE__ */ jsxs31(
       Button,
       {
         variant: "outline",
@@ -2954,7 +3165,7 @@ function DefinitionList({
         "aria-label": "Add new definition",
         onClick: () => setAdding(true),
         children: [
-          /* @__PURE__ */ jsx44(Plus3, { className: "mr-1.5 h-4 w-4" }),
+          /* @__PURE__ */ jsx45(Plus3, { className: "mr-1.5 h-4 w-4" }),
           "New definition"
         ]
       }
@@ -2963,26 +3174,70 @@ function DefinitionList({
 }
 
 // src/components/condition-builder/preset-ui.tsx
-import { useCallback as useCallback11, useMemo as useMemo10 } from "react";
-import { PRIMITIVE_TYPES } from "showwhat";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useMemo as useMemo11 } from "react";
+
+// src/components/condition-builder/CompositePresetViewer.tsx
+import { useState as useState10 } from "react";
+import { Eye as Eye2 } from "lucide-react";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+function createCompositePresetEditor(presetName, compositeType, conditions) {
+  function CompositePresetEditor() {
+    const [open, setOpen] = useState10(false);
+    return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs32("span", { className: "text-xs text-muted-foreground", children: [
+        "Composite ",
+        /* @__PURE__ */ jsx46("span", { className: "font-mono font-medium", children: compositeType.toUpperCase() }),
+        " ",
+        "preset (",
+        conditions.length,
+        " condition",
+        conditions.length !== 1 ? "s" : "",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx46(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-7 w-7",
+          onClick: () => setOpen(true),
+          "aria-label": "View preset conditions",
+          children: /* @__PURE__ */ jsx46(Eye2, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx46(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs32(DialogContent, { children: [
+        /* @__PURE__ */ jsxs32(DialogHeader, { children: [
+          /* @__PURE__ */ jsx46(DialogTitle, { children: presetName }),
+          /* @__PURE__ */ jsx46(DialogDescription, { children: "Read-only view of the preset conditions." })
+        ] }),
+        /* @__PURE__ */ jsx46("pre", { className: "max-h-80 overflow-auto rounded bg-muted p-3 text-xs font-mono", children: JSON.stringify(conditions, null, 2) }),
+        /* @__PURE__ */ jsx46(DialogFooter, { showCloseButton: true })
+      ] }) })
+    ] });
+  }
+  CompositePresetEditor.displayName = `CompositePresetEditor(${presetName})`;
+  return CompositePresetEditor;
+}
+
+// src/components/condition-builder/preset-ui.tsx
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+var PRIMITIVE_TYPES = /* @__PURE__ */ new Set(["string", "number", "bool", "datetime"]);
+var COMPOSITE_TYPES = /* @__PURE__ */ new Set(["and", "or", "checkAnnotations"]);
 var TYPE_DEFAULTS = {
   string: { op: "eq", value: "" },
   number: { op: "eq", value: 0 },
   bool: { value: true },
   datetime: { op: "eq", value: (/* @__PURE__ */ new Date()).toISOString() }
 };
-function capitalize(s) {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}
 function createPresetConditionMeta(presets) {
   return Object.entries(presets).map(([name, preset]) => {
     const isBuiltin = PRIMITIVE_TYPES.has(preset.type);
-    const description = isBuiltin ? `Match the ${preset.key} key (${preset.type})` : `Custom ${preset.type} condition`;
+    const isComposite = COMPOSITE_TYPES.has(preset.type);
+    const description = isComposite ? `Composite ${preset.type} preset` : isBuiltin ? `Match the ${preset.key} key (${preset.type})` : `Custom ${preset.type} condition`;
     const baseDefaults = isBuiltin ? { ...TYPE_DEFAULTS[preset.type], key: preset.key } : {};
     return {
       type: name,
-      label: capitalize(name),
+      label: name,
       description,
       defaults: { ...baseDefaults, ...preset.overrides, type: name }
     };
@@ -2991,8 +3246,15 @@ function createPresetConditionMeta(presets) {
 function createPresetEditor(presetName, builtinType, presetKey, overrides = {}) {
   const lockedFields = new Set(Object.keys(overrides));
   function PresetConditionEditor({ condition, onChange }) {
-    const rec = useMemo10(() => condition, [condition]);
-    const update = useCallback11(
+    const rec = useMemo11(
+      () => ({
+        key: presetKey,
+        ...condition,
+        ...overrides
+      }),
+      [condition]
+    );
+    const update = useCallback12(
       (field, value) => {
         onChange(
           buildCustomCondition({
@@ -3008,9 +3270,9 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
     );
     switch (builtinType) {
       case "string": {
-        const op = rec.op;
-        const isArray = op === "in" || op === "nin";
-        const isRegex = op === "regex";
+        const op2 = rec.op;
+        const isArray = op2 === "in" || op2 === "nin";
+        const isRegex = op2 === "regex";
         const handleOpChange = (newOp) => {
           const isArrayOp = newOp === "in" || newOp === "nin";
           const currentValue = rec.value;
@@ -3027,18 +3289,17 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
         };
         const opLocked = lockedFields.has("op");
         const valueLocked = lockedFields.has("value");
-        return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
-          /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
-          /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsxs33(ConditionRow, { keySlot: /* @__PURE__ */ jsx47(KeyInput, { value: presetKey, disabled: true }), children: [
+          /* @__PURE__ */ jsx47(
             OperatorSelect,
             {
               value: String(rec.op ?? "eq"),
               onChange: handleOpChange,
-              options: OP_OPTIONS,
+              options: STRING_OPS,
               disabled: opLocked
             }
           ),
-          isArray ? /* @__PURE__ */ jsx45(
+          isArray ? /* @__PURE__ */ jsx47(
             TagInput,
             {
               value: rec.value ?? "",
@@ -3046,7 +3307,7 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
               placeholder: `e.g. ${presetKey} value`,
               disabled: valueLocked
             }
-          ) : isRegex ? /* @__PURE__ */ jsx45(
+          ) : isRegex ? /* @__PURE__ */ jsx47(
             Input,
             {
               className: "h-8 font-mono text-sm",
@@ -3055,7 +3316,7 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
               onChange: (e) => update("value", e.target.value),
               disabled: valueLocked
             }
-          ) : /* @__PURE__ */ jsx45(
+          ) : /* @__PURE__ */ jsx47(
             Input,
             {
               className: "h-8 text-sm",
@@ -3086,18 +3347,17 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
         };
         const numOpLocked = lockedFields.has("op");
         const numValueLocked = lockedFields.has("value");
-        return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
-          /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
-          /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsxs33(ConditionRow, { keySlot: /* @__PURE__ */ jsx47(KeyInput, { value: presetKey, disabled: true }), children: [
+          /* @__PURE__ */ jsx47(
             OperatorSelect,
             {
               value: String(rec.op ?? "eq"),
               onChange: handleNumOpChange,
-              options: OP_OPTIONS2,
+              options: NUMBER_OPS,
               disabled: numOpLocked
             }
           ),
-          isNumArray ? /* @__PURE__ */ jsx45(
+          isNumArray ? /* @__PURE__ */ jsx47(
             NumberTagInput,
             {
               value: rec.value ?? [],
@@ -3105,7 +3365,7 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
               placeholder: `e.g. ${presetKey} value`,
               disabled: numValueLocked
             }
-          ) : /* @__PURE__ */ jsx45(
+          ) : /* @__PURE__ */ jsx47(
             Input,
             {
               type: "number",
@@ -3120,20 +3380,19 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
       }
       case "bool": {
         const boolValueLocked = lockedFields.has("value");
-        return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
-          /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
-          /* @__PURE__ */ jsx45(OperatorSelect, { value: "eq", options: OP_OPTIONS4, disabled: true }),
-          /* @__PURE__ */ jsxs31(
+        return /* @__PURE__ */ jsxs33(ConditionRow, { keySlot: /* @__PURE__ */ jsx47(KeyInput, { value: presetKey, disabled: true }), children: [
+          /* @__PURE__ */ jsx47(OperatorSelect, { value: "eq", options: BOOL_OPS, disabled: true }),
+          /* @__PURE__ */ jsxs33(
             Select,
             {
               value: String(rec.value ?? "true"),
               onValueChange: (v) => update("value", v === "true"),
               disabled: boolValueLocked,
               children: [
-                /* @__PURE__ */ jsx45(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx45(SelectValue, {}) }),
-                /* @__PURE__ */ jsxs31(SelectContent, { children: [
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "true", children: "true" }),
-                  /* @__PURE__ */ jsx45(SelectItem, { value: "false", children: "false" })
+                /* @__PURE__ */ jsx47(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx47(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs33(SelectContent, { children: [
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "true", children: "true" }),
+                  /* @__PURE__ */ jsx47(SelectItem, { value: "false", children: "false" })
                 ] })
               ]
             }
@@ -3143,18 +3402,17 @@ function createPresetEditor(presetName, builtinType, presetKey, overrides = {})
       case "datetime": {
         const dtOpLocked = lockedFields.has("op");
         const dtValueLocked = lockedFields.has("value");
-        return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
-          /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
-          /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsxs33(ConditionRow, { keySlot: /* @__PURE__ */ jsx47(KeyInput, { value: presetKey, disabled: true }), children: [
+          /* @__PURE__ */ jsx47(
             OperatorSelect,
             {
               value: String(rec.op ?? "eq"),
               onChange: (v) => update("op", v),
-              options: OP_OPTIONS3,
+              options: DATETIME_OPS,
               disabled: dtOpLocked
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx47(
             DateTimeInput,
             {
               value: String(rec.value ?? ""),
@@ -3174,7 +3432,10 @@ function createPresetUI(presets) {
   const extraConditionTypes = createPresetConditionMeta(presets);
   const editorOverrides = /* @__PURE__ */ new Map();
   for (const [name, preset] of Object.entries(presets)) {
-    if (PRIMITIVE_TYPES.has(preset.type) && preset.key) {
+    if (COMPOSITE_TYPES.has(preset.type)) {
+      const conditions = preset.overrides?.conditions ?? [];
+      editorOverrides.set(name, createCompositePresetEditor(name, preset.type, conditions));
+    } else if (PRIMITIVE_TYPES.has(preset.type) && preset.key) {
       editorOverrides.set(
         name,
         createPresetEditor(name, preset.type, preset.key, preset.overrides)
@@ -3185,14 +3446,14 @@ function createPresetUI(presets) {
 }
 
 // src/configurator/Configurator.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/configurator/context.ts
-import { createContext as createContext2, useCallback as useCallback12, useContext as useContext2, useSyncExternalStore, useState as useState10 } from "react";
-var StoreSourceContext = createContext2(null);
-var ActionStateContext = createContext2(null);
+import { createContext as createContext3, useCallback as useCallback13, useContext as useContext3, useSyncExternalStore, useState as useState11 } from "react";
+var StoreSourceContext = createContext3(null);
+var ActionStateContext = createContext3(null);
 function useStoreSource() {
-  const source = useContext2(StoreSourceContext);
+  const source = useContext3(StoreSourceContext);
   if (source) return source;
   throw new Error("useConfiguratorStore must be used within a <Configurator> component");
 }
@@ -3201,17 +3462,17 @@ function useConfiguratorStore() {
   return useSyncExternalStore(source.subscribe, source.getSnapshot);
 }
 function useActionState() {
-  const ctx = useContext2(ActionStateContext);
+  const ctx = useContext3(ActionStateContext);
   if (ctx) return ctx;
   throw new Error("useActionState must be used within a <Configurator> component");
 }
 function useStoreRef() {
   const source = useStoreSource();
-  return useCallback12(() => source.getSnapshot(), [source]);
+  return useCallback13(() => source.getSnapshot(), [source]);
 }
 function useActionRunner() {
-  const [state, setState] = useState10({ pending: false, error: null });
-  const run = useCallback12(async (action) => {
+  const [state, setState] = useState11({ pending: false, error: null });
+  const run = useCallback13(async (action) => {
     setState({ pending: true, error: null });
     try {
       await action();
@@ -3221,7 +3482,7 @@ function useActionRunner() {
       throw err;
     }
   }, []);
-  const clearError = useCallback12(() => setState((s) => ({ ...s, error: null })), []);
+  const clearError = useCallback13(() => setState((s) => ({ ...s, error: null })), []);
   return {
     actionState: state,
     runAction: run,
@@ -3230,19 +3491,19 @@ function useActionRunner() {
 }
 
 // src/configurator/useConfiguratorSelector.ts
-import { useContext as useContext3, useCallback as useCallback13, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useContext as useContext4, useCallback as useCallback14, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useConfiguratorSelector(selector) {
-  const source = useContext3(StoreSourceContext);
+  const source = useContext4(StoreSourceContext);
   if (!source) {
     throw new Error("useConfiguratorSelector must be used within a <Configurator> component");
   }
-  const getSnapshot = useCallback13(() => selector(source.getSnapshot()), [source, selector]);
+  const getSnapshot = useCallback14(() => selector(source.getSnapshot()), [source, selector]);
   return useSyncExternalStore2(source.subscribe, getSnapshot);
 }
 
 // src/configurator/PreviewPanel.tsx
-import { useCallback as useCallback14, useEffect, useMemo as useMemo11, useRef as useRef5, useState as useState11 } from "react";
-import { ChevronRight as ChevronRight2, Eye as Eye2, Loader2, Maximize2, Play } from "lucide-react";
+import { useCallback as useCallback15, useEffect, useMemo as useMemo12, useRef as useRef6, useState as useState12 } from "react";
+import { ChevronRight as ChevronRight2, Eye as Eye3, Loader2, Maximize2, Play } from "lucide-react";
 import { resolve, builtinEvaluators } from "showwhat";
 import { DefinitionInactiveError, DefinitionNotFoundError, VariationNotFoundError } from "showwhat";
 
@@ -3254,22 +3515,43 @@ var selectDirtyKeys = (s) => s.dirtyKeys;
 var selectRevision = (s) => s.revision;
 
 // src/configurator/fallback-context.ts
-import { createContext as createContext3, useContext as useContext4 } from "react";
-var FallbackEvaluatorContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var FallbackEvaluatorContext = createContext4(null);
 var FallbackEvaluatorProvider = FallbackEvaluatorContext.Provider;
 function useFallbackEvaluator() {
-  return useContext4(FallbackEvaluatorContext);
+  return useContext5(FallbackEvaluatorContext);
+}
+
+// src/configurator/preview-context.ts
+import { createContext as createContext5, useContext as useContext6 } from "react";
+var defaultState = {
+  contextText: "",
+  annotationsText: "",
+  evaluatorText: "",
+  setContextText: () => {
+  },
+  setAnnotationsText: () => {
+  },
+  setEvaluatorText: () => {
+  },
+  resetPreview: () => {
+  }
+};
+var PreviewStateContext = createContext5(defaultState);
+var PreviewStateProvider = PreviewStateContext.Provider;
+function usePreviewState() {
+  return useContext6(PreviewStateContext);
 }
 
 // src/configurator/PreviewPanel.tsx
-import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 function ResultBadge({ result, onViewMeta }) {
   switch (result.status) {
     case "success":
-      return /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx46(Badge, { className: "bg-status-active/15 text-green-700 hover:bg-status-active/15 dark:text-green-400", children: "Matched" }),
-          onViewMeta ? /* @__PURE__ */ jsxs32(
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx48(Badge, { className: "bg-status-active/15 text-green-700 hover:bg-status-active/15 dark:text-green-400", children: "Matched" }),
+          onViewMeta ? /* @__PURE__ */ jsxs34(
             "button",
             {
               type: "button",
@@ -3277,36 +3559,36 @@ function ResultBadge({ result, onViewMeta }) {
               onClick: onViewMeta,
               "aria-label": "View evaluation meta",
               children: [
-                /* @__PURE__ */ jsx46(Eye2, { className: "size-3" }),
-                /* @__PURE__ */ jsx46("span", { children: "Details" }),
-                /* @__PURE__ */ jsx46("span", { children: "|" }),
-                /* @__PURE__ */ jsxs32("span", { children: [
+                /* @__PURE__ */ jsx48(Eye3, { className: "size-3" }),
+                /* @__PURE__ */ jsx48("span", { children: "Details" }),
+                /* @__PURE__ */ jsx48("span", { children: "|" }),
+                /* @__PURE__ */ jsxs34("span", { children: [
                   "Variation #",
                   result.meta.variation.index
                 ] })
               ]
             }
-          ) : /* @__PURE__ */ jsxs32("span", { className: "text-xs text-muted-foreground", children: [
+          ) : /* @__PURE__ */ jsxs34("span", { className: "text-xs text-muted-foreground", children: [
             "Variation #",
             result.meta.variation.index
           ] })
         ] }),
-        /* @__PURE__ */ jsx46("div", { className: "rounded-md border border-border bg-background p-2", children: /* @__PURE__ */ jsx46("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs", children: typeof result.value === "string" ? result.value : JSON.stringify(result.value, null, 2) }) })
+        /* @__PURE__ */ jsx48("div", { className: "rounded-md border border-border bg-background p-2", children: /* @__PURE__ */ jsx48("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs", children: typeof result.value === "string" ? result.value : JSON.stringify(result.value, null, 2) }) })
       ] });
     case "inactive":
-      return /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx46(Badge, { className: "bg-amber-500/15 text-amber-600 hover:bg-amber-500/15", children: "Inactive" }),
-        /* @__PURE__ */ jsx46("p", { className: "text-xs text-muted-foreground", children: result.message })
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx48(Badge, { className: "bg-amber-500/15 text-amber-600 hover:bg-amber-500/15", children: "Inactive" }),
+        /* @__PURE__ */ jsx48("p", { className: "text-xs text-muted-foreground", children: result.message })
       ] });
     case "no-match":
-      return /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx46(Badge, { className: "bg-orange-500/15 text-orange-600 hover:bg-orange-500/15", children: "No Match" }),
-        /* @__PURE__ */ jsx46("p", { className: "text-xs text-muted-foreground", children: result.message })
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx48(Badge, { className: "bg-orange-500/15 text-orange-600 hover:bg-orange-500/15", children: "No Match" }),
+        /* @__PURE__ */ jsx48("p", { className: "text-xs text-muted-foreground", children: result.message })
       ] });
     case "error":
-      return /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx46(Badge, { variant: "destructive", children: "Error" }),
-        /* @__PURE__ */ jsx46("p", { className: "text-xs text-destructive", children: result.message })
+      return /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx48(Badge, { variant: "destructive", children: "Error" }),
+        /* @__PURE__ */ jsx48("p", { className: "text-xs text-destructive", children: result.message })
       ] });
   }
 }
@@ -3325,6 +3607,15 @@ function parseContextJson(text) {
   }
   return context;
 }
+function parseAnnotationsJson(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const parsed = JSON.parse(trimmed);
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    throw new SyntaxError("Annotations must be a JSON object");
+  }
+  return parsed;
+}
 function parseEvaluatorOverrides(text) {
   const overrides = {};
   for (const line of text.split("\n")) {
@@ -3344,10 +3635,13 @@ function JsonEditorDialog({
   open,
   onOpenChange,
   value,
-  onSave
+  onSave,
+  title = "Edit Context",
+  description = "JSON object with context values for resolving the definition.",
+  placeholder = '{\n  "env": "production",\n  "region": "us-east-1"\n}'
 }) {
-  const [draft, setDraft] = useState11(value);
-  const [formatError, setFormatError] = useState11(null);
+  const [draft, setDraft] = useState12(value);
+  const [formatError, setFormatError] = useState12(null);
   useEffect(() => {
     if (open) {
       setDraft(value);
@@ -3369,15 +3663,15 @@ function JsonEditorDialog({
     onSave(draft);
     onOpenChange(false);
   }
-  return /* @__PURE__ */ jsx46(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs32(DialogContent, { className: "sm:max-w-2xl", children: [
-    /* @__PURE__ */ jsxs32(DialogHeader, { children: [
-      /* @__PURE__ */ jsx46(DialogTitle, { children: "Edit Context" }),
-      /* @__PURE__ */ jsx46(DialogDescription, { children: "JSON object with context values for resolving the definition." })
+  return /* @__PURE__ */ jsx48(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs34(DialogContent, { className: "sm:max-w-2xl", children: [
+    /* @__PURE__ */ jsxs34(DialogHeader, { children: [
+      /* @__PURE__ */ jsx48(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx48(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx48(
       Textarea,
       {
-        placeholder: '{\n  "env": "production",\n  "region": "us-east-1"\n}',
+        placeholder,
         value: draft,
         onChange: (e) => {
           setDraft(e.target.value);
@@ -3387,10 +3681,10 @@ function JsonEditorDialog({
         rows: 14
       }
     ),
-    formatError && /* @__PURE__ */ jsx46("p", { className: "text-xs text-destructive", children: formatError }),
-    /* @__PURE__ */ jsxs32(DialogFooter, { children: [
-      /* @__PURE__ */ jsx46(Button, { variant: "outline", size: "sm", onClick: handleFormat, children: "Format" }),
-      /* @__PURE__ */ jsx46(Button, { size: "sm", onClick: handleSave, children: "Apply" })
+    formatError && /* @__PURE__ */ jsx48("p", { className: "text-xs text-destructive", children: formatError }),
+    /* @__PURE__ */ jsxs34(DialogFooter, { children: [
+      /* @__PURE__ */ jsx48(Button, { variant: "outline", size: "sm", onClick: handleFormat, children: "Format" }),
+      /* @__PURE__ */ jsx48(Button, { size: "sm", onClick: handleSave, children: "Apply" })
     ] })
   ] }) });
 }
@@ -3398,15 +3692,23 @@ function PreviewPanel() {
   const definitions = useConfiguratorSelector(selectDefinitions);
   const selectedKey = useConfiguratorSelector(selectSelectedKey);
   const externalFallback = useFallbackEvaluator();
-  const [contextText, setContextText] = useState11("");
-  const [evaluatorText, setEvaluatorText] = useState11("");
-  const [contextError, setContextError] = useState11(null);
-  const [simulatorOpen, setSimulatorOpen] = useState11(false);
-  const [jsonEditorOpen, setJsonEditorOpen] = useState11(false);
-  const [previewResult, setPreviewResult] = useState11(null);
-  const [isResolving, setIsResolving] = useState11(false);
-  const [metaDialogOpen, setMetaDialogOpen] = useState11(false);
-  const abortControllerRef = useRef5(null);
+  const {
+    contextText,
+    setContextText,
+    annotationsText,
+    setAnnotationsText,
+    evaluatorText,
+    setEvaluatorText,
+    resetPreview
+  } = usePreviewState();
+  const [contextError, setContextError] = useState12(null);
+  const [simulatorOpen, setSimulatorOpen] = useState12(false);
+  const [jsonEditorOpen, setJsonEditorOpen] = useState12(false);
+  const [annotationsEditorOpen, setAnnotationsEditorOpen] = useState12(false);
+  const [previewResult, setPreviewResult] = useState12(null);
+  const [isResolving, setIsResolving] = useState12(false);
+  const [metaDialogOpen, setMetaDialogOpen] = useState12(false);
+  const abortControllerRef = useRef6(null);
   useEffect(() => {
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
@@ -3415,7 +3717,7 @@ function PreviewPanel() {
       abortControllerRef.current?.abort();
     };
   }, [selectedKey]);
-  const fallback = useMemo11(() => {
+  const fallback = useMemo12(() => {
     const overrides = parseEvaluatorOverrides(evaluatorText);
     const hasOverrides = Object.keys(overrides).length > 0;
     if (!hasOverrides && !externalFallback) return void 0;
@@ -3426,7 +3728,7 @@ function PreviewPanel() {
       return false;
     };
   }, [evaluatorText, externalFallback]);
-  const handleResolve = useCallback14(async () => {
+  const handleResolve = useCallback15(async () => {
     if (!selectedKey || !definitions[selectedKey]) {
       setPreviewResult({ status: "error", message: "No definition selected" });
       return;
@@ -3444,13 +3746,22 @@ function PreviewPanel() {
       setIsResolving(false);
       return;
     }
+    let seedAnnotations = null;
+    try {
+      seedAnnotations = parseAnnotationsJson(annotationsText);
+    } catch {
+      setPreviewResult({ status: "error", message: "Invalid JSON in annotations" });
+      setIsResolving(false);
+      return;
+    }
     try {
       const result = await resolve({
         definitions: { [selectedKey]: definitions[selectedKey] },
         context,
         options: {
           evaluators: builtinEvaluators,
-          ...fallback ? { fallback } : void 0
+          ...fallback ? { fallback } : void 0,
+          ...seedAnnotations ? { createAnnotations: () => ({ ...seedAnnotations }) } : void 0
         }
       });
       if (controller.signal.aborted) return;
@@ -3496,42 +3807,42 @@ function PreviewPanel() {
         setIsResolving(false);
       }
     }
-  }, [selectedKey, definitions, contextText, fallback]);
-  return /* @__PURE__ */ jsxs32("div", { className: "flex w-80 shrink-0 flex-col border-l border-border bg-muted/30", children: [
-    /* @__PURE__ */ jsx46("div", { className: "flex h-12 items-center border-b border-border px-3", children: /* @__PURE__ */ jsx46("span", { className: "text-sm font-semibold", children: "Preview" }) }),
-    /* @__PURE__ */ jsx46(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 p-3", children: [
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx46(Label, { className: "text-xs text-muted-foreground", children: "Definition" }),
-        /* @__PURE__ */ jsx46("p", { className: "mt-0.5 truncate font-mono text-sm", children: selectedKey ?? "None selected" })
+  }, [selectedKey, definitions, contextText, annotationsText, fallback]);
+  return /* @__PURE__ */ jsxs34("div", { className: "flex w-80 shrink-0 flex-col border-l border-border bg-muted/30", children: [
+    /* @__PURE__ */ jsx48("div", { className: "flex h-12 items-center border-b border-border px-3", children: /* @__PURE__ */ jsx48("span", { className: "text-sm font-semibold", children: "Preview" }) }),
+    /* @__PURE__ */ jsx48(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4 p-3", children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
+        /* @__PURE__ */ jsx48(Label, { className: "text-xs text-muted-foreground", children: "Definition" }),
+        /* @__PURE__ */ jsx48("p", { className: "mt-0.5 truncate font-mono text-sm", children: selectedKey ?? "None selected" })
       ] }),
-      /* @__PURE__ */ jsx46(Separator, {}),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx46(Label, { className: "text-xs text-muted-foreground", children: "Context" }),
-          /* @__PURE__ */ jsxs32(
+      /* @__PURE__ */ jsx48(Separator, {}),
+      /* @__PURE__ */ jsxs34("div", { children: [
+        /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx48(Label, { className: "text-xs text-muted-foreground", children: "Context" }),
+          /* @__PURE__ */ jsxs34(
             "button",
             {
               type: "button",
               className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground",
               onClick: () => setJsonEditorOpen(true),
               children: [
-                /* @__PURE__ */ jsx46(Maximize2, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx48(Maximize2, { className: "h-3 w-3" }),
                 "Edit"
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "button",
           {
             type: "button",
             className: `mt-1.5 w-full cursor-pointer rounded-md border bg-transparent px-3 py-2 text-left transition-colors hover:border-ring ${contextError ? "border-destructive" : "border-input"}`,
             onClick: () => setJsonEditorOpen(true),
-            children: contextText.trim() ? /* @__PURE__ */ jsx46("pre", { className: "max-h-28 overflow-hidden font-mono text-xs text-foreground", children: contextText }) : /* @__PURE__ */ jsx46("span", { className: "font-mono text-xs text-muted-foreground", children: '{ "env": "production" }' })
+            children: contextText.trim() ? /* @__PURE__ */ jsx48("pre", { className: "max-h-28 overflow-hidden font-mono text-xs text-foreground", children: contextText }) : /* @__PURE__ */ jsx48("span", { className: "font-mono text-xs text-muted-foreground", children: '{ "env": "production" }' })
           }
         ),
-        contextError && /* @__PURE__ */ jsx46("p", { className: "mt-1 text-[10px] text-destructive", children: contextError }),
-        /* @__PURE__ */ jsx46(
+        contextError && /* @__PURE__ */ jsx48("p", { className: "mt-1 text-[10px] text-destructive", children: contextError }),
+        /* @__PURE__ */ jsx48(
           JsonEditorDialog,
           {
             open: jsonEditorOpen,
@@ -3544,40 +3855,82 @@ function PreviewPanel() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx46(Separator, {}),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsxs32(
+      /* @__PURE__ */ jsx48(Separator, {}),
+      /* @__PURE__ */ jsxs34("div", { children: [
+        /* @__PURE__ */ jsxs34(
           "button",
           {
             type: "button",
             className: "flex w-full items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
             onClick: () => setSimulatorOpen((o) => !o),
             children: [
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx48(
                 ChevronRight2,
                 {
                   className: `h-3.5 w-3.5 transition-transform ${simulatorOpen ? "rotate-90" : ""}`
                 }
               ),
-              "Condition Simulator"
+              "Condition Simulator",
+              annotationsText.trim() || evaluatorText.trim() ? /* @__PURE__ */ jsx48("span", { className: "text-amber-500 font-medium", children: "(active)" }) : /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground/50", children: "(inactive)" })
             ]
           }
         ),
-        simulatorOpen && /* @__PURE__ */ jsxs32("div", { className: "mt-2", children: [
-          /* @__PURE__ */ jsx46(
-            Textarea,
-            {
-              placeholder: "tier:true\ngeo:false",
-              value: evaluatorText,
-              onChange: (e) => setEvaluatorText(e.target.value),
-              className: "min-h-20 font-mono text-xs",
-              rows: 6
-            }
-          ),
-          /* @__PURE__ */ jsx46("p", { className: "mt-1 text-[10px] text-muted-foreground", children: "Simulate unregistered condition types. One type:true|false per line" })
+        simulatorOpen && /* @__PURE__ */ jsxs34("div", { className: "mt-2 space-y-3", children: [
+          /* @__PURE__ */ jsxs34("div", { children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx48(Label, { className: "text-[10px] text-muted-foreground", children: "Seed Annotations" }),
+              /* @__PURE__ */ jsxs34(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground",
+                  onClick: () => setAnnotationsEditorOpen(true),
+                  children: [
+                    /* @__PURE__ */ jsx48(Maximize2, { className: "h-3 w-3" }),
+                    "Edit"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx48(
+              "button",
+              {
+                type: "button",
+                className: "mt-1 w-full cursor-pointer rounded-md border border-input bg-transparent px-3 py-2 text-left transition-colors hover:border-ring",
+                onClick: () => setAnnotationsEditorOpen(true),
+                children: annotationsText.trim() ? /* @__PURE__ */ jsx48("pre", { className: "max-h-20 overflow-hidden font-mono text-xs text-foreground", children: annotationsText }) : /* @__PURE__ */ jsx48("span", { className: "font-mono text-xs text-muted-foreground", children: '{ "bucket": 42 }' })
+              }
+            ),
+            /* @__PURE__ */ jsx48(
+              JsonEditorDialog,
+              {
+                open: annotationsEditorOpen,
+                onOpenChange: setAnnotationsEditorOpen,
+                value: annotationsText,
+                onSave: setAnnotationsText,
+                title: "Edit Seed Annotations",
+                description: "JSON object to pre-populate annotations for checkAnnotations conditions.",
+                placeholder: '{\n  "bucket": 42,\n  "threshold": 80\n}'
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs34("div", { children: [
+            /* @__PURE__ */ jsx48(Label, { className: "text-[10px] text-muted-foreground", children: "Evaluator Overrides" }),
+            /* @__PURE__ */ jsx48(
+              Textarea,
+              {
+                placeholder: "tier:true\ngeo:false",
+                value: evaluatorText,
+                onChange: (e) => setEvaluatorText(e.target.value),
+                className: "mt-1 min-h-20 font-mono text-xs",
+                rows: 4
+              }
+            ),
+            /* @__PURE__ */ jsx48("p", { className: "mt-1 text-[10px] text-muted-foreground", children: "Simulate unregistered condition types. One type:true|false per line" })
+          ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs32(
+      /* @__PURE__ */ jsxs34(
         Button,
         {
           size: "sm",
@@ -3585,28 +3938,44 @@ function PreviewPanel() {
           onClick: handleResolve,
           disabled: !selectedKey || isResolving,
           children: [
-            isResolving ? /* @__PURE__ */ jsx46(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx46(Play, { className: "mr-1.5 h-4 w-4" }),
+            isResolving ? /* @__PURE__ */ jsx48(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx48(Play, { className: "mr-1.5 h-4 w-4" }),
             "Resolve"
           ]
         }
       ),
-      previewResult && /* @__PURE__ */ jsxs32(Fragment7, { children: [
-        /* @__PURE__ */ jsx46(Separator, {}),
-        /* @__PURE__ */ jsxs32("div", { className: "animate-slide-in-right", children: [
-          /* @__PURE__ */ jsx46(Label, { className: "text-xs text-muted-foreground", children: "Result" }),
-          /* @__PURE__ */ jsx46("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx48(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "w-full",
+          onClick: () => {
+            if (window.confirm("Reset all preview inputs? This cannot be undone.")) {
+              resetPreview();
+              setPreviewResult(null);
+              setContextError(null);
+            }
+          },
+          children: "Reset"
+        }
+      ),
+      previewResult && /* @__PURE__ */ jsxs34(Fragment5, { children: [
+        /* @__PURE__ */ jsx48(Separator, {}),
+        /* @__PURE__ */ jsxs34("div", { className: "animate-slide-in-right", children: [
+          /* @__PURE__ */ jsx48(Label, { className: "text-xs text-muted-foreground", children: "Result" }),
+          /* @__PURE__ */ jsx48("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx48(
             ResultBadge,
             {
               result: previewResult,
               onViewMeta: previewResult.status === "success" ? () => setMetaDialogOpen(true) : void 0
             }
           ) }),
-          previewResult.status === "success" && /* @__PURE__ */ jsx46(Dialog, { open: metaDialogOpen, onOpenChange: setMetaDialogOpen, children: /* @__PURE__ */ jsxs32(DialogContent, { className: "sm:max-w-lg", children: [
-            /* @__PURE__ */ jsxs32(DialogHeader, { children: [
-              /* @__PURE__ */ jsx46(DialogTitle, { children: "Evaluation Meta" }),
-              /* @__PURE__ */ jsx46(DialogDescription, { children: "Full resolution metadata from the last evaluation." })
+          previewResult.status === "success" && /* @__PURE__ */ jsx48(Dialog, { open: metaDialogOpen, onOpenChange: setMetaDialogOpen, children: /* @__PURE__ */ jsxs34(DialogContent, { className: "sm:max-w-lg", children: [
+            /* @__PURE__ */ jsxs34(DialogHeader, { children: [
+              /* @__PURE__ */ jsx48(DialogTitle, { children: "Evaluation Meta" }),
+              /* @__PURE__ */ jsx48(DialogDescription, { children: "Full resolution metadata from the last evaluation." })
             ] }),
-            /* @__PURE__ */ jsx46(ScrollArea, { className: "max-h-96", children: /* @__PURE__ */ jsx46("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs", children: JSON.stringify(previewResult.meta, null, 2) }) })
+            /* @__PURE__ */ jsx48(ScrollArea, { className: "max-h-96", children: /* @__PURE__ */ jsx48("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs", children: JSON.stringify(previewResult.meta, null, 2) }) })
           ] }) })
         ] })
       ] })
@@ -3615,9 +3984,9 @@ function PreviewPanel() {
 }
 
 // src/configurator/Configurator.tsx
-import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
 function useNormalizedSource(store) {
-  return useMemo12(() => {
+  return useMemo13(() => {
     if (isStoreSource(store)) {
       return store;
     }
@@ -3635,22 +4004,31 @@ function isStoreSource(obj) {
 function ErrorBanner() {
   const { actionState, clearError } = useActionState();
   if (!actionState.error) return null;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       role: "alert",
       className: "flex items-center justify-between border-b border-destructive/30 bg-destructive/10 px-4 py-2",
       children: [
-        /* @__PURE__ */ jsxs33("p", { className: "text-xs font-medium text-destructive", children: [
+        /* @__PURE__ */ jsxs35("p", { className: "text-xs font-medium text-destructive", children: [
           "Action failed: ",
           actionState.error.message
         ] }),
-        /* @__PURE__ */ jsx47("button", { type: "button", className: "text-xs text-destructive underline", onClick: clearError, children: "Dismiss" })
+        /* @__PURE__ */ jsx49("button", { type: "button", className: "text-xs text-destructive underline", onClick: clearError, children: "Dismiss" })
       ]
     }
   );
 }
-function EditorLayout({ emptyState }) {
+function EditorLayout({
+  emptyState,
+  sidebarHeader,
+  definitionKeys,
+  onBeforeSelect,
+  isLoadingDefinition,
+  conditionExtensionsResolver,
+  onRefreshDefinition,
+  onExportDefinition
+}) {
   const definitions = useConfiguratorSelector(selectDefinitions);
   const selectedKey = useConfiguratorSelector(selectSelectedKey);
   const validationErrors = useConfiguratorSelector(selectValidationErrors);
@@ -3658,56 +4036,75 @@ function EditorLayout({ emptyState }) {
   const revision = useConfiguratorSelector(selectRevision);
   const getStore = useStoreRef();
   const { actionState, runAction } = useActionState();
+  const keysForList = definitionKeys ?? Object.keys(definitions);
   const selectedDefinition = selectedKey ? definitions[selectedKey] : null;
-  if (Object.keys(definitions).length === 0 && emptyState) {
-    return /* @__PURE__ */ jsx47(Fragment8, { children: emptyState });
+  const resolvedExtensions = useMemo13(
+    () => conditionExtensionsResolver && selectedKey ? conditionExtensionsResolver(selectedKey) : null,
+    [conditionExtensionsResolver, selectedKey]
+  );
+  if (keysForList.length === 0 && emptyState) {
+    return /* @__PURE__ */ jsx49(Fragment6, { children: emptyState });
   }
-  return /* @__PURE__ */ jsxs33("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsx47(ErrorBanner, {}),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsx47("div", { className: "w-72 shrink-0 border-r border-border bg-muted/30", children: /* @__PURE__ */ jsx47(
-        DefinitionList,
-        {
-          definitions,
-          selectedKey,
-          validationErrors,
-          dirtyKeys,
-          onSelect: (key) => {
-            runAction(() => getStore().selectDefinition(key)).catch(() => {
-            });
-          },
-          onAdd: (key) => runAction(() => getStore().addDefinition(key)),
-          onRemove: (key) => {
-            runAction(() => getStore().removeDefinition(key)).catch(() => {
-            });
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx47("div", { className: "flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsx47(ErrorBoundary, { children: selectedDefinition && selectedKey ? /* @__PURE__ */ jsx47("div", { className: "h-full animate-fade-up", children: /* @__PURE__ */ jsx47(
-        DefinitionEditor,
-        {
-          definitionKey: selectedKey,
-          definition: selectedDefinition,
-          validationErrors: validationErrors[selectedKey],
-          isDirty: dirtyKeys.includes(selectedKey),
-          isPending: actionState.pending,
-          onUpdate: (def) => {
-            getStore().updateDefinition(selectedKey, def).catch(() => {
-            });
-          },
-          onRename: (newKey) => runAction(() => getStore().renameDefinition(selectedKey, newKey)),
-          onSave: () => {
-            runAction(() => getStore().saveDefinition(selectedKey)).catch(() => {
-            });
-          },
-          onDiscard: () => {
-            runAction(() => getStore().discardDefinition(selectedKey)).catch(() => {
-            });
+  const editorContent = selectedDefinition && selectedKey ? /* @__PURE__ */ jsx49("div", { className: "h-full animate-fade-up", children: /* @__PURE__ */ jsx49(
+    DefinitionEditor,
+    {
+      definitionKey: selectedKey,
+      definition: selectedDefinition,
+      validationErrors: validationErrors[selectedKey],
+      isDirty: dirtyKeys.includes(selectedKey),
+      isPending: actionState.pending,
+      onUpdate: (def) => {
+        getStore().updateDefinition(selectedKey, def).catch(() => {
+        });
+      },
+      onRename: (newKey) => runAction(() => getStore().renameDefinition(selectedKey, newKey)),
+      onSave: () => {
+        runAction(() => getStore().saveDefinition(selectedKey)).catch(() => {
+        });
+      },
+      onDiscard: () => {
+        runAction(() => getStore().discardDefinition(selectedKey)).catch(() => {
+        });
+      },
+      onRemove: () => {
+        runAction(() => getStore().removeDefinition(selectedKey)).catch(() => {
+        });
+      },
+      onRefresh: onRefreshDefinition && selectedKey ? () => onRefreshDefinition(selectedKey) : void 0,
+      onExport: onExportDefinition && selectedDefinition ? (fmt) => onExportDefinition(selectedKey, selectedDefinition, fmt) : void 0
+    },
+    `${selectedKey}-${revision}`
+  ) }, `anim-${selectedKey}-${revision}`) : isLoadingDefinition ? /* @__PURE__ */ jsx49("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Loading definition\u2026" }) : /* @__PURE__ */ jsx49("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Select a definition to edit" });
+  return /* @__PURE__ */ jsxs35("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx49(ErrorBanner, {}),
+    /* @__PURE__ */ jsxs35("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex w-72 shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30", children: [
+        sidebarHeader,
+        /* @__PURE__ */ jsx49(
+          DefinitionList,
+          {
+            keys: keysForList,
+            definitions,
+            selectedKey,
+            validationErrors,
+            dirtyKeys,
+            onSelect: (key) => {
+              runAction(async () => {
+                if (onBeforeSelect) await onBeforeSelect(key);
+                await getStore().selectDefinition(key);
+              }).catch(() => {
+              });
+            },
+            onAdd: (key) => runAction(() => getStore().addDefinition(key)),
+            onRemove: (key) => {
+              runAction(() => getStore().removeDefinition(key)).catch(() => {
+              });
+            }
           }
-        },
-        `${selectedKey}-${revision}`
-      ) }, `anim-${selectedKey}-${revision}`) : /* @__PURE__ */ jsx47("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Select a definition to edit" }) }) }),
-      /* @__PURE__ */ jsx47(ErrorBoundary, { children: /* @__PURE__ */ jsx47(PreviewPanel, {}) })
+        )
+      ] }),
+      /* @__PURE__ */ jsx49("div", { className: "flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsx49(ErrorBoundary, { children: resolvedExtensions ? /* @__PURE__ */ jsx49(ConditionExtensionsProvider, { value: resolvedExtensions, children: editorContent }) : editorContent }) }),
+      /* @__PURE__ */ jsx49(ErrorBoundary, { children: /* @__PURE__ */ jsx49(PreviewPanel, {}) })
     ] })
   ] });
 }
@@ -3715,12 +4112,31 @@ function Configurator({
   store,
   className,
   emptyState,
+  sidebarHeader,
+  definitionKeys,
+  onBeforeSelect,
+  isLoadingDefinition,
   conditionExtensions,
-  fallbackEvaluator
+  conditionExtensionsResolver,
+  fallbackEvaluator,
+  onRefreshDefinition,
+  onExportDefinition
 }) {
   const runner = useActionRunner();
   const storeSource = useNormalizedSource(store);
-  return /* @__PURE__ */ jsx47(StoreSourceContext.Provider, { value: storeSource, children: /* @__PURE__ */ jsx47(ActionStateContext.Provider, { value: runner, children: /* @__PURE__ */ jsx47(ConditionExtensionsProvider, { value: conditionExtensions ?? null, children: /* @__PURE__ */ jsx47(FallbackEvaluatorProvider, { value: fallbackEvaluator ?? null, children: /* @__PURE__ */ jsx47("div", { className, children: /* @__PURE__ */ jsx47(EditorLayout, { emptyState }) }) }) }) }) });
+  return /* @__PURE__ */ jsx49(StoreSourceContext.Provider, { value: storeSource, children: /* @__PURE__ */ jsx49(ActionStateContext.Provider, { value: runner, children: /* @__PURE__ */ jsx49(ConditionExtensionsProvider, { value: conditionExtensions ?? null, children: /* @__PURE__ */ jsx49(FallbackEvaluatorProvider, { value: fallbackEvaluator ?? null, children: /* @__PURE__ */ jsx49("div", { className, children: /* @__PURE__ */ jsx49(
+    EditorLayout,
+    {
+      emptyState,
+      sidebarHeader,
+      definitionKeys,
+      onBeforeSelect,
+      isLoadingDefinition,
+      conditionExtensionsResolver,
+      onRefreshDefinition,
+      onExportDefinition
+    }
+  ) }) }) }) }) });
 }
 export {
   AUTO_ID_PREFIX,
@@ -3743,17 +4159,18 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
   ErrorBoundary,
   Input,
   Label,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  PreviewStateProvider,
   ScrollArea,
   ScrollBar,
   Select,
@@ -3768,9 +4185,9 @@ export {
   StoreSourceContext,
   Switch,
   Tabs,
-  TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsPanel,
+  TabsTab,
   Textarea,
   ThemeToggle,
   ValidationMessage,