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

package/src/domain/messages.ts

@@ -3,40 +3,52 @@ import type { Locale } from '@lincyaw/kernel/contracts'
 const zhStep = (step: number, steps: number) => `第 ${step + 1} 步，共 ${steps + 1} 步`
 
 const zh = {
-  views: { document: '文档', scrolly: '滚动叙事', present: '放映', presenter: '演讲者' },
+  contentRoles: { visual: '上屏内容', narration: '讲稿 · 字幕', reading: '仅供阅读' },
+  views: { document: '网页', scrolly: '滚动叙事', present: '放映', presenter: '演示者视图' },
   present: {
     region: '放映',
+    jumpStep: '跳转步骤',
+    captions: '字幕（按步骤）',
+    captionsHint: '字幕随步骤切换',
+    noCaptions: '本步没有讲稿',
+    step: (step: number) => `第 ${step} 步`,
     counter: (index: number, total: number, step: number, steps: number) => `${index} / ${total}${steps > 0 ? ` · ${zhStep(step, steps)}` : ''}`,
     prev: '上一步',
     next: '下一步',
     overview: '总览',
-    presenter: '演讲者窗口',
+    presenter: '演示者视图',
+    refresh: '更新',
     fullscreen: '全屏',
-    exit: '退出放映',
+    exitFullscreen: '退出全屏',
+    exit: '结束放映',
   },
   presenter: {
     step: (step: number, steps: number) => (steps > 0 ? zhStep(step, steps) : ''),
     timer: '计时',
     restart: '重新计时',
-    notes: '讲解',
-    noNotes: '本节没有讲解',
+    notes: '讲稿',
+    noNotes: '本页没有讲稿',
     upcoming: '下一步',
     end: '已到结尾',
-    nextSection: (title: string) => `下一节：${title}`,
+    nextSection: (title: string) => `下一页：${title}`,
     nextStep: (step: number) => `第 ${step + 1} 步`,
   },
   section: {
     anchor: (title: string) => `链接到“${title}”`,
-    openSource: '在编辑器中打开源码',
-    sourceTitle: (where: string) => `${where}（Alt+单击任一块，打开该块的源码）`,
+    openSource: '在编辑器中打开',
+    sourceTitle: (where: string) => `${where}（按住 Alt 单击任一内容块，在编辑器中打开）`,
   },
   code: {
-    executorFailed: (id: string, message: string) => `执行器 ${id} 出错：${message}`,
+    actions: '代码操作',
+    executorFailed: (_id: string, message: string) => `无法运行代码：${message}`,
     run: '运行',
-    rerun: '重跑',
-    running: '运行中…',
-    unavailable: '执行服务不可用',
-    resetSession: '重置会话',
+    rerun: '重新运行',
+    running: '正在运行…',
+    unavailable: '此处无法运行代码',
+    resetRunSession: '重置会话',
+    edit: '编辑代码',
+    doneEditing: '完成编辑',
+    revert: '还原代码',
   },
   markdown: {
     admonitions: {
@@ -53,46 +65,58 @@ const zh = {
     } as Record<string, string>,
     footnote: (label: string) => `脚注 ${label}`,
   },
-  missingComponent: (name: string) => `未注册的组件 ${name}`,
+  missingComponent: (_name: string) => '无法显示此内容块',
 }
 
 export type Messages = typeof zh
 
 const en: Messages = {
-  views: { document: 'Document', scrolly: 'Scrollytelling', present: 'Present', presenter: 'Presenter' },
+  contentRoles: { visual: 'On screen', narration: 'Script · Captions', reading: 'Reading only' },
+  views: { document: 'Web', scrolly: 'Scrollytelling', present: 'Present', presenter: 'Presenter View' },
   present: {
     region: 'Presentation',
+    jumpStep: 'Jump to Step',
+    captions: 'Captions by step',
+    captionsHint: 'Captions follow the selected step',
+    noCaptions: 'No script for this step',
+    step: step => `Step ${step}`,
     counter: (index, total, step, steps) => `${index} / ${total}${steps > 0 ? ` · step ${step + 1} of ${steps + 1}` : ''}`,
     prev: 'Previous',
     next: 'Next',
     overview: 'Overview',
-    presenter: 'Presenter window',
-    fullscreen: 'Full screen',
-    exit: 'Exit presentation',
+    presenter: 'Presenter View',
+    refresh: 'Update',
+    fullscreen: 'Full Screen',
+    exitFullscreen: 'Exit Full Screen',
+    exit: 'End Show',
   },
   presenter: {
     step: (step, steps) => (steps > 0 ? `Step ${step + 1} of ${steps + 1}` : ''),
     timer: 'Timer',
-    restart: 'Restart timer',
-    notes: 'Narration',
-    noNotes: 'No narration in this section',
+    restart: 'Restart Timer',
+    notes: 'Script',
+    noNotes: 'No script on this page',
     upcoming: 'Next',
     end: 'End of the document',
-    nextSection: title => `Next section: ${title}`,
+    nextSection: title => `Next page: ${title}`,
     nextStep: step => `Step ${step + 1}`,
   },
   section: {
-    anchor: title => `Link to "${title}"`,
-    openSource: 'Open the source in the editor',
-    sourceTitle: where => `${where} (Alt+click a block to open its source)`,
+    anchor: title => `Link to “${title}”`,
+    openSource: 'Open in Editor',
+    sourceTitle: where => `${where} (Alt+click any block to open it in the editor)`,
   },
   code: {
-    executorFailed: (id, message) => `Executor ${id} failed: ${message}`,
+    actions: 'Code actions',
+    executorFailed: (_id, message) => `Couldn’t run the code: ${message}`,
     run: 'Run',
-    rerun: 'Run again',
+    rerun: 'Run Again',
     running: 'Running…',
-    unavailable: 'Execution service unavailable',
-    resetSession: 'Reset session',
+    unavailable: 'Code can’t run here',
+    resetRunSession: 'Reset Session',
+    edit: 'Edit Code',
+    doneEditing: 'Done Editing',
+    revert: 'Restore Code',
   },
   markdown: {
     admonitions: {
@@ -109,7 +133,7 @@ const en: Messages = {
     },
     footnote: label => `Footnote ${label}`,
   },
-  missingComponent: name => `Unregistered component ${name}`,
+  missingComponent: () => 'This block can’t be shown',
 }
 
 export const VIEWER_MESSAGES: Record<Locale, Messages> = { 'zh-CN': zh, 'en': en }

package/src/domain/origin.ts

@@ -1,42 +1,36 @@
-import type { CodeNode, ResolutionStatus, RunResult } from '@lincyaw/kernel'
+import type { CodeNode, ResolutionStatus } from '@lincyaw/kernel'
 import type { Locale } from '@lincyaw/kernel/contracts'
 
 const zh = {
-  workingTree: '工作区',
-  status: { moved: '已移动', fuzzy: '待确认', lost: '已失效' } as Partial<Record<ResolutionStatus, string>>,
+  workingTree: '当前代码',
+  status: { moved: '已移动', fuzzy: '待核对', lost: '已失效' } as Partial<Record<ResolutionStatus, string>>,
   statusTitle: {
-    moved: '引用的代码在文件中移动了位置，显示的是移动后的代码',
-    fuzzy: '引用的代码有改动，找到的位置有待确认；运行 presmium check 查看',
-    lost: '找不到引用的代码；运行 presmium check 查看',
+    moved: '引用的代码在文件中移动了位置，显示的是移动后的代码。',
+    fuzzy: '引用的代码有改动，找到的位置有待确认；请运行 presmium check 查看。',
+    lost: '找不到引用的代码。请运行 presmium check 查看原因。',
   } as Partial<Record<ResolutionStatus, string>>,
   drifted: '已漂移',
-  driftedTitle: '工作区中的代码已改变，运行 presmium check 查看差异',
+  driftedTitle: '当前代码已改变。请运行 presmium check 查看差异。',
   synced: '已锁定',
-  syncedTitle: '锁定的代码与工作区一致',
+  syncedTitle: '锁定的代码与当前代码一致',
   openFile: (file: string) => `在仓库中打开 ${file}`,
-  timedOut: '超时',
-  exitCode: (code: number) => `退出码 ${code}`,
-  recorded: '预录输出',
 }
 
 export type OriginMessages = typeof zh
 
 const en: OriginMessages = {
-  workingTree: 'working tree',
-  status: { moved: 'Moved', fuzzy: 'Unconfirmed', lost: 'Lost' },
+  workingTree: 'Current Code',
+  status: { moved: 'Moved', fuzzy: 'Unverified', lost: 'Lost' },
   statusTitle: {
-    moved: 'The referenced code moved in its file; this is the code where it is now',
-    fuzzy: 'The referenced code changed and the place found is uncertain; run presmium check to see it',
-    lost: 'The referenced code is no longer found; run presmium check to see why',
+    moved: 'The referenced code moved in its file; this is the code where it is now.',
+    fuzzy: 'The referenced code changed and the place found is uncertain; run presmium check to see it.',
+    lost: 'The referenced code is no longer found; run presmium check to see why.',
   },
   drifted: 'Drifted',
-  driftedTitle: 'The code changed in the working tree; run presmium check to see the difference',
+  driftedTitle: 'The current code changed; run presmium check to see the difference.',
   synced: 'Pinned',
-  syncedTitle: 'The pinned code matches the working tree',
-  openFile: file => `Open ${file} in the repository`,
-  timedOut: 'Timed out',
-  exitCode: code => `Exit code ${code}`,
-  recorded: 'Recorded output',
+  syncedTitle: 'The pinned code matches the current code',
+  openFile: file => `Open ${file} in the Repository`,
 }
 
 export const ORIGIN_MESSAGES: Record<Locale, OriginMessages> = { 'zh-CN': zh, 'en': en }
@@ -60,7 +54,7 @@ function lines(start: number, end = start): string {
   return end > start ? `${start}-${end}` : `${start}`
 }
 
-export function originParts(node: CodeNode, shown: number | undefined, locale: Locale): OriginBar | undefined {
+export function originBar(node: CodeNode, shown: number | undefined, locale: Locale): OriginBar | undefined {
   const t = ORIGIN_MESSAGES[locale]
   const { origin } = node
   if (!origin) return node.title ? { parts: [{ kind: 'file', text: node.title }] } : undefined
@@ -82,12 +76,3 @@ export function originParts(node: CodeNode, shown: number | undefined, locale: L
   }
   return { anchor: origin.anchor, parts }
 }
-
-export function outputNotes(run: RunResult, locale: Locale): string[] {
-  const t = ORIGIN_MESSAGES[locale]
-  return [
-    run.timedOut ? t.timedOut : '',
-    run.exitCode !== null && run.exitCode !== 0 ? t.exitCode(run.exitCode) : '',
-    run.source === 'recorded' ? t.recorded : '',
-  ].filter(Boolean)
-}

package/src/domain/outputs.ts

@@ -0,0 +1,27 @@
+import type { RunResult } from '@lincyaw/kernel'
+import type { Locale } from '@lincyaw/kernel/contracts'
+
+const zh = {
+  timedOut: '超时',
+  exitCode: (code: number) => `退出码 ${code}`,
+  recorded: '预录输出',
+}
+
+export type OutputMessages = typeof zh
+
+const en: OutputMessages = {
+  timedOut: 'Timed out',
+  exitCode: code => `Exit code ${code}`,
+  recorded: 'Recorded output',
+}
+
+export const OUTPUT_MESSAGES: Record<Locale, OutputMessages> = { 'zh-CN': zh, 'en': en }
+
+export function outputNotes(run: RunResult, locale: Locale): string[] {
+  const t = OUTPUT_MESSAGES[locale]
+  return [
+    run.timedOut ? t.timedOut : '',
+    run.exitCode !== null && run.exitCode !== 0 ? t.exitCode(run.exitCode) : '',
+    run.source === 'recorded' ? t.recorded : '',
+  ].filter(Boolean)
+}

package/src/domain/steps.ts

@@ -5,6 +5,7 @@ export const FINAL_STEP = Number.POSITIVE_INFINITY
 export interface Position {
   section: string
   step: number
+  boundary?: 'start' | 'end'
 }
 
 export function itemVisible(block: IRBlock, item: number, step: number): boolean {
@@ -19,7 +20,7 @@ export function clampPosition(doc: IRDocument, position: Position): Position {
   const section = doc.sections.find(s => s.id === position.section) ?? doc.sections[0]
   if (!section) return position
   const step = Number.isFinite(position.step) ? Math.min(Math.max(Math.round(position.step), 0), section.steps) : section.steps
-  return { section: section.id, step }
+  return { section: section.id, step, ...position.boundary ? { boundary: position.boundary } : {} }
 }
 
 export function keepPosition(prev: IRDocument, next: IRDocument, position: Position): Position {

package/src/block.ts

@@ -1,122 +0,0 @@
-import { PmBoundary, provideStepScope } from '@lincyaw/host'
-import { blockVisible, fnv1a64 } from '@lincyaw/kernel'
-import type { ComponentNode, IRBlock, IRSection } from '@lincyaw/kernel'
-import type { InjectionKey, PropType, VNode } from 'vue'
-import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, shallowRef } from 'vue'
-import { BLOCK_CLASS, trackClicks } from './clicks.ts'
-import { CodeBlockView } from './code.ts'
-import { IN_COMPONENT } from './context.ts'
-import { FINAL_STEP } from './domain/index.ts'
-import { messages } from './i18n.ts'
-import { hastToVNodes, markdownToHast, MarkdownView } from './markdown.ts'
-import { getComponent, getNodeRenderer } from './registry.ts'
-import { PmMermaid } from './rich.ts'
-import { VIEWER } from './viewer.ts'
-
-const blockProps = {
-  block: { type: Object as PropType<IRBlock>, required: true },
-  section: { type: Object as PropType<IRSection>, required: true },
-  step: { type: Number, required: true },
-  expanded: Boolean,
-} as const
-
-const COMPONENT_NODE: InjectionKey<{ node: ComponentNode, section: string }> = Symbol('presmium.viewer.componentNode')
-
-function fallbackOf(node: ComponentNode, section: string): VNode[] {
-  return node.fallback ? hastToVNodes(markdownToHast(node.fallback, section).children, {}) as VNode[] : []
-}
-
-export const PmComponentFallback = defineComponent({
-  name: 'PmComponentFallback',
-  setup() {
-    const current = inject(COMPONENT_NODE, undefined)
-    return () => (current ? fallbackOf(current.node, current.section) : null)
-  },
-})
-
-const ComponentView = defineComponent({
-  name: 'PmComponentNode',
-  props: blockProps,
-  setup(props) {
-    provide(IN_COMPONENT, true)
-    provide(COMPONENT_NODE, {
-      get node() {
-        return props.block.node as ComponentNode
-      },
-      get section() {
-        return props.section.id
-      },
-    })
-    const content = computed(() => {
-      const { props: values, children } = props.block.node as ComponentNode
-      return fnv1a64(JSON.stringify([values, children ?? []]))
-    })
-    return () => {
-      const node = props.block.node as ComponentNode
-      const component = getComponent(node.name)
-      if (!component) {
-        const fallback = fallbackOf(node, props.section.id)
-        return h('div', { 'class': 'pm-component-missing', 'data-component': node.name }, fallback.length ? fallback : messages().missingComponent(node.name))
-      }
-      const children = node.children?.length
-        ? { default: () => node.children!.map(child => h(BlockView, { key: child.id, block: child, section: props.section, step: props.step, expanded: props.expanded })) }
-        : undefined
-      const resetKey = props.expanded ? content.value : `${content.value}@${props.step}`
-      return h(PmBoundary, { name: node.name, resetKey }, () => h(component, { ...node.props }, children))
-    }
-  },
-})
-
-function content(props: { block: IRBlock, section: IRSection, step: number, expanded: boolean }): VNode {
-  const { node } = props.block
-  const custom = (node.type === 'component' && getNodeRenderer(node.name))
-    || (node.type === 'code' && getNodeRenderer(`code:${node.lang}`))
-    || getNodeRenderer(node.type)
-  if (custom) return h(custom, props)
-  switch (node.type) {
-    case 'markdown': return h(MarkdownView, { block: props.block, step: props.step, expanded: props.expanded, prefix: props.section.id })
-    case 'code': return node.lang === 'mermaid'
-      ? h(PmMermaid, { code: node.value })
-      : h(CodeBlockView, { block: props.block, step: props.step, expanded: props.expanded })
-    case 'component': return h(ComponentView, props)
-  }
-}
-
-export function isOverlay(block: IRBlock): boolean {
-  return block.node.type === 'component' && block.node.layer === 'overlay'
-}
-
-export const BlockView = defineComponent({
-  name: 'PmBlock',
-  props: blockProps,
-  setup(props) {
-    const viewer = inject(VIEWER, undefined)
-    const el = shallowRef<HTMLElement>()
-    provideStepScope(() => props.block.at)
-    const clicks = computed(() => (props.expanded ? FINAL_STEP : props.step))
-    let stop: (() => void) | undefined
-    onMounted(() => {
-      if (el.value) stop = trackClicks(el.value, clicks)
-    })
-    onBeforeUnmount(() => stop?.())
-    const openSource = (event: MouseEvent) => {
-      if (!event.altKey || !viewer?.options.openSource) return
-      event.preventDefault()
-      event.stopPropagation()
-      viewer.options.openSource(props.block.source)
-    }
-    return () => {
-      const { block } = props
-      const visible = props.expanded || blockVisible(block, props.step)
-      return h('div', {
-        'ref': el,
-        'class': [BLOCK_CLASS, `pm-block--${block.role}`, `pm-block--${block.node.type}`, { 'pm-step-range': block.until !== undefined, 'pm-block--overlay': isOverlay(block), 'pm-hidden': !visible }],
-        'data-block': block.id,
-        'data-at': block.at,
-        'data-component': block.node.type === 'component' ? block.node.name : undefined,
-        'aria-hidden': visible ? undefined : 'true',
-        'onClick': viewer?.options.openSource ? openSource : undefined,
-      }, [content({ block, section: props.section, step: props.step, expanded: props.expanded })])
-    }
-  },
-})

package/src/cards.ts

@@ -1,130 +0,0 @@
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
-import type { MdastNode } from '@lincyaw/kernel'
-import type { Element, ElementContent, Properties } from 'hast'
-import type { Handler, State } from 'mdast-util-to-hast'
-import type { PropType, VNodeChild } from 'vue'
-import { defineComponent, h, reactive, ref, watch } from 'vue'
-
-const WIDTHS = ['xs', 'sm', 'md', 'lg'] as const
-
-function element(tagName: string, properties: Properties, children: ElementContent[] = []): Element {
-  return { type: 'element', tagName, properties, children }
-}
-
-function classes(node: MdastNode): string[] {
-  return typeof node.class === 'string' ? node.class.split(/\s+/).filter(Boolean) : []
-}
-
-export function isButton(node: MdastNode): boolean {
-  return classes(node).includes('button')
-}
-
-function gridColumns(node: MdastNode): number[] {
-  const given = Array.isArray(node.columns) ? node.columns.map(Number).filter(n => Number.isInteger(n) && n >= 1) : []
-  return WIDTHS.map((_, i) => given[Math.min(i, given.length - 1)] ?? 1)
-}
-
-const style = (values: Record<string, number>) => Object.entries(values).map(([key, value]) => `${key}: ${value}`).join('; ')
-
-const grid: Handler = (state, node: MdastNode) => {
-  const columns = gridColumns(node)
-  const children = state.all(node as never).map((child) => {
-    const twelfths = child.type === 'element' ? Number(child.properties.dataPmColumns) : Number.NaN
-    if (child.type !== 'element' || !(twelfths >= 1)) return child
-    const spans = Object.fromEntries(WIDTHS.map((width, i) => [`--pm-span-${width}`, Math.min(columns[i]!, Math.max(1, Math.round(twelfths * columns[i]! / 12)))]))
-    return { ...child, properties: { ...child.properties, style: style(spans) } }
-  })
-  const widths = Object.fromEntries(WIDTHS.map((width, i) => [`--pm-grid-${width}`, columns[i]!]))
-  return element('div', { className: ['pm-grid', ...classes(node)], style: style(widths) }, children)
-}
-
-const gridItem: Handler = (state, node: MdastNode) =>
-  element('div', { className: ['pm-grid__item', ...classes(node)], dataPmColumns: typeof node.columns === 'number' ? node.columns : undefined }, state.all(node as never))
-
-const card: Handler = (state: State, node: MdastNode) => {
-  const items = node.children ?? []
-  const part = (type: string) => items.find(child => child.type === type)
-  const url = typeof node.url === 'string' && node.url ? node.url : undefined
-  const header = part('header')
-  const footer = part('footer')
-  const title = part('cardTitle')
-  const content: ElementContent[] = []
-  if (header) content.push(element('header', { className: ['pm-card__header'] }, state.all(header as never)))
-  if (title || url) {
-    const words: MdastNode[] = title?.children?.length ? title.children : [{ type: 'text', value: url ?? '' }]
-    const inner = url ? [state.one({ type: 'link', url, children: words } as never, node as never) as ElementContent] : state.all({ type: 'paragraph', children: words } as never)
-    content.push(element('p', { className: ['pm-card__title'] }, inner))
-  }
-  const body = items.filter(child => child !== header && child !== title && child !== footer)
-  content.push(element('div', { className: ['pm-card__body'] }, state.all({ type: 'root', children: body } as never)))
-  if (footer) content.push(element('footer', { className: ['pm-card__footer'] }, state.all(footer as never)))
-  return element('div', { className: ['pm-card', ...url ? ['pm-card--link'] : [], ...classes(node)] }, content)
-}
-
-const tabSet: Handler = (state, node: MdastNode) => {
-  const panels = (node.children ?? []).filter(child => child.type === 'tabItem').map(item => element('div', {
-    className: ['pm-tabs__panel'],
-    dataTitle: typeof item.title === 'string' ? item.title : '',
-    dataSync: typeof item.sync === 'string' && item.sync ? item.sync : undefined,
-    dataSelected: item.selected === true ? 'true' : undefined,
-  }, state.all(item as never)))
-  return element('div', { className: ['pm-tabs', ...classes(node)], dataPmTabs: '' }, panels)
-}
-
-export function cardHandlers(): Record<string, Handler> {
-  return {
-    'grid': grid,
-    'grid-item': gridItem,
-    'card': card,
-    'tabSet': tabSet,
-    'tabItem': (state, node) => element('div', {}, state.all(node)),
-  }
-}
-
-export interface TabEntry {
-  title: string
-  sync?: string
-  selected: boolean
-  content: () => VNodeChild[]
-}
-
-export function tabEntries(set: Element, render: (nodes: ElementContent[]) => VNodeChild[]): TabEntry[] {
-  return set.children.flatMap((panel): TabEntry[] => panel.type !== 'element' ? [] : [{
-    title: String(panel.properties.dataTitle ?? ''),
-    sync: typeof panel.properties.dataSync === 'string' ? panel.properties.dataSync : undefined,
-    selected: panel.properties.dataSelected === 'true',
-    content: () => render(panel.children),
-  }])
-}
-
-const synced = reactive({ key: undefined as string | undefined, choices: 0 })
-
-export const TabSetView = defineComponent({
-  name: 'PmTabSet',
-  props: {
-    tabs: { type: Array as PropType<TabEntry[]>, required: true },
-  },
-  setup(props) {
-    const withKey = (key?: string) => (key ? props.tabs.findIndex(tab => tab.sync === key) : -1)
-    const active = ref([withKey(synced.key), props.tabs.findIndex(tab => tab.selected), 0].find(k => k >= 0)!)
-    watch(() => synced.choices, () => {
-      const k = withKey(synced.key)
-      if (k >= 0) active.value = k
-    })
-    const choose = (k: number) => {
-      active.value = k
-      const key = props.tabs[k]?.sync
-      if (key) {
-        synced.key = key
-        synced.choices++
-      }
-    }
-    return () => h(TabsRoot, { modelValue: String(active.value), 'onUpdate:modelValue': value => choose(Number(value)) }, () => [
-      h(TabsList, { class: 'pm-tabs__list' }, () => props.tabs.map((tab, k) =>
-        h(TabsTrigger, { key: k, value: String(k), class: 'pm-tabs__tab' }, () => tab.title))),
-      ...props.tabs.map((tab, k) => h(TabsContent, {
-        key: k, value: String(k), class: 'pm-tabs__panel', forceMount: true, hidden: k !== active.value, tabindex: 0,
-      }, tab.content)),
-    ])
-  },
-})

package/src/clicks.ts

@@ -1,124 +0,0 @@
-import type { App, Directive, DirectiveBinding, Ref } from 'vue'
-import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watchEffect, withDirectives } from 'vue'
-import { clickVisible, resolveClicks } from './domain/index.ts'
-import type { ClickRange, ClickSpec } from './domain/index.ts'
-
-interface Controller {
-  add(el: HTMLElement, spec: ClickSpec): void
-  remove(el: HTMLElement): void
-}
-
-export const BLOCK_CLASS = 'pm-block'
-
-const controllers = new WeakMap<Element, Controller>()
-const owners = new WeakMap<HTMLElement, Controller>()
-const pending = new Map<HTMLElement, ClickSpec>()
-
-function register(el: HTMLElement, spec: ClickSpec): void {
-  const block = el.closest(`.${BLOCK_CLASS}`)
-  const controller = block ? controllers.get(block) : undefined
-  if (!controller) {
-    pending.set(el, spec)
-    return
-  }
-  owners.set(el, controller)
-  controller.add(el, spec)
-}
-
-function unregister(el: HTMLElement): void {
-  pending.delete(el)
-  owners.get(el)?.remove(el)
-  owners.delete(el)
-}
-
-export function trackClicks(block: HTMLElement, step: Readonly<Ref<number>>): () => void {
-  const specs = new Map<HTMLElement, ClickSpec>()
-  const ranges = shallowRef(new Map<HTMLElement, ClickRange>())
-  const resolve = () => {
-    const ordered = [...specs.keys()].sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))
-    const resolved = resolveClicks(ordered.map(el => specs.get(el)!))
-    ranges.value = new Map(ordered.map((el, i) => [el, resolved[i]!]))
-  }
-  const controller: Controller = {
-    add(el, spec) {
-      specs.set(el, spec)
-      resolve()
-    },
-    remove(el) {
-      if (specs.delete(el)) resolve()
-    },
-  }
-  controllers.set(block, controller)
-  for (const [el, spec] of pending) {
-    if (!block.contains(el)) continue
-    pending.delete(el)
-    owners.set(el, controller)
-    specs.set(el, spec)
-  }
-  resolve()
-  const stop = watchEffect(() => {
-    for (const [el, range] of ranges.value) el.dataset.pmClick = clickVisible(range, step.value) ? 'shown' : 'hidden'
-  })
-  return () => {
-    stop()
-    controllers.delete(block)
-  }
-}
-
-function clickDirective(kind: ClickSpec['kind'], hide = false): Directive<HTMLElement, unknown> {
-  const spec = (binding: DirectiveBinding<unknown>): ClickSpec => ({ kind, at: binding.value, hide: hide || Boolean(binding.modifiers.hide) })
-  return {
-    mounted(el, binding) {
-      register(el, spec(binding))
-    },
-    updated(el, binding) {
-      if (JSON.stringify(binding.value) === JSON.stringify(binding.oldValue)) return
-      unregister(el)
-      register(el, spec(binding))
-    },
-    unmounted(el) {
-      unregister(el)
-    },
-  }
-}
-
-const vClick = clickDirective('click')
-const vAfter = clickDirective('after')
-
-const clickProps = { at: { type: [Number, String, Array], default: undefined }, hide: Boolean }
-
-function clickComponent(name: string, directive: Directive) {
-  return defineComponent({
-    name,
-    props: clickProps,
-    setup(props, { slots }) {
-      return () => withDirectives(h('span', { class: 'pm-v-click' }, slots.default?.()), [[directive, props.at, '', { hide: props.hide }]])
-    },
-  })
-}
-
-const VClicks = defineComponent({
-  name: 'VClicks',
-  props: { every: { type: [Number, String], default: 1 }, hide: Boolean },
-  setup(props, { slots }) {
-    const root = shallowRef<HTMLElement>()
-    let items: HTMLElement[] = []
-    onMounted(() => {
-      const children = [...root.value!.children] as HTMLElement[]
-      items = children.flatMap(child => (/^(UL|OL)$/.test(child.tagName) ? [...child.children] as HTMLElement[] : [child]))
-      const every = Math.max(1, Number(props.every) || 1)
-      items.forEach((item, i) => register(item, { kind: i % every === 0 ? 'click' : 'after', hide: props.hide }))
-    })
-    onBeforeUnmount(() => items.forEach(unregister))
-    return () => h('div', { ref: root, class: 'pm-v-clicks' }, slots.default?.())
-  },
-})
-
-export function installClicks(app: App): void {
-  app.directive('click', vClick)
-  app.directive('after', vAfter)
-  app.directive('click-hide', clickDirective('click', true))
-  app.component('VClick', clickComponent('VClick', vClick))
-  app.component('VAfter', clickComponent('VAfter', vAfter))
-  app.component('VClicks', VClicks)
-}