@usedetach/component-schema

The component contract for Detach. A section declares its settings once; the editor renders controls from that declaration, the API validates against it, and your component gets typed props out of it.

npm install @usedetach/component-schema

import { defineComponent, type InferProps } from "@usedetach/component-schema";

export const definition = defineComponent({
  type: "apex.hero",
  name: "Hero",
  category: "Editorial",
  version: 1,
  section: true,
  schema: {
    fields: [
      { key: "heading", type: "text", label: "Heading", required: true },
      { key: "image", type: "image", label: "Background" },
    ],
  },
});

export type HeroProps = InferProps<typeof definition>;

Also here: defineLoader (typed server-side data fetching bound to one component, whose return type flows into the section), defineMigration, the manifest types the CLI pushes, and the pure evaluators shared by editor and storefront — evaluateVisibility, evaluateAudiences, plus the image and section-frame resolvers.