@showwhat/configurator 1.0.0 → 2.0.0

package/README.md

@@ -1,6 +1,8 @@
 # @showwhat/configurator
 
-A reusable React component library for visually editing showwhat feature flag definitions. Provides a complete rule-builder UI — bring your own store and persistence.
+A reusable React component library for visually editing showwhat definitions — like Swagger UI for your flag and config rules.
+
+Provides a complete rule-builder UI while letting your app own storage, workflow, and persistence.
 
 ## Installation
 

package/dist/index.d.ts

@@ -1,10 +1,8 @@
 import { Condition, Definition, Definitions, Variation, Presets, ConditionEvaluator, Resolution } from 'showwhat';
 import { ClassValue } from 'clsx';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
 import React__default, { Component, ReactNode, ErrorInfo, ComponentType } from 'react';
-import { VariantProps } from 'class-variance-authority';
 import { Select as Select$1, Separator as Separator$1, ScrollArea as ScrollArea$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Switch as Switch$1, Popover as Popover$1, Tabs as Tabs$1 } from 'radix-ui';
 
 type DefinitionListProps = {
@@ -86,6 +84,7 @@ type ValueInputProps = {
 type DateTimeInputProps = {
     value: string;
     onChange: (value: string) => void;
+    disabled?: boolean;
 };
 type ValidationIssueDisplay = {
     path: (string | number)[];
@@ -115,11 +114,34 @@ declare const BUILTIN_CONDITION_TYPES: ConditionTypeMeta[];
 declare const CONDITION_TYPE_MAP: Map<string, ConditionTypeMeta>;
 declare function getConditionMeta(type: string): ConditionTypeMeta | undefined;
 
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "default" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ref, ...props }: React__default.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare const buttonVariantStyles: {
+    readonly default: "bg-primary text-primary-foreground hover:bg-primary/90";
+    readonly destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40";
+    readonly outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50";
+    readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80";
+    readonly ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
+    readonly link: "text-primary underline-offset-4 hover:underline";
+};
+declare const buttonSizeStyles: {
+    readonly default: "h-9 px-4 py-2 has-[>svg]:px-3";
+    readonly xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3";
+    readonly sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5";
+    readonly lg: "h-10 rounded px-6 has-[>svg]:px-4";
+    readonly icon: "size-9";
+    readonly "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3";
+    readonly "icon-sm": "size-8";
+    readonly "icon-lg": "size-10";
+};
+type ButtonVariant = keyof typeof buttonVariantStyles;
+type ButtonSize = keyof typeof buttonSizeStyles;
+declare function buttonVariants(opts?: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    className?: string;
+}): string;
+declare function Button({ className, variant, size, asChild, ref, ...props }: React__default.ComponentProps<"button"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -136,10 +158,21 @@ declare function SelectLabel({ className, ...props }: React__default.ComponentPr
 declare function SelectItem({ className, children, ...props }: React__default.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
 declare function SelectSeparator({ className, ...props }: React__default.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
 
-declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: React__default.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+declare const badgeVariantStyles: {
+    readonly default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90";
+    readonly secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90";
+    readonly destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90";
+    readonly outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+    readonly ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+    readonly link: "text-primary underline-offset-4 [a&]:hover:underline";
+};
+type BadgeVariant = keyof typeof badgeVariantStyles;
+declare function badgeVariants(opts?: {
+    variant?: BadgeVariant;
+    className?: string;
+}): string;
+declare function Badge({ className, variant, asChild, ...props }: React__default.ComponentProps<"span"> & {
+    variant?: BadgeVariant;
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -187,7 +220,7 @@ declare function TabsContent({ className, ...props }: React__default.ComponentPr
 
 declare function ValueInput({ value, onChange, placeholder }: ValueInputProps): react_jsx_runtime.JSX.Element;
 
-declare function DateTimeInput({ value, onChange }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
+declare function DateTimeInput({ value, onChange, disabled }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare function ValidationMessage({ errors }: ValidationMessageProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.js

@@ -275,27 +275,20 @@ function OperatorSelect({ value, onChange, options, disabled }) {
 import { useCallback, useState } from "react";
 
 // src/components/ui/badge.tsx
-import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var badgeVariants = cva(
-  "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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
+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",
+  secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+  destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+  outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+  ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+  link: "text-primary underline-offset-4 [a&]:hover:underline"
+};
+function badgeVariants(opts) {
+  return cn(badgeBase, badgeVariantStyles[opts?.variant ?? "default"], opts?.className);
+}
 function Badge({
   className,
   variant = "default",
@@ -316,7 +309,7 @@ function Badge({
 
 // src/components/condition-builder/TagInput.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function TagInput({ value, onChange, placeholder }) {
+function TagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
   const [text, setText] = useState("");
   const emit = useCallback(
@@ -365,32 +358,39 @@ function TagInput({ value, onChange, placeholder }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs3("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]", children: [
-    values.map((v, i) => /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
-      v,
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
-          onClick: () => removeValue(i),
-          "aria-label": `Remove ${v}`,
-          children: "\xD7"
-        }
-      )
-    ] }, `${v}-${i}`)),
-    /* @__PURE__ */ jsx7(
-      "input",
-      {
-        className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
-        value: text,
-        placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "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: [
+          v,
+          !disabled && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
+              onClick: () => removeValue(i),
+              "aria-label": `Remove ${v}`,
+              children: "\xD7"
+            }
+          )
+        ] }, `${v}-${i}`)),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
+            value: text,
+            placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            disabled
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/condition-builders.ts
@@ -489,7 +489,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";
-function NumberTagInput({ value, onChange, placeholder }) {
+function NumberTagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value : [value];
   const [text, setText] = useState2("");
   const emit = useCallback3(
@@ -538,33 +538,40 @@ function NumberTagInput({ value, onChange, placeholder }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs5("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]", children: [
-    values.map((v, i) => /* @__PURE__ */ jsxs5(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
-      v,
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          type: "button",
-          className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
-          onClick: () => removeValue(i),
-          "aria-label": `Remove ${v}`,
-          children: "\xD7"
-        }
-      )
-    ] }, `${v}-${i}`)),
-    /* @__PURE__ */ jsx9(
-      "input",
-      {
-        className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
-        type: "number",
-        value: text,
-        placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "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: [
+          v,
+          !disabled && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
+              onClick: () => removeValue(i),
+              "aria-label": `Remove ${v}`,
+              children: "\xD7"
+            }
+          )
+        ] }, `${v}-${i}`)),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
+            type: "number",
+            value: text,
+            placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            disabled
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/NumberConditionEditor.tsx
@@ -663,7 +670,7 @@ function fromLocalDatetime(local) {
   if (Number.isNaN(d.getTime())) return local;
   return d.toISOString();
 }
-function DateTimeInput({ value, onChange }) {
+function DateTimeInput({ value, onChange, disabled }) {
   const [rawValue, setRawValue] = useState3(value);
   const [showRaw, setShowRaw] = useState3(false);
   const prevValueRef = useRef(value);
@@ -682,7 +689,8 @@ function DateTimeInput({ value, onChange }) {
           onChange: (e) => {
             setRawValue(e.target.value);
             onChange(e.target.value);
-          }
+          },
+          disabled
         }
       ),
       /* @__PURE__ */ jsx11(
@@ -704,7 +712,8 @@ function DateTimeInput({ value, onChange }) {
         className: "h-8 flex-1 text-xs",
         type: "datetime-local",
         value: toLocalDatetime(value),
-        onChange: (e) => onChange(fromLocalDatetime(e.target.value))
+        onChange: (e) => onChange(fromLocalDatetime(e.target.value)),
+        disabled
       }
     ),
     /* @__PURE__ */ jsx11(
@@ -910,38 +919,35 @@ function getConditionMeta(type) {
 }
 
 // src/components/ui/button.tsx
-import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var buttonVariants = cva2(
-  "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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
+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",
+  destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+  outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+  link: "text-primary underline-offset-4 hover:underline"
+};
+var buttonSizeStyles = {
+  default: "h-9 px-4 py-2 has-[>svg]:px-3",
+  xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+  sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5",
+  lg: "h-10 rounded px-6 has-[>svg]:px-4",
+  icon: "size-9",
+  "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3",
+  "icon-sm": "size-8",
+  "icon-lg": "size-10"
+};
+function buttonVariants(opts) {
+  return cn(
+    buttonBase,
+    buttonVariantStyles[opts?.variant ?? "default"],
+    buttonSizeStyles[opts?.size ?? "default"],
+    opts?.className
+  );
+}
 function Button({
   className,
   variant = "default",
@@ -2978,17 +2984,24 @@ function createPresetConditionMeta(presets) {
       type: name,
       label: capitalize(name),
       description,
-      defaults: { ...baseDefaults, ...preset.defaults, type: name }
+      defaults: { ...baseDefaults, ...preset.overrides, type: name }
     };
   });
 }
-function createPresetEditor(presetName, builtinType, presetKey) {
+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(
       (field, value) => {
         onChange(
-          buildCustomCondition({ ...rec, [field]: value, key: presetKey, type: presetName })
+          buildCustomCondition({
+            ...rec,
+            [field]: value,
+            ...overrides,
+            key: presetKey,
+            type: presetName
+          })
         );
       },
       [rec, onChange]
@@ -3012,6 +3025,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             })
           );
         };
+        const opLocked = lockedFields.has("op");
+        const valueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(
@@ -3019,7 +3034,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: handleOpChange,
-              options: OP_OPTIONS
+              options: OP_OPTIONS,
+              disabled: opLocked
             }
           ),
           isArray ? /* @__PURE__ */ jsx45(
@@ -3027,7 +3043,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: rec.value ?? "",
               onChange: (v) => update("value", v),
-              placeholder: `e.g. ${presetKey} value`
+              placeholder: `e.g. ${presetKey} value`,
+              disabled: valueLocked
             }
           ) : isRegex ? /* @__PURE__ */ jsx45(
             Input,
@@ -3035,7 +3052,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               className: "h-8 font-mono text-sm",
               value: String(rec.value ?? ""),
               placeholder: "e.g. ^test.*$",
-              onChange: (e) => update("value", e.target.value)
+              onChange: (e) => update("value", e.target.value),
+              disabled: valueLocked
             }
           ) : /* @__PURE__ */ jsx45(
             Input,
@@ -3043,7 +3061,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               className: "h-8 text-sm",
               value: String(rec.value ?? ""),
               placeholder: `e.g. ${presetKey} value`,
-              onChange: (e) => update("value", e.target.value)
+              onChange: (e) => update("value", e.target.value),
+              disabled: valueLocked
             }
           )
         ] });
