@lincyaw/host 0.0.0-stage → 1.0.0-rc.0

package/src/design/components.ts

@@ -0,0 +1,327 @@
+import type { InjectionKey, PropType, VNode } from 'vue'
+import { defineComponent, cloneVNode, h, inject, provide, ref, useId } from 'vue'
+import { DialogClose, DialogContent, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
+import type { ToolbarPlace } from '../types.ts'
+import { ICONS } from '@lincyaw/design'
+import type { IconName } from '@lincyaw/design'
+
+const PLACE: InjectionKey<ToolbarPlace> = Symbol('presmium.toolbarPlace')
+const OVERLAY_Z: InjectionKey<string> = Symbol('presmium.overlayZ')
+
+function overlayStyle(kind: 'popover' | 'dialog') {
+  const parent = inject(OVERLAY_Z, undefined)
+  const zIndex = parent ? `calc(${parent} + 1)` : `var(--pm-z-${kind})`
+  provide(OVERLAY_Z, zIndex)
+  return { zIndex }
+}
+
+
+/** @experimental */
+export function useToolbarPlace(): ToolbarPlace {
+  return inject(PLACE, 'bar')
+}
+
+/** @experimental */
+export function provideToolbarPlace(place: ToolbarPlace): void {
+  provide(PLACE, place)
+}
+
+export const PmIcon = defineComponent({
+  name: 'PmIcon',
+  props: {
+    name: { type: String as PropType<IconName>, required: true },
+    size: { type: [Number, String], default: 20 },
+    strokeWidth: { type: Number, default: 1.7 },
+  },
+  setup(props) {
+    return () => h('svg', {
+      'class': 'pm-ui-icon',
+      'width': props.size,
+      'height': props.size,
+      'viewBox': '0 0 24 24',
+      'fill': 'none',
+      'stroke': 'currentColor',
+      'stroke-width': props.strokeWidth,
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'aria-hidden': 'true',
+      'focusable': 'false',
+    }, (ICONS[props.name] ?? []).map(([tag, attrs]) => h(tag, attrs)))
+  },
+})
+
+export type ButtonVariant = 'default' | 'primary' | 'accent' | 'ghost' | 'danger'
+
+export const PmButton = defineComponent({
+  name: 'PmButton',
+  props: {
+    variant: { type: String as PropType<ButtonVariant>, default: 'default' },
+    small: Boolean,
+    icon: String as PropType<IconName>,
+    type: { type: String as PropType<'button' | 'submit' | 'reset'>, default: 'button' },
+  },
+  setup(props, { slots }) {
+    return () => h('button', {
+      type: props.type,
+      class: ['pm-ui-button', props.variant !== 'default' && `pm-ui-button--${props.variant}`, props.small && 'pm-ui-button--small'],
+    }, [props.icon ? h(PmIcon, { name: props.icon, size: props.small ? 14 : 16, strokeWidth: 2 }) : null, slots.default?.()])
+  },
+})
+
+export const PmIconButton = defineComponent({
+  name: 'PmIconButton',
+  props: {
+    icon: { type: String as PropType<IconName>, required: true },
+    label: { type: String, required: true },
+    small: Boolean,
+  },
+  setup(props) {
+    return () => h('button', {
+      'type': 'button',
+      'class': ['pm-ui-icon-button', props.small && 'pm-ui-icon-button--small'],
+      'aria-label': props.label,
+      'title': props.label,
+    }, [h(PmIcon, { name: props.icon, size: props.small ? 16 : 20 })])
+  },
+})
+
+export type Tone = 'neutral' | 'accent' | 'ok' | 'warn' | 'danger' | 'outline'
+
+export const PmBadge = defineComponent({
+  name: 'PmBadge',
+  props: {
+    tone: { type: String as PropType<Tone>, default: 'neutral' },
+    pill: Boolean,
+  },
+  setup(props, { slots }) {
+    return () => h('span', { class: ['pm-ui-badge', props.tone !== 'neutral' && `pm-ui-badge--${props.tone}`, props.pill && 'pm-ui-badge--pill'] }, slots.default?.())
+  },
+})
+
+export const PmCard = defineComponent({
+  name: 'PmCard',
+  props: {
+    variant: { type: String as PropType<'default' | 'interactive' | 'dashed'>, default: 'default' },
+    tag: { type: String, default: 'div' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.tag, { class: ['pm-ui-card', props.variant !== 'default' && `pm-ui-card--${props.variant}`] }, slots.default?.())
+  },
+})
+
+export const PmField = defineComponent({
+  name: 'PmField',
+  props: {
+    label: { type: String, required: true },
+    inline: Boolean,
+  },
+  setup(props, { slots }) {
+    return () => h('label', { class: ['pm-ui-field', props.inline && 'pm-ui-field--inline'] }, props.inline
+      ? [slots.default?.(), h('span', { class: 'pm-ui-field__label' }, props.label)]
+      : [h('span', { class: 'pm-ui-field__label' }, props.label), slots.default?.()])
+  },
+})
+
+export interface Choice {
+  value: string
+  label: string
+}
+
+export const PmSegmented = defineComponent({
+  name: 'PmSegmented',
+  props: {
+    modelValue: { type: String, required: true },
+    options: { type: Array as PropType<Choice[]>, required: true },
+    label: { type: String, required: true },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    return () => h(ToggleGroupRoot, {
+      'type': 'single', 'class': 'pm-ui-segmented', 'aria-label': props.label, 'modelValue': props.modelValue,
+      'onUpdate:modelValue': value => { if (typeof value === 'string' && value) emit('update:modelValue', value) },
+    }, () => props.options.map(option => h(ToggleGroupItem, {
+      key: option.value, value: option.value, class: 'pm-ui-segmented__option',
+    }, () => option.label)))
+  },
+})
+
+export const PmTabs = defineComponent({
+  name: 'PmTabs',
+  props: {
+    modelValue: { type: String, required: true },
+    tabs: { type: Array as PropType<Choice[]>, required: true },
+    label: { type: String, required: true },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, slots }) {
+    return () => h(TabsRoot, {
+      'class': 'pm-ui-tabset', 'modelValue': props.modelValue,
+      'onUpdate:modelValue': value => emit('update:modelValue', String(value)),
+    }, () => [
+      h(TabsList, { class: 'pm-ui-tabs', 'aria-label': props.label }, () => props.tabs.map(tab =>
+        h(TabsTrigger, { key: tab.value, value: tab.value, class: 'pm-ui-tab' }, () => tab.label))),
+      slots.default ? h(TabsContent, { key: props.modelValue, value: props.modelValue, class: 'pm-ui-tabpanel', tabindex: 0 }, () => slots.default?.({ value: props.modelValue })) : null,
+    ])
+  },
+})
+
+export type PopoverPlacement = 'below-end' | 'below-start' | 'above-end' | 'above-start'
+
+function placement(value: PopoverPlacement) {
+  return { side: value.startsWith('above') ? 'top' as const : 'bottom' as const, align: value.endsWith('start') ? 'start' as const : 'end' as const, sideOffset: 6, collisionPadding: 16 }
+}
+
+export const PmPopover = defineComponent({
+  name: 'PmPopover',
+  props: {
+    open: Boolean,
+    label: { type: String, required: true },
+    placement: { type: String as PropType<PopoverPlacement>, default: 'below-end' },
+    name: String,
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const style = overlayStyle('popover')
+    const anchor = ref<HTMLElement>()
+    const id = useId()
+    let outside = false
+    return () => h(PopoverRoot, { 'open': props.open, 'onUpdate:open': value => emit('update:open', value) }, () => [
+      h(PopoverAnchor, { asChild: true }, () => h('span', { ref: anchor, class: ['pm-ui-anchor', props.name] }, slots.trigger?.().map(node => cloneVNode(node, {
+        'aria-haspopup': 'dialog', 'aria-expanded': props.open, 'aria-controls': props.open ? id : undefined,
+      })))),
+      h(PopoverPortal, {}, () => h(PopoverContent, {
+        ...placement(props.placement), 'id': id, style,
+        onOpenAutoFocus: () => { outside = false },
+        onInteractOutside: () => { outside = true },
+        onCloseAutoFocus: (event: Event) => { event.preventDefault(); if (!outside) anchor.value?.querySelector<HTMLElement>('button, [href]')?.focus() },
+        'class': ['pm-ui-popover', 'pm-ui-floating', 'pm-ui', props.name && `${props.name}__panel`], 'aria-label': props.label,
+      }, slots.default)),
+    ])
+  },
+})
+
+const dialogProps = {
+  open: Boolean,
+  label: { type: String, required: true },
+  closeLabel: { type: String, required: true },
+  name: String,
+} as const
+
+function dialogComponent(drawer: boolean) {
+  return defineComponent({
+    name: drawer ? 'PmDrawer' : 'PmDialog',
+    props: dialogProps,
+    emits: ['update:open'],
+    setup(props, { emit, slots }) {
+      const style = overlayStyle(drawer ? 'popover' : 'dialog')
+      const kind = drawer ? 'pm-ui-drawer' : 'pm-ui-dialog'
+      let opener: HTMLElement | undefined
+      return () => h(DialogRoot, { 'open': props.open, 'onUpdate:open': value => emit('update:open', value) }, () => [
+        slots.trigger ? h(DialogTrigger, { asChild: true }, slots.trigger) : null,
+        h(DialogPortal, {}, () => h(DialogContent, {
+          'class': [kind, 'pm-ui', props.name && `${props.name}__panel`], 'style': style, 'aria-describedby': undefined,
+          onOpenAutoFocus: () => { opener = document.activeElement instanceof HTMLElement ? document.activeElement : undefined },
+          onCloseAutoFocus: (event: Event) => {
+            if (slots.trigger || !opener?.isConnected) return
+            event.preventDefault()
+            opener.focus()
+          },
+        }, () => [
+          h('div', { class: `${kind}__header` }, [
+            h(DialogTitle, { as: 'h2', class: `${kind}__title` }, () => props.label),
+            slots.actions?.(),
+            h(DialogClose, { asChild: true }, () => h(PmIconButton, { icon: 'close', label: props.closeLabel, small: true })),
+          ]),
+          h('div', { class: `${kind}__body` }, slots.default?.()),
+        ])),
+      ])
+    },
+  })
+}
+
+export const PmDrawer = dialogComponent(true)
+export const PmDialog = dialogComponent(false)
+
+export interface MenuItem {
+  id: string
+  label: string
+  icon?: IconName
+  danger?: boolean
+  disabled?: boolean
+}
+
+export const PmMenu = defineComponent({
+  name: 'PmMenu',
+  props: {
+    label: { type: String, required: true },
+    items: { type: Array as PropType<MenuItem[]>, required: true },
+    icon: { type: String as PropType<IconName>, default: 'more' },
+    placement: { type: String as PropType<PopoverPlacement>, default: 'below-end' },
+  },
+  emits: ['select'],
+  setup(props, { emit }) {
+    const style = overlayStyle('popover')
+    return () => h(DropdownMenuRoot, {}, () => [
+      h(DropdownMenuTrigger, { asChild: true }, () => h(PmIconButton, { icon: props.icon, label: props.label, small: true })),
+      h(DropdownMenuPortal, {}, () => h(DropdownMenuContent, { ...placement(props.placement), style, class: ['pm-ui-menu', 'pm-ui-floating', 'pm-ui'], 'aria-label': props.label }, () => props.items.map(item =>
+        h(DropdownMenuItem, {
+          key: item.id, disabled: item.disabled, textValue: item.label,
+          class: ['pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'],
+          onSelect: () => emit('select', item.id),
+        }, () => [item.icon ? h(PmIcon, { name: item.icon, size: 16 }) : null, item.label])))),
+    ])
+  },
+})
+
+export const PmEmpty = defineComponent({
+  name: 'PmEmpty',
+  props: {
+    title: String,
+    icon: String as PropType<IconName>,
+  },
+  setup(props, { slots }) {
+    return () => h('div', { class: 'pm-ui-empty' }, [
+      props.icon ? h(PmIcon, { name: props.icon, size: 28 }) : null,
+      props.title ? h('p', { class: 'pm-ui-empty__title' }, props.title) : null,
+      slots.default ? h('p', { style: { margin: 0 } }, slots.default()) : null,
+      slots.action?.(),
+    ])
+  },
+})
+
+export const PmNotice = defineComponent({
+  name: 'PmNotice',
+  props: {
+    tone: { type: String as PropType<'neutral' | 'accent' | 'ok' | 'warn' | 'danger'>, default: 'neutral' },
+  },
+  setup(props, { slots }) {
+    return (): VNode => h('p', { class: ['pm-ui-notice', props.tone !== 'neutral' && `pm-ui-notice--${props.tone}`], role: props.tone === 'danger' ? 'alert' : 'status' }, slots.default?.())
+  },
+})
+
+export const PmToolbarEntry = defineComponent({
+  name: 'PmToolbarEntry',
+  props: {
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    closeLabel: { type: String, required: true },
+    icon: String as PropType<IconName>,
+    open: Boolean,
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const place = useToolbarPlace()
+    const update = (open: boolean) => emit('update:open', open)
+    const toggleAttrs = () => ({
+      'class': `${props.name}__toggle`,
+      'aria-expanded': props.open ? 'true' : 'false',
+      'onClick': () => update(!props.open),
+    })
+    return () => {
+      return h(PmPopover, { 'open': props.open, 'label': props.label, 'name': props.name, 'placement': place === 'status' ? 'above-start' : 'below-end', 'onUpdate:open': update }, {
+        trigger: () => h(PmButton, { variant: 'ghost', small: true, icon: props.icon, ...toggleAttrs() }, () => props.label),
+        default: () => slots.default?.(),
+      })
+    }
+  },
+})

