Components

When a piece of a page needs code — local state, a hardware SDK, a gesture — declare it as a component: a script of kind component whose file is a React module, with typed props and a grant that says how much of the platform it may reach. The app builds it at install, and a page mounts it with use like a view:

app checkout "Checkout" {}

entity Order {
  customer: text
  total:    money USD
}

script pos-checkout component props (order: Order, terminal: text required, mode: enum compact, full) using sdk write, fsm from "components/PosCheckout.tsx"

script signature-pad component props (label: text) from "components/SignaturePad.tsx"

page order-detail "Order" detail Order {
  section "Order" {
    field customer
    field total
  }
  use pos-checkout (order: this, terminal: "front", mode: compact)
  use signature-pad (label: "Customer signature")
}

components/PosCheckout.tsx is an ordinary React component with a default export. It imports from react and @fastyoke/sdk only, reads its props with useProps(), and receives an entity-typed prop as the record itself, never as an id to look up:

import { useProps, useTransitionJob } from '@fastyoke/sdk';

export default function PosCheckout() {
  const { order, terminal, mode } = useProps<{ order: { id: string; data_payload: Record<string, unknown> }; terminal: string; mode: 'compact' | 'full' }>();
  const { transitionJob } = useTransitionJob();
  // …
}

The grant is the contract. using sdk read gives the component a client that reads; write adds the entity hooks; fsm the workflow hooks; files and forms their hooks. A component without using sdk gets no client at all, and a hook the grant does not cover throws when called. Anything a grant cannot name ships as an uploaded extension instead.

A component's file travels with the source: the command line, the Studio and the MCP server inline it before the document reaches the platform, and yokec check reads it next to the .yoke file, refusing a relative import (a component is one file) or a package the platform does not vend. A component that only shows its props, with no state and no grant, is better written as a view; the ruleset says so.