Documentation
Open app

Platform UI bridge

useAppContext().ui lets app-owned UI ask the host to perform host-owned presentation. It contains primitives, not business workflows.

APIEffect
toast(message, options?)Shows an info, success, warning, or error notice.
confirm(options)Returns a promise for a host confirmation decision.
navigate(to)Navigates through the host router.
openArtifact(kind, context?)Opens an artifact in the same app lane using its current renderer.
closeArtifact()Closes the active artifact host when one exists.
openImageLightbox(images, startIndex?)Opens the shared image viewer with optional captions and source attribution.
TSX
import { useAppContext, useAppFetch } from '@sota/platform';

export function DeleteReportButton({ reportId }: { reportId: string }) {
  const appFetch = useAppFetch();
  const { ui } = useAppContext();

  async function remove() {
    const confirmed = await ui.confirm({
      title: 'Delete report?',
      description: 'This cannot be undone.',
      confirmLabel: 'Delete',
      destructive: true,
    });
    if (!confirmed) return;
    const response = await appFetch('/reports/' + encodeURIComponent(reportId), {
      method: 'DELETE',
    });
    ui.toast(response.ok ? 'Report deleted' : 'Delete failed', {
      kind: response.ok ? 'success' : 'error',
    });
  }

  return <button type="button" onClick={remove}>Delete</button>;
}
TSX
import { useAppContext } from '@sota/platform';

export function PreviewButton({ previewUrl }: { previewUrl: string }) {
  const { ui } = useAppContext();
  return <button type="button" onClick={() => ui.openImageLightbox([{
    url: previewUrl,
    alt: 'Report preview',
    caption: 'Page 1',
    sourceTitle: 'Quarterly report',
    sourceUrl: 'https://reports.example.com/q3',
  }], 0)}>Preview</button>;
}

Methods may be harmless no-ops when the current host cannot perform the action, such as closing an artifact from a surface without an artifact host. Keep app state authoritative in the app backend.

Contents

Esc

Search titles and body text across every chapter.