@@ -3065,6 +3084,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             })
           );
         };
+        const numOpLocked = lockedFields.has("op");
+        const numValueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(
@@ -3072,7 +3093,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: handleNumOpChange,
-              options: OP_OPTIONS2
+              options: OP_OPTIONS2,
+              disabled: numOpLocked
             }
           ),
           isNumArray ? /* @__PURE__ */ jsx45(
@@ -3080,7 +3102,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: rec.value ?? [],
               onChange: (v) => update("value", v),
-              placeholder: `e.g. ${presetKey} value`
+              placeholder: `e.g. ${presetKey} value`,
+              disabled: numValueLocked
             }
           ) : /* @__PURE__ */ jsx45(
             Input,
@@ -3089,12 +3112,14 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               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))
+              onChange: (e) => update("value", e.target.value === "" ? "" : Number(e.target.value)),
+              disabled: numValueLocked
             }
           )
         ] });
       }
-      case "bool":
+      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 }),
@@ -3103,6 +3128,7 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               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: [
@@ -3113,7 +3139,10 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             }
           )
         ] });
-      case "datetime":
+      }
+      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(
@@ -3121,11 +3150,20 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: (v) => update("op", v),
-              options: OP_OPTIONS3
+              options: OP_OPTIONS3,
+              disabled: dtOpLocked
             }
           ),
