uilint 0.2.33 → 0.2.35

package/dist/{install-ui-ZXMZNRU2.js → install-ui-JV4G2CAC.js}

@@ -14,8 +14,9 @@ import {
   note,
   pc,
   select,
+  text,
   uninstallEslintPlugin
-} from "./chunk-W6X3RNOE.js";
+} from "./chunk-YS2QQOCB.js";
 import {
   GENSTYLEGUIDE_COMMAND_MD,
   loadSkill,
@@ -31,8 +32,8 @@ import {
 import { render } from "ink";
 
 // src/commands/install/components/InstallApp.tsx
-import { useState as useState6, useEffect as useEffect2 } from "react";
-import { Box as Box5, Text as Text6, useApp as useApp5, useInput as useInput5 } from "ink";
+import { useState as useState7, useEffect as useEffect2 } from "react";
+import { Box as Box6, Text as Text7, useApp as useApp5, useInput as useInput6 } from "ink";
 
 // src/commands/install/components/Spinner.tsx
 import { useState, useEffect } from "react";
@@ -316,21 +317,274 @@ function ConfigSelector({
 }
 
 // src/commands/install/components/RuleSelector.tsx
-import { useState as useState4, useMemo } from "react";
-import { Box as Box3, Text as Text4, useInput as useInput3, useApp as useApp3 } from "ink";
-import { getRulesByCategory } from "uilint-eslint";
+import { useState as useState5, useMemo } from "react";
+import { Box as Box4, Text as Text5, useInput as useInput4, useApp as useApp3 } from "ink";
+import { getRulesByCategory, getCategoryMeta } from "uilint-eslint";
+
+// src/commands/install/components/OptionField.tsx
+import { useState as useState4 } from "react";
+import { Box as Box3, Text as Text4, useInput as useInput3 } from "ink";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function BooleanField({
+  field,
+  value,
+  onChange,
+  isActive
+}) {
+  const checked = Boolean(value);
+  useInput3(
+    (input) => {
+      if (isActive && input === " ") {
+        onChange(!checked);
+      }
+    },
+    { isActive }
+  );
+  return /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, children: isActive ? "\u203A " : "  " }),
+    /* @__PURE__ */ jsx4(Text4, { color: checked ? "green" : "gray", children: checked ? "[\u2713]" : "[ ]" }),
+    /* @__PURE__ */ jsxs3(Text4, { children: [
+      " ",
+      field.label
+    ] }),
+    field.description && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+      " - ",
+      field.description
+    ] })
+  ] });
+}
+function NumberField({
+  field,
+  value,
+  onChange,
+  isActive
+}) {
+  const [inputValue, setInputValue] = useState4(String(value ?? field.defaultValue ?? ""));
+  const [error, setError] = useState4(null);
+  useInput3(
+    (input, key) => {
+      if (!isActive) return;
+      if (key.backspace || key.delete) {
+        const newValue = inputValue.slice(0, -1);
+        setInputValue(newValue);
+        const num = Number(newValue);
+        if (!isNaN(num) && newValue !== "") {
+          onChange(num);
+          setError(null);
+        } else if (newValue === "") {
+          setError(null);
+        } else {
+          setError("Enter a valid number");
+        }
+      } else if (/^[0-9.-]$/.test(input)) {
+        const newValue = inputValue + input;
+        setInputValue(newValue);
+        const num = Number(newValue);
+        if (!isNaN(num)) {
+          onChange(num);
+          setError(null);
+        } else {
+          setError("Enter a valid number");
+        }
+      }
+    },
+    { isActive }
+  );
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Box3, { children: [
+      /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, children: isActive ? "\u203A " : "  " }),
+      /* @__PURE__ */ jsxs3(Text4, { children: [
+        field.label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, underline: isActive, children: inputValue || field.placeholder || "" }),
+      field.description && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+        " (",
+        field.description,
+        ")"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx4(Box3, { paddingLeft: 4, children: /* @__PURE__ */ jsx4(Text4, { color: "red", children: error }) })
+  ] });
+}
+function TextField({
+  field,
+  value,
+  onChange,
+  isActive
+}) {
+  const displayValue = Array.isArray(value) ? value.join(", ") : String(value ?? field.defaultValue ?? "");
+  const [inputValue, setInputValue] = useState4(displayValue);
+  useInput3(
+    (input, key) => {
+      if (!isActive) return;
+      if (key.backspace || key.delete) {
+        const newValue = inputValue.slice(0, -1);
+        setInputValue(newValue);
+        onChange(newValue);
+      } else if (input && !key.ctrl && !key.meta) {
+        const newValue = inputValue + input;
+        setInputValue(newValue);
+        onChange(newValue);
+      }
+    },
+    { isActive }
+  );
+  return /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, children: isActive ? "\u203A " : "  " }),
+    /* @__PURE__ */ jsxs3(Text4, { children: [
+      field.label,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, underline: isActive, children: inputValue || field.placeholder || "(empty)" }),
+    field.description && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+      " (",
+      field.description,
+      ")"
+    ] })
+  ] });
+}
+function SelectField({
+  field,
+  value,
+  onChange,
+  isActive
+}) {
+  const options = field.options ?? [];
+  const currentIndex = options.findIndex(
+    (opt) => String(opt.value) === String(value)
+  );
+  const selectedIndex = currentIndex >= 0 ? currentIndex : 0;
+  useInput3(
+    (input, key) => {
+      if (!isActive || options.length === 0) return;
+      if (input === " " || key.rightArrow) {
+        const newIndex = selectedIndex < options.length - 1 ? selectedIndex + 1 : 0;
+        onChange(options[newIndex].value);
+      } else if (key.leftArrow) {
+        const newIndex = selectedIndex > 0 ? selectedIndex - 1 : options.length - 1;
+        onChange(options[newIndex].value);
+      }
+    },
+    { isActive }
+  );
+  const selectedOption = options[selectedIndex];
+  return /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, children: isActive ? "\u203A " : "  " }),
+    /* @__PURE__ */ jsxs3(Text4, { children: [
+      field.label,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsxs3(Text4, { color: isActive ? "cyan" : void 0, bold: isActive, children: [
+      "\u25C0 ",
+      selectedOption?.label ?? "(none)",
+      " \u25B6"
+    ] }),
+    field.description && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+      " (",
+      field.description,
+      ")"
+    ] })
+  ] });
+}
+function MultiselectField({
+  field,
+  value,
+  onChange,
+  isActive
+}) {
+  const options = field.options ?? [];
+  const selectedValues = new Set(
+    Array.isArray(value) ? value.map(String) : []
+  );
+  const [cursor, setCursor] = useState4(0);
+  useInput3(
+    (input, key) => {
+      if (!isActive || options.length === 0) return;
+      if (key.upArrow) {
+        setCursor((prev) => prev > 0 ? prev - 1 : options.length - 1);
+      } else if (key.downArrow) {
+        setCursor((prev) => prev < options.length - 1 ? prev + 1 : 0);
+      } else if (input === " ") {
+        const opt = options[cursor];
+        const newSelected = new Set(selectedValues);
+        if (newSelected.has(String(opt.value))) {
+          newSelected.delete(String(opt.value));
+        } else {
+          newSelected.add(String(opt.value));
+        }
+        onChange(Array.from(newSelected));
+      }
+    },
+    { isActive }
+  );
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Box3, { children: [
+      /* @__PURE__ */ jsx4(Text4, { color: isActive ? "cyan" : void 0, children: isActive ? "\u203A " : "  " }),
+      /* @__PURE__ */ jsx4(Text4, { children: field.label }),
+      field.description && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+        " - ",
+        field.description
+      ] })
+    ] }),
+    isActive && /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", paddingLeft: 4, children: options.map((opt, i) => {
+      const isSelected = selectedValues.has(String(opt.value));
+      const isCursor = i === cursor;
+      return /* @__PURE__ */ jsxs3(Box3, { children: [
+        /* @__PURE__ */ jsx4(Text4, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
+        /* @__PURE__ */ jsx4(Text4, { color: isSelected ? "green" : void 0, children: isSelected ? "[\u2713]" : "[ ]" }),
+        /* @__PURE__ */ jsxs3(Text4, { color: isCursor ? "cyan" : void 0, children: [
+          " ",
+          opt.label
+        ] })
+      ] }, String(opt.value));
+    }) }),
+    !isActive && /* @__PURE__ */ jsx4(Box3, { paddingLeft: 4, children: /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+      "Selected: ",
+      Array.from(selectedValues).length > 0 ? Array.from(selectedValues).join(", ") : "(none)"
+    ] }) })
+  ] });
+}
+function OptionField(props) {
+  const { field } = props;
+  switch (field.type) {
+    case "boolean":
+      return /* @__PURE__ */ jsx4(BooleanField, { ...props });
+    case "number":
+      return /* @__PURE__ */ jsx4(NumberField, { ...props });
+    case "text":
+      return /* @__PURE__ */ jsx4(TextField, { ...props });
+    case "select":
+      return /* @__PURE__ */ jsx4(SelectField, { ...props });
+    case "multiselect":
+      return /* @__PURE__ */ jsx4(MultiselectField, { ...props });
+    default:
+      return /* @__PURE__ */ jsx4(Box3, { children: /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+        "Unknown field type: ",
+        field.type
+      ] }) });
+  }
+}
+function convertFieldValue(value, field, defaultValue) {
+  if (Array.isArray(defaultValue) && field.type === "text" && typeof value === "string") {
+    return value.split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  return value;
+}
+
+// src/commands/install/components/RuleSelector.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function SeverityBadge({ severity }) {
   if (severity === "error") {
-    return /* @__PURE__ */ jsx4(Text4, { color: "red", children: "error" });
+    return /* @__PURE__ */ jsx5(Text5, { color: "red", children: "error" });
   }
   if (severity === "warn") {
-    return /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "warn" });
+    return /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "warn" });
   }
