@capsuletech/web-inspector 0.1.0

package/dist/Category.d.ts

@@ -0,0 +1,12 @@
+import { ICategory, OnChangeFn, ValuesMap } from './types';
+interface ICategoryProps {
+    category: ICategory;
+    values: ValuesMap;
+    onChange: OnChangeFn;
+}
+/**
+ * Одна секция Inspector'а. Collapsible header — клик переключает развёрнутый
+ * вид. Начальное состояние — `category.defaultCollapsed`.
+ */
+export declare const Category: (props: ICategoryProps) => import("solid-js").JSX.Element;
+export {};

package/dist/Inspector.d.ts

@@ -0,0 +1,10 @@
+import { IInspectorProps } from './types';
+/**
+ * Универсальный редактор пропсов. Принимает список категорий (например
+ * «Основное» / «Расширенное»), у каждой — набор типизированных полей.
+ *
+ * Inspector сам по себе ничего не «знает» о компонентах редактора —
+ * это чистая render-функция от описаний полей и текущих значений.
+ * Маппинг манифеста компонента → категорий выполняется в host'е.
+ */
+export declare const Inspector: (props: IInspectorProps) => import("solid-js").JSX.Element;

package/dist/fields/BooleanField.d.ts

@@ -0,0 +1,12 @@
+import { IBooleanField } from '../types';
+interface IProps {
+    field: IBooleanField;
+    value: boolean | undefined;
+    onChange: (v: boolean) => void;
+}
+/**
+ * Boolean — inline-layout: label слева, toggle справа. Так компактнее в
+ * списке полей и читабельнее («Отключено: ON»).
+ */
+export declare const BooleanField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/FieldShell.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'solid-js';
+interface IFieldShellProps {
+    label: string;
+    hint?: string;
+    /** Если true, label рендерится inline (для toggle с подписью справа). */
+    inline?: boolean;
+    children: JSX.Element;
+}
+/**
+ * Общий обёрточный layout для одного поля: label сверху, content под ним,
+ * опциональный hint мелким шрифтом внизу. Все Field-компоненты используют
+ * эту обёртку, чтобы вид был согласованным.
+ */
+export declare const FieldShell: (props: IFieldShellProps) => JSX.Element;
+export {};

package/dist/fields/NumberField.d.ts

@@ -0,0 +1,8 @@
+import { INumberField } from '../types';
+interface IProps {
+    field: INumberField;
+    value: number | undefined;
+    onChange: (v: number) => void;
+}
+export declare const NumberField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/NumberUnitField.d.ts

@@ -0,0 +1,12 @@
+import { INumberUnitField } from '../types';
+interface IProps {
+    field: INumberUnitField;
+    value: string | undefined;
+    onChange: (v: string) => void;
+}
+/**
+ * Число + единица измерения в одной строке. При выборе `auto` числовое поле
+ * блокируется, и в onChange улетает строка `'auto'`.
+ */
+export declare const NumberUnitField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/SelectField.d.ts

@@ -0,0 +1,12 @@
+import { ISelectField } from '../types';
+interface IProps {
+    field: ISelectField;
+    value: string | undefined;
+    onChange: (v: string) => void;
+}
+/**
+ * Простой native select на v1. Когда в @capsuletech/ui появится полноценный
+ * Select (Kobalte popover + Listbox) — заменим, API наружу не изменится.
+ */
+export declare const SelectField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/TextField.d.ts

@@ -0,0 +1,8 @@
+import { ITextField } from '../types';
+interface IProps {
+    field: ITextField;
+    value: string | undefined;
+    onChange: (v: string) => void;
+}
+export declare const TextField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/TextareaField.d.ts

@@ -0,0 +1,8 @@
+import { ITextareaField } from '../types';
+interface IProps {
+    field: ITextareaField;
+    value: string | undefined;
+    onChange: (v: string) => void;
+}
+export declare const TextareaField: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/fields/index.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'solid-js';
+import { IFieldDef, OnChangeFn, ValuesMap } from '../types';
+import { BooleanField } from './BooleanField';
+import { NumberField } from './NumberField';
+import { NumberUnitField } from './NumberUnitField';
+import { SelectField } from './SelectField';
+import { TextField } from './TextField';
+import { TextareaField } from './TextareaField';
+/**
+ * Диспатчер по `field.type`. Каждый case передаёт уже-типизированный field
+ * и пробрасывает изменения через единый `onChange(key, value)`.
+ */
+export declare const renderField: (field: IFieldDef, values: ValuesMap, onChange: OnChangeFn) => JSX.Element;
+export { BooleanField, NumberField, NumberUnitField, SelectField, TextField, TextareaField };

package/dist/fields/parse-unit.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Парсит CSS-подобную строку с единицей измерения. `'100px'` → `{value: 100, unit: 'px'}`,
+ * `'auto'` → `{value: null, unit: 'auto'}`.
+ *
+ * Если строка пустая/невалидная — возвращается `fallbackUnit` и `value: null`.
+ * `auto` обрабатывается как «keyword» — не число, юнит сам по себе.
+ */
+export interface IParsedUnit {
+    value: number | null;
+    unit: string;
+}
+export declare const parseUnit: (raw: unknown, fallbackUnit: string) => IParsedUnit;
+export declare const formatUnit: (value: number | null, unit: string) => string;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Inspector } from './Inspector';
+export { Category } from './Category';
+export { renderField } from './fields';
+export { parseUnit, formatUnit } from './fields/parse-unit';
+export type { IParsedUnit } from './fields/parse-unit';
+export type { IBooleanField, ICategory, IFieldDef, IInspectorProps, INumberField, INumberUnitField, ISelectField, ITextField, ITextareaField, OnChangeFn, ValuesMap, } from './types';

package/dist/index.mjs

