Package to screen

package folder
  -> things-to-store-and-run.json
  -> Runtime Kit admits the package
  -> screen reads "welcome-copy"
  -> button calls "welcome.suggest"

launch-demo/
  welcome-package/
    things-to-store-and-run.json
    slots/
      suggestion-slot.bin

The package has exactly one package file:
welcome-package/things-to-store-and-run.json

{
  "package": "welcome-package",
  "things": [
    {
      "type": "record",
      "address": "package::welcome-package::welcome-copy",
      "payload": {
        "headline": "Keep shipping.",
        "body": "Your app can add the next feature without making this screen import every package."
      }
    },
    {
      "type": "slot",
      "name": "welcome.suggest",
      "methods": [
        {
          "name": "query"
        }
      ],
      "boundary": {
        "call_shape": "envelope-bytes-in-envelope-bytes-out",
        "methods": [
          {
            "name": "query"
          }
        ]
      },
      "artifact": {
        "source_path": "slots/suggestion-slot.bin"
      }
    }
  ]
}

The package set contains package "welcome-package".
The data name "welcome-copy" is available to the screen.
The action name "welcome.suggest" is available for requests.

import { useBitfieldData } from '@bitfield/runtime-kit/react';

type WelcomeCopy = {
  headline: string;
  body: string;
};

export function WelcomePanel() {
  const welcome = useBitfieldData<WelcomeCopy>('welcome-copy');

  if (welcome.loading) return <section>Loading welcome copy.</section>;
  if (welcome.error) return <section>Could not load welcome copy.</section>;
  if (!welcome.data) return <section>No welcome copy yet.</section>;

  return (
    <section>
      <h2>{welcome.data.headline}</h2>
      <p>{welcome.data.body}</p>
    </section>
  );
}

The screen eventually renders:

Keep shipping.
Your app can add the next feature without making this screen import every package.

import { sendRequestToBitfieldTarget } from '@bitfield/runtime-kit';

async function askForSuggestion(topic: string) {
  const reply = await sendRequestToBitfieldTarget({
    target: 'welcome.suggest',
    payload: { topic },
  });

  return JSON.parse(new TextDecoder().decode(reply.payload)) as {
    suggestion: string;
  };
}

Calling welcome.suggest with { topic: "launch" } returns reply bytes.
The app decodes those bytes into { suggestion: string }.

import { useState } from 'react';
import { sendRequestToBitfieldTarget } from '@bitfield/runtime-kit';
import { useBitfieldData } from '@bitfield/runtime-kit/react';

type WelcomeCopy = {
  headline: string;
  body: string;
};

type SuggestionReply = {
  suggestion: string;
};

export function WelcomePanel() {
  const welcome = useBitfieldData<WelcomeCopy>('welcome-copy');
  const [suggestion, setSuggestion] = useState<string | null>(null);
  const [requestError, setRequestError] = useState<string | null>(null);

  async function refreshSuggestion() {
    setRequestError(null);

    try {
      const reply = await sendRequestToBitfieldTarget({
        target: 'welcome.suggest',
        payload: { topic: 'launch' },
      });

      const text = new TextDecoder().decode(reply.payload);
      const data = JSON.parse(text) as SuggestionReply;
      setSuggestion(data.suggestion);
    } catch (error) {
      setRequestError(error instanceof Error ? error.message : 'Request failed.');
    }
  }

  if (welcome.loading) return <section>Loading welcome copy.</section>;
  if (welcome.error) return <section>Could not load welcome copy.</section>;
  if (!welcome.data) return <section>No welcome copy yet.</section>;

  return (
    <section>
      <h2>{welcome.data.headline}</h2>
      <p>{welcome.data.body}</p>
      <button type="button" onClick={refreshSuggestion}>
        Refresh suggestion
      </button>
      {requestError ? <p>{requestError}</p> : null}
      {suggestion ? <p>{suggestion}</p> : null}
    </section>
  );
}

## Runtime Kit feature map

- Package set: launch-demo
- Package: welcome-package
- Package file: welcome-package/things-to-store-and-run.json
- Data name: welcome-copy
- Action name: welcome.suggest
- Request payload: { topic: string }
- Reply payload: { suggestion: string }
- React screen: WelcomePanel
- Public imports only:
  - @bitfield/runtime-kit
  - @bitfield/runtime-kit/react

Declare record       -> read with useBitfieldData(...)
Declare slot         -> call with sendRequestToBitfieldTarget(...)
Change implementation -> keep data or action names stable
Change app UI        -> keep package admission out of React
Debug failure        -> identify package file, read, request, decode, or activation link

{
  "type": "record",
  "address": "package::welcome-package::welcome-copy",
  "payload": {
    "headline": "Keep shipping.",
    "body": "Your app can add the next feature without making this screen import every package."
  }
}

{
  "type": "record",
  "address": "package::launch-checklist::items",
  "payload": {
    "items": [
      "Create your account",
      "Activate this device",
      "Run your first package",
      "Call your first target"
    ]
  }
}

const welcome = useBitfieldData<WelcomeCopy>('welcome-copy');
const checklist = useBitfieldData<{ items: string[] }>('launch-checklist');