@lincyaw/host 1.0.0-rc.0 → 1.0.0-rc.2

package/src/host.ts

@@ -1,82 +1,47 @@
-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)
+import { createElement, useContext, useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import { stepStateAt } from '@lincyaw/kernel'
+import type { ServiceToken, StepRange, StepState } from '@lincyaw/kernel/contracts'
+import { HOST, installed } from './host-key.ts'
+import type { HostAdapter, SharedStateScope } from './contracts.ts'
+import { useStepScope } from './step-scope.ts'
+import { runtimeRevision } from './runtime.ts'
+import { createStore, useStore } from './store.ts'
+import type { Store } from './store.ts'
+import { PmBoundary } from './error-boundary.ts'
+
+export function installHost(adapter: HostAdapter): void { installed.adapter = adapter }
+export function HostProvider({ adapter, children }: { adapter: HostAdapter, children?: ReactNode }) {
+  return createElement(HOST.Provider, { value: adapter }, children)
 }
-
 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)')
+  const host = useContext(HOST) ?? installed.adapter
+  if (!host) throw new Error('[presmium] no host installed')
   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)
+export function useDoc() { const host = useHost(); if (!host.useDoc) throw new Error("[presmium] this host has no document"); return host.useDoc() }
+export function useStep(): number { return useHost().useStep() }
+export function useStepState(range: StepRange): StepState { const step = useStep(); const scope = useStepScope(); return stepStateAt(range, scope.localStepAt(step)) }
+export function useCursor() { return useHost().useCursor() }
+export function useViewRole() { return useHost().useViewRole() }
+export function usePresentationMode() { const host = useHost(); host.useViewRole(); return host.mode }
+export function useService<T>(token: ServiceToken<T>): T | undefined { useStore(runtimeRevision); return useHost().getService(token) }
+export function useStartReport() { useStore(runtimeRevision); return useHost().startReport() }
+export function useStaticRender() { return useHost().useStaticRender() }
+export function useSectionConfig(pluginId: string) { return useHost().useSectionConfig(pluginId) }
+export interface SharedStateOptions { scope?: SharedStateScope }
+export function useSharedState<T>(key: string, initial: T, options: SharedStateOptions = {}) { return useHost().useSharedState(key, initial, options.scope ?? 'local') }
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(() => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches)
+  useEffect(() => { const query = matchMedia('(prefers-reduced-motion: reduce)'); const update = () => setReduced(query.matches); update(); query.addEventListener('change', update); return () => query.removeEventListener('change', update) }, [])
+  return reduced
+}
+
+const detachedShared = new Map<string, Store<unknown>>()
+export function getSharedStateStore<T>(key: string, initial: T, options: SharedStateOptions = {}): Store<T> {
+  const scope = options.scope ?? 'local'
+  if (installed.adapter?.sharedStateStore) return installed.adapter.sharedStateStore(key, initial, scope)
+  const id = `${scope}:${key}`
+  let store = detachedShared.get(id); if (!store) { store = createStore<unknown>(initial); detachedShared.set(id, store) }
+  return store as Store<T>
 }

package/src/index.ts

@@ -1,9 +1,12 @@
+/// <reference path="./styles.d.ts" />
 import './design/design.css'
 
-export { blockAt, blockElement, blockKey, codeLines, lineNumbers, linesText, positionSlide, splitBlockKey } from './blocks.ts'
+export { useActions } from './actions.ts'
+export type { ActionOptions, ComponentAction } from './actions.ts'
+export { blockAt, blockElement, blockKey, codeLines, lineNumbers, linesText, splitBlockKey } from './blocks.ts'
 export type { BlockPoint } from './blocks.ts'
