Inspector Panel

Renderer-agnostic sections and fields for inspector panels.

mosa.sh

inspectorpanel provides the plain-data model behind a grouped inspector: a panel contains sections, and sections contain typed fields. It deliberately does not render HTML or prescribe a UI framework, so an Astro, React, or native consumer can choose its own controls.

import { createInspectorPanel, setFieldValue, setSectionOpen } from "inspectorpanel";

let panel = createInspectorPanel({
  id: "theme",
  title: "Theme",
  sections: [{
    id: "colors",
    title: "Colors",
    fields: [{ id: "accent", label: "Accent", kind: "color", value: "#8893ff" }],
  }],
});

panel = setFieldValue(panel, "colors", "accent", "#a4adff");
panel = setSectionOpen(panel, "colors", false);

API

| Export | Purpose | | --- | --- | | createInspectorPanel(input) | Creates a panel model. | | setSectionOpen(panel, sectionId, open?) | Toggles or sets a section's disclosure state. | | setFieldValue(panel, sectionId, fieldId, value) | Returns a panel with one changed value. | | getField(panel, sectionId, fieldId) | Finds a field. | | visibleFields(panel) | Flattens fields from open sections. | | InspectorPanel, InspectorSection, InspectorField | Core data shapes. |

All updates return new objects. Validation, control rendering, persistence, and domain-specific value constraints remain application concerns.

Development

npm run build --workspace=inspectorpanel

MIT.