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

package/src/step-clock.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+import type { Unsubscribe } from '@lincyaw/kernel/contracts'
+import type { Navigation, NavigationPosition, StepClock, StepClockDriver } from './contracts.ts'
+import { useHost, usePrefersReducedMotion } from './host.ts'
+import { createStore, observe, useStore } from './store.ts'
+interface StepChange { slide: number, step: number, at: number, forward: boolean }
+const driver = createStore<StepClockDriver | undefined>(undefined)
+const change = createStore<StepChange | undefined>(undefined)
+const now = createStore(0)
+const live = new Set<() => boolean>()
+let frame = 0
+const clockNow = () => typeof performance === 'undefined' ? 0 : performance.now()
+function tick() { frame = 0; now.set(clockNow()); if ([...live].some(running => running())) frame = requestAnimationFrame(tick) }
+function ensureTicking() { if (frame || typeof requestAnimationFrame === 'undefined') return; now.set(clockNow()); frame = requestAnimationFrame(tick) }
+function isForward(to: NavigationPosition, from: StepChange | undefined) { return !from || to.slide > from.slide || (to.slide === from.slide && to.step > from.step) }
+const nextFrame = () => new Promise<void>(done => typeof requestAnimationFrame === 'undefined' ? setTimeout(done, 0) : requestAnimationFrame(() => done()))
+function handOff(elapsed: number) { const at = change.getSnapshot(); if (at) change.set({ ...at, at: clockNow() - elapsed, forward: true }); ensureTicking() }
+export function createStepClock(navigation: Navigation): { clock: StepClock, stop: Unsubscribe } {
+  const pending = new Set<Promise<unknown>>()
+  let failure: { error: unknown } | undefined
+  let stopped = false
+  const rethrow = () => { const failed = failure; failure = undefined; if (failed) throw failed.error }
+  const stop = observe(navigation.position, position => { const before = change.getSnapshot(); if (before && before.slide === position.slide && before.step === position.step) return; change.set({ slide: position.slide, step: position.step, at: clockNow(), forward: isForward(position, before) }); ensureTicking() }, true)
+  let unfollow: Unsubscribe | undefined
+  const clock: StepClock = {
+    drive(next) {
+      unfollow?.(); driver.set(next)
+      unfollow = observe(next.elapsed, (now, before) => { if (now === undefined && before !== undefined) handOff(before) })
+      return () => { if (driver.getSnapshot() !== next) return; const last = next.elapsed.getSnapshot(); unfollow?.(); unfollow = undefined; driver.set(undefined); if (last !== undefined) handOff(last) }
+    },
+    wait(work) { if (!stopped) pending.add(work); void work.catch(error => { if (!stopped) failure ??= { error } }).finally(() => pending.delete(work)) },
+    async settled() { let waited = false; for (let round = 0; round < 100; round++) { if (stopped) return; if (!pending.size) { if (waited) { waited = false; await nextFrame() } if (!pending.size) return rethrow() } await Promise.allSettled([...pending]); waited = true } throw new Error('the page kept preparing its picture: settled() stopped waiting after 100 rounds') },
+  }
+  return { clock, stop() { if (stopped) return; stopped = true; stop(); unfollow?.(); driver.set(undefined); change.set(undefined); pending.clear(); failure = undefined } }
+}
+export interface StepTimeOptions { until?: number }
+const settle = (time: number, until: number | undefined) => until !== undefined && time >= until ? Infinity : Math.max(0, time)
+export function useStepTime(options: StepTimeOptions = {}): number {
+  const host = useHost(); const step = host.useStep(); const cursor = host.useCursor(); const reduced = usePrefersReducedMotion()
+  const at = useStore(change); const player = useStore(driver); const elapsed = useStore(player?.elapsed); const currentTime = useStore(now)
+  let time = Infinity
+  if (Number.isFinite(step) && at && at.step === step && at.slide === cursor.slide) {
+    if (player && elapsed !== undefined) time = reduced && !player.recording ? Infinity : settle(elapsed, options.until)
+    else if (!reduced && at.forward) time = settle(currentTime - at.at, options.until)
+  }
+  const renderedTime = useRef(time); renderedTime.current = time
+  useEffect(() => { const running = () => Number.isFinite(renderedTime.current) && driver.getSnapshot()?.elapsed.getSnapshot() === undefined; live.add(running); ensureTicking(); return () => { live.delete(running) } }, [step, cursor.slide, player, options.until, reduced])
+  return time
+}