-          /* @__PURE__ */ jsx45(DateTimeInput, { value: String(rec.value ?? ""), onChange: (v) => update("value", v) })
+          /* @__PURE__ */ jsx45(
+            DateTimeInput,
+            {
+              value: String(rec.value ?? ""),
+              onChange: (v) => update("value", v),
+              disabled: dtValueLocked
+            }
+          )
         ] });
+      }
     }
     return null;
   }
@@ -3137,7 +3175,10 @@ function createPresetUI(presets) {
   const editorOverrides = /* @__PURE__ */ new Map();
   for (const [name, preset] of Object.entries(presets)) {
     if (PRIMITIVE_TYPES.has(preset.type) && preset.key) {
-      editorOverrides.set(name, createPresetEditor(name, preset.type, preset.key));
+      editorOverrides.set(
+        name,
+        createPresetEditor(name, preset.type, preset.key, preset.overrides)
+      );
     }
   }
   return { extraConditionTypes, editorOverrides };
@@ -3202,7 +3243,7 @@ function useConfiguratorSelector(selector) {
 // 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 { resolve } from "showwhat";
+import { resolve, builtinEvaluators } from "showwhat";
 import { DefinitionInactiveError, DefinitionNotFoundError, VariationNotFoundError } from "showwhat";
 
 // src/configurator/selectors.ts
@@ -3407,38 +3448,49 @@ function PreviewPanel() {
       const result = await resolve({
         definitions: { [selectedKey]: definitions[selectedKey] },
         context,
-        options: fallback ? { fallback } : void 0
+        options: {
+          evaluators: builtinEvaluators,
+          ...fallback ? { fallback } : void 0
+        }
       });
       if (controller.signal.aborted) return;
       const resolution = result[selectedKey];
-      setPreviewResult({
-        status: "success",
-        value: resolution.value,
-        meta: resolution.meta
-      });
-    } catch (err) {
-      if (controller.signal.aborted) return;
-      if (err instanceof DefinitionInactiveError) {
+      if (resolution.success) {
         setPreviewResult({
-          status: "inactive",
-          message: `"${selectedKey}" is inactive`
-        });
-      } else if (err instanceof VariationNotFoundError) {
-        setPreviewResult({
-          status: "no-match",
-          message: "No variation matched the given context"
-        });
-      } else if (err instanceof DefinitionNotFoundError) {
-        setPreviewResult({
-          status: "error",
-          message: `Definition "${selectedKey}" not found`
+          status: "success",
+          value: resolution.value,
+          meta: resolution.meta
         });
       } else {
-        setPreviewResult({
-          status: "error",
-          message: err instanceof Error ? err.message : "Unknown error"
-        });
+        const err = resolution.error;
+        if (err instanceof DefinitionInactiveError) {
+          setPreviewResult({
+            status: "inactive",
+            message: `"${selectedKey}" is inactive`
+          });
+        } else if (err instanceof VariationNotFoundError) {
+          setPreviewResult({
+            status: "no-match",
+            message: "No variation matched the given context"
+          });
+        } else if (err instanceof DefinitionNotFoundError) {
+          setPreviewResult({
+            status: "error",
+            message: `Definition "${selectedKey}" not found`
+          });
+        } else {
+          setPreviewResult({
+            status: "error",
+            message: err.message
+          });
+        }
       }
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setPreviewResult({
+        status: "error",
+        message: err instanceof Error ? err.message : "Unknown error"
+      });
     } finally {
       if (!controller.signal.aborted) {
         setIsResolving(false);