package/src/design/design.css

@@ -0,0 +1 @@
+@import '@lincyaw/design/design.css';

package/src/design/theme.ts

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue'
+import { getCurrentInstance, inject, readonly, shallowRef } from 'vue'
+import { createGlobalState, useMutationObserver } from '@vueuse/core'
+import { HOST, installed } from '../key.ts'
+
+export interface Theme {
+  readonly dark: Readonly<Ref<boolean>>
+  setDark(dark: boolean): void
+  toggle(): void
+}
+
+const observeDarkClass = createGlobalState(() => {
+  const root = () => typeof document === 'undefined' ? undefined : document.documentElement
+  const dark = shallowRef(root()?.classList.contains('dark') ?? false)
+  useMutationObserver(root, () => dark.value = root()?.classList.contains('dark') ?? false, { attributes: true, attributeFilter: ['class'] })
+  return dark
+})
+
+export function useTheme(): Theme {
+  const host = getCurrentInstance() ? inject(HOST, undefined) : installed.adapter
+  const own = getCurrentInstance() ? host?.useDarkMode?.() : undefined
+  const dark = own ?? observeDarkClass()
+  const setDark = (value: boolean) => {
+    if (own) own.value = value
+    else if (typeof document !== 'undefined') document.documentElement.classList.toggle('dark', value)
+  }
+  return {
+    dark: readonly(dark),
+    setDark,
+    toggle: () => setDark(!dark.value),
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+  BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/host.ts

@@ -0,0 +1,82 @@
+import { stepStateAt } from '@lincyaw/kernel/contracts'
+import type { PresentationMode, ServiceToken, StartReport, StepRange, StepState } from '@lincyaw/kernel/contracts'
+import type { App, ComputedRef, Ref } from 'vue'
+import { computed, getCurrentInstance, getCurrentScope, inject, onScopeDispose, readonly, ref } from 'vue'
+import { PmBoundary } from './boundary.ts'
+import { HOST, installed } from './key.ts'
+import { PmStepScope, useStepScope } from './scope.ts'
+import type { HostAdapter, SharedStateScope } from './types.ts'
+
+export function installHost(app: App, adapter: HostAdapter): void {
+  installed.adapter = adapter
+  app.provide(HOST, adapter)
+  app.component('PmBoundary', PmBoundary)
+  app.component('PmStepScope', PmStepScope)
+}
+
+export function useHost(): HostAdapter {
+  const host = inject(HOST, undefined)
+  if (!host) throw new Error('[presmium] no host installed: the host adapter must call installHost(app, adapter)')
+  return host
+}
+
+export function useStepState(range: StepRange): Readonly<Ref<StepState>> {
+  const step = useHost().useStep()
+  const { at } = useStepScope()
+  return computed(() => stepStateAt(range, step.value - at.value))
+}
+
+export function useCursor() {
+  return useHost().useCursor()
+}
+
+export function useViewRole() {
+  return useHost().useViewRole()
+}
+
+export function usePresentationMode(): PresentationMode {
+  return useHost().mode
+}
+
+export function useService<T>(token: ServiceToken<T>): ComputedRef<T | undefined> {
+  const host = useHost()
+  return computed(() => host.getService(token))
+}
+
+export function useStartReport(): ComputedRef<StartReport | undefined> {
+  const host = useHost()
+  return computed(() => host.startReport())
+}
+
+export function useStaticRender(): Readonly<Ref<boolean>> {
+  return useHost().useStaticRender()
+}
+
+export function useSectionConfig(pluginId: string): Readonly<Ref<Record<string, unknown>>> {
+  return useHost().useSectionConfig(pluginId)
+}
+
+export interface SharedStateOptions {
+  scope?: SharedStateScope
+}
+
+export function useSharedState<T>(key: string, initial: T, options: SharedStateOptions = {}): Ref<T> {
+  const host = (getCurrentInstance() ? inject(HOST, undefined) : undefined) ?? installed.adapter
+  if (!host) throw new Error('[presmium] no host installed: the host adapter must call installHost(app, adapter)')
+  return host.useSharedState(key, initial, options.scope ?? 'local')
+}
+
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)'
+
+export function usePrefersReducedMotion(): Readonly<Ref<boolean>> {
+  const query = typeof window === 'undefined' ? undefined : window.matchMedia?.(REDUCED_MOTION)
+  const reduced = ref(query?.matches ?? false)
+  if (query) {
+    const update = (event: MediaQueryListEvent) => {
+      reduced.value = event.matches
+    }
+    query.addEventListener('change', update)
+    if (getCurrentScope()) onScopeDispose(() => query.removeEventListener('change', update))
+  }
+  return readonly(reduced)
+}

package/src/index.ts

@@ -0,0 +1,84 @@
+import './design/design.css'
+
+export { blockAt, blockElement, blockKey, codeLines, lineNumbers, linesText, positionSlide, splitBlockKey } from './blocks.ts'
+export type { BlockPoint } from './blocks.ts'
+export { componentErrors, PmBoundary } from './boundary.ts'
+export type { ComponentError } from './boundary.ts'
+export {
+  PmBadge,
+  PmButton,
+  PmCard,
+  PmDialog,
+  PmDrawer,
+  PmEmpty,
+  PmField,
+  PmIcon,
+  PmIconButton,
+  PmMenu,
+  PmNotice,
+  PmPopover,
+  PmSegmented,
+  PmTabs,
+  PmToolbarEntry,
+  provideToolbarPlace,
+  useToolbarPlace,
+} from './design/components.ts'
+export type { ButtonVariant, Choice, MenuItem, PopoverPlacement, Tone } from './design/components.ts'
+export { iconMarkup, ICONS } from '@lincyaw/design'
+export type { IconName } from '@lincyaw/design'
+export { useTheme } from './design/theme.ts'
+export type { Theme } from './design/theme.ts'
+export {
+  installHost,
+  useCursor,
+  useHost,
+  usePrefersReducedMotion,
+  usePresentationMode,
+  useSectionConfig,
+  useService,
+  useSharedState,
+  useStartReport,
+  useStaticRender,
+  useStepState,
+  useViewRole,
+} from './host.ts'
+export type { SharedStateOptions } from './host.ts'
+export { pluginsOf, presmiumReport, presmiumService, registerPresmiumPlugin, reportPluginFailure, startHost, startPresmium, stopPresmium, stopPresmiumOnPageHide } from './kernel.ts'
+export type { HostStart, StartOptions } from './kernel.ts'
+export { currentLocale, useLocale, useMessages } from './locale.ts'
+export type { Catalog } from './locale.ts'
+export { PmApprovals } from './approvals.ts'
+export { createOperations, createStatusRegistry } from './operations.ts'
+export { createPresenterPanels, createToolbar } from './panels.ts'
+export { createServerClient, provideServer, useServer } from './server.ts'
+export { default as PmPresenterPanels } from './PresenterPanels.vue'
+export { PmStepScope, provideStepScope, useStepScope } from './scope.ts'
+export { claimFirst, useSessionSnapshot } from './session.ts'
+export type { StepScope } from './scope.ts'
+export { createSharedStates } from './shared.ts'
+export type { SharedStates } from './shared.ts'
+export { default as PmToolbar } from './Toolbar.vue'
+export { NAVIGATION, OPERATIONS, STATUS, SYNC_TRANSPORTS, TOOLBAR } from './types.ts'
+export { deckChannel, joinWindows } from './windows.ts'
+export type { WindowChannel } from './windows.ts'
+export type {
+  HostAdapter,
+  Navigation,
+  NavigationPosition,
+  Operations,
+  ReplayHandler,
+  ServerClient,
+  SharedStateScope,
+  StatusProvider,
+  StatusRegistry,
+  SyncPublish,
+  SyncTransport,
+  SyncTransports,
+  Toolbar,
+  ToolbarItem,
+  ToolbarPlace,
+  ToolbarSlot,
+  ViewRole,
+} from './types.ts'
+export { localeOf } from '@lincyaw/kernel/contracts'
+export type { Locale } from '@lincyaw/kernel/contracts'

package/src/kernel.ts

@@ -0,0 +1,131 @@
+import { Kernel, PRESENTER_PANELS } from '@lincyaw/kernel'
+import type { EnvironmentSpec, Logger, PluginDefinition, PluginReport, PresentationMode, ServiceToken, StartReport } from '@lincyaw/kernel'
+import { shallowRef } from 'vue'
+import { PmApprovals } from './approvals.ts'
+import { currentLocale } from './locale.ts'
+import { HOST_MESSAGES } from './messages.ts'
+import { createOperations, createStatusRegistry } from './operations.ts'
+import { createPresenterPanels, createToolbar } from './panels.ts'
+import { connectControl, provideServer } from './server.ts'
+import { NAVIGATION, OPERATIONS, STATUS, SYNC_TRANSPORTS, TOOLBAR } from './types.ts'
+import type { Navigation, ServerClient, SyncTransports } from './types.ts'
+
+const registered: PluginDefinition[] = []
+const running = shallowRef<Kernel>()
+let starting: Promise<StartReport> | undefined
+let disconnect: (() => void) | undefined
+const failures = shallowRef<PluginReport[]>([])
+
+export function registerPresmiumPlugin(plugin: PluginDefinition): void {
+  const { id } = plugin.manifest
+  if (starting) console.error(`[presmium] ${id} was registered after the kernel started; ignored`)
+  else if (registered.some(p => p.manifest.id === id)) console.error(`[presmium] plugin ${id} is already registered; ignored`)
+  else registered.push(plugin)
+}
+
+function isPluginDefinition(value: unknown): value is PluginDefinition {
+  const plugin = value as Partial<PluginDefinition> | null
+  return typeof plugin === 'object' && plugin !== null && typeof plugin.setup === 'function' && typeof plugin.manifest?.id === 'string'
+}
+
+export function pluginsOf(module: unknown, config: Record<string, unknown> = {}): PluginDefinition[] {
+  const exports = (module ?? {}) as Record<string, unknown>
+  const declared = typeof exports.presmiumPlugins === 'function' ? [(exports.presmiumPlugins as (config: Record<string, unknown>) => unknown)(config)] : []
+  const values = [...Object.values(exports), ...declared].flatMap(v => (Array.isArray(v) ? v : [v]))
+  return [...new Set(values.filter(isPluginDefinition))]
+}
+
+export interface StartOptions {
+  mode: PresentationMode
+  config?: Record<string, unknown>
+  beforeStart?(kernel: Kernel): void
+  log?: Logger
+  environments?: Record<string, EnvironmentSpec>
+}
+
+export function startPresmium(options: StartOptions): Promise<StartReport> {
+  starting ??= (async () => {
+    const kernel = new Kernel({ mode: options.mode, config: options.config, log: options.log, environments: options.environments })
+    options.beforeStart?.(kernel)
+    for (const plugin of registered) kernel.register(plugin)
+    const report = await kernel.start()
+    running.value = kernel
+    return report
+  })()
+  return starting
+}
+
+export async function stopPresmium(): Promise<void> {
+  const current = starting
+  if (!current) return
+  starting = undefined
+  disconnect?.()
+  disconnect = undefined
+  await current.catch(() => undefined)
+  const kernel = running.value
+  running.value = undefined
+  await kernel?.dispose()
+}
+
+export function stopPresmiumOnPageHide(start: () => void): void {
+  window.addEventListener('pagehide', () => void stopPresmium())
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) start()
+  })
+}
+
+export function presmiumService<T>(token: ServiceToken<T>): T | undefined {
+  return running.value?.getService(token)
+}
+
+export function reportPluginFailure(id: string, reason: string): void {
+  failures.value = [...failures.value.filter(report => report.id !== id), { id, status: 'failed', reason }]
+}
+
+export function presmiumReport(): StartReport | undefined {
+  const report = running.value?.report()
+  return report && failures.value.length ? { ...report, plugins: [...report.plugins, ...failures.value] } : report
+}
+
+export interface HostStart {
+  mode: PresentationMode
+  config: Record<string, unknown>
+  navigation: Navigation
+  transports: SyncTransports
+  environments?: Record<string, EnvironmentSpec>
+  server?: ServerClient
+}
+
+export function startHost(options: HostStart): Promise<StartReport> {
+  if (options.server) provideServer(options.server)
+  const start = () => startPresmium({
+    mode: options.mode,
+    config: options.config,
+    environments: options.environments,
+    beforeStart(kernel) {
+      const toolbar = createToolbar()
+      const status = createStatusRegistry()
+      kernel.provide(PRESENTER_PANELS, createPresenterPanels())
+      kernel.provide(SYNC_TRANSPORTS, options.transports)
+      kernel.provide(NAVIGATION, options.navigation)
+      kernel.provide(TOOLBAR, toolbar)
+      kernel.provide(OPERATIONS, createOperations())
+      kernel.provide(STATUS, status)
+      disconnect?.()
+      disconnect = undefined
+      const { server } = options
+      if (!server?.available) return
+      toolbar.register({
+        id: 'presmium.approvals',
+        get title() {
+          return HOST_MESSAGES[currentLocale()].approvalsTitle
+        },
+        component: PmApprovals,
+        order: 1000,
+      })
+      disconnect = connectControl(server, { navigation: options.navigation, status, service: token => kernel.getService(token) })
+    },
+  })
+  stopPresmiumOnPageHide(() => void start())
+  return start()
+}

package/src/key.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue'
+import type { HostAdapter } from './types.ts'
+
+export const HOST: InjectionKey<HostAdapter> = Symbol('presmium.host')
+
+export const installed: { adapter?: HostAdapter } = {}