@@ -0,0 +1,274 @@
+import { insert as d, createComponent as i, template as o, effect as c, classList as C, delegateEvents as h, setAttribute as g, className as _ } from "solid-js/web";
+import { Show as m, createMemo as N, For as x, createSignal as F } from "solid-js";
+import { Toggle as T } from "@capsuletech/ui/toggle";
+var S = /* @__PURE__ */ o('<span class="text-xs opacity-50">'), U = /* @__PURE__ */ o('<div class="flex flex-col gap-1"><div class="flex items-center justify-between gap-2"><span class="text-xs opacity-70">');
+const E = (e) => (() => {
+  var l = U(), t = l.firstChild, n = t.firstChild;
+  return d(n, () => e.field.label), d(t, i(T, {
+    get checked() {
+      return !!e.value;
+    },
+    get onChange() {
+      return e.onChange;
+    },
+    get disabled() {
+      return e.field.disabled;
+    }
+  }), null), d(l, i(m, {
+    get when() {
+      return e.field.hint;
+    },
+    get children() {
+      var r = S();
+      return d(r, () => e.field.hint), r;
+    }
+  }), null), l;
+})();
+var L = /* @__PURE__ */ o('<span class="text-xs opacity-50">'), k = /* @__PURE__ */ o('<div><span class="text-xs opacity-70"></span><div>');
+const f = (e) => (() => {
+  var l = k(), t = l.firstChild, n = t.nextSibling;
+  return d(t, () => e.label), d(n, () => e.children), d(l, i(m, {
+    get when() {
+      return e.hint;
+    },
+    get children() {
+      var r = L();
+      return d(r, () => e.hint), r;
+    }
+  }), null), c((r) => C(l, {
+    "flex flex-col gap-1": !e.inline,
+    "flex items-center justify-between gap-2": e.inline
+  }, r)), l;
+})();
+var j = /* @__PURE__ */ o('<input type=number class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40">');
+const A = (e) => i(f, {
+  get label() {
+    return e.field.label;
+  },
+  get hint() {
+    return e.field.hint;
+  },
+  get children() {
+    var l = j();
+    return l.$$input = (t) => {
+      const n = t.currentTarget.valueAsNumber;
+      Number.isNaN(n) || e.onChange(n);
+    }, c((t) => {
+      var n = e.field.min, r = e.field.max, a = e.field.step, s = e.field.disabled;
+      return n !== t.e && g(l, "min", t.e = n), r !== t.t && g(l, "max", t.t = r), a !== t.a && g(l, "step", t.a = a), s !== t.o && (l.disabled = t.o = s), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), c(() => l.value = e.value ?? ""), l;
+  }
+});
+h(["input"]);
+const I = /^\s*(-?\d+\.?\d*)\s*(.*)$/, B = (e, l) => {
+  if (e == null || e === "")
+    return { value: null, unit: l };
+  const t = String(e).trim();
+  if (t === "auto") return { value: null, unit: "auto" };
+  const n = t.match(I);
+  return n ? { value: Number.parseFloat(n[1]), unit: n[2] || l } : { value: null, unit: l };
+}, w = (e, l) => l === "auto" ? "auto" : e === null || Number.isNaN(e) ? "" : `${e}${l}`;
+var M = /* @__PURE__ */ o('<div class="flex gap-1"><input type=number class="flex-1 min-w-0 px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"><select class="px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40">'), R = /* @__PURE__ */ o("<option>");
+const z = (e) => {
+  const l = () => e.field.defaultUnit ?? e.field.units[0] ?? "px", t = N(() => B(e.value, l())), n = (a) => {
+    Number.isNaN(a) || e.onChange(w(a, t().unit));
+  }, r = (a) => {
+    e.onChange(w(t().value, a));
+  };
+  return i(f, {
+    get label() {
+      return e.field.label;
+    },
+    get hint() {
+      return e.field.hint;
+    },
+    get children() {
+      var a = M(), s = a.firstChild, v = s.nextSibling;
+      return s.$$input = (u) => n(u.currentTarget.valueAsNumber), v.addEventListener("change", (u) => r(u.currentTarget.value)), d(v, i(x, {
+        get each() {
+          return e.field.units;
+        },
+        children: (u) => (() => {
+          var b = R();
+          return b.value = u, d(b, u), b;
+        })()
+      })), c((u) => {
+        var b = e.field.step, $ = e.field.disabled || t().unit === "auto", y = e.field.disabled;
+        return b !== u.e && g(s, "step", u.e = b), $ !== u.t && (s.disabled = u.t = $), y !== u.a && (v.disabled = u.a = y), u;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      }), c(() => s.value = t().value ?? ""), c(() => v.value = t().unit), a;
+    }
+  });
+};
+h(["input"]);
+var q = /* @__PURE__ */ o('<select class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40">'), D = /* @__PURE__ */ o("<option>");
+const G = (e) => i(f, {
+  get label() {
+    return e.field.label;
+  },
+  get hint() {
+    return e.field.hint;
+  },
+  get children() {
+    var l = q();
+    return l.addEventListener("change", (t) => e.onChange(t.currentTarget.value)), d(l, i(x, {
+      get each() {
+        return e.field.options;
+      },
+      children: (t) => (() => {
+        var n = D();
+        return d(n, () => t.label ?? t.value), c(() => n.value = t.value), n;
+      })()
+    })), c(() => l.disabled = e.field.disabled), c(() => l.value = e.value ?? ""), l;
+  }
+});
+var H = /* @__PURE__ */ o('<input type=text class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40">');
+const J = (e) => i(f, {
+  get label() {
+    return e.field.label;
+  },
+  get hint() {
+    return e.field.hint;
+  },
+  get children() {
+    var l = H();
+    return l.$$input = (t) => e.onChange(t.currentTarget.value), c((t) => {
+      var n = !!e.field.mono, r = e.field.placeholder, a = e.field.disabled;
+      return n !== t.e && l.classList.toggle("font-mono", t.e = n), r !== t.t && g(l, "placeholder", t.t = r), a !== t.a && (l.disabled = t.a = a), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), c(() => l.value = e.value ?? ""), l;
+  }
+});
+h(["input"]);
+var K = /* @__PURE__ */ o('<textarea class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40 resize-y">');
+const O = (e) => i(f, {
+  get label() {
+    return e.field.label;
+  },
+  get hint() {
+    return e.field.hint;
+  },
+  get children() {
+    var l = K();
+    return l.$$input = (t) => e.onChange(t.currentTarget.value), c((t) => {
+      var n = e.field.rows ?? 3, r = !!e.field.mono, a = e.field.placeholder, s = e.field.disabled;
+      return n !== t.e && g(l, "rows", t.e = n), r !== t.t && l.classList.toggle("font-mono", t.t = r), a !== t.a && g(l, "placeholder", t.a = a), s !== t.o && (l.disabled = t.o = s), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), c(() => l.value = e.value ?? ""), l;
+  }
+});
+h(["input"]);
+const P = (e, l, t) => {
+  const n = (a) => t(e.key, a), r = l[e.key];
+  switch (e.type) {
+    case "text":
+      return i(J, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    case "textarea":
+      return i(O, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    case "number":
+      return i(A, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    case "number-unit":
+      return i(z, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    case "boolean":
+      return i(E, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    case "select":
+      return i(G, {
+        field: e,
+        value: r,
+        onChange: n
+      });
+    default:
+      return null;
+  }
+};
+var Q = /* @__PURE__ */ o('<p class="text-xs opacity-60">'), V = /* @__PURE__ */ o('<div class="px-3 py-3 flex flex-col gap-3 border-t border-white/10">'), W = /* @__PURE__ */ o('<div class="border border-white/15 rounded overflow-hidden"><button type=button class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium hover:bg-white/5 transition-colors text-left"><span></span><span class="opacity-50 text-xs">');
+const X = (e) => {
+  const [l, t] = F(!!e.category.defaultCollapsed);
+  return (() => {
+    var n = W(), r = n.firstChild, a = r.firstChild, s = a.nextSibling;
+    return r.$$click = () => t(!l()), d(a, () => e.category.label), d(s, () => l() ? "▸" : "▾"), d(n, i(m, {
+      get when() {
+        return !l();
+      },
+      get children() {
+        var v = V();
+        return d(v, i(m, {
+          get when() {
+            return e.category.description;
+          },
+          get children() {
+            var u = Q();
+            return d(u, () => e.category.description), u;
+          }
+        }), null), d(v, i(x, {
+          get each() {
+            return e.category.fields;
+          },
+          children: (u) => P(u, e.values, e.onChange)
+        }), null), v;
+      }
+    }), null), n;
+  })();
+};
+h(["click"]);
+var Y = /* @__PURE__ */ o("<div>");
+const te = (e) => (() => {
+  var l = Y();
+  return d(l, i(x, {
+    get each() {
+      return e.categories;
+    },
+    children: (t) => i(X, {
+      category: t,
+      get values() {
+        return e.values;
+      },
+      get onChange() {
+        return e.onChange;
+      }
+    })
+  })), c(() => _(l, `flex flex-col gap-3 w-full ${e.class ?? ""}`)), l;
+})();
+export {
+  X as Category,
+  te as Inspector,
+  w as formatUnit,
+  B as parseUnit,
+  P as renderField
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/fields/BooleanField.tsx","../src/fields/FieldShell.tsx","../src/fields/NumberField.tsx","../src/fields/parse-unit.ts","../src/fields/NumberUnitField.tsx","../src/fields/SelectField.tsx","../src/fields/TextField.tsx","../src/fields/TextareaField.tsx","../src/fields/index.tsx","../src/Category.tsx","../src/Inspector.tsx"],"sourcesContent":["import { Toggle } from '@capsuletech/ui/toggle';\nimport { Show } from 'solid-js';\nimport type { IBooleanField } from '../types';\n\ninterface IProps {\n  field: IBooleanField;\n  value: boolean | undefined;\n  onChange: (v: boolean) => void;\n}\n\n/**\n * Boolean — inline-layout: label слева, toggle справа. Так компактнее в\n * списке полей и читабельнее («Отключено: ON»).\n */\nexport const BooleanField = (props: IProps) => (\n  <div class=\"flex flex-col gap-1\">\n    <div class=\"flex items-center justify-between gap-2\">\n      <span class=\"text-xs opacity-70\">{props.field.label}</span>\n      <Toggle checked={!!props.value} onChange={props.onChange} disabled={props.field.disabled} />\n    </div>\n    <Show when={props.field.hint}>\n      <span class=\"text-xs opacity-50\">{props.field.hint}</span>\n    </Show>\n  </div>\n);\n","import type { JSX } from 'solid-js';\nimport { Show } from 'solid-js';\n\ninterface IFieldShellProps {\n  label: string;\n  hint?: string;\n  /** Если true, label рендерится inline (для toggle с подписью справа). */\n  inline?: boolean;\n  children: JSX.Element;\n}\n\n/**\n * Общий обёрточный layout для одного поля: label сверху, content под ним,\n * опциональный hint мелким шрифтом внизу. Все Field-компоненты используют\n * эту обёртку, чтобы вид был согласованным.\n */\nexport const FieldShell = (props: IFieldShellProps) => (\n  <div\n    classList={{\n      'flex flex-col gap-1': !props.inline,\n      'flex items-center justify-between gap-2': props.inline,\n    }}\n  >\n    <span class=\"text-xs opacity-70\">{props.label}</span>\n    <div>{props.children}</div>\n    <Show when={props.hint}>\n      <span class=\"text-xs opacity-50\">{props.hint}</span>\n    </Show>\n  </div>\n);\n","import type { INumberField } from '../types';\nimport { FieldShell } from './FieldShell';\n\ninterface IProps {\n  field: INumberField;\n  value: number | undefined;\n  onChange: (v: number) => void;\n}\n\nexport const NumberField = (props: IProps) => (\n  <FieldShell label={props.field.label} hint={props.field.hint}>\n    <input\n      type=\"number\"\n      class=\"w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40\"\n      value={props.value ?? ''}\n      min={props.field.min}\n      max={props.field.max}\n      step={props.field.step}\n      disabled={props.field.disabled}\n      onInput={(e) => {\n        const v = e.currentTarget.valueAsNumber;\n        if (!Number.isNaN(v)) props.onChange(v);\n      }}\n    />\n  </FieldShell>\n);\n","/**\n * Парсит CSS-подобную строку с единицей измерения. `'100px'` → `{value: 100, unit: 'px'}`,\n * `'auto'` → `{value: null, unit: 'auto'}`.\n *\n * Если строка пустая/невалидная — возвращается `fallbackUnit` и `value: null`.\n * `auto` обрабатывается как «keyword» — не число, юнит сам по себе.\n */\nexport interface IParsedUnit {\n  value: number | null;\n  unit: string;\n}\n\nconst NUMBER_UNIT_RE = /^\\s*(-?\\d+\\.?\\d*)\\s*(.*)$/;\n\nexport const parseUnit = (raw: unknown, fallbackUnit: string): IParsedUnit => {\n  if (raw === null || raw === undefined || raw === '') {\n    return { value: null, unit: fallbackUnit };\n  }\n  const s = String(raw).trim();\n  if (s === 'auto') return { value: null, unit: 'auto' };\n  const m = s.match(NUMBER_UNIT_RE);\n  if (!m) return { value: null, unit: fallbackUnit };\n  return { value: Number.parseFloat(m[1]), unit: m[2] || fallbackUnit };\n};\n\nexport const formatUnit = (value: number | null, unit: string): string => {\n  if (unit === 'auto') return 'auto';\n  if (value === null || Number.isNaN(value)) return '';\n  return `${value}${unit}`;\n};\n","import { For, createMemo } from 'solid-js';\nimport type { INumberUnitField } from '../types';\nimport { FieldShell } from './FieldShell';\nimport { formatUnit, parseUnit } from './parse-unit';\n\ninterface IProps {\n  field: INumberUnitField;\n  value: string | undefined;\n  onChange: (v: string) => void;\n}\n\n/**\n * Число + единица измерения в одной строке. При выборе `auto` числовое поле\n * блокируется, и в onChange улетает строка `'auto'`.\n */\nexport const NumberUnitField = (props: IProps) => {\n  const fallbackUnit = () => props.field.defaultUnit ?? props.field.units[0] ?? 'px';\n  const parsed = createMemo(() => parseUnit(props.value, fallbackUnit()));\n\n  const onNumberInput = (raw: number) => {\n    if (Number.isNaN(raw)) return;\n    props.onChange(formatUnit(raw, parsed().unit));\n  };\n  const onUnitChange = (nextUnit: string) => {\n    props.onChange(formatUnit(parsed().value, nextUnit));\n  };\n\n  return (\n    <FieldShell label={props.field.label} hint={props.field.hint}>\n      <div class=\"flex gap-1\">\n        <input\n          type=\"number\"\n          step={props.field.step}\n          class=\"flex-1 min-w-0 px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40\"\n          value={parsed().value ?? ''}\n          disabled={props.field.disabled || parsed().unit === 'auto'}\n          onInput={(e) => onNumberInput(e.currentTarget.valueAsNumber)}\n        />\n        <select\n          class=\"px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40\"\n          value={parsed().unit}\n          disabled={props.field.disabled}\n          onChange={(e) => onUnitChange(e.currentTarget.value)}\n        >\n          <For each={props.field.units}>{(u) => <option value={u}>{u}</option>}</For>\n        </select>\n      </div>\n    </FieldShell>\n  );\n};\n","import { For } from 'solid-js';\nimport type { ISelectField } from '../types';\nimport { FieldShell } from './FieldShell';\n\ninterface IProps {\n  field: ISelectField;\n  value: string | undefined;\n  onChange: (v: string) => void;\n}\n\n/**\n * Простой native select на v1. Когда в @capsuletech/ui появится полноценный\n * Select (Kobalte popover + Listbox) — заменим, API наружу не изменится.\n */\nexport const SelectField = (props: IProps) => (\n  <FieldShell label={props.field.label} hint={props.field.hint}>\n    <select\n      class=\"w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40\"\n      value={props.value ?? ''}\n      disabled={props.field.disabled}\n      onChange={(e) => props.onChange(e.currentTarget.value)}\n    >\n      <For each={props.field.options}>\n        {(opt) => <option value={opt.value}>{opt.label ?? opt.value}</option>}\n      </For>\n    </select>\n  </FieldShell>\n);\n","import type { ITextField } from '../types';\nimport { FieldShell } from './FieldShell';\n\ninterface IProps {\n  field: ITextField;\n  value: string | undefined;\n  onChange: (v: string) => void;\n}\n\nexport const TextField = (props: IProps) => (\n  <FieldShell label={props.field.label} hint={props.field.hint}>\n    <input\n      type=\"text\"\n      class=\"w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40\"\n      classList={{ 'font-mono': props.field.mono }}\n      value={props.value ?? ''}\n      placeholder={props.field.placeholder}\n      disabled={props.field.disabled}\n      onInput={(e) => props.onChange(e.currentTarget.value)}\n    />\n  </FieldShell>\n);\n","import type { ITextareaField } from '../types';\nimport { FieldShell } from './FieldShell';\n\ninterface IProps {\n  field: ITextareaField;\n  value: string | undefined;\n  onChange: (v: string) => void;\n}\n\nexport const TextareaField = (props: IProps) => (\n  <FieldShell label={props.field.label} hint={props.field.hint}>\n    <textarea\n      rows={props.field.rows ?? 3}\n      class=\"w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40 resize-y\"\n      classList={{ 'font-mono': props.field.mono }}\n      value={props.value ?? ''}\n      placeholder={props.field.placeholder}\n      disabled={props.field.disabled}\n      onInput={(e) => props.onChange(e.currentTarget.value)}\n    />\n  </FieldShell>\n);\n","import type { JSX } from 'solid-js';\nimport type { IFieldDef, OnChangeFn, ValuesMap } from '../types';\nimport { BooleanField } from './BooleanField';\nimport { NumberField } from './NumberField';\nimport { NumberUnitField } from './NumberUnitField';\nimport { SelectField } from './SelectField';\nimport { TextField } from './TextField';\nimport { TextareaField } from './TextareaField';\n\n/**\n * Диспатчер по `field.type`. Каждый case передаёт уже-типизированный field\n * и пробрасывает изменения через единый `onChange(key, value)`.\n */\nexport const renderField = (\n  field: IFieldDef,\n  values: ValuesMap,\n  onChange: OnChangeFn,\n): JSX.Element => {\n  const emit = (v: unknown) => onChange(field.key, v);\n  const raw = values[field.key];\n  switch (field.type) {\n    case 'text':\n      return <TextField field={field} value={raw as string | undefined} onChange={emit} />;\n    case 'textarea':\n      return <TextareaField field={field} value={raw as string | undefined} onChange={emit} />;\n    case 'number':\n      return <NumberField field={field} value={raw as number | undefined} onChange={emit} />;\n    case 'number-unit':\n      return <NumberUnitField field={field} value={raw as string | undefined} onChange={emit} />;\n    case 'boolean':\n      return <BooleanField field={field} value={raw as boolean | undefined} onChange={emit} />;\n    case 'select':\n      return <SelectField field={field} value={raw as string | undefined} onChange={emit} />;\n    default:\n      // exhaustive — TS подсветит если добавили новый тип и забыли тут\n      return null;\n  }\n};\n\nexport { BooleanField, NumberField, NumberUnitField, SelectField, TextField, TextareaField };\n","import { For, Show, createSignal } from 'solid-js';\nimport { renderField } from './fields';\nimport type { ICategory, OnChangeFn, ValuesMap } from './types';\n\ninterface ICategoryProps {\n  category: ICategory;\n  values: ValuesMap;\n  onChange: OnChangeFn;\n}\n\n/**\n * Одна секция Inspector'а. Collapsible header — клик переключает развёрнутый\n * вид. Начальное состояние — `category.defaultCollapsed`.\n */\nexport const Category = (props: ICategoryProps) => {\n  const [collapsed, setCollapsed] = createSignal(!!props.category.defaultCollapsed);\n\n  return (\n    <div class=\"border border-white/15 rounded overflow-hidden\">\n      <button\n        type=\"button\"\n        class=\"w-full flex items-center justify-between px-3 py-2 text-sm font-medium hover:bg-white/5 transition-colors text-left\"\n        onClick={() => setCollapsed(!collapsed())}\n      >\n        <span>{props.category.label}</span>\n        <span class=\"opacity-50 text-xs\">{collapsed() ? '▸' : '▾'}</span>\n      </button>\n      <Show when={!collapsed()}>\n        <div class=\"px-3 py-3 flex flex-col gap-3 border-t border-white/10\">\n          <Show when={props.category.description}>\n            <p class=\"text-xs opacity-60\">{props.category.description}</p>\n          </Show>\n          <For each={props.category.fields}>\n            {(field) => renderField(field, props.values, props.onChange)}\n          </For>\n        </div>\n      </Show>\n    </div>\n  );\n};\n","import { For } from 'solid-js';\nimport { Category } from './Category';\nimport type { IInspectorProps } from './types';\n\n/**\n * Универсальный редактор пропсов. Принимает список категорий (например\n * «Основное» / «Расширенное»), у каждой — набор типизированных полей.\n *\n * Inspector сам по себе ничего не «знает» о компонентах редактора —\n * это чистая render-функция от описаний полей и текущих значений.\n * Маппинг манифеста компонента → категорий выполняется в host'е.\n */\nexport const Inspector = (props: IInspectorProps) => (\n  <div class={`flex flex-col gap-3 w-full ${props.class ?? ''}`}>\n    <For each={props.categories}>\n      {(cat) => <Category category={cat} values={props.values} onChange={props.onChange} />}\n    </For>\n  </div>\n);\n"],"names":["BooleanField","props","_el$","_tmpl$2","_el$2","firstChild","_el$3","_$insert","field","label","_$createComponent","Toggle","checked","value","onChange","disabled","Show","when","hint","children","_el$4","_tmpl$","FieldShell","nextSibling","_$effect","_$p","_$classList","inline","NumberField","$$input","e","v","currentTarget","valueAsNumber","Number","isNaN","_p$","_v$","min","_v$2","max","_v$3","step","_v$4","_$setAttribute","t","a","o","undefined","_$delegateEvents","NUMBER_UNIT_RE","parseUnit","raw","fallbackUnit","s","m","formatUnit","unit","NumberUnitField","defaultUnit","units","parsed","createMemo","onNumberInput","onUnitChange","nextUnit","addEventListener","For","each","u","SelectField","options","opt","TextField","mono","placeholder","classList","toggle","TextareaField","rows","renderField","values","emit","key","type","Category","collapsed","setCollapsed","createSignal","category","defaultCollapsed","_tmpl$3","$$click","_el$5","description","_el$6","fields","Inspector","categories","cat","_$className","class"],"mappings":"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"}

package/dist/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@capsuletech/web-inspector",
+  "version": "0.0.17",
+  "type": "module",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,73 @@
+export type ValuesMap = Record<string, unknown>;
+export type OnChangeFn = (key: string, value: unknown) => void;
+interface IBaseField {
+    /** Ключ в `values` map'е. Уникальный в пределах Inspector'а. */
+    key: string;
+    /** Подпись над полем. Пиши по-человечески — Inspector могут пользовать не-разработчики. */
+    label: string;
+    /** Длинное пояснение под полем (для не-очевидных пропсов). */
+    hint?: string;
+    disabled?: boolean;
+}
+export interface ITextField extends IBaseField {
+    type: 'text';
+    placeholder?: string;
+    /** Моноширинный шрифт — для class, id, ARIA и подобного «технического». */
+    mono?: boolean;
+}
+export interface ITextareaField extends IBaseField {
+    type: 'textarea';
+    rows?: number;
+    placeholder?: string;
+    mono?: boolean;
+}
+export interface INumberField extends IBaseField {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/**
+ * Численное значение с единицей измерения (`'100px'`, `'50%'`, `'auto'`).
+ * Если выбран unit `'auto'` — input блокируется (нет смысла редактировать
+ * числовую часть).
+ */
+export interface INumberUnitField extends IBaseField {
+    type: 'number-unit';
+    units: string[];
+    /** По умолчанию первый из `units`. */
+    defaultUnit?: string;
+    step?: number;
+}
+export interface IBooleanField extends IBaseField {
+    type: 'boolean';
+}
+export interface ISelectField extends IBaseField {
+    type: 'select';
+    options: {
+        value: string;
+        label?: string;
+    }[];
+}
+/** Дискриминированный union — `field.type` сужает остальные поля. */
+export type IFieldDef = ITextField | ITextareaField | INumberField | INumberUnitField | IBooleanField | ISelectField;
+export interface ICategory {
+    id: string;
+    /** Заголовок секции — «Основное», «Расширенное» и т.д. */
+    label: string;
+    /** Описание секции под заголовком (опционально). */
+    description?: string;
+    fields: IFieldDef[];
+    /** Сворачивать секцию по умолчанию. Удобно для «advanced» блока. */
+    defaultCollapsed?: boolean;
+}
+export interface IInspectorProps {
+    categories: ICategory[];
+    /** Текущее значение каждого `field.key`. */
+    values: ValuesMap;
+    /** Колбэк на одно изменение поля — потребитель сам мерджит в values. */
+    onChange: OnChangeFn;
+    /** Доп. класс на корневой div. */
+    class?: string;
+}
+export {};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@capsuletech/web-inspector",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@capsuletech/shared-vite": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/Category.tsx

@@ -0,0 +1,40 @@
+import { For, Show, createSignal } from 'solid-js';
+import { renderField } from './fields';
+import type { ICategory, OnChangeFn, ValuesMap } from './types';
+
+interface ICategoryProps {
+  category: ICategory;
+  values: ValuesMap;
+  onChange: OnChangeFn;
+}
+
+/**
+ * Одна секция Inspector'а. Collapsible header — клик переключает развёрнутый
+ * вид. Начальное состояние — `category.defaultCollapsed`.
+ */
+export const Category = (props: ICategoryProps) => {
+  const [collapsed, setCollapsed] = createSignal(!!props.category.defaultCollapsed);
+
+  return (
+    <div class="border border-white/15 rounded overflow-hidden">
+      <button
+        type="button"
+        class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium hover:bg-white/5 transition-colors text-left"
+        onClick={() => setCollapsed(!collapsed())}
+      >
+        <span>{props.category.label}</span>
+        <span class="opacity-50 text-xs">{collapsed() ? '▸' : '▾'}</span>
+      </button>
+      <Show when={!collapsed()}>
+        <div class="px-3 py-3 flex flex-col gap-3 border-t border-white/10">
+          <Show when={props.category.description}>
+            <p class="text-xs opacity-60">{props.category.description}</p>
+          </Show>
+          <For each={props.category.fields}>
+            {(field) => renderField(field, props.values, props.onChange)}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+};

package/src/Inspector.tsx

@@ -0,0 +1,19 @@
+import { For } from 'solid-js';
+import { Category } from './Category';
+import type { IInspectorProps } from './types';
+
+/**
+ * Универсальный редактор пропсов. Принимает список категорий (например
+ * «Основное» / «Расширенное»), у каждой — набор типизированных полей.
+ *
+ * Inspector сам по себе ничего не «знает» о компонентах редактора —
+ * это чистая render-функция от описаний полей и текущих значений.
+ * Маппинг манифеста компонента → категорий выполняется в host'е.
+ */
+export const Inspector = (props: IInspectorProps) => (
+  <div class={`flex flex-col gap-3 w-full ${props.class ?? ''}`}>
+    <For each={props.categories}>
+      {(cat) => <Category category={cat} values={props.values} onChange={props.onChange} />}
+    </For>
+  </div>
+);

package/src/fields/BooleanField.tsx

@@ -0,0 +1,25 @@
+import { Toggle } from '@capsuletech/ui/toggle';
+import { Show } from 'solid-js';
+import type { IBooleanField } from '../types';
+
+interface IProps {
+  field: IBooleanField;
+  value: boolean | undefined;
+  onChange: (v: boolean) => void;
+}
+
+/**
+ * Boolean — inline-layout: label слева, toggle справа. Так компактнее в
+ * списке полей и читабельнее («Отключено: ON»).
+ */
+export const BooleanField = (props: IProps) => (
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between gap-2">
+      <span class="text-xs opacity-70">{props.field.label}</span>
+      <Toggle checked={!!props.value} onChange={props.onChange} disabled={props.field.disabled} />
+    </div>
+    <Show when={props.field.hint}>
+      <span class="text-xs opacity-50">{props.field.hint}</span>
+    </Show>
+  </div>
+);

package/src/fields/FieldShell.tsx

@@ -0,0 +1,30 @@
+import type { JSX } from 'solid-js';
+import { Show } from 'solid-js';
+
+interface IFieldShellProps {
+  label: string;
+  hint?: string;
+  /** Если true, label рендерится inline (для toggle с подписью справа). */
+  inline?: boolean;
+  children: JSX.Element;
+}
+
+/**
+ * Общий обёрточный layout для одного поля: label сверху, content под ним,
+ * опциональный hint мелким шрифтом внизу. Все Field-компоненты используют
+ * эту обёртку, чтобы вид был согласованным.
+ */
+export const FieldShell = (props: IFieldShellProps) => (
+  <div
+    classList={{
+      'flex flex-col gap-1': !props.inline,
+      'flex items-center justify-between gap-2': props.inline,
+    }}
+  >
+    <span class="text-xs opacity-70">{props.label}</span>
+    <div>{props.children}</div>
+    <Show when={props.hint}>
+      <span class="text-xs opacity-50">{props.hint}</span>
+    </Show>
+  </div>
+);

package/src/fields/NumberField.tsx

@@ -0,0 +1,26 @@
+import type { INumberField } from '../types';
+import { FieldShell } from './FieldShell';
+
+interface IProps {
+  field: INumberField;
+  value: number | undefined;
+  onChange: (v: number) => void;
+}
+
+export const NumberField = (props: IProps) => (
+  <FieldShell label={props.field.label} hint={props.field.hint}>
+    <input
+      type="number"
+      class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"
+      value={props.value ?? ''}
+      min={props.field.min}
+      max={props.field.max}
+      step={props.field.step}
+      disabled={props.field.disabled}
+      onInput={(e) => {
+        const v = e.currentTarget.valueAsNumber;
+        if (!Number.isNaN(v)) props.onChange(v);
+      }}
+    />
+  </FieldShell>
+);

package/src/fields/NumberUnitField.tsx

@@ -0,0 +1,50 @@
+import { For, createMemo } from 'solid-js';
+import type { INumberUnitField } from '../types';
+import { FieldShell } from './FieldShell';
+import { formatUnit, parseUnit } from './parse-unit';
+
+interface IProps {
+  field: INumberUnitField;
+  value: string | undefined;
+  onChange: (v: string) => void;
+}
+
+/**
+ * Число + единица измерения в одной строке. При выборе `auto` числовое поле
+ * блокируется, и в onChange улетает строка `'auto'`.
+ */
+export const NumberUnitField = (props: IProps) => {
+  const fallbackUnit = () => props.field.defaultUnit ?? props.field.units[0] ?? 'px';
+  const parsed = createMemo(() => parseUnit(props.value, fallbackUnit()));
+
+  const onNumberInput = (raw: number) => {
+    if (Number.isNaN(raw)) return;
+    props.onChange(formatUnit(raw, parsed().unit));
+  };
+  const onUnitChange = (nextUnit: string) => {
+    props.onChange(formatUnit(parsed().value, nextUnit));
+  };
+
+  return (
+    <FieldShell label={props.field.label} hint={props.field.hint}>
+      <div class="flex gap-1">
+        <input
+          type="number"
+          step={props.field.step}
+          class="flex-1 min-w-0 px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"
+          value={parsed().value ?? ''}
+          disabled={props.field.disabled || parsed().unit === 'auto'}
+          onInput={(e) => onNumberInput(e.currentTarget.valueAsNumber)}
+        />
+        <select
+          class="px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"
+          value={parsed().unit}
+          disabled={props.field.disabled}
+          onChange={(e) => onUnitChange(e.currentTarget.value)}
+        >
+          <For each={props.field.units}>{(u) => <option value={u}>{u}</option>}</For>
+        </select>
+      </div>
+    </FieldShell>
+  );
+};

package/src/fields/SelectField.tsx

@@ -0,0 +1,28 @@
+import { For } from 'solid-js';
+import type { ISelectField } from '../types';
+import { FieldShell } from './FieldShell';
+
+interface IProps {
+  field: ISelectField;
+  value: string | undefined;
+  onChange: (v: string) => void;
+}
+
+/**
+ * Простой native select на v1. Когда в @capsuletech/ui появится полноценный
+ * Select (Kobalte popover + Listbox) — заменим, API наружу не изменится.
+ */
+export const SelectField = (props: IProps) => (
+  <FieldShell label={props.field.label} hint={props.field.hint}>
+    <select
+      class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"
+      value={props.value ?? ''}
+      disabled={props.field.disabled}
+      onChange={(e) => props.onChange(e.currentTarget.value)}
+    >
+      <For each={props.field.options}>
+        {(opt) => <option value={opt.value}>{opt.label ?? opt.value}</option>}
+      </For>
+    </select>
+  </FieldShell>
+);

package/src/fields/TextField.tsx

@@ -0,0 +1,22 @@
+import type { ITextField } from '../types';
+import { FieldShell } from './FieldShell';
+
+interface IProps {
+  field: ITextField;
+  value: string | undefined;
+  onChange: (v: string) => void;
+}
+
+export const TextField = (props: IProps) => (
+  <FieldShell label={props.field.label} hint={props.field.hint}>
+    <input
+      type="text"
+      class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40"
+      classList={{ 'font-mono': props.field.mono }}
+      value={props.value ?? ''}
+      placeholder={props.field.placeholder}
+      disabled={props.field.disabled}
+      onInput={(e) => props.onChange(e.currentTarget.value)}
+    />
+  </FieldShell>
+);

package/src/fields/TextareaField.tsx

@@ -0,0 +1,22 @@
+import type { ITextareaField } from '../types';
+import { FieldShell } from './FieldShell';
+
+interface IProps {
+  field: ITextareaField;
+  value: string | undefined;
+  onChange: (v: string) => void;
+}
+
+export const TextareaField = (props: IProps) => (
+  <FieldShell label={props.field.label} hint={props.field.hint}>
+    <textarea
+      rows={props.field.rows ?? 3}
+      class="w-full px-2 py-1 bg-white/5 border border-white/15 rounded text-sm outline-none focus:border-blue-400/60 transition-colors disabled:opacity-40 resize-y"
+      classList={{ 'font-mono': props.field.mono }}
+      value={props.value ?? ''}
+      placeholder={props.field.placeholder}
+      disabled={props.field.disabled}
+      onInput={(e) => props.onChange(e.currentTarget.value)}
+    />
+  </FieldShell>
+);

package/src/fields/index.tsx

@@ -0,0 +1,40 @@
+import type { JSX } from 'solid-js';
+import type { IFieldDef, OnChangeFn, ValuesMap } from '../types';
+import { BooleanField } from './BooleanField';
+import { NumberField } from './NumberField';
+import { NumberUnitField } from './NumberUnitField';
+import { SelectField } from './SelectField';
+import { TextField } from './TextField';
+import { TextareaField } from './TextareaField';
+
+/**
+ * Диспатчер по `field.type`. Каждый case передаёт уже-типизированный field
+ * и пробрасывает изменения через единый `onChange(key, value)`.
+ */
+export const renderField = (
+  field: IFieldDef,
+  values: ValuesMap,
+  onChange: OnChangeFn,
+): JSX.Element => {
+  const emit = (v: unknown) => onChange(field.key, v);
+  const raw = values[field.key];
+  switch (field.type) {
+    case 'text':
+      return <TextField field={field} value={raw as string | undefined} onChange={emit} />;
+    case 'textarea':
+      return <TextareaField field={field} value={raw as string | undefined} onChange={emit} />;
+    case 'number':
+      return <NumberField field={field} value={raw as number | undefined} onChange={emit} />;
+    case 'number-unit':
+      return <NumberUnitField field={field} value={raw as string | undefined} onChange={emit} />;
+    case 'boolean':
+      return <BooleanField field={field} value={raw as boolean | undefined} onChange={emit} />;
+    case 'select':
+      return <SelectField field={field} value={raw as string | undefined} onChange={emit} />;
+    default:
+      // exhaustive — TS подсветит если добавили новый тип и забыли тут
+      return null;
+  }
+};
+
+export { BooleanField, NumberField, NumberUnitField, SelectField, TextField, TextareaField };

package/src/fields/parse-unit.ts

@@ -0,0 +1,30 @@
+/**
+ * Парсит CSS-подобную строку с единицей измерения. `'100px'` → `{value: 100, unit: 'px'}`,
+ * `'auto'` → `{value: null, unit: 'auto'}`.
+ *
+ * Если строка пустая/невалидная — возвращается `fallbackUnit` и `value: null`.
+ * `auto` обрабатывается как «keyword» — не число, юнит сам по себе.
+ */
+export interface IParsedUnit {
+  value: number | null;
+  unit: string;
+}
+
+const NUMBER_UNIT_RE = /^\s*(-?\d+\.?\d*)\s*(.*)$/;
+
+export const parseUnit = (raw: unknown, fallbackUnit: string): IParsedUnit => {
+  if (raw === null || raw === undefined || raw === '') {
+    return { value: null, unit: fallbackUnit };
+  }
+  const s = String(raw).trim();
+  if (s === 'auto') return { value: null, unit: 'auto' };
+  const m = s.match(NUMBER_UNIT_RE);
+  if (!m) return { value: null, unit: fallbackUnit };
+  return { value: Number.parseFloat(m[1]), unit: m[2] || fallbackUnit };
+};
+
+export const formatUnit = (value: number | null, unit: string): string => {
+  if (unit === 'auto') return 'auto';
+  if (value === null || Number.isNaN(value)) return '';
+  return `${value}${unit}`;
+};

package/src/index.ts

@@ -0,0 +1,18 @@
+export { Inspector } from './Inspector';
+export { Category } from './Category';
+export { renderField } from './fields';
+export { parseUnit, formatUnit } from './fields/parse-unit';
+export type { IParsedUnit } from './fields/parse-unit';
+export type {
+  IBooleanField,
+  ICategory,
+  IFieldDef,
+  IInspectorProps,
+  INumberField,
+  INumberUnitField,
+  ISelectField,
+  ITextField,
+  ITextareaField,
+  OnChangeFn,
+  ValuesMap,
+} from './types';

package/src/types.ts

@@ -0,0 +1,85 @@
+export type ValuesMap = Record<string, unknown>;
+export type OnChangeFn = (key: string, value: unknown) => void;
+
+interface IBaseField {
+  /** Ключ в `values` map'е. Уникальный в пределах Inspector'а. */
+  key: string;
+  /** Подпись над полем. Пиши по-человечески — Inspector могут пользовать не-разработчики. */
+  label: string;
+  /** Длинное пояснение под полем (для не-очевидных пропсов). */
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface ITextField extends IBaseField {
+  type: 'text';
+  placeholder?: string;
+  /** Моноширинный шрифт — для class, id, ARIA и подобного «технического». */
+  mono?: boolean;
+}
+
+export interface ITextareaField extends IBaseField {
+  type: 'textarea';
+  rows?: number;
+  placeholder?: string;
+  mono?: boolean;
+}
+
+export interface INumberField extends IBaseField {
+  type: 'number';
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+/**
+ * Численное значение с единицей измерения (`'100px'`, `'50%'`, `'auto'`).
+ * Если выбран unit `'auto'` — input блокируется (нет смысла редактировать
+ * числовую часть).
+ */
+export interface INumberUnitField extends IBaseField {
+  type: 'number-unit';
+  units: string[];
+  /** По умолчанию первый из `units`. */
+  defaultUnit?: string;
+  step?: number;
+}
+
+export interface IBooleanField extends IBaseField {
+  type: 'boolean';
+}
+
+export interface ISelectField extends IBaseField {
+  type: 'select';
+  options: { value: string; label?: string }[];
+}
+
+/** Дискриминированный union — `field.type` сужает остальные поля. */
+export type IFieldDef =
+  | ITextField
+  | ITextareaField
+  | INumberField
+  | INumberUnitField
+  | IBooleanField
+  | ISelectField;
+
+export interface ICategory {
+  id: string;
+  /** Заголовок секции — «Основное», «Расширенное» и т.д. */
+  label: string;
+  /** Описание секции под заголовком (опционально). */
+  description?: string;
+  fields: IFieldDef[];
+  /** Сворачивать секцию по умолчанию. Удобно для «advanced» блока. */
+  defaultCollapsed?: boolean;
+}
+
+export interface IInspectorProps {
+  categories: ICategory[];
+  /** Текущее значение каждого `field.key`. */
+  values: ValuesMap;
+  /** Колбэк на одно изменение поля — потребитель сам мерджит в values. */
+  onChange: OnChangeFn;
+  /** Доп. класс на корневой div. */
+  class?: string;
+}