-  return /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "off" });
+  return /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "off" });
 }
 function CategoryHeader({ name, icon }) {
-  return /* @__PURE__ */ jsx4(Box3, { marginTop: 1, marginBottom: 0, children: /* @__PURE__ */ jsxs3(Text4, { bold: true, color: "white", children: [
+  return /* @__PURE__ */ jsx5(Box4, { marginTop: 1, marginBottom: 0, children: /* @__PURE__ */ jsxs4(Text5, { bold: true, color: "white", children: [
     icon,
     " ",
     name
@@ -345,28 +599,35 @@ function RuleSelector({
   const staticRules = useMemo(() => getRulesByCategory("static"), []);
   const semanticRules = useMemo(() => getRulesByCategory("semantic"), []);
   const allRules = useMemo(() => [...staticRules, ...semanticRules], [staticRules, semanticRules]);
-  const [cursor, setCursor] = useState4(0);
-  const [viewMode, setViewMode] = useState4("list");
-  const [ruleStates, setRuleStates] = useState4(
+  const [cursor, setCursor] = useState5(0);
+  const [viewMode, setViewMode] = useState5("list");
+  const [ruleStates, setRuleStates] = useState5(
     () => {
       const map = /* @__PURE__ */ new Map();
-      for (const rule of staticRules) {
-        map.set(rule.id, {
-          enabled: true,
-          severity: rule.defaultSeverity === "off" ? "warn" : rule.defaultSeverity
-        });
-      }
-      for (const rule of semanticRules) {
+      for (const rule of allRules) {
+        const categoryMeta = getCategoryMeta(rule.category);
+        const enabled = rule.defaultEnabled ?? categoryMeta?.defaultEnabled ?? false;
         map.set(rule.id, {
-          enabled: false,
+          enabled,
           severity: rule.defaultSeverity === "off" ? "warn" : rule.defaultSeverity
         });
       }
       return map;
     }
   );
+  const [customOptions, setCustomOptions] = useState5(/* @__PURE__ */ new Map());
+  const [editingRuleIndex, setEditingRuleIndex] = useState5(0);
+  const [editingFieldCursor, setEditingFieldCursor] = useState5(0);
+  const [confirmCursor, setConfirmCursor] = useState5(1);
   const currentRule = allRules[cursor];
-  const currentState = currentRule ? ruleStates.get(currentRule.id) : void 0;
+  const enabledRulesWithOptions = useMemo(() => {
+    return allRules.filter((rule) => {
+      const state = ruleStates.get(rule.id);
+      return state?.enabled && rule.optionSchema && rule.optionSchema.fields.length > 0;
+    });
+  }, [allRules, ruleStates]);
+  const currentEditingRule = enabledRulesWithOptions[editingRuleIndex];
+  const currentEditingFields = currentEditingRule?.optionSchema?.fields ?? [];
   const toggleRule = () => {
     if (!currentRule) return;
     setRuleStates((prev) => {
@@ -386,27 +647,122 @@ function RuleSelector({
       return next;
     });
   };
-  const handleSubmit = () => {
+  const finalSubmit = () => {
     const configuredRules = [];
     for (const rule of allRules) {
       const state = ruleStates.get(rule.id);
       if (state?.enabled) {
+        const custom = customOptions.get(rule.id);
+        const baseOptions = rule.defaultOptions?.[0] ?? {};
         configuredRules.push({
           rule,
           severity: state.severity,
-          options: rule.defaultOptions
+          options: custom ? [{ ...baseOptions, ...custom }] : rule.defaultOptions
         });
       }
     }
     onSubmit(configuredRules);
   };
-  useInput3((input, key) => {
+  const handleListSubmit = () => {
+    if (enabledRulesWithOptions.length > 0) {
+      setViewMode("confirm-options");
+      setConfirmCursor(1);
+    } else {
+      finalSubmit();
+    }
+  };
+  const handleConfirmSelection = () => {
+    if (confirmCursor === 0) {
+      setEditingRuleIndex(0);
+      setEditingFieldCursor(0);
+      if (enabledRulesWithOptions[0]) {
+        initializeRuleOptions(enabledRulesWithOptions[0]);
+      }
+      setViewMode("edit-options");
+    } else {
+      finalSubmit();
+    }
+  };
+  const initializeRuleOptions = (rule) => {
+    if (!customOptions.has(rule.id) && rule.optionSchema) {
+      const baseOptions = rule.defaultOptions?.[0] ?? {};
+      const initial = {};
+      for (const field of rule.optionSchema.fields) {
+        initial[field.key] = baseOptions[field.key] ?? field.defaultValue;
+      }
+      setCustomOptions((prev) => {
+        const next = new Map(prev);
+        next.set(rule.id, initial);
+        return next;
+      });
+    }
+  };
+  const updateFieldValue = (fieldKey, value) => {
+    if (!currentEditingRule) return;
+    setCustomOptions((prev) => {
+      const next = new Map(prev);
+      const current = next.get(currentEditingRule.id) ?? {};
+      next.set(currentEditingRule.id, { ...current, [fieldKey]: value });
+      return next;
+    });
+  };
+  const nextEditingRule = () => {
+    if (editingRuleIndex < enabledRulesWithOptions.length - 1) {
+      const nextIndex = editingRuleIndex + 1;
+      setEditingRuleIndex(nextIndex);
+      setEditingFieldCursor(0);
+      if (enabledRulesWithOptions[nextIndex]) {
+        initializeRuleOptions(enabledRulesWithOptions[nextIndex]);
+      }
+    } else {
+      finalSubmit();
+    }
+  };
+  const skipCurrentRule = () => {
+    if (currentEditingRule) {
+      setCustomOptions((prev) => {
+        const next = new Map(prev);
+        next.delete(currentEditingRule.id);
+        return next;
+      });
+    }
+    nextEditingRule();
+  };
+  useInput4((input, key) => {
     if (viewMode === "docs") {
       if (key.escape || key.return || input === "d" || input === "q") {
         setViewMode("list");
       }
       return;
     }
+    if (viewMode === "confirm-options") {
+      if (key.upArrow || key.downArrow) {
+        setConfirmCursor((prev) => prev === 0 ? 1 : 0);
+      } else if (key.return || input === " ") {
+        handleConfirmSelection();
+      } else if (key.escape || input === "q") {
+        setViewMode("list");
+      }
+      return;
+    }
+    if (viewMode === "edit-options") {
+      if (key.upArrow) {
+        setEditingFieldCursor(
+          (prev) => prev > 0 ? prev - 1 : currentEditingFields.length - 1
+        );
+      } else if (key.downArrow) {
+        setEditingFieldCursor(
+          (prev) => prev < currentEditingFields.length - 1 ? prev + 1 : 0
+        );
+      } else if (key.return) {
+        nextEditingRule();
+      } else if (key.escape) {
+        skipCurrentRule();
+      } else if (input === "q") {
+        setViewMode("list");
+      }
+      return;
+    }
     if (key.upArrow) {
       setCursor((prev) => prev > 0 ? prev - 1 : allRules.length - 1);
     } else if (key.downArrow) {
@@ -418,7 +774,7 @@ function RuleSelector({
     } else if (input === "d") {
       setViewMode("docs");
     } else if (key.return) {
-      handleSubmit();
+      handleListSubmit();
     } else if (key.escape || input === "q") {
       onCancel?.();
       exit();
@@ -446,40 +802,136 @@ function RuleSelector({
   });
   if (viewMode === "docs" && currentRule) {
     const docLines = currentRule.docs.trim().split("\n").slice(0, 20);
-    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Box3, { marginBottom: 1, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: currentRule.name }),
-        /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box4, { marginBottom: 1, children: [
+        /* @__PURE__ */ jsx5(Text5, { bold: true, color: "cyan", children: currentRule.name }),
+        /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
           " - ",
           currentRule.description
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-        docLines.map((line, i) => /* @__PURE__ */ jsx4(Text4, { dimColor: line.startsWith("#"), children: line }, i)),
-        currentRule.docs.split("\n").length > 20 && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "... (truncated)" })
+      /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+        docLines.map((line, i) => /* @__PURE__ */ jsx5(Text5, { dimColor: line.startsWith("#"), children: line }, i)),
+        currentRule.docs.split("\n").length > 20 && /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "... (truncated)" })
+      ] }),
+      /* @__PURE__ */ jsx5(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Press any key to return to list" }) })
+    ] });
+  }
+  if (viewMode === "confirm-options") {
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx5(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Configure Rule Options" }) }),
+      /* @__PURE__ */ jsx5(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsxs4(Text5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: enabledRulesWithOptions.length }),
+        /* @__PURE__ */ jsx5(Text5, { children: " selected rules have configurable options. Would you like to customize them?" })
+      ] }) }),
+      /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingLeft: 2, children: [
+        /* @__PURE__ */ jsxs4(Box4, { children: [
+          /* @__PURE__ */ jsx5(Text5, { color: confirmCursor === 0 ? "cyan" : void 0, children: confirmCursor === 0 ? "\u203A " : "  " }),
+          /* @__PURE__ */ jsx5(Text5, { color: confirmCursor === 0 ? "cyan" : void 0, bold: confirmCursor === 0, children: "Yes" }),
+          /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " - Configure each rule's options" })
+        ] }),
+        /* @__PURE__ */ jsxs4(Box4, { children: [
+          /* @__PURE__ */ jsx5(Text5, { color: confirmCursor === 1 ? "cyan" : void 0, children: confirmCursor === 1 ? "\u203A " : "  " }),
+          /* @__PURE__ */ jsx5(Text5, { color: confirmCursor === 1 ? "cyan" : void 0, bold: confirmCursor === 1, children: "No" }),
+          /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " - Use defaults for all rules" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5(Box4, { marginTop: 1, children: /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+        "Rules with options:",
+        " ",
+        enabledRulesWithOptions.map((r) => r.name).join(", ")
+      ] }) }),
+      /* @__PURE__ */ jsx5(Box4, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2191\u2193" }),
+        " select",
+        "  ",
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "enter" }),
+        " confirm",
+        "  ",
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "esc" }),
+        " back"
+      ] }) })
+    ] });
+  }
+  if (viewMode === "edit-options" && currentEditingRule) {
+    const ruleOptions = customOptions.get(currentEditingRule.id) ?? {};
+    const baseOptions = currentEditingRule.defaultOptions?.[0] ?? {};
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box4, { marginBottom: 1, children: [
+        /* @__PURE__ */ jsxs4(Text5, { bold: true, color: "cyan", children: [
+          currentEditingRule.icon ?? "\u2699\uFE0F",
+          " ",
+          currentEditingRule.name
+        ] }),
+        /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+          " (",
+          editingRuleIndex + 1,
+          "/",
+          enabledRulesWithOptions.length,
+          ")"
+        ] })
       ] }),