package/src/step-scope.ts

@@ -0,0 +1,38 @@
+import { createContext, createElement, useContext, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import type { StepRange } from '@lincyaw/kernel/contracts'
+import type { IRBlock } from '@lincyaw/kernel'
+type States = NonNullable<IRBlock['stepStates']>
+interface Scope extends StepRange { states?: States, current?: number, localPreview?: boolean }
+export const STEP_SCOPE = createContext<Scope>({ from: 0 })
+const stateAt = (states: States, step: number) => states[Math.max(0, Math.min(states.length - 1, Number.isFinite(step) ? Math.floor(step) : states.length - 1))]
+export function StepScope({ at, until, states, step, localPreview, children }: { at: number, until?: number, states?: States, step?: number, localPreview?: boolean, children?: ReactNode }) {
+  const parent = useContext(STEP_SCOPE)
+  const end = until === undefined ? parent.to : parent.to === undefined ? until : Math.min(until, parent.to)
+  const value = useMemo(() => ({ from: states ? at : Math.max(at, parent.from), to: end, states, current: step, localPreview: localPreview ?? parent.localPreview }), [at, states, step, localPreview, parent.localPreview, parent.from, end])
+  return createElement(STEP_SCOPE.Provider, { value }, children)
+}
+export interface StepScope {
+  readonly at: number
+  readonly state?: string
+  readonly parameters?: Record<string, unknown>
+  /** A standalone reading widget keeps its local controls while selecting finite teaching steps. */
+  readonly localPreview?: boolean
+  localStepAt(globalStep: number): number
+  /** First authored visible occurrence; -1 when this local state is not in the section. */
+  step(k: number): number
+  /** First authored visible snapshot of an implementation's local step. */
+  stateAt(k: number): Pick<NonNullable<IRBlock['stepStates']>[number], 'state' | 'parameters'> | undefined
+}
+export function useStepScope(): StepScope {
+  const { from, states, current, localPreview } = useContext(STEP_SCOPE)
+  const selected = states && stateAt(states, current ?? Infinity)
+  return { at: from, state: selected?.state, parameters: selected?.parameters, localPreview,
+    localStepAt: k => !Number.isFinite(k) ? k : states ? stateAt(states, k)?.localStep ?? 0 : k - from,
+    step: k => states ? states.findIndex(value => value.visible && value.localStep === k) : from + k,
+    stateAt: k => states?.find(value => value.visible && value.localStep === k) }
+}
+export function useBlockStepRange(): StepRange {
+  const { from, to, states } = useContext(STEP_SCOPE)
+  return { from: 0, to: states ? Math.max(0, ...states.map(state => state.localStep)) : to === undefined ? undefined : to - from }
+}

package/src/store.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import type { Unsubscribe } from '@lincyaw/kernel/contracts'
+
+/** Framework-independent, synchronous state shared by playback, the viewer and React bindings. */
+export interface Store<T> {
+  getSnapshot(): T
+  subscribe(listener: () => void): Unsubscribe
+  set: Dispatch<SetStateAction<T>>
+}
+export function createStore<T>(initial: T): Store<T> {
+  let value = initial
+  const listeners = new Set<() => void>()
+  return {
+    getSnapshot: () => value,
+    subscribe(listener) { listeners.add(listener); return () => { listeners.delete(listener) } },
+    set(next) {
+      const changed = typeof next === 'function' ? (next as (before: T) => T)(value) : next
+      if (Object.is(changed, value)) return
+      value = changed
+      for (const listener of [...listeners]) listener()
+    },
+  }
+}
+const idleSubscribe = () => () => {}
+export function useStore<T>(store: Store<T> | undefined, fallback?: T): T {
+  return useSyncExternalStore(store?.subscribe ?? idleSubscribe, store?.getSnapshot ?? (() => fallback as T), store?.getSnapshot ?? (() => fallback as T))
+}
+export function observe<T>(store: Store<T>, listener: (value: T, before: T) => void, immediate = false): Unsubscribe {
+  let before = store.getSnapshot()
+  if (immediate) listener(before, before)
+  return store.subscribe(() => { const value = store.getSnapshot(); const previous = before; before = value; listener(value, previous) })
+}

package/src/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css' {}

package/src/windows.ts

@@ -1,3 +1,5 @@
+import { siteBase } from './site.ts'
+
 type Message = { join: true } | { value: unknown }
 
 export interface WindowChannel {
@@ -5,8 +7,8 @@ export interface WindowChannel {
   close(): void
 }
 
-export function deckChannel(name: string): string {
-  return `${name} @ ${import.meta.env?.BASE_URL ?? '/'}`
+function deckChannel(name: string): string {
+  return `${name} @ ${siteBase()}`
 }
 
 export function joinWindows(name: string, receive: (value: unknown) => void, known: () => unknown): WindowChannel | undefined {

package/src/PresenterPanels.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { PRESENTER_PANELS } from '@lincyaw/kernel'
-import type { PresenterPanel } from '@lincyaw/kernel'
-import { computed, shallowRef, watchEffect } from 'vue'
-import { componentErrors } from './boundary.ts'
-import { useService, useStartReport } from './host.ts'
-import { useMessages } from './locale.ts'
-import { HOST_MESSAGES } from './messages.ts'
-
-const props = withDefaults(defineProps<{
-  to?: string
-  docked?: boolean
-}>(), { to: 'body', docked: false })
-
-const t = useMessages(HOST_MESSAGES)
-const service = useService(PRESENTER_PANELS)
-const report = useStartReport()
-const panels = shallowRef<PresenterPanel[]>([])
-
-watchEffect((onCleanup) => {
-  const registry = service.value
-  if (!registry) return
-  const update = () => {
-    panels.value = registry.list()
-  }
-  update()
-  onCleanup(registry.subscribe(update))
-})
-
-const problems = computed(() => {
-  const plugins = report.value?.plugins.filter(p => p.status === 'disabled' || p.status === 'failed').length ?? 0
-  return plugins + componentErrors().length
-})
-</script>
-
-<template>
-  <Teleport :to="props.to" defer>
-    <details v-if="service" class="pm-presenter-panels" :class="{ 'pm-presenter-panels--docked': props.docked }">
-      <summary>
-        {{ t.panels }} <span v-if="problems > 0" class="pm-presenter-panels__badge" :title="t.problems(problems)">{{ problems }}</span>
-      </summary>
-      <section v-for="panel in panels" :key="panel.id" :data-panel="panel.id">
-        <h3>{{ panel.title }}</h3>
-        <component :is="panel.component" />
-      </section>
-    </details>
-  </Teleport>
-</template>
-
-<style scoped>
-.pm-presenter-panels {
-  position: fixed;
-  right: 0.5rem;
-  bottom: var(--pm-presenter-panels-bottom, 4.25rem);
-  z-index: var(--pm-presenter-panels-z, 100);
-  max-width: min(24rem, calc(25vw - 1rem));
-  max-height: 50vh;
-  overflow: auto;
-  padding: 0.25rem 0.75rem;
-  border: 1px solid var(--pm-color-line);
-  border-radius: var(--pm-radius-small);
-  background: var(--pm-color-surface);
-  color: var(--pm-color-ink);
-  font-size: 0.8rem;
-  box-shadow: var(--pm-shadow-float);
-}
-.pm-presenter-panels--docked {
-  position: static;
-  max-width: none;
-  max-height: none;
-  margin-top: 1rem;
-  box-shadow: none;
-}
-summary {
-  cursor: pointer;
-  font-weight: 600;
-}
-.pm-presenter-panels__badge {
-  display: inline-block;
-  min-width: 1.4em;
-  padding: 0 0.3em;
-  border-radius: var(--pm-radius-pill);
-  background: var(--pm-color-danger);
-  color: var(--pm-color-surface);
-  text-align: center;
-}
-h3 {
-  margin: 0.5rem 0 0.25rem;
-  font-size: 0.85rem;
-}
-</style>

package/src/StartReportPanel.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { componentErrors } from './boundary.ts'
-import { useStartReport } from './host.ts'
-import { useMessages } from './locale.ts'
-import { HOST_MESSAGES } from './messages.ts'
-
-const t = useMessages(HOST_MESSAGES)
-const report = useStartReport()
-const errors = computed(componentErrors)
-</script>
-
-<template>
-  <p v-if="!report">
-    {{ t.starting }}
-  </p>
-  <p v-else-if="report.plugins.length === 0">
-    {{ t.noPlugins }}
-  </p>
-  <ul v-else class="pm-start-report">
-    <li v-for="plugin in report.plugins" :key="plugin.id" :data-plugin="plugin.id" :data-status="plugin.status">
-      <code>{{ plugin.id }}</code> {{ t.status[plugin.status] }}<span v-if="plugin.reason">{{ t.because }}{{ plugin.reason }}</span>
-    </li>
-  </ul>
-  <ul v-if="errors.length > 0" class="pm-component-errors">
-    <li v-for="error in errors" :key="`${error.component}:${error.message}`" :data-component="error.component">
-      {{ t.componentError(error.component, error.message) }}
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-ul {
-  margin: 0;
-  padding-left: 1.2em;
-}
-li[data-status='disabled'],
-li[data-status='failed'],
-.pm-component-errors li {
-  color: #dc2626;
-}
-li[data-status='degraded'] {
-  color: #d97706;
-}
-</style>

package/src/Toolbar.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { onMounted, ref, shallowRef, watchEffect } from 'vue'
-import { provideToolbarPlace } from './design/components.ts'
-import { useService } from './host.ts'
-import { TOOLBAR } from './types.ts'
-import type { ToolbarItem, ToolbarPlace } from './types.ts'
-
-const props = defineProps({
-  filter: { type: Function as PropType<(item: ToolbarItem) => boolean>, default: (item: ToolbarItem) => !item.slot || item.slot === 'tools' || item.slot === 'settings' },
-  place: { type: String as PropType<ToolbarPlace>, default: 'bar' },
-})
-
-provideToolbarPlace(props.place)
-const service = useService(TOOLBAR)
-const items = shallowRef<ToolbarItem[]>([])
-const mounted = ref(false)
-onMounted(() => {
-  mounted.value = true
-})
-
-watchEffect((onCleanup) => {
-  const registry = service.value
-  if (!registry) return
-  const update = () => {
-    items.value = registry.list().filter(props.filter)
-  }
-  update()
-  onCleanup(registry.subscribe(update))
-})
-</script>
-
-<template>
-  <span v-if="mounted && items.length" class="pm-toolbar" :data-place="place">
-    <component :is="item.component" v-for="item in items" :key="item.id" :data-toolbar-item="item.id" />
-  </span>
-</template>
-
-<style scoped>
-.pm-toolbar {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.pm-toolbar[data-place='status'] {
-  gap: 1.125rem;
-}
-</style>

package/src/boundary.ts

@@ -1,56 +0,0 @@
-import { errorMessage } from '@lincyaw/kernel'
-import { defineComponent, h, onBeforeUnmount, onErrorCaptured, shallowRef, watch } from 'vue'
-import { useMessages } from './locale.ts'
-import { HOST_MESSAGES } from './messages.ts'
-
-export interface ComponentError {
-  component: string
-  message: string
-}
-
-const caughtErrors = shallowRef<ReadonlyMap<object, ComponentError>>(new Map())
-
-export function componentErrors(): readonly ComponentError[] {
-  const errors: ComponentError[] = []
-  for (const error of caughtErrors.value.values()) {
-    if (!errors.some(e => e.component === error.component && e.message === error.message)) errors.push(error)
-  }
-  return errors
-}
-
-function hold(owner: object, error: ComponentError | undefined): void {
-  if (!error && !caughtErrors.value.has(owner)) return
-  const next = new Map(caughtErrors.value)
-  if (error) next.set(owner, error)
-  else next.delete(owner)
-  caughtErrors.value = next
-}
-
-export const PmBoundary = defineComponent({
-  name: 'PmBoundary',
-  props: {
-    name: { type: String, default: 'component' },
-    resetKey: { type: [String, Number], default: undefined },
-  },
-  setup(props, { slots }) {
-    const t = useMessages(HOST_MESSAGES)
-    const owner = {}
-    const failed = shallowRef<ComponentError>()
-    onErrorCaptured((error) => {
-      failed.value = { component: props.name, message: errorMessage(error) }
-      hold(owner, failed.value)
-      console.error(`[presmium] ${props.name} failed`, error)
-      return false
-    })
-    watch(() => props.resetKey, () => {
-      failed.value = undefined
-      hold(owner, undefined)
-    })
-    onBeforeUnmount(() => hold(owner, undefined))
-    return () => failed.value
-      ? h('div', { 'class': 'pm-boundary-error', 'role': 'alert', 'data-pm-error': failed.value.component }, [
-          t.value.componentError(failed.value.component, failed.value.message),
-        ])
-      : slots.default?.()
-  },
-})

package/src/design/theme.ts

@@ -1,32 +0,0 @@
-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/kernel.ts

@@ -1,131 +0,0 @@
-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

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

package/src/scope.ts

@@ -1,29 +0,0 @@
-import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, defineComponent, inject, provide, ref, toValue } from 'vue'
-
-const STEP_SCOPE: InjectionKey<Readonly<Ref<number>>> = Symbol('presmium.stepScope')
-
-const NO_SCOPE = ref(0)
-
-export function provideStepScope(at: MaybeRefOrGetter<number>): void {
-  provide(STEP_SCOPE, computed(() => toValue(at)))
-}
-
-export interface StepScope {
-  readonly at: Readonly<Ref<number>>
-  step(k: number): number
-}
-
-export function useStepScope(): StepScope {
-  const at = inject(STEP_SCOPE, NO_SCOPE)
-  return { at, step: k => at.value + k }
-}
-
-export const PmStepScope = defineComponent({
-  name: 'PmStepScope',
-  props: { at: { type: Number, default: 0 } },
-  setup(props, { slots }) {
-    provideStepScope(() => props.at)
-    return () => slots.default?.()
-  },
-})

package/src/shared.ts

@@ -1,85 +0,0 @@
-import type { Ref } from 'vue'
-import { effectScope, ref, toRaw, watch } from 'vue'
-import type { SharedStateScope, SyncPublish, SyncTransport, SyncTransports } from './types.ts'
-import { joinWindows } from './windows.ts'
-
-interface Channel {
-  name: string
-  receive(patch: Record<string, unknown>): void
-  value(): unknown
-  publishers: Map<SyncTransport, SyncPublish>
-}
-
-export interface SharedStates {
-  sharedState<T>(key: string, initial: T, scope: SharedStateScope): Ref<T>
-  transports: SyncTransports
-}
-
-const plain = (value: unknown): unknown => value === undefined ? undefined : JSON.parse(JSON.stringify(toRaw(value)))
-
-export function createSharedStates(deck: string): SharedStates {
-  const states = new Map<string, Ref<unknown>>()
-  const channels = new Map<string, Channel>()
-  const transports = new Set<SyncTransport>()
-  const detached = effectScope(true)
-
-  const connect = (transport: SyncTransport, channel: Channel) => {
-    const publish = transport.connect(channel.name, channel.receive, { value: channel.value() }, false)
-    if (publish) channel.publishers.set(transport, publish)
-  }
-
-  function create(id: string, initial: unknown, scope: SharedStateScope): Ref<unknown> {
-    const state = ref(plain(initial))
-    if (scope === 'view') return state
-    const name = `presmium.shared:${deck}:${id}`
-    let from: 'window' | 'remote' | undefined
-    let changed = false
-    const apply = (value: unknown, source: 'window' | 'remote') => {
-      from = source
-      state.value = value
-      from = undefined
-    }
-    const windows = joinWindows(name, value => apply(value, 'window'), () => changed ? plain(state.value) : undefined)
-    const channel: Channel = {
-      name,
-      receive(patch) {
-        if ('value' in patch) apply(patch.value, 'remote')
-      },
-      value: () => plain(state.value),
-      publishers: new Map(),
-    }
-    watch(state, (value) => {
-      changed = true
-      const data = plain(value)
-      if (from === undefined) windows?.send(data)
-      channel.publishers.forEach(publish => publish({ value: data }, from !== undefined))
-    }, { deep: true, flush: 'sync' })
-    if (scope === 'remote') {
-      channels.set(id, channel)
-      transports.forEach(transport => connect(transport, channel))
-    }
-    return state
-  }
-
-  return {
-    sharedState<T>(key: string, initial: T, scope: SharedStateScope): Ref<T> {
-      const id = `${scope}:${key}`
-      let state = states.get(id)
-      if (!state) {
-        state = detached.run(() => create(id, initial, scope))!
-        states.set(id, state)
-      }
-      return state as Ref<T>
-    },
-    transports: {
-      add(transport) {
-        transports.add(transport)
-        channels.forEach(channel => connect(transport, channel))
-        return () => {
-          transports.delete(transport)
-          channels.forEach(channel => channel.publishers.delete(transport))
-        }
-      },
-    },
-  }
-}