슬롯, prop, 그리고 예상 못 한 것

type SidekickProps = {
  // PROPS: values. The component knows the shape and the destination.
  embedUrl: string;
  storagePrefix: string;
  title?: string;
  mark?: string;              // an app emblem for the header
  iframeAllow?: string;       // one app needs microphone; see track 7

  // SLOTS: regions. The component knows only WHERE, never WHAT.
  beforeFrame?: React.ReactNode;
  unavailable?: React.ReactNode;

  // SEAMS for dressing a control the component owns. Two shapes,
  // because apps explain themselves two different ways:
  controlProps?: (id: string) => Record<string, unknown>;   // attributes
  controlWrap?: (id: string, node: React.ReactNode) => React.ReactNode;
};

function Control({ id, children, controlProps, controlWrap }: ControlArgs) {
  const node = <button {...(controlProps?.(id) ?? {})}>{children}</button>;
  // A tooltip renders a SIBLING node beside the button, which no
  // number of attributes on the button could ever express. That is
  // why the second seam exists - and it was added when a real case
  // proved the first could not do it, not pre-emptively.
  return controlWrap ? controlWrap(id, node) : node;
}

// Almost every app passes a sentence to `unavailable`:
//
//   unavailable={<p>Assistant is offline. Try again shortly.</p>}
//
// One passes an entire local-model chat surface:
//
//   unavailable={<OfflineChat model="local" persona={persona} />}
//
// The shared component did not change for that. The app un-centered
// the slot in its own stylesheet:
//
//   .app .sidekick-unavailable { display: block; text-align: left; }