-      /* @__PURE__ */ jsx4(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Press any key to return to list" }) })
+      /* @__PURE__ */ jsx5(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: currentEditingRule.description }) }),
+      /* @__PURE__ */ jsx5(Box4, { flexDirection: "column", children: currentEditingFields.map((field, i) => {
+        const currentValue = ruleOptions[field.key] ?? baseOptions[field.key] ?? field.defaultValue;
+        const defaultValue = baseOptions[field.key] ?? field.defaultValue;
+        return /* @__PURE__ */ jsx5(
+          OptionField,
+          {
+            field,
+            value: currentValue,
+            onChange: (newValue) => {
+              const converted = convertFieldValue(newValue, field, defaultValue);
+              updateFieldValue(field.key, converted);
+            },
+            isActive: i === editingFieldCursor
+          },
+          field.key
+        );
+      }) }),
+      /* @__PURE__ */ jsx5(Box4, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2191\u2193" }),
+        " navigate",
+        "  ",
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "space" }),
+        " toggle",
+        "  ",
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "enter" }),
+        " next rule",
+        "  ",
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "esc" }),
+        " skip (use defaults)"
+      ] }) })
     ] });
   }
   const enabledCount = Array.from(ruleStates.values()).filter((s) => s.enabled).length;
   const errorCount = Array.from(ruleStates.entries()).filter(
-    ([id, s]) => s.enabled && s.severity === "error"
+    ([, s]) => s.enabled && s.severity === "error"
   ).length;
   const warnCount = enabledCount - errorCount;
   let globalIndex = 0;
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx4(Box3, { marginBottom: 1, children: /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Configure ESLint Rules" }) }),
-    /* @__PURE__ */ jsx4(CategoryHeader, { name: "Static Rules", icon: "\u{1F4CB}" }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  Pattern-based, fast analysis" }),
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Configure ESLint Rules" }) }),
+    (() => {
+      const cat = getCategoryMeta("static");
+      return cat ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx5(CategoryHeader, { name: cat.name, icon: cat.icon }),
+        /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+          "  ",
+          cat.description
+        ] })
+      ] }) : null;
+    })(),
     staticRules.map((rule) => {
       const itemIndex = globalIndex++;
       const isCursor = itemIndex === cursor;
       const state = ruleStates.get(rule.id);
-      return /* @__PURE__ */ jsxs3(Box3, { paddingLeft: 2, children: [
-        /* @__PURE__ */ jsx4(Text4, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
-        /* @__PURE__ */ jsx4(Box3, { width: 3, children: /* @__PURE__ */ jsx4(Text4, { color: state.enabled ? "green" : void 0, dimColor: !state.enabled, children: state.enabled ? "\u2713" : "\u25CB" }) }),
-        /* @__PURE__ */ jsx4(Box3, { width: 30, children: /* @__PURE__ */ jsx4(
-          Text4,
+      const hasOptions = rule.optionSchema && rule.optionSchema.fields.length > 0;
+      return /* @__PURE__ */ jsxs4(Box4, { paddingLeft: 2, children: [
+        /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
+        /* @__PURE__ */ jsx5(Box4, { width: 3, children: /* @__PURE__ */ jsx5(Text5, { color: state.enabled ? "green" : void 0, dimColor: !state.enabled, children: state.enabled ? "\u2713" : "\u25CB" }) }),
+        /* @__PURE__ */ jsx5(Box4, { width: 30, children: /* @__PURE__ */ jsx5(
+          Text5,
           {
             color: isCursor ? "cyan" : void 0,
             dimColor: !state.enabled,
@@ -487,20 +939,30 @@ function RuleSelector({
             children: rule.name
           }
         ) }),
-        /* @__PURE__ */ jsx4(Box3, { width: 8, children: state.enabled ? /* @__PURE__ */ jsx4(SeverityBadge, { severity: state.severity }) : /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "-" }) })
+        /* @__PURE__ */ jsx5(Box4, { width: 8, children: state.enabled ? /* @__PURE__ */ jsx5(SeverityBadge, { severity: state.severity }) : /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "-" }) }),
+        hasOptions && state.enabled && /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " \u2699" })
       ] }, rule.id);
     }),
-    /* @__PURE__ */ jsx4(CategoryHeader, { name: "Semantic Rules", icon: "\u{1F9E0}" }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  LLM-powered analysis (requires Ollama)" }),
+    (() => {
+      const cat = getCategoryMeta("semantic");
+      return cat ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx5(CategoryHeader, { name: cat.name, icon: cat.icon }),
+        /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+          "  ",
+          cat.description
+        ] })
+      ] }) : null;
+    })(),
     semanticRules.map((rule) => {
       const itemIndex = globalIndex++;
       const isCursor = itemIndex === cursor;
       const state = ruleStates.get(rule.id);
-      return /* @__PURE__ */ jsxs3(Box3, { paddingLeft: 2, children: [
-        /* @__PURE__ */ jsx4(Text4, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
-        /* @__PURE__ */ jsx4(Box3, { width: 3, children: /* @__PURE__ */ jsx4(Text4, { color: state.enabled ? "green" : void 0, dimColor: !state.enabled, children: state.enabled ? "\u2713" : "\u25CB" }) }),
-        /* @__PURE__ */ jsx4(Box3, { width: 30, children: /* @__PURE__ */ jsx4(
-          Text4,
+      const hasOptions = rule.optionSchema && rule.optionSchema.fields.length > 0;
+      return /* @__PURE__ */ jsxs4(Box4, { paddingLeft: 2, children: [
+        /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
+        /* @__PURE__ */ jsx5(Box4, { width: 3, children: /* @__PURE__ */ jsx5(Text5, { color: state.enabled ? "green" : void 0, dimColor: !state.enabled, children: state.enabled ? "\u2713" : "\u25CB" }) }),
+        /* @__PURE__ */ jsx5(Box4, { width: 30, children: /* @__PURE__ */ jsx5(
+          Text5,
           {
             color: isCursor ? "cyan" : void 0,
             dimColor: !state.enabled,
@@ -508,47 +970,53 @@ function RuleSelector({
             children: rule.name
           }
         ) }),
-        /* @__PURE__ */ jsx4(Box3, { width: 8, children: state.enabled ? /* @__PURE__ */ jsx4(SeverityBadge, { severity: state.severity }) : /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "-" }) })
+        /* @__PURE__ */ jsx5(Box4, { width: 8, children: state.enabled ? /* @__PURE__ */ jsx5(SeverityBadge, { severity: state.severity }) : /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "-" }) }),
+        hasOptions && state.enabled && /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " \u2699" })
       ] }, rule.id);
     }),
-    currentRule && /* @__PURE__ */ jsx4(Box3, { marginTop: 1, paddingX: 2, children: /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: currentRule.description }) }),
-    /* @__PURE__ */ jsx4(Box3, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "\u2191\u2193" }),
+    currentRule && /* @__PURE__ */ jsx5(Box4, { marginTop: 1, paddingX: 2, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: currentRule.description }) }),
+    /* @__PURE__ */ jsx5(Box4, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2191\u2193" }),
       " navigate",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "space" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "space" }),
       " toggle",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "s" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "s" }),
       " severity",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "d" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "d" }),
       " docs",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "a" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "a" }),
       " all",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "n" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "n" }),
       " none",
       "  ",
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "enter" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "enter" }),
       " confirm"
     ] }) }),
-    /* @__PURE__ */ jsx4(Box3, { marginTop: 1, children: /* @__PURE__ */ jsxs3(Text4, { children: [
-      /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: enabledCount }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " rules enabled (" }),
-      /* @__PURE__ */ jsx4(Text4, { color: "red", children: errorCount }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " errors, " }),
-      /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: warnCount }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " warnings)" })
+    /* @__PURE__ */ jsx5(Box4, { marginTop: 1, children: /* @__PURE__ */ jsxs4(Text5, { children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: enabledCount }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " rules enabled (" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "red", children: errorCount }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " errors, " }),
+      /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: warnCount }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " warnings)" }),
+      enabledRulesWithOptions.length > 0 && /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+        ", ",
+        enabledRulesWithOptions.length,
+        " with options \u2699"
+      ] })
     ] }) })
   ] });
 }
 
 // src/commands/install/components/InjectionPointSelector.tsx
-import { useState as useState5 } from "react";
-import { Box as Box4, Text as Text5, useInput as useInput4, useApp as useApp4 } from "ink";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Box as Box5, Text as Text6, useInput as useInput5, useApp as useApp4 } from "ink";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function InjectionPointSelector({
   points,
   onSubmit,
@@ -557,8 +1025,8 @@ function InjectionPointSelector({
 }) {
   const { exit } = useApp4();
   const recommendedIndex = points.findIndex((p) => p.recommended);
-  const [cursor, setCursor] = useState5(recommendedIndex >= 0 ? recommendedIndex : 0);
-  useInput4((input, key) => {
+  const [cursor, setCursor] = useState6(recommendedIndex >= 0 ? recommendedIndex : 0);
+  useInput5((input, key) => {
     if (key.upArrow) {
       setCursor((prev) => prev > 0 ? prev - 1 : points.length - 1);
     } else if (key.downArrow) {
@@ -575,16 +1043,16 @@ function InjectionPointSelector({
       exit();
     }
   });
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx5(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Where should the devtools component be injected?" }) }),
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx6(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Where should the devtools component be injected?" }) }),
     points.map((point, index) => {
       const isCursor = index === cursor;
-      return /* @__PURE__ */ jsxs4(Box4, { paddingLeft: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
-        /* @__PURE__ */ jsx5(Box4, { width: 2, children: /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u25C9" : "\u25CB" }) }),
-        /* @__PURE__ */ jsxs4(Box4, { children: [
-          /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : void 0, children: point.label }),
-          point.hint && /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
+      return /* @__PURE__ */ jsxs5(Box5, { paddingLeft: 1, children: [
+        /* @__PURE__ */ jsx6(Text6, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u203A " : "  " }),
+        /* @__PURE__ */ jsx6(Box5, { width: 2, children: /* @__PURE__ */ jsx6(Text6, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u25C9" : "\u25CB" }) }),
+        /* @__PURE__ */ jsxs5(Box5, { children: [
+          /* @__PURE__ */ jsx6(Text6, { color: isCursor ? "cyan" : void 0, children: point.label }),
+          point.hint && /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
             " (",
             point.hint,
             ")"
@@ -592,17 +1060,17 @@ function InjectionPointSelector({
         ] })
       ] }, point.id);
     }),
-    /* @__PURE__ */ jsx5(Box4, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs4(Text5, { dimColor: true, children: [
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2191\u2193" }),
+    /* @__PURE__ */ jsx6(Box5, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "\u2191\u2193" }),
       " navigate",
       "  ",
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "enter" }),
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "enter" }),
       " select",
       "  ",
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "b" }),
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "b" }),
       " back",
       "  ",
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "q" }),
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "q" }),
       " quit"
     ] }) })
   ] });
@@ -967,7 +1435,7 @@ var nextOverlayInstaller = {
 };
 
 // src/commands/install/components/InstallApp.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function getTargetStatus(target) {
   if (!target.isInstalled) {
     return "not_installed";
@@ -1052,10 +1520,10 @@ function checkNodeVersion() {
   };
 }
 function Header({ subtitle }) {
-  return /* @__PURE__ */ jsx6(Box5, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs5(Box5, { children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, color: "cyan", children: "\u25C6 UILint" }),
-    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: " v0.5.0" }),
-    subtitle && /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+  return /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs6(Box6, { children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: "\u25C6 UILint" }),
+    /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: " v0.5.0" }),
+    subtitle && /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
       " \xB7 ",
       subtitle
     ] })