-export { componentErrors, PmBoundary } from './boundary.ts'
-export type { ComponentError } from './boundary.ts'
+export { componentErrors, componentErrorRevision, PmBoundary } from './error-boundary.ts'
+export type { ComponentError } from './error-boundary.ts'
 export {
   PmBadge,
   PmButton,
@@ -11,6 +14,7 @@ export {
   PmDialog,
   PmDrawer,
   PmEmpty,
+  PmSkeleton,
   PmField,
   PmIcon,
   PmIconButton,
@@ -19,17 +23,26 @@ export {
   PmPopover,
   PmSegmented,
   PmTabs,
+  PmTabPanel,
+  PmTooltip,
   PmToolbarEntry,
-  provideToolbarPlace,
-  useToolbarPlace,
+  provideToolbarPlacement,
+  useToolbarPlacement,
 } from './design/components.ts'
-export type { ButtonVariant, Choice, MenuItem, PopoverPlacement, Tone } from './design/components.ts'
+export type { ButtonVariant, Choice, ControlDensity, MenuItem, PopoverPlacement, Tone } from './design/components.ts'
+export { PmColumns, PmStack, PmTabGroup } from './design/layout.ts'
+export { PmCaption, PmCaptionProvider } from './design/caption.ts'
+export type { CaptionProps } from './design/caption.ts'
+export type { ContentLayoutProps, ColumnsLayoutProps, TabLayoutEntry } from './design/layout.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 { useAppearance } from './design/appearance.ts'
+export type { Appearance } from './design/appearance.ts'
 export {
   installHost,
+  HostProvider,
+  useStep,
+  useDoc,
   useCursor,
   useHost,
   usePrefersReducedMotion,
@@ -37,48 +50,65 @@ export {
   useSectionConfig,
   useService,
   useSharedState,
+  getSharedStateStore,
   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 { pluginsOf, presmiumReport, presmiumService, registerPresmiumPlugin, reportPluginFailure, setHostActive, startHost, stopHost } from './runtime.ts'
+export type { HostStart } from './runtime.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 { claimFirst } from './claim-first.ts'
+export { createServerClient, pluginRoutePath, provideServer, useServer, serverClient } from './server.ts'
+export { PmPresenterPanels } from './panels.ts'
+export { useStepTime } from './step-clock.ts'
+export type { StepTimeOptions } from './step-clock.ts'
+export { StepScope, useBlockStepRange, useStepScope } from './step-scope.ts'
+export { useSessionSnapshot } from './session.ts'
+export type { StepScope as StepScopeValue } from './step-scope.ts'
+export { createSharedStates } from './shared-state.ts'
+export type { SharedStates } from './shared-state.ts'
+export { PmToolbar } from './panels.ts'
+export { NAVIGATION, OPERATIONS, PLAYBACK_CONTROL, PRODUCTION_PLAYBACK, STATUS, STEP_CLOCK, SYNC_TRANSPORTS, TIMED_CAPTIONS, TOOLBAR } from './contracts.ts'
+export type { TimedCaptions } from './contracts.ts'
+export { joinWindows } from './windows.ts'
+export { setSiteBase, siteBase } from './site.ts'
 export type { WindowChannel } from './windows.ts'
 export type {
   HostAdapter,
   Navigation,
   NavigationPosition,
   Operations,
+  PlaybackControl,
+  PlaybackLease,
+  ProductionPlayback,
   ReplayHandler,
   ServerClient,
   SharedStateScope,
   StatusProvider,
   StatusRegistry,
+  StepClock,
+  StepClockDriver,
   SyncPublish,
   SyncTransport,
   SyncTransports,
   Toolbar,
   ToolbarItem,
-  ToolbarPlace,
+  ToolbarPlacement,
   ToolbarSlot,
   ViewRole,
-} from './types.ts'
-export { localeOf } from '@lincyaw/kernel/contracts'
+} from './contracts.ts'
+export { localeOf } from '@lincyaw/kernel'
 export type { Locale } from '@lincyaw/kernel/contracts'
+export { codeLinesBox } from './code-lines-box.ts'
+export { createResidentWorker } from './resident-worker.ts'
+export type { ResidentWorker, ResidentWorkerFailure, ResidentWorkerOptions, ResidentWorkerOutcome } from './resident-worker.ts'
+
+export { createStore, useStore, observe } from './store.ts'
+export type { Store } from './store.ts'
+
+export { runtimeRevision } from "./runtime.ts"

package/src/locale.ts

@@ -1,42 +1,20 @@
-import { localeOf } from '@lincyaw/kernel/contracts'
+import { useEffect } from 'react'
+import { localeOf } from '@lincyaw/kernel'
 import type { Locale } from '@lincyaw/kernel/contracts'
-import type { ComputedRef } from 'vue'
-import { computed, getCurrentInstance, inject, shallowRef } from 'vue'
-import { HOST, installed } from './key.ts'
-
+import { installed } from './host-key.ts'
+import { createStore, useStore } from './store.ts'
 export type Catalog<T> = Record<Locale, T>
-
-const htmlLang = shallowRef<string>()
-let observed = false
-
-function observeHtmlLang(): void {
-  if (observed || typeof document === 'undefined') return
-  observed = true
-  const root = document.documentElement
-  htmlLang.value = root.lang
-  if (typeof MutationObserver !== 'undefined') {
-    new MutationObserver(() => {
-      htmlLang.value = root.lang
-    }).observe(root, { attributes: true, attributeFilter: ['lang'] })
-  }
+const language = createStore<string | undefined>(undefined)
+let observer: MutationObserver | undefined
+function observeLanguage() {
+  if (typeof document === 'undefined' || observer) return
+  language.set(document.documentElement.lang)
+  observer = new MutationObserver(() => language.set(document.documentElement.lang))
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] })
 }
-
-function resolveLocale(fallbackLang?: string): Locale {
-  observeHtmlLang()
-  const browser = typeof navigator === 'undefined' ? undefined : navigator.language
-  return localeOf(htmlLang.value || fallbackLang) ?? localeOf(browser) ?? 'en'
-}
-
 export function currentLocale(): Locale {
-  return resolveLocale(installed.adapter?.lang)
-}
-
-export function useLocale(): ComputedRef<Locale> {
-  const host = getCurrentInstance() ? inject(HOST, undefined) : undefined
-  return computed(() => resolveLocale(host?.lang))
-}
-
-export function useMessages<T>(catalog: Catalog<T>): ComputedRef<T> {
-  const locale = useLocale()
-  return computed(() => catalog[locale.value])
+  const lang = typeof document === 'undefined' ? undefined : document.documentElement.lang
+  return localeOf(lang || installed.adapter?.lang) ?? localeOf(typeof navigator === 'undefined' ? undefined : navigator.language) ?? 'en'
 }
+export function useLocale(): Locale { useStore(language); useEffect(observeLanguage, []); return currentLocale() }
+export function useMessages<T>(catalog: Catalog<T>): T { return catalog[useLocale()] }

package/src/messages.ts

@@ -8,44 +8,59 @@ export interface HostMessages {
   noPlugins: string
   status: Record<PluginStatus, string>
   because: string
+  unnamedPlugin: string
   componentError(component: string, message: string): string
   problems(count: number): string
   approvals(count: number): string
   approvalsTitle: string
   allow: string
   deny: string
+  answerFailed: string
+  close: string
   from(who: string): string
+  origins: Record<string, string>
+  otherOrigin: string
 }
 
 export const HOST_MESSAGES: Catalog<HostMessages> = {
   'zh-CN': {
     panels: '课堂与工具',
     startReport: '启动报告',
-    starting: '内核启动中……',
+    starting: '正在启动…',
     noPlugins: '没有注册插件。',
-    status: { started: '已启动', degraded: '已降级', disabled: '已禁用', failed: '启动失败' },
+    status: { started: '已启动', degraded: '部分可用', disabled: '已禁用', failed: '启动失败' },
     because: '：',
+    unnamedPlugin: '其他插件',
     componentError: (component, message) => `${component} 出错：${message}`,
     problems: count => `${count} 个问题`,
     approvals: count => `待确认 ${count}`,
     approvalsTitle: '待确认的操作',
     allow: '允许',
     deny: '拒绝',
-    from: who => `来自 ${who}`,
+    answerFailed: '无法发送答复。请重试。',
+    close: '关闭',
+    from: who => `来自${/^[A-Za-z0-9]/.test(who) ? ' ' : ''}${who}`,
+    origins: { 'presmium.mcp': '外部 AI 工具' },
+    otherOrigin: '其他程序',
   },
   'en': {
-    panels: 'Panels',
-    startReport: 'Start report',
-    starting: 'Starting the kernel…',
+    panels: 'Classroom and Tools',
+    startReport: 'Startup Report',
+    starting: 'Starting…',
     noPlugins: 'No plugins registered.',
-    status: { started: 'started', degraded: 'degraded', disabled: 'disabled', failed: 'failed to start' },
+    status: { started: 'Started', degraded: 'Partly available', disabled: 'Disabled', failed: 'Failed to start' },
     because: ': ',
+    unnamedPlugin: 'Other plugin',
     componentError: (component, message) => `${component} failed: ${message}`,
     problems: count => `${count} ${count === 1 ? 'problem' : 'problems'}`,
-    approvals: count => `Approvals ${count}`,
-    approvalsTitle: 'Operations to approve',
+    approvals: count => `Pending Approvals (${count})`,
+    approvalsTitle: 'Pending Approvals',
     allow: 'Allow',
     deny: 'Deny',
-    from: who => `from ${who}`,
+    answerFailed: 'Couldn’t send the answer. Please try again.',
+    close: 'Close',
+    from: who => `From ${who}`,
+    origins: { 'presmium.mcp': 'an external AI tool' },
+    otherOrigin: 'another program',
   },
 }

package/src/operations.ts

@@ -1,15 +1,15 @@
 import type { Operation, Unsubscribe } from '@lincyaw/kernel/contracts'
-import { ref } from 'vue'
-import type { Operations, ReplayHandler, StatusProvider, StatusRegistry } from './types.ts'
+import { createStore } from './store.ts'
+import type { Operations, ReplayHandler } from './contracts.ts'
 
 export function createOperations(): Operations {
   const listeners = new Set<(operation: Operation) => void>()
   const handlers = new Map<string, ReplayHandler>()
-  const replaying = ref(false)
+  const replaying = createStore(false)
   let unsettled = 0
   return {
     report(operation) {
-      if (replaying.value) return
+      if (replaying.getSnapshot()) return
       for (const listener of [...listeners]) {
         try {
           listener(operation)
@@ -34,14 +34,14 @@ export function createOperations(): Operations {
       const handler = handlers.get(operation.type)
       if (!handler) return false
       unsettled++
-      replaying.value = true
+      replaying.set(true)
       try {
         handler.apply(operation.data, seeking)
       } catch (error) {
         console.error(`[presmium] the replay of ${operation.type} failed`, error)
       } finally {
         setTimeout(() => {
-          if (--unsettled === 0) replaying.value = false
+          if (--unsettled === 0) replaying.set(false)
         }, 0)
       }
       return true
@@ -58,19 +58,3 @@ export function createOperations(): Operations {
     replaying,
   }
 }
-
-export function createStatusRegistry(onChange?: () => void): StatusRegistry {
-  const providers = new Map<string, StatusProvider>()
-  return {
-    register(provider) {
-      providers.set(provider.id, provider)
-      onChange?.()
-      return () => {
-        if (providers.get(provider.id) !== provider) return
-        providers.delete(provider.id)
-        onChange?.()
-      }
-    },
-    list: () => [...providers.values()],
-  }
-}

package/src/panels.ts

@@ -1,60 +1,28 @@
-import type { PresenterPanel, PresenterPanels, Unsubscribe } from '@lincyaw/kernel'
-import { currentLocale } from './locale.ts'
+import { createElement as h, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import type { ComponentType } from 'react'
+import { PRESENTER_PANELS } from '@lincyaw/kernel'
+import type { PresenterPanel } from '@lincyaw/kernel'
+import { TOOLBAR } from './contracts.ts'
+import type { ToolbarItem, ToolbarPlacement } from './contracts.ts'
+import { useService, useStartReport } from './host.ts'
+import { useMessages } from './locale.ts'
+import { componentErrors, componentErrorRevision } from './error-boundary.ts'
+import { useStore } from './store.ts'
 import { HOST_MESSAGES } from './messages.ts'
-import StartReportPanel from './StartReportPanel.vue'
-import type { Toolbar, ToolbarItem } from './types.ts'
-
-interface Item {
-  id: string
-  order?: number
+import { ToolbarPlacementContext } from './design/components.ts'
+export function PmToolbar({ filter = (item: ToolbarItem) => !item.slot || item.slot === 'tools' || item.slot === 'settings', placement = 'bar', className }: { className?: string, filter?: (item: ToolbarItem) => boolean, placement?: ToolbarPlacement }) {
+  const service = useService(TOOLBAR); const [items, setItems] = useState<ToolbarItem[]>([])
+  useEffect(() => { const update = () => setItems(service?.list() ?? []); update(); return service?.subscribe(update) }, [service])
+  return h(ToolbarPlacementContext.Provider, { value: placement }, h('span', { className: `pm-toolbar${className ? ` ${className}` : ''}`, 'data-placement': placement }, items.filter(filter).map(item => h(item.component as ComponentType, { key: item.id, 'data-toolbar-item': item.id } as any))))
 }
-
-interface Registry<T extends Item> {
-  register(item: T): Unsubscribe
-  list(): T[]
-  subscribe(listener: () => void): Unsubscribe
-}
-
-function createRegistry<T extends Item>(kind: string): Registry<T> {
-  const items = new Map<string, T>()
-  const listeners = new Set<() => void>()
-  const notify = () => listeners.forEach(listener => listener())
-  return {
-    register(item) {
-      if (items.has(item.id)) throw new Error(`${kind} ${item.id} is already registered`)
-      items.set(item.id, item)
-      notify()
-      return () => {
-        if (items.get(item.id) !== item) return
-        items.delete(item.id)
-        notify()
-      }
-    },
-    list() {
-      return [...items.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-    },
-    subscribe(listener) {
-      listeners.add(listener)
-      return () => {
-        listeners.delete(listener)
-      }
-    },
-  }
-}
-
-export function createPresenterPanels(): PresenterPanels {
-  const service = createRegistry<PresenterPanel>('presenter panel')
-  service.register({
-    id: 'presmium.core.start-report',
-    get title() {
-      return HOST_MESSAGES[currentLocale()].startReport
-    },
-    component: StartReportPanel,
-    order: -1,
-  })
-  return service
-}
-
-export function createToolbar(): Toolbar {
-  return createRegistry<ToolbarItem>('toolbar item')
+export function PmPresenterPanels({ to = 'body', docked = false }: { to?: string, docked?: boolean }) {
+  const t = useMessages(HOST_MESSAGES); const service = useService(PRESENTER_PANELS); const [panels, setPanels] = useState<PresenterPanel[]>([])
+  useEffect(() => { const update = () => setPanels(service?.list() ?? []); update(); return service?.subscribe(update) }, [service])
+  const [target, setTarget] = useState<Element | null>(null)
+  useEffect(() => { setTarget(document.querySelector(to)) }, [to])
+  const report = useStartReport(); useStore(componentErrorRevision)
+  const problems = (report?.plugins.filter(plugin => plugin.status === 'failed' || plugin.status === 'disabled').length ?? 0) + componentErrors().length
+  const content = service ? h('details', { className: `pm-presenter-panels${docked ? ' pm-presenter-panels--docked' : ''}` }, h('summary', {}, t.panels, problems ? h('span', { className: 'pm-presenter-panels__badge', title: t.problems(problems) }, problems) : null), panels.map(panel => h('section', { key: panel.id, 'data-panel': panel.id }, h('h3', {}, panel.title), h(panel.component as ComponentType)))) : null
+  return target ? createPortal(content, target) : null
 }

package/src/playback-control.ts

@@ -0,0 +1,67 @@
+import type { PlaybackControl, PlaybackLease } from './contracts.ts'
+
+interface Participant {
+  pause(): void
+  cancel(): void
+}
+
+/** Coordinates starts and cancellation without owning time, media or a second player. */
+export function createPlaybackControl(): PlaybackControl {
+  const participants = new Set<Participant>()
+  let gate: { authorize(signal: AbortSignal): Promise<void> } | undefined
+  const pause = () => {
+    for (const participant of [...participants]) {
+      participant.cancel()
+      participant.pause()
+    }
+  }
+  return {
+    pause,
+    setGate(authorize) {
+      pause()
+      const installed = { authorize }
+      gate = installed
+      return () => {
+        if (gate !== installed) return
+        gate = undefined
+        pause()
+      }
+    },
+    register(stop) {
+      let active: AbortController | undefined
+      let disposed = false
+      const cancel = () => { active?.abort(); active = undefined }
+      const participant = { pause: stop, cancel }
+      participants.add(participant)
+      const lease: PlaybackLease = {
+        async requestStart() {
+          cancel()
+          if (disposed) return false
+          for (const other of [...participants]) if (other !== participant) {
+            other.cancel()
+            other.pause()
+          }
+          const request = new AbortController()
+          active = request
+          const requestedGate = gate
+          try {
+            await requestedGate?.authorize(request.signal)
+            return !disposed && active === request && !request.signal.aborted && gate === requestedGate
+          } catch (error) {
+            if (request.signal.aborted || error instanceof Error && error.name === 'AbortError') return false
+            throw error
+          }
+        },
+        cancel,
+        dispose() {
+          if (disposed) return
+          disposed = true
+          cancel()
+          participants.delete(participant)
+          stop()
+        },
+      }
+      return lease
+    },
+  }
+}