@orchestra-mcp/settings 1.0.0

package/dist/index.js

@@ -0,0 +1,903 @@
+// src/SettingsForm/SettingField.tsx
+import { useState, useCallback, useRef, useEffect } from "react";
+
+// src/SettingsForm/timezones.ts
+var TIMEZONE_OPTIONS = [
+  { label: "UTC", value: "UTC", description: "Coordinated Universal Time" },
+  { label: "US/Eastern (ET)", value: "America/New_York", description: "UTC-5 / UTC-4 DST" },
+  { label: "US/Central (CT)", value: "America/Chicago", description: "UTC-6 / UTC-5 DST" },
+  { label: "US/Mountain (MT)", value: "America/Denver", description: "UTC-7 / UTC-6 DST" },
+  { label: "US/Pacific (PT)", value: "America/Los_Angeles", description: "UTC-8 / UTC-7 DST" },
+  { label: "US/Alaska", value: "America/Anchorage", description: "UTC-9 / UTC-8 DST" },
+  { label: "US/Hawaii", value: "Pacific/Honolulu", description: "UTC-10" },
+  { label: "Canada/Atlantic", value: "America/Halifax", description: "UTC-4 / UTC-3 DST" },
+  { label: "Canada/Newfoundland", value: "America/St_Johns", description: "UTC-3:30" },
+  { label: "Mexico City", value: "America/Mexico_City", description: "UTC-6 / UTC-5 DST" },
+  { label: "Sao Paulo", value: "America/Sao_Paulo", description: "UTC-3" },
+  { label: "Buenos Aires", value: "America/Argentina/Buenos_Aires", description: "UTC-3" },
+  { label: "London (GMT/BST)", value: "Europe/London", description: "UTC+0 / UTC+1 DST" },
+  { label: "Paris (CET)", value: "Europe/Paris", description: "UTC+1 / UTC+2 DST" },
+  { label: "Berlin (CET)", value: "Europe/Berlin", description: "UTC+1 / UTC+2 DST" },
+  { label: "Amsterdam (CET)", value: "Europe/Amsterdam", description: "UTC+1 / UTC+2 DST" },
+  { label: "Rome (CET)", value: "Europe/Rome", description: "UTC+1 / UTC+2 DST" },
+  { label: "Madrid (CET)", value: "Europe/Madrid", description: "UTC+1 / UTC+2 DST" },
+  { label: "Athens (EET)", value: "Europe/Athens", description: "UTC+2 / UTC+3 DST" },
+  { label: "Istanbul", value: "Europe/Istanbul", description: "UTC+3" },
+  { label: "Moscow", value: "Europe/Moscow", description: "UTC+3" },
+  { label: "Dubai", value: "Asia/Dubai", description: "UTC+4" },
+  { label: "Kolkata (IST)", value: "Asia/Kolkata", description: "UTC+5:30" },
+  { label: "Bangkok (ICT)", value: "Asia/Bangkok", description: "UTC+7" },
+  { label: "Singapore (SGT)", value: "Asia/Singapore", description: "UTC+8" },
+  { label: "Hong Kong (HKT)", value: "Asia/Hong_Kong", description: "UTC+8" },
+  { label: "Shanghai (CST)", value: "Asia/Shanghai", description: "UTC+8" },
+  { label: "Taipei (CST)", value: "Asia/Taipei", description: "UTC+8" },
+  { label: "Seoul (KST)", value: "Asia/Seoul", description: "UTC+9" },
+  { label: "Tokyo (JST)", value: "Asia/Tokyo", description: "UTC+9" },
+  { label: "Sydney (AEST)", value: "Australia/Sydney", description: "UTC+10 / UTC+11 DST" },
+  { label: "Melbourne (AEST)", value: "Australia/Melbourne", description: "UTC+10 / UTC+11 DST" },
+  { label: "Auckland (NZST)", value: "Pacific/Auckland", description: "UTC+12 / UTC+13 DST" },
+  { label: "Cairo (EET)", value: "Africa/Cairo", description: "UTC+2" },
+  { label: "Lagos (WAT)", value: "Africa/Lagos", description: "UTC+1" },
+  { label: "Nairobi (EAT)", value: "Africa/Nairobi", description: "UTC+3" },
+  { label: "Johannesburg (SAST)", value: "Africa/Johannesburg", description: "UTC+2" }
+];
+
+// src/SettingsForm/SettingField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SettingField = ({
+  setting,
+  value,
+  onChange,
+  disabled
+}) => {
+  const isDisabled = disabled || setting.disabled;
+  const handleChange = useCallback(
+    (newValue) => {
+      onChange(setting.key, newValue);
+    },
+    [onChange, setting.key]
+  );
+  if (setting.hidden) {
+    return null;
+  }
+  if (setting.type === "boolean") {
+    return /* @__PURE__ */ jsx(
+      BooleanField,
+      {
+        setting,
+        value,
+        onChange: handleChange,
+        disabled: isDisabled
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "setting-field", children: [
+    /* @__PURE__ */ jsxs("label", { className: "setting-field__label", children: [
+      setting.label,
+      setting.validation?.required && /* @__PURE__ */ jsx("span", { className: "setting-field__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FieldInput,
+      {
+        setting,
+        value,
+        onChange: handleChange,
+        disabled: isDisabled
+      }
+    ),
+    setting.description && /* @__PURE__ */ jsx("p", { className: "setting-field__description", children: setting.description })
+  ] });
+};
+var FieldInput = ({ setting, value, onChange, disabled }) => {
+  switch (setting.type) {
+    case "string":
+      return /* @__PURE__ */ jsx(
+        StringField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "multi-select":
+      return /* @__PURE__ */ jsx(
+        MultiSelectField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "color":
+      return /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "range":
+      return /* @__PURE__ */ jsx(
+        RangeField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "timezone":
+      return /* @__PURE__ */ jsx(
+        TimezoneField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "key-value":
+      return /* @__PURE__ */ jsx(
+        KeyValueField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "repeater":
+      return /* @__PURE__ */ jsx(
+        RepeaterField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "code":
+      return /* @__PURE__ */ jsx(
+        CodeField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    case "markdown":
+      return /* @__PURE__ */ jsx(
+        MarkdownSettingField,
+        {
+          setting,
+          value,
+          onChange,
+          disabled
+        }
+      );
+    default:
+      return null;
+  }
+};
+var StringField = ({ setting, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "text",
+    className: "setting-field__input",
+    value: value ?? "",
+    placeholder: setting.placeholder,
+    disabled,
+    minLength: setting.validation?.minLength,
+    maxLength: setting.validation?.maxLength,
+    pattern: setting.validation?.pattern,
+    onChange: (e) => onChange(e.target.value)
+  }
+);
+var NumberField = ({ setting, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "number",
+    className: "setting-field__input",
+    value: value ?? "",
+    placeholder: setting.placeholder,
+    disabled,
+    min: setting.validation?.min,
+    max: setting.validation?.max,
+    step: setting.validation?.step,
+    onChange: (e) => onChange(Number(e.target.value))
+  }
+);
+var BooleanField = ({ setting, value, onChange, disabled }) => {
+  const isOn = Boolean(value);
+  return /* @__PURE__ */ jsx("div", { className: "setting-field", children: /* @__PURE__ */ jsxs("div", { className: "setting-field__toggle-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: "setting-field__toggle-text", children: [
+      /* @__PURE__ */ jsxs("span", { className: "setting-field__toggle-label", children: [
+        setting.label,
+        setting.validation?.required && /* @__PURE__ */ jsx("span", { className: "setting-field__required", children: "*" })
+      ] }),
+      setting.description && /* @__PURE__ */ jsx("p", { className: "setting-field__toggle-desc", children: setting.description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `setting-field__toggle ${isOn ? "setting-field__toggle--on" : "setting-field__toggle--off"}`,
+        disabled,
+        onClick: () => onChange(!isOn),
+        "aria-label": `Toggle ${setting.label}`,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `setting-field__toggle-knob ${isOn ? "setting-field__toggle-knob--on" : "setting-field__toggle-knob--off"}`
+          }
+        )
+      }
+    )
+  ] }) });
+};
+var SelectField = ({ setting, value, onChange, disabled }) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const options = setting.options ?? [];
+  const selected = options.find((o) => String(o.value) === String(value));
+  const filtered = search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const handleSelect = (optValue) => {
+    onChange(optValue);
+    setOpen(false);
+    setSearch("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setOpen(false);
+      setSearch("");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "setting-field__select-wrapper", ref: wrapperRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `setting-field__select-trigger ${open ? "setting-field__select-trigger--open" : ""}`,
+        disabled,
+        onClick: () => {
+          setOpen(!open);
+          if (!open) setTimeout(() => inputRef.current?.focus(), 0);
+        },
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selected ? "" : "setting-field__select-placeholder", children: selected?.label || setting.placeholder || "Select..." }),
+          /* @__PURE__ */ jsx(SelectChevron, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "setting-field__select-dropdown", role: "listbox", onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx("div", { className: "setting-field__select-search-box", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: "setting-field__select-search",
+          placeholder: "Search...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "setting-field__select-options", children: [
+        filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "setting-field__select-empty", children: "No results" }),
+        filtered.map((opt) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `setting-field__select-option ${String(opt.value) === String(value) ? "setting-field__select-option--active" : ""}`,
+            onClick: () => handleSelect(opt.value),
+            role: "option",
+            "aria-selected": String(opt.value) === String(value),
+            children: [
+              opt.label,
+              opt.description && /* @__PURE__ */ jsx("span", { className: "setting-field__select-option-desc", children: opt.description })
+            ]
+          },
+          String(opt.value)
+        ))
+      ] })
+    ] })
+  ] });
+};
+var SelectChevron = () => /* @__PURE__ */ jsx("svg", { className: "setting-field__select-chevron", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var MultiSelectField = ({
+  setting,
+  value,
+  onChange,
+  disabled
+}) => {
+  const selected = value ?? [];
+  const toggle = (optValue) => {
+    const next = selected.includes(optValue) ? selected.filter((v) => v !== optValue) : [...selected, optValue];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "setting-field__checkbox-group", children: setting.options?.map((opt) => {
+    const optStr = String(opt.value);
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `setting-field__checkbox-card${disabled ? " setting-field__checkbox-card--disabled" : ""}${selected.includes(optStr) ? " setting-field__checkbox-card--checked" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "setting-field__checkbox",
+              checked: selected.includes(optStr),
+              disabled,
+              onChange: () => toggle(optStr)
+            }
+          ),
+          opt.icon && /* @__PURE__ */ jsx("span", { className: "setting-field__checkbox-icon", children: opt.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "setting-field__checkbox-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "setting-field__checkbox-title", children: opt.label }),
+            opt.description && /* @__PURE__ */ jsx("span", { className: "setting-field__checkbox-desc", children: opt.description })
+          ] })
+        ]
+      },
+      optStr
+    );
+  }) });
+};
+var ColorField = ({ setting, value, onChange, disabled }) => {
+  const swatches = setting.options ?? [];
+  const isGradient = (v) => v.includes("gradient") || v.includes(",");
+  return /* @__PURE__ */ jsxs("div", { className: "setting-field__color-wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "setting-field__color-row", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          className: "setting-field__color-picker",
+          value: isGradient(value || "") ? "#000000" : value || "#000000",
+          disabled,
+          onChange: (e) => onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "setting-field__input setting-field__color-text",
+          value: value ?? "",
+          placeholder: setting.placeholder || "#000000",
+          disabled,
+          onChange: (e) => onChange(e.target.value)
+        }
+      )
+    ] }),
+    swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "setting-field__color-swatches", children: swatches.map((swatch) => {
+      const swatchVal = String(swatch.value);
+      const active = swatchVal === value;
+      const gradient = isGradient(swatchVal);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `setting-field__color-swatch${active ? " setting-field__color-swatch--active" : ""}`,
+          style: {
+            background: gradient ? swatchVal : swatchVal
+          },
+          disabled,
+          onClick: () => onChange(swatchVal),
+          "aria-label": swatch.label,
+          title: swatch.label
+        },
+        swatchVal
+      );
+    }) })
+  ] });
+};
+var RangeField = ({ setting, value, onChange, disabled }) => /* @__PURE__ */ jsxs("div", { className: "setting-field__range-row", children: [
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      className: "setting-field__range",
+      value: value ?? setting.validation?.min ?? 0,
+      min: setting.validation?.min ?? 0,
+      max: setting.validation?.max ?? 100,
+      step: setting.validation?.step ?? 1,
+      disabled,
+      onChange: (e) => onChange(Number(e.target.value))
+    }
+  ),
+  /* @__PURE__ */ jsx("span", { className: "setting-field__range-value", children: value ?? setting.validation?.min ?? 0 })
+] });
+var DateField = ({ setting, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "date",
+    className: "setting-field__input setting-field__date",
+    value: value ?? "",
+    disabled,
+    onChange: (e) => onChange(e.target.value)
+  }
+);
+var TimezoneField = ({ setting, value, onChange, disabled }) => {
+  const tzSetting = {
+    ...setting,
+    type: "select",
+    options: TIMEZONE_OPTIONS,
+    placeholder: setting.placeholder || "Select timezone..."
+  };
+  return /* @__PURE__ */ jsx(
+    SelectField,
+    {
+      setting: tzSetting,
+      value,
+      onChange: (v) => onChange(String(v)),
+      disabled
+    }
+  );
+};
+var KeyValueField = ({ setting, value, onChange, disabled }) => {
+  const pairs = value ?? {};
+  const entries = Object.entries(pairs);
+  const updateKey = (oldKey, newKey) => {
+    const next = {};
+    for (const [k, v] of entries) {
+      next[k === oldKey ? newKey : k] = v;
+    }
+    onChange(next);
+  };
+  const updateValue = (key, newVal) => {
+    onChange({ ...pairs, [key]: newVal });
+  };
+  const addPair = () => {
+    onChange({ ...pairs, "": "" });
+  };
+  const removePair = (key) => {
+    const next = { ...pairs };
+    delete next[key];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "setting-field__kv", children: [
+    entries.map(([k, v], i) => /* @__PURE__ */ jsxs("div", { className: "setting-field__kv-row", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "setting-field__input setting-field__kv-key",
+          value: k,
+          placeholder: "Key",
+          disabled,
+          onChange: (e) => updateKey(k, e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "setting-field__input setting-field__kv-value",
+          value: v,
+          placeholder: "Value",
+          disabled,
+          onChange: (e) => updateValue(k, e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "setting-field__kv-remove",
+          disabled,
+          onClick: () => removePair(k),
+          "aria-label": "Remove pair",
+          children: /* @__PURE__ */ jsx(RemoveIcon, {})
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "setting-field__kv-add",
+        disabled,
+        onClick: addPair,
+        children: [
+          /* @__PURE__ */ jsx(AddIcon, {}),
+          " Add pair"
+        ]
+      }
+    )
+  ] });
+};
+var RepeaterField = ({ setting, value, onChange, disabled }) => {
+  const rows = value ?? [];
+  const columns = setting.repeaterColumns ?? [{ key: "value", label: "Value" }];
+  const addRow = () => {
+    const newRow = { id: crypto.randomUUID() };
+    for (const col of columns) newRow[col.key] = "";
+    onChange([...rows, newRow]);
+  };
+  const removeRow = (id) => {
+    onChange(rows.filter((r) => r.id !== id));
+  };
+  const updateCell = (id, colKey, val) => {
+    onChange(rows.map((r) => r.id === id ? { ...r, [colKey]: val } : r));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "setting-field__repeater", children: [
+    columns.length > 1 && /* @__PURE__ */ jsxs("div", { className: "setting-field__repeater-header", children: [
+      columns.map((col) => /* @__PURE__ */ jsx("span", { className: "setting-field__repeater-col-label", children: col.label }, col.key)),
+      /* @__PURE__ */ jsx("span", { className: "setting-field__repeater-col-action" })
+    ] }),
+    rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "setting-field__repeater-row", children: [
+      columns.map((col) => /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "setting-field__input setting-field__repeater-cell",
+          value: row[col.key] ?? "",
+          placeholder: col.placeholder || col.label,
+          disabled,
+          onChange: (e) => updateCell(row.id, col.key, e.target.value)
+        },
+        col.key
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "setting-field__repeater-remove",
+          disabled,
+          onClick: () => removeRow(row.id),
+          "aria-label": "Remove row",
+          children: /* @__PURE__ */ jsx(RemoveIcon, {})
+        }
+      )
+    ] }, row.id)),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "setting-field__repeater-add",
+        disabled,
+        onClick: addRow,
+        children: [
+          /* @__PURE__ */ jsx(AddIcon, {}),
+          " Add row"
+        ]
+      }
+    )
+  ] });
+};
+var CodeField = ({ setting, value, onChange, disabled }) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    className: "setting-field__input setting-field__code",
+    value: value ?? "",
+    placeholder: setting.placeholder,
+    disabled,
+    rows: 8,
+    spellCheck: false,
+    onChange: (e) => onChange(e.target.value)
+  }
+);
+var MarkdownSettingField = ({ setting, value, onChange, disabled }) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: "setting-field__input setting-field__code",
+      value: value ?? "",
+      placeholder: setting.placeholder || "Write markdown...",
+      disabled,
+      rows: 8,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+};
+var AddIcon = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+var RemoveIcon = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+
+// src/SettingsForm/SettingsGroup.tsx
+import { useState as useState2, useMemo } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettingsGroup = ({
+  group,
+  settings,
+  values,
+  onChange,
+  disabled
+}) => {
+  const [collapsed, setCollapsed] = useState2(group.collapsed ?? false);
+  const sortedSettings = useMemo(
+    () => [...settings].sort((a, b) => a.order - b.order),
+    [settings]
+  );
+  const groupClasses = [
+    "settings-group",
+    collapsed ? "settings-group--collapsed" : ""
+  ].filter(Boolean).join(" ");
+  const headerClasses = [
+    "settings-group__header",
+    group.collapsible ? "settings-group__header--collapsible" : ""
+  ].filter(Boolean).join(" ");
+  const handleHeaderClick = () => {
+    if (group.collapsible) {
+      setCollapsed((prev) => !prev);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: groupClasses, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: headerClasses,
+        onClick: handleHeaderClick,
+        role: group.collapsible ? "button" : void 0,
+        tabIndex: group.collapsible ? 0 : void 0,
+        onKeyDown: group.collapsible ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleHeaderClick();
+          }
+        } : void 0,
+        children: [
+          group.icon && /* @__PURE__ */ jsx2("span", { className: "settings-group__icon", children: group.icon }),
+          /* @__PURE__ */ jsxs2("div", { className: "settings-group__header-text", children: [
+            /* @__PURE__ */ jsx2("h3", { className: "settings-group__title", children: group.label }),
+            group.description && /* @__PURE__ */ jsx2("p", { className: "settings-group__description", children: group.description })
+          ] }),
+          group.collapsible && /* @__PURE__ */ jsx2(ChevronIcon, { collapsed })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "settings-group__body", children: sortedSettings.map((setting) => /* @__PURE__ */ jsx2(
+      SettingField,
+      {
+        setting,
+        value: values[setting.key] ?? setting.default,
+        onChange,
+        disabled
+      },
+      setting.key
+    )) })
+  ] });
+};
+function ChevronIcon({ collapsed }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className: `settings-group__chevron ${collapsed ? "settings-group__chevron--collapsed" : ""}`,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/SettingsForm/SettingGroupShell.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SettingGroupShell = ({ group, children }) => {
+  return /* @__PURE__ */ jsxs3("div", { className: "settings-group", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "settings-group__header", children: [
+      group.icon && /* @__PURE__ */ jsx3("span", { className: "settings-group__icon", children: group.icon }),
+      /* @__PURE__ */ jsxs3("div", { className: "settings-group__header-text", children: [
+        /* @__PURE__ */ jsx3("h3", { className: "settings-group__title", children: group.label }),
+        group.description && /* @__PURE__ */ jsx3("p", { className: "settings-group__description", children: group.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "settings-group__body", children })
+  ] });
+};
+
+// src/SettingsForm/SettingsForm.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SettingsForm = ({
+  state,
+  values,
+  onChange,
+  activeGroup,
+  disabled,
+  className,
+  emptyState
+}) => {
+  const visibleGroups = useMemo2(() => {
+    const sorted = [...state.groups].sort((a, b) => a.order - b.order);
+    if (activeGroup) {
+      return sorted.filter((g) => g.id === activeGroup);
+    }
+    return sorted;
+  }, [state.groups, activeGroup]);
+  const settingsByGroup = useMemo2(() => {
+    const map = {};
+    for (const setting of state.settings) {
+      if (setting.hidden) continue;
+      if (!map[setting.group]) {
+        map[setting.group] = [];
+      }
+      map[setting.group].push(setting);
+    }
+    return map;
+  }, [state.settings]);
+  const formClasses = ["settings-form", className].filter(Boolean).join(" ");
+  const hasVisibleSettings = visibleGroups.some(
+    (g) => settingsByGroup[g.id] && settingsByGroup[g.id].length > 0
+  );
+  if (!hasVisibleSettings) {
+    return /* @__PURE__ */ jsx4("div", { className: formClasses, children: emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "settings-form__empty", children: [
+      /* @__PURE__ */ jsxs4("svg", { className: "settings-form__empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx4("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" })
+      ] }),
+      /* @__PURE__ */ jsx4("p", { className: "settings-form__empty-title", children: "No settings available" }),
+      /* @__PURE__ */ jsx4("p", { className: "settings-form__empty-desc", children: "There are no configurable settings for this section." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: formClasses, children: visibleGroups.map((group) => {
+    const groupSettings = settingsByGroup[group.id];
+    if (!groupSettings || groupSettings.length === 0) return null;
+    return /* @__PURE__ */ jsx4(
+      SettingsGroup,
+      {
+        group,
+        settings: groupSettings,
+        values,
+        onChange,
+        disabled
+      },
+      group.id
+    );
+  }) });
+};
+
+// src/SettingsNav/SettingsNav.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SettingsNav = ({
+  title = "Settings",
+  subtitle = "Customize your workspace",
+  items,
+  activeId,
+  searchQuery = "",
+  onSearchChange,
+  onSelect,
+  showSearch = true
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: "settings-nav", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "settings-nav__header", children: [
+      /* @__PURE__ */ jsx5("h2", { className: "settings-nav__title", children: title }),
+      subtitle && /* @__PURE__ */ jsx5("p", { className: "settings-nav__subtitle", children: subtitle })
+    ] }),
+    showSearch && /* @__PURE__ */ jsxs5("div", { className: "settings-nav__search", children: [
+      /* @__PURE__ */ jsx5(SearchIcon, {}),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search settings...",
+          value: searchQuery,
+          onChange: (e) => onSearchChange?.(e.target.value),
+          className: "settings-nav__search-input"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5("nav", { className: "settings-nav__list", children: items.map((item) => /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: () => onSelect(item.id),
+        className: `settings-nav__item ${activeId === item.id ? "settings-nav__item--active" : ""}`,
+        children: [
+          item.icon && /* @__PURE__ */ jsx5("span", { className: "settings-nav__icon", children: item.icon }),
+          /* @__PURE__ */ jsx5("span", { children: item.label })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+};
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      className: "settings-nav__search-icon",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx5("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+
+// src/validate.ts
+function validateSetting(value, validation) {
+  if (!validation) return null;
+  if (validation.required && (value === void 0 || value === null || value === "")) {
+    return validation.message ?? "This field is required";
+  }
+  if (typeof value === "string") {
+    if (validation.min !== void 0 && value.length < validation.min) {
+      return validation.message ?? `Must be at least ${validation.min} characters`;
+    }
+    if (validation.max !== void 0 && value.length > validation.max) {
+      return validation.message ?? `Must be at most ${validation.max} characters`;
+    }
+    if (validation.pattern && !new RegExp(validation.pattern).test(value)) {
+      return validation.message ?? "Invalid format";
+    }
+  }
+  if (typeof value === "number") {
+    if (validation.min !== void 0 && value < validation.min) {
+      return validation.message ?? `Must be at least ${validation.min}`;
+    }
+    if (validation.max !== void 0 && value > validation.max) {
+      return validation.message ?? `Must be at most ${validation.max}`;
+    }
+  }
+  return null;
+}
+export {
+  SettingField,
+  SettingGroupShell,
+  SettingsForm,
+  SettingsGroup,
+  SettingsNav,
+  validateSetting
+};