@@ -1069,22 +1537,22 @@ function FeatureConfig({
   onBack,
   onCancel
 }) {
-  useInput5((input, key) => {
+  useInput6((input, key) => {
     if ((input === "b" || key.leftArrow) && canGoBack) {
       onBack();
     }
   });
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-    selectedProject && /* @__PURE__ */ jsxs5(Box5, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Project: " }),
-      /* @__PURE__ */ jsx6(Text6, { bold: true, color: "cyan", children: selectedProject.name }),
-      /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    selectedProject && /* @__PURE__ */ jsxs6(Box6, { marginBottom: 1, children: [
+      /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Project: " }),
+      /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: selectedProject.name }),
+      /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
         " (",
         selectedProject.hint,
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       ConfigSelector,
       {
         items: configItems,
@@ -1092,11 +1560,11 @@ function FeatureConfig({
         onCancel
       }
     ),
-    canGoBack && /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+    canGoBack && /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
       "Press ",
-      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "b" }),
+      /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "b" }),
       " or ",
-      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "\u2190" }),
+      /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "\u2190" }),
       " to select a different project"
     ] }) })
   ] });
@@ -1107,18 +1575,18 @@ function InstallApp({
   onError
 }) {
   const { exit } = useApp5();
-  const [phase, setPhase] = useState6("checking-requirements");
-  const [nodeVersionCheck, setNodeVersionCheck] = useState6(null);
-  const [project, setProject] = useState6(null);
-  const [detectedProjects, setDetectedProjects] = useState6([]);
-  const [selectedProject, setSelectedProject] = useState6(null);
-  const [selections, setSelections] = useState6([]);
-  const [configItems, setConfigItems] = useState6([]);
-  const [selectedFeatureIds, setSelectedFeatureIds] = useState6([]);
-  const [uninstallFeatureIds, setUninstallFeatureIds] = useState6([]);
-  const [error, setError] = useState6(null);
-  const [injectionPoints, setInjectionPoints] = useState6([]);
-  const [selectedInjectionPoint, setSelectedInjectionPoint] = useState6(void 0);
+  const [phase, setPhase] = useState7("checking-requirements");
+  const [nodeVersionCheck, setNodeVersionCheck] = useState7(null);
+  const [project, setProject] = useState7(null);
+  const [detectedProjects, setDetectedProjects] = useState7([]);
+  const [selectedProject, setSelectedProject] = useState7(null);
+  const [selections, setSelections] = useState7([]);
+  const [configItems, setConfigItems] = useState7([]);
+  const [selectedFeatureIds, setSelectedFeatureIds] = useState7([]);
+  const [uninstallFeatureIds, setUninstallFeatureIds] = useState7([]);
+  const [error, setError] = useState7(null);
+  const [injectionPoints, setInjectionPoints] = useState7([]);
+  const [selectedInjectionPoint, setSelectedInjectionPoint] = useState7(void 0);
   const isEslintSelected = selectedFeatureIds.some((id) => id.startsWith("eslint:"));
   const isNextSelected = selectedFeatureIds.some((id) => id.startsWith("next:"));
   useEffect2(() => {
@@ -1277,36 +1745,36 @@ function InstallApp({
     exit();
   };
   if (phase === "checking-requirements") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "Install" }),
-      /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsx6(Spinner, {}),
-        /* @__PURE__ */ jsx6(Text6, { children: " Checking requirements..." })
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "Install" }),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx7(Spinner, {}),
+        /* @__PURE__ */ jsx7(Text7, { children: " Checking requirements..." })
       ] })
     ] });
   }
   if (phase === "scanning") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "Install" }),
