@alfakit/react 0.0.0-stage → 0.1.1

package/src/pages/page.tsx

@@ -0,0 +1,463 @@
+import type {
+  ContentBlock,
+  FormBlock as FormBlockSchema,
+  InfolistBlock,
+  LinksBlock,
+  PageSchema,
+  RelationManagersBlock,
+  SchemaBlock,
+  TableBlock as TableBlockSchema,
+  WidgetsBlock as WidgetsBlockSchema,
+} from '@alfakit/core'
+import {
+  applyBodyAttributes,
+  hasRelationManagerTabs,
+  isLazyPlaceholder,
+  openDefaultAction,
+  RELATION_QUERY_KEY,
+  relationManagerTabs,
+  relationTabFromQuery,
+  relationTabSlug,
+  resolveLazyComponents,
+  type DefaultActionOpener,
+} from '@alfakit/core'
+import { Head, Link, usePage } from '@inertiajs/react'
+import {
+  createElement,
+  Fragment,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { PageActionProvider } from '../components/actions/action-context'
+import { ActionList } from '../components/actions/action-list'
+import { FormBlock } from '../components/form/form-block'
+import { KeyboardShortcuts } from '../components/panel/keyboard-shortcuts'
+import { LazyPlaceholder } from '../components/panel/lazy-placeholder'
+import { Slot } from '../components/panel/slot'
+import { SubNavigationLayout } from '../components/panel/sub-navigation'
+import { ConflictBanner } from '../components/realtime/conflict-banner'
+import { RecordPresence } from '../components/realtime/record-presence'
+import { SchemaRenderer } from '../components/schema/schema-renderer'
+import { ListTabs, ListTabsPanel } from '../components/table/list-tabs'
+import { DataTable } from '../components/table/table-block'
+import { Badge } from '../components/ui/badge'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'
+import { WidgetGrid } from '../components/widgets/widgets-block'
+import { useActionRunner, useAlfakit, useAlfakitProps, usePanel, useT } from '../context'
+import { AppLayout } from '../layouts/app-layout'
+import { AuthLayout } from '../layouts/auth-layout'
+import { BlankLayout } from '../layouts/blank-layout'
+import { FullscreenLayout } from '../layouts/fullscreen-layout'
+import { badgeColorClasses, colorClass } from '../lib/colors'
+import { Icon } from '../lib/icons'
+import { cn } from '../lib/utils'
+
+/**
+ * `Alfakit/Page`: renders any schema-driven page. Custom pages (`Page::$component`) are
+ * resolved from the `pages` map passed to `createAlfakit()`.
+ */
+export function AlfakitPage() {
+  const props = useAlfakitProps()
+  const panel = usePanel()
+  const t = useT()
+  const { pages } = useAlfakit()
+  // Lazy widgets and relation managers arrive in a deferred prop after the first response.
+  const page = useMemo(
+    () => (props.page ? resolveLazyComponents(props.page, props.alfakitLazy) : undefined),
+    [props.page, props.alfakitLazy],
+  )
+
+  useDefaultAction(page)
+
+  if (!page) {
+    return null
+  }
+
+  // Starter kit mode: the host's `title` callback adds the application name.
+  const title = panel.starterKit ? page.title : `${page.title} - ${panel.brandName}`
+
+  if (page.view) {
+    const Custom = pages[page.view.component]
+
+    if (!Custom) {
+      return (
+        <div className="text-destructive p-6">
+          {t(
+            'page_not_registered',
+            { component: page.view.component },
+            `Page component ${page.view.component} is not registered in createAlfakit({ pages }).`,
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <PageActionProvider value={{ token: page.token, component: 'page' }}>
+        <Head title={title} />
+        <PageShell page={page}>
+          <Custom {...page.view.props} page={page} />
+        </PageShell>
+      </PageActionProvider>
+    )
+  }
+
+  return (
+    <PageActionProvider value={{ token: page.token, component: 'page' }}>
+      <Head title={title} />
+      <PageShell page={page}>
+        <PageContent page={page} />
+      </PageShell>
+    </PageActionProvider>
+  )
+}
+
+/**
+ * Opens the page's default action (`$defaultAction`, `?tableAction=`) once the page has
+ * hydrated, and once per page: re-renders after the action ran don't open it again.
+ */
+export function useDefaultAction(page: PageSchema | undefined) {
+  const runner = useActionRunner()
+  const opener = useRef<DefaultActionOpener>({ opened: null })
+
+  useEffect(() => {
+    openDefaultAction(page, opener.current, (action, context) => runner.trigger(action, context))
+  }, [page, runner])
+}
+
+/** Sets the page's `$extraBodyAttributes` on `<body>` while it is open. */
+export function useBodyAttributes(attributes: Record<string, string> | undefined) {
+  const key = attributes ? JSON.stringify(attributes) : ''
+
+  useEffect(
+    () => applyBodyAttributes(key ? (JSON.parse(key) as Record<string, string>) : undefined),
+    [key],
+  )
+}
+
+export function PageShell({ page, children }: { page: PageSchema; children: ReactNode }) {
+  const { registry } = useAlfakit()
+
+  useBodyAttributes(page.extraBodyAttributes)
+
+  // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).
+  if (page.layout === 'auth') {
+    return createElement(
+      registry.resolve('layout:auth') ?? AuthLayout,
+      { heading: page.heading ?? page.title, subheading: page.subheading, page },
+      children,
+    )
+  }
+
+  if (page.layout === 'blank') {
+    return createElement(registry.resolve('layout:blank') ?? BlankLayout, { page }, children)
+  }
+
+  if (page.layout === 'fullscreen') {
+    return createElement(
+      registry.resolve('layout:fullscreen') ?? FullscreenLayout,
+      { page },
+      children,
+    )
+  }
+
+  return createElement(
+    registry.resolve('layout:app') ?? AppLayout,
+    { breadcrumbs: page.breadcrumbs, maxContentWidth: page.maxContentWidth, page },
+    <>
+      {/* `?` overlay, `/`, `g d` and panel command shortcuts (`keyboardShortcuts()`). */}
+      <KeyboardShortcuts />
+      <Slot name="page.start" />
+      <PageHeader page={page} />
+      {/* Edit pages: somebody else saved the record (`detectConflicts()`, `Panel::realtime()`). */}
+      {page.conflicts &&
+        createElement(registry.resolve('page:conflict-banner') ?? ConflictBanner, { page })}
+      {page.subNavigation ? (
+        <SubNavigationLayout navigation={page.subNavigation}>{children}</SubNavigationLayout>
+      ) : (
+        children
+      )}
+      <Slot name="page.end" />
+    </>,
+  )
+}
+
+export function PageHeader({ page }: { page: PageSchema }) {
+  const { registry } = useAlfakit()
+  const actions = page.headerActions ?? []
+  // `$headerActionsAlignment`: the default (end) sits beside the heading; the others
+  // stack the actions under it.
+  const alignment = page.headerActionsAlignment
+
+  return (
+    <>
+      <Slot name="page.header.before" />
+      <header
+        data-slot="page-header"
+        data-actions-alignment={alignment}
+        className={cn(
+          'flex flex-col gap-4',
+          !alignment && 'sm:flex-row sm:items-start sm:justify-between',
+        )}
+      >
+        <div className="min-w-0">
+          <Slot name="page.heading.before" />
+          <h1 className="text-2xl font-semibold tracking-tight">{page.heading ?? page.title}</h1>
+          {page.subheading && (
+            <p className="text-muted-foreground mt-1 text-sm">{page.subheading}</p>
+          )}
+          <Slot name="page.heading.after" />
+        </div>
+        <div
+          className={cn(
+            'flex shrink-0 flex-wrap items-center gap-2',
+            alignment === 'start'
+              ? 'justify-start'
+              : alignment === 'center'
+                ? 'justify-center'
+                : alignment === 'between' || alignment === 'justify'
+                  ? 'justify-between'
+                  : 'justify-end',
+          )}
+        >
+          {/* Record pages with `Panel::realtime()`: who else is on the record. */}
+          {page.presence &&
+            createElement(registry.resolve('page:presence') ?? RecordPresence, {
+              presence: page.presence,
+            })}
+          <Slot name="page.actions.before" />
+          {actions.length > 0 && (
+            <ActionList
+              actions={actions}
+              context={{ token: page.token, component: 'page' }}
+              align="end"
+              className="max-w-full shrink-0"
+            />
+          )}
+          <Slot name="page.actions.after" />
+        </div>
+      </header>
+      <Slot name="page.header.after" />
+    </>
+  )
+}
+
+export function PageContent({ page }: { page: PageSchema }) {
+  return (
+    <div className="flex flex-col gap-6">
+      {page.content.map((block) => (
+        <ContentBlockRenderer key={block.key} block={block} />
+      ))}
+    </div>
+  )
+}
+
+export function ContentBlockRenderer({ block }: { block: ContentBlock }) {
+  const { registry } = useAlfakit()
+  // Links list tabs to the table they control.
+  const tabsIdBase = `alfakit-list-tabs-${useId().replace(/[^A-Za-z0-9_-]/g, '')}`
+
+  switch (block.type) {
+    case 'Form':
+      return <FormBlock block={block as FormBlockSchema} />
+    case 'Infolist':
+      return (
+        <div data-slot="infolist" className="contents">
+          <SchemaRenderer
+            components={(block as InfolistBlock).components}
+            columns={{ default: 1, lg: 2 }}
+          />
+        </div>
+      )
+    case 'Schema':
+      return (
+        <SchemaRenderer components={(block as SchemaBlock).components} columns={{ default: 1 }} />
+      )
+    case 'Table': {
+      const table = block as TableBlockSchema
+      const content = table.tabs?.length ? (
+        <div className="flex flex-col gap-4">
+          <ListTabs
+            tabs={table.tabs}
+            activeTab={table.activeTab}
+            tabsQueryKey={table.tabsQueryKey}
+            label={table.pluralModelLabel}
+            idBase={tabsIdBase}
+          />
+          <ListTabsPanel idBase={tabsIdBase} activeTab={table.activeTab}>
+            <DataTable table={table} component={table.component} />
+          </ListTabsPanel>
+        </div>
+      ) : (
+        <DataTable table={table} component={table.component} />
+      )
+
+      if (block.key !== 'table') {
+        return content
+      }
+
+      // The page's main table: the server sends these slots on List / ManageRelatedRecords pages only.
+      return (
+        <>
+          <Slot name="resource.list-records.table.before" />
+          <Slot name="resource.manage-related-records.table.before" />
+          {content}
+          <Slot name="resource.manage-related-records.table.after" />
+          <Slot name="resource.list-records.table.after" />
+        </>
+      )
+    }
+    case 'RelationManagers':
+      return <RelationManagers block={block as RelationManagersBlock} />
+    case 'Widgets':
+      return block.key === 'headerWidgets' ? (
+        <>
+          <Slot name="page.header-widgets.before" />
+          <WidgetGrid block={block as WidgetsBlockSchema} />
+          <Slot name="page.header-widgets.after" />
+        </>
+      ) : block.key === 'footerWidgets' ? (
+        <>
+          <Slot name="page.footer-widgets.before" />
+          <WidgetGrid block={block as WidgetsBlockSchema} />
+          <Slot name="page.footer-widgets.after" />
+        </>
+      ) : (
+        <WidgetGrid block={block as WidgetsBlockSchema} />
+      )
+    case 'Links':
+      return (
+        <div className="flex flex-col items-center gap-1 text-center text-sm">
+          {(block as LinksBlock).links.map((link) => (
+            <Link
+              key={link.url}
+              href={link.url}
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+      )
+    default: {
+      const Custom = registry.resolve(block.type)
+
+      return Custom ? createElement(Custom, { block }) : null
+    }
+  }
+}
+
+function RelationManagers({ block }: { block: RelationManagersBlock }) {
+  const tabs = useMemo(() => relationManagerTabs(block), [block])
+  // `?relation=`: a key in `getRelations()` or a position. The page URL (not
+  // `window.location`) so the server renders the same tab as the browser.
+  const url = usePage().url
+  const [active, setActive] = useState(
+    () =>
+      relationTabFromQuery(
+        tabs,
+        new URL(url, 'http://localhost').searchParams.get(RELATION_QUERY_KEY),
+      )?.key ??
+      tabs[0]?.key ??
+      '',
+  )
+
+  const changeTab = (key: string) => {
+    setActive(key)
+
+    if (typeof window === 'undefined') return
+
+    const next = new URL(window.location.href)
+    const slug = relationTabSlug(tabs, key)
+
+    if (slug === null) next.searchParams.delete(RELATION_QUERY_KEY)
+    else next.searchParams.set(RELATION_QUERY_KEY, slug)
+
+    window.history.replaceState(window.history.state, '', next)
+  }
+
+  if (block.managers.length === 0) {
+    return null
+  }
+
+  if (!hasRelationManagerTabs(block)) {
+    const manager = block.managers[0]!
+
+    return (
+      <section className="flex flex-col gap-3">
+        <Slot name="resource.relation-manager.before" scope={manager.key} />
+        {isLazyPlaceholder(manager) ? (
+          <LazyPlaceholder variant="table" />
+        ) : (
+          <DataTable
+            table={{ ...manager.table, heading: manager.table.heading ?? manager.title }}
+            component={manager.component}
+          />
+        )}
+        <Slot name="resource.relation-manager.after" scope={manager.key} />
+      </section>
+    )
+  }
+
+  return (
+    <Tabs value={active} onValueChange={changeTab}>
+      <TabsList>
+        <Slot name="resource.tabs.start" />
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.key} value={tab.key}>
+            {tab.icon && <Icon name={tab.icon} />}
+            {tab.title}
+            {tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (
+              <Badge
+                variant="secondary"
+                title={tab.badgeTooltip}
+                className={cn(
+                  'ms-1 px-1.5 py-0',
+                  tab.badgeColor && colorClass(badgeColorClasses, tab.badgeColor, 'gray'),
+                )}
+              >
+                {tab.badge}
+                {tab.badgeTooltip && <span className="sr-only">{` (${tab.badgeTooltip})`}</span>}
+              </Badge>
+            )}
+          </TabsTrigger>
+        ))}
+        <Slot name="resource.tabs.end" />
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent
+          key={tab.key}
+          value={tab.key}
+          className="flex flex-col gap-6 pt-2 data-[state=inactive]:hidden"
+          data-slot={tab.group ? 'relation-group' : tab.content ? 'relation-content' : undefined}
+          // The form keeps its unsaved state while another tab is open.
+          forceMount={tab.content ? true : undefined}
+        >
+          {/* The page's form / infolist (`hasCombinedRelationManagerTabsWithContent()`). */}
+          {tab.content && <ContentBlockRenderer block={tab.content as ContentBlock} />}
+          {tab.managers.map((manager) => (
+            <Fragment key={manager.key}>
+              <Slot name="resource.relation-manager.before" scope={manager.key} />
+              {isLazyPlaceholder(manager) ? (
+                <LazyPlaceholder variant="table" />
+              ) : (
+                <DataTable
+                  // Inside a group each table keeps its own heading; a lone manager's is the tab.
+                  table={{
+                    ...manager.table,
+                    heading: tab.group ? (manager.table.heading ?? manager.title) : undefined,
+                  }}
+                  component={manager.component}
+                />
+              )}
+              <Slot name="resource.relation-manager.after" scope={manager.key} />
+            </Fragment>
+          ))}
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}

package/src/registry.ts

@@ -0,0 +1,132 @@
+import { ComponentRegistry, lazyComponents } from '@alfakit/core'
+import { AiCopilot, AiStream } from './components/ai'
+import { AnalyticsBreakdown } from './components/analytics/breakdown'
+import { CmsLivePreview } from './components/cms/live-preview-lazy'
+import {
+  CheckboxField,
+  CodeEditorField,
+  HiddenField,
+  IconPickerField,
+  ModalTableSelectField,
+  QueryBuilderRulesField,
+  RichEditorField,
+  SelectField,
+  TextInputField,
+  ToggleField,
+} from './components/fields'
+import { FileManager, FileManagerPickerField } from './components/file-manager'
+import { HelpdeskInbox } from './components/helpdesk'
+import { Kanban } from './components/kanban'
+import { ActionsComponent } from './components/layout/actions'
+import { GridComponent } from './components/layout/grid'
+import { SectionComponent } from './components/layout/section'
+import { TranslationManager } from './components/translation-manager'
+import { Tree } from './components/tree'
+import { CalendarWidget } from './components/widgets/calendar-lazy'
+import type { AnyComponent } from './context'
+import { discoveredComponent } from './lib/discovery'
+
+const prime = () => import('./components/layout/prime')
+const elements = () => import('./components/layout/elements')
+const entries = () => import('./components/entries/other-entries')
+
+/**
+ * Built-ins split per type: a page downloads only the ones its schema names (preloaded
+ * before it renders, see `bootAlfakit()`), the rest load the first time they are shown.
+ * The core set used on nearly every page stays in `createDefaultRegistry()` directly.
+ */
+export const builtInComponents = lazyComponents<AnyComponent>({
+  // Fields
+  MoneyInput: () => import('./components/fields/money-input').then((m) => m.MoneyInputField),
+  Textarea: () => import('./components/fields/textarea').then((m) => m.TextareaField),
+  OneTimeCodeInput: () =>
+    import('./components/fields/one-time-code-input').then((m) => m.OneTimeCodeInputField),
+  CheckboxList: () => import('./components/fields/checkbox-list').then((m) => m.CheckboxListField),
+  Radio: () => import('./components/fields/radio').then((m) => m.RadioField),
+  DatePicker: () => import('./components/fields/date-picker').then((m) => m.DatePickerField),
+  DateTimePicker: () => import('./components/fields/date-picker').then((m) => m.DatePickerField),
+  TimePicker: () => import('./components/fields/date-picker').then((m) => m.DatePickerField),
+  ColorPicker: () => import('./components/fields/color-picker').then((m) => m.ColorPickerField),
+  TagsInput: () => import('./components/fields/tags-input').then((m) => m.TagsInputField),
+  KeyValue: () => import('./components/fields/key-value').then((m) => m.KeyValueField),
+  FileUpload: () => import('./components/fields/file-upload').then((m) => m.FileUploadField),
+  Repeater: () => import('./components/fields/repeater').then((m) => m.RepeaterField),
+  Builder: () => import('./components/fields/builder').then((m) => m.BuilderField),
+  ToggleButtons: () =>
+    import('./components/fields/toggle-buttons').then((m) => m.ToggleButtonsField),
+  Slider: () => import('./components/fields/slider').then((m) => m.SliderField),
+  // Layout
+  Fieldset: () => import('./components/layout/fieldset').then((m) => m.FieldsetComponent),
+  FusedGroup: () => import('./components/layout/fused-group').then((m) => m.FusedGroupComponent),
+  Tabs: () => import('./components/layout/tabs').then((m) => m.TabsComponent),
+  Wizard: () => import('./components/layout/wizard').then((m) => m.WizardComponent),
+  Placeholder: () => prime().then((m) => m.PlaceholderComponent),
+  Html: () => prime().then((m) => m.HtmlComponent),
+  Text: () => prime().then((m) => m.TextComponent),
+  View: () => prime().then((m) => m.ViewComponent),
+  Flex: () => elements().then((m) => m.FlexComponent),
+  Callout: () => elements().then((m) => m.CalloutComponent),
+  EmptyState: () => elements().then((m) => m.EmptyStateComponent),
+  Icon: () => elements().then((m) => m.IconComponent),
+  Image: () => elements().then((m) => m.ImageComponent),
+  UnorderedList: () => elements().then((m) => m.UnorderedListComponent),
+  // `HistoryAction`'s version list (`HasRecordVersions`).
+  RecordVersions: () =>
+    import('./components/versions/record-versions').then((m) => m.RecordVersionsComponent),
+  // Infolist entries
+  TextEntry: () => import('./components/entries/text-entry').then((m) => m.TextEntryComponent),
+  IconEntry: () => entries().then((m) => m.IconEntryComponent),
+  ImageEntry: () => entries().then((m) => m.ImageEntryComponent),
+  CodeEntry: () => import('./components/entries/code-entry').then((m) => m.CodeEntryComponent),
+  ColorEntry: () => entries().then((m) => m.ColorEntryComponent),
+  KeyValueEntry: () => entries().then((m) => m.KeyValueEntryComponent),
+  RepeatableEntry: () => entries().then((m) => m.RepeatableEntryComponent),
+  ViewEntry: () => import('./components/entries/view-entry').then((m) => m.ViewEntryComponent),
+})
+
+/** Built-in renderers for every schema `type` the PHP side emits. */
+export function createDefaultRegistry(): ComponentRegistry<AnyComponent> {
+  return new ComponentRegistry<AnyComponent>({
+    ...builtInComponents.map(discoveredComponent).components,
+    // Core set: on nearly every page, so in the main chunk.
+    TextInput: TextInputField,
+    Hidden: HiddenField,
+    Checkbox: CheckboxField,
+    Toggle: ToggleField,
+    Select: SelectField,
+    RichEditor: RichEditorField,
+    MarkdownEditor: RichEditorField,
+    CodeEditor: CodeEditorField,
+    ModalTableSelect: ModalTableSelectField,
+    IconPicker: IconPickerField,
+    // Table filters
+    QueryBuilderRules: QueryBuilderRulesField,
+    // Layout
+    Grid: GridComponent,
+    Group: GridComponent,
+    Section: SectionComponent,
+    Tab: GridComponent,
+    Step: GridComponent,
+    Actions: ActionsComponent,
+    // First-party plugins (alfasix/alfakit-calendar, alfasix/alfakit-tree), lazy-loaded
+    'widget:calendar': CalendarWidget,
+    tree: Tree,
+    // alfasix/alfakit-translation-manager, lazy-loaded
+    'translation-manager': TranslationManager,
+    // alfasix/alfakit-kanban: the page component and the widget share the key.
+    kanban: Kanban,
+    // alfasix/alfakit-file-manager: the page component (lazy-loaded) and the picker field.
+    'file-manager': FileManager,
+    FileManagerPicker: FileManagerPickerField,
+    // alfasix/alfakit-ai: the topbar copilot (its chat loads on first open).
+    'ai:copilot': AiCopilot,
+    // alfasix/alfakit-ai `streaming()`: answers streamed into modal forms (lazy-loaded).
+    'ai:stream': AiStream,
+    // alfasix/alfakit-analytics: the dashboard's top lists.
+    'analytics:breakdown': AnalyticsBreakdown,
+    // alfasix/alfakit-cms: the page editor's autosave and live preview.
+    CmsLivePreview,
+    // alfasix/alfakit-helpdesk: the agent inbox page component, lazy-loaded.
+    'helpdesk:inbox': HelpdeskInbox,
+  })
+}

package/src/server.tsx

@@ -0,0 +1,68 @@
+import { discoveryKey } from '@alfakit/core'
+import type { InertiaAppResponse, Page } from '@inertiajs/core'
+import { renderToString } from 'react-dom/server'
+import {
+  bootAlfakit,
+  type AlfakitRenderFunction,
+  type CreateAlfakitOptions,
+} from './create-alfakit'
+
+export interface CreateAlfakitServerOptions extends CreateAlfakitOptions {
+  /**
+   * Render Inertia pages that are neither Alfakit pages (they lack the shared `alfakit` prop)
+   * nor registered with `pages`, e.g. the rest of your application. Without it those pages
+   * render in the browser only.
+   */
+  fallback?: (page: Page) => InertiaAppResponse
+}
+
+/**
+ * Server-side rendering for Alfakit panels: returns the render callback for Inertia's SSR
+ * server. Pass the same components and pages as `createAlfakit()` so both sides render
+ * the same tree.
+ *
+ * ```tsx
+ * // resources/js/ssr.tsx
+ * import createServer from '@inertiajs/react/server'
+ * import { createAlfakitServer } from '@alfakit/react/server'
+ *
+ * createServer(createAlfakitServer({ components: { 'map-picker': MapPicker } }))
+ * ```
+ */
+export function createAlfakitServer(
+  options: CreateAlfakitServerOptions = {},
+): (page: Page) => InertiaAppResponse {
+  const { fallback, ...alfakitOptions } = options
+  let render: Promise<AlfakitRenderFunction> | null = null
+  const discoveredPages = new Set(
+    Object.keys(alfakitOptions.discover ?? {}).flatMap((path) => {
+      const key = discoveryKey(path)
+
+      return key?.section === 'pages' ? [key.key] : []
+    }),
+  )
+
+  return async (page) => {
+    // Panel pages and the pages registered with `pages` render here; any other page goes to
+    // `fallback`, or `null` tells Laravel to fall back to client-side rendering for it.
+    const registered =
+      (alfakitOptions.pages !== undefined && page.component in alfakitOptions.pages) ||
+      discoveredPages.has(page.component)
+
+    if (!(page.props as Record<string, unknown>).alfakit && !registered) {
+      return fallback ? fallback(page) : (null as unknown as void)
+    }
+
+    render ??= bootAlfakit(alfakitOptions).then((result) => {
+      if (typeof result !== 'function') {
+        throw new Error('Alfakit: createAlfakitServer() must run on the server (no `window`).')
+      }
+
+      return result
+    })
+
+    return (await render)(page, renderToString)
+  }
+}
+
+export type { CreateAlfakitOptions } from './create-alfakit'