-      /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsx6(Spinner, {}),
-        /* @__PURE__ */ jsx6(Text6, { children: " Scanning project..." })
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "Install" }),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx7(Spinner, {}),
+        /* @__PURE__ */ jsx7(Text7, { children: " Scanning project..." })
       ] })
     ] });
   }
   if (phase === "error") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, {}),
-      /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsx6(Text6, { color: "red", children: "\u2717 " }),
-        /* @__PURE__ */ jsx6(Text6, { color: "red", children: error?.message || "An unknown error occurred" })
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, {}),
+      /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx7(Text7, { color: "red", children: "\u2717 " }),
+        /* @__PURE__ */ jsx7(Text7, { color: "red", children: error?.message || "An unknown error occurred" })
       ] })
     ] });
   }
   if (phase === "select-project") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "Install" }),
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "Install" }),
+      /* @__PURE__ */ jsx7(
         ProjectSelector,
         {
           projects: detectedProjects,
@@ -1317,9 +1785,9 @@ function InstallApp({
     ] });
   }
   if (phase === "configure-features" && project && configItems.length > 0) {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "Features" }),
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "Features" }),
+      /* @__PURE__ */ jsx7(
         FeatureConfig,
         {
           selectedProject,
@@ -1333,13 +1801,13 @@ function InstallApp({
     ] });
   }
   if (phase === "configure-injection-point" && injectionPoints.length > 0) {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "Injection Point" }),
-      selectedProject && /* @__PURE__ */ jsxs5(Box5, { marginBottom: 1, children: [
-        /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Project: " }),
-        /* @__PURE__ */ jsx6(Text6, { bold: true, color: "cyan", children: selectedProject.name })
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "Injection Point" }),
+      selectedProject && /* @__PURE__ */ jsxs6(Box6, { marginBottom: 1, children: [
+        /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Project: " }),
+        /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: selectedProject.name })
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         InjectionPointSelector,
         {
           points: injectionPoints,
@@ -1351,13 +1819,13 @@ function InstallApp({
     ] });
   }
   if (phase === "configure-eslint") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx6(Header, { subtitle: "ESLint Rules" }),
-      selectedProject && /* @__PURE__ */ jsxs5(Box5, { marginBottom: 1, children: [
-        /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Project: " }),
-        /* @__PURE__ */ jsx6(Text6, { bold: true, color: "cyan", children: selectedProject.name })
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx7(Header, { subtitle: "ESLint Rules" }),
+      selectedProject && /* @__PURE__ */ jsxs6(Box6, { marginBottom: 1, children: [
+        /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Project: " }),
+        /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: selectedProject.name })
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         RuleSelector,
         {
           onSubmit: handleRuleSubmit,
@@ -1367,9 +1835,9 @@ function InstallApp({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(Header, {}),
-    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Loading..." })
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Header, {}),
+    /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Loading..." })
   ] });
 }
 
@@ -3996,7 +4464,7 @@ async function execute(plan, options = {}) {
 }
 
 // src/commands/install-ui.tsx
-import { ruleRegistry as ruleRegistry3 } from "uilint-eslint";
+import { ruleRegistry as ruleRegistry2 } from "uilint-eslint";
 
 // src/commands/install/installers/genstyleguide.ts
 import { join as join12 } from "path";
@@ -4187,10 +4655,92 @@ var skillInstaller = {
 
 // src/commands/install/installers/eslint.ts
 import { join as join14 } from "path";
-import { ruleRegistry as ruleRegistry2, getRulesByCategory as getRulesByCategory2 } from "uilint-eslint";
+import { ruleRegistry, getRulesByCategory as getRulesByCategory2, getCategoryMeta as getCategoryMeta2 } from "uilint-eslint";
+async function promptForField(field, currentValue) {
+  const hint = field.description ? pc.dim(` ${field.description}`) : "";
+  switch (field.type) {
+    case "boolean":
+      return confirm({
+        message: field.label,
+        initialValue: currentValue ?? field.defaultValue ?? false
+      });
+    case "number": {
+      const numResult = await text({
+        message: field.label + hint,
+        placeholder: field.placeholder || String(currentValue ?? field.defaultValue ?? ""),
+        defaultValue: String(currentValue ?? field.defaultValue ?? ""),
+        validate: (value) => {
+          const num = Number(value);
+          if (isNaN(num)) return "Please enter a valid number";
+          return void 0;
+        }
+      });
+      return Number(numResult);
+    }
+    case "text": {
+      const defaultVal = currentValue ?? field.defaultValue ?? "";
+      const displayDefault = Array.isArray(defaultVal) ? defaultVal.join(", ") : String(defaultVal);
+      return text({
+        message: field.label + hint,
+        placeholder: field.placeholder || displayDefault,
+        defaultValue: displayDefault
+      });
+    }
+    case "select":
+      if (!field.options?.length) {
+        return currentValue ?? field.defaultValue;
+      }
+      return select({
+        message: field.label + hint,
+        options: field.options.map((opt) => ({
+          value: String(opt.value),
+          label: opt.label
+        })),
+        initialValue: String(currentValue ?? field.defaultValue)
+      });
+    case "multiselect":
+      if (!field.options?.length) {
+        return currentValue ?? field.defaultValue;
+      }
+      return multiselect({
+        message: field.label + hint,
+        options: field.options.map((opt) => ({
+          value: String(opt.value),
+          label: opt.label
+        })),
+        initialValues: Array.isArray(currentValue) ? currentValue.map(String) : Array.isArray(field.defaultValue) ? field.defaultValue.map(String) : []
+      });
+    default:
+      return currentValue ?? field.defaultValue;
+  }
+}
+function convertFieldValue2(value, field, defaultValue) {
+  if (Array.isArray(defaultValue) && field.type === "text" && typeof value === "string") {
+    return value.split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  return value;
+}
+async function configureRuleOptions(rule) {
+  if (!rule.optionSchema?.fields?.length) {
+    return void 0;
+  }
+  log("");
+  log(
+    pc.bold(pc.cyan(`${rule.icon ?? "\u2699\uFE0F"}  ${rule.name}`)) + pc.dim(` - ${rule.description}`)
+  );
+  const baseOptions = rule.defaultOptions?.[0] ?? {};
+  const options = {};
+  for (const field of rule.optionSchema.fields) {
+    const currentValue = baseOptions[field.key];
+    const defaultValue = currentValue ?? field.defaultValue;
+    const value = await promptForField(field, currentValue);
+    options[field.key] = convertFieldValue2(value, field, defaultValue);
+  }
+  return options;
+}
 function getUpgradeInfo(configuredRuleIds) {
   const configuredSet = new Set(configuredRuleIds);
-  const allRuleIds = ruleRegistry2.map((r) => r.id);
+  const allRuleIds = ruleRegistry.map((r) => r.id);
   const missingRules = allRuleIds.filter((id) => !configuredSet.has(id));
   if (missingRules.length === 0) {
     return void 0;
@@ -4205,8 +4755,8 @@ function formatRuleOption(rule) {
   const severityBadge = rule.defaultSeverity === "error" ? pc.red("error") : pc.yellow("warn");
   return {
     value: rule.id,
-    label: `${rule.name}`,
-    hint: `${rule.description} [${severityBadge}]`
+    label: `${rule.icon ?? ""} ${rule.name}`.trim(),
+    hint: `${rule.hint ?? rule.description} [${severityBadge}]`
   };
 }
 var eslintInstaller = {
@@ -4267,33 +4817,37 @@ var eslintInstaller = {
         options: rule.defaultOptions
       }));
     } else if (installMode === "strict") {
-      configuredRules = ruleRegistry2.map((rule) => ({
+      configuredRules = ruleRegistry.map((rule) => ({
         rule,
         severity: rule.defaultSeverity,
         options: rule.defaultOptions
       }));
     } else {
-      log(pc.dim("\n\u{1F4CB} Static rules (pattern-based, fast):"));
+      const staticCat = getCategoryMeta2("static");
+      const semanticCat = getCategoryMeta2("semantic");
+      log(pc.dim(`
+${staticCat?.icon ?? "\u{1F4CB}"} ${staticCat?.name ?? "Static rules"} (${staticCat?.description ?? "pattern-based, fast"}):`));
       const selectedStaticIds = await multiselect({
         message: "Select static rules to enable:",
         options: staticRules.map(formatRuleOption),
-        initialValues: staticRules.map((r) => r.id)
+        initialValues: staticRules.filter((r) => r.defaultEnabled ?? staticCat?.defaultEnabled ?? true).map((r) => r.id)
       });
       const includeSemanticRules = await confirm({
         message: `Include semantic rules? ${pc.dim(
-          "(requires Ollama for LLM analysis)"
+          `(${semanticCat?.description ?? "LLM-powered analysis"})`
         )}`,
         initialValue: false
       });
       let selectedSemanticIds = [];
       if (includeSemanticRules) {
         log(
-          pc.dim("\n\u{1F9E0} Semantic rules (LLM-powered, slower):")
+          pc.dim(`
+${semanticCat?.icon ?? "\u{1F9E0}"} ${semanticCat?.name ?? "Semantic rules"} (${semanticCat?.description ?? "LLM-powered, slower"}):`)
         );
         selectedSemanticIds = await multiselect({
           message: "Select semantic rules:",
           options: semanticRules.map(formatRuleOption),
-          initialValues: semanticRules.map((r) => r.id)
+          initialValues: semanticRules.filter((r) => r.defaultEnabled ?? semanticCat?.defaultEnabled ?? false).map((r) => r.id)
         });
       }
       selectedRuleIds = [...selectedStaticIds, ...selectedSemanticIds];
@@ -4303,7 +4857,7 @@ var eslintInstaller = {
       });
       configuredRules = [];
       for (const ruleId of selectedRuleIds) {
-        const rule = ruleRegistry2.find((r) => r.id === ruleId);
+        const rule = ruleRegistry.find((r) => r.id === ruleId);
         if (configureSeverity) {
           const severity = await select({
             message: `${rule.name} - severity:`,
@@ -4331,34 +4885,64 @@ var eslintInstaller = {
         }
       }
     }
+    const rulesWithOptions = configuredRules.filter(
+      (cr) => cr.rule.optionSchema && cr.rule.optionSchema.fields.length > 0
+    );
+    if (rulesWithOptions.length > 0) {
+      const customizeOptions = await confirm({
+        message: `Customize rule options? ${pc.dim(
+          `(${rulesWithOptions.length} rules have configurable options)`
+        )}`,
+        initialValue: false
+      });
+      if (customizeOptions) {
+        for (const cr of configuredRules) {
+          if (cr.rule.optionSchema && cr.rule.optionSchema.fields.length > 0) {
+            const options = await configureRuleOptions(cr.rule);
+            if (options) {
+              const existingOptions = cr.options && cr.options.length > 0 ? cr.options[0] : {};
+              cr.options = [{ ...existingOptions, ...options }];
+            }
+          }
+        }
+      }
+    }
     const errorCount = configuredRules.filter(
       (r) => r.severity === "error"
     ).length;
     const warnCount = configuredRules.filter(
       (r) => r.severity === "warn"
     ).length;
-    const hasSemanticDuplicates = configuredRules.some(
-      (cr) => cr.rule.id === "no-semantic-duplicates"
-    );
     log("");
     note(
       configuredRules.map(
-        (cr) => `${cr.severity === "error" ? "\u{1F534}" : "\u{1F7E1}"} ${cr.rule.name} (${cr.severity})`
+        (cr) => `${cr.severity === "error" ? "\u{1F534}" : "\u{1F7E1}"} ${cr.rule.icon ?? ""} ${cr.rule.name} (${cr.severity})`
       ).join("\n"),
       `Selected ${configuredRules.length} rules (${errorCount} errors, ${warnCount} warnings)`
     );
-    if (hasSemanticDuplicates) {
+    const rulesWithInstructions = configuredRules.filter(
+      (cr) => cr.rule.postInstallInstructions || (cr.rule.requirements?.length ?? 0) > 0
+    );
+    if (rulesWithInstructions.length > 0) {
       log("");
-      log(
-        pc.yellow(
-          "\u26A0\uFE0F  The no-semantic-duplicates rule requires a semantic index."
-        )
-      );
-      log(
-        pc.dim(
-          "   Run 'uilint duplicates index' in each target app to build it."
-        )
-      );
+      log(pc.bold("\u{1F4CB} Setup Requirements:"));
+      for (const cr of rulesWithInstructions) {
+        if (cr.rule.requirements?.length) {
+          for (const req of cr.rule.requirements) {
+            log(
+              pc.yellow(`  \u26A0\uFE0F  ${cr.rule.name}: ${req.description}`)
+            );
+            if (req.setupHint) {
+              log(pc.dim(`     \u2192 ${req.setupHint}`));
+            }
+          }
+        }
+        if (cr.rule.postInstallInstructions) {
+          log(
+            pc.cyan(`  \u2139\uFE0F  ${cr.rule.name}: ${cr.rule.postInstallInstructions}`)
+          );
+        }
+      }
     }
     return { configuredRules };
   },
@@ -4572,7 +5156,7 @@ registerInstaller(nextOverlayInstaller);
 registerInstaller(viteOverlayInstaller);
 
 // src/commands/install-ui.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function limitList(items, max) {
   if (items.length <= max) return items;
   return [...items.slice(0, max), pc.dim(`\u2026and ${items.length - max} more`)];
@@ -4692,7 +5276,7 @@ function selectionsToUserChoices(selections, project, eslintRules, injectionPoin
           // Override severity with user's selection
           defaultSeverity: cr.severity,
           defaultOptions: cr.options
-        })) : ruleRegistry3
+        })) : ruleRegistry2
       };
     } else if (installer.id === "next") {
       items.push("next");
@@ -4737,7 +5321,7 @@ async function installUI(options = {}, executeOptions = {}) {
   }
   const projectPromise = analyze(projectPath);
   const { waitUntilExit } = render(
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       InstallApp,
       {
         projectPromise,
@@ -4750,7 +5334,7 @@ async function installUI(options = {}, executeOptions = {}) {
             console.log("\nNo changes selected");
             process.exit(0);
           }
-          const { createPlan } = await import("./plan-E7ZMQPPE.js");
+          const { createPlan } = await import("./plan-QVR3RBLG.js");
           const plan = createPlan(project, choices, { force: options.force });
           if (hasUninstalls && uninstallSelections) {
             for (const selection of uninstallSelections) {
@@ -4802,4 +5386,4 @@ ${pc.blue("Running tests with coverage...")}`);
 export {
   installUI
 };
-//# sourceMappingURL=install-ui-ZXMZNRU2.js.map
+//# sourceMappingURL=install-ui-JV4G2